.about-page {
  --page-gutter: clamp(1.25rem, 7vw, 7.5rem);
}

.about-hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(1.75rem, 6vw, 5.5rem);
  padding-block: clamp(2.25rem, 5.5vw, 5rem);
}

.about-portrait {
  width: 100%;
  max-width: 26rem;
  margin: 0;
  justify-self: end;
  border: 1px solid var(--line);
  background: var(--white);
}

.about-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 70%;
}

.about-background {
  border-top: 1px solid var(--line);
}

@media (max-width: 750px) {
  .about-hero { grid-template-columns: minmax(0, 1fr); }
  .about-portrait { justify-self: start; }
}