.about-section {
  background-color: var(--blue-medium);
}

.about-wrapper {
  display: grid;
  align-items: center;
  gap: 20px 0;
  width: min(1150px, 100% - 10px);
  margin: auto;
  padding: 20px;
}

.about {
  display: flex;
  flex-direction: column;
  gap: 10px;

  & > h1 {
    color: var(--blue-ice);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    letter-spacing: 1px;
  }

  & > p {
    color: var(--blue-ice);
  }

  & span {
    color: var(--white);
    font-weight: var(--font-bold);
  }
}

.about-image {
  justify-self: center;
  width: min(550px, 100% - 10px);
}

@media (width >= 68rem) {
  .about-wrapper {
    grid-template-columns: 1fr 1fr;
    min-height: 600px;
  }

  .about {
    padding-right: 50px;

    & > h1 {
      width: 80%;
    }
  }
}