.about-hero {
  position: relative;
  isolation: isolate;
  padding-top: var(--space-64);
  padding-bottom: var(--space-section);
}

.about-hero__inner {
  display: grid;
  grid-template-columns: 1fr 460px;
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: var(--space-split-gap);
  row-gap: var(--space-24);
}

.about-hero__intro {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.about-hero__photo {
  grid-column: 2;
  grid-row: 1 / -1;
}

.about-hero__facts {
  grid-column: 1;
  grid-row: 3;
}

.about-hero__lead {
  color: var(--color-text-secondary);
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
}

.about-hero__facts {
  color: var(--color-text-secondary);
}

.about-hero__photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 460 / 500;
  background: var(--color-accent-tint);
  --selection-inset-x: 0px;
  --selection-inset-y: 0px;
}

.about-hero__photo img {
  width: 100%;
  height: auto;
}

@media (width < 1024px) {
  .about-hero__inner {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .about-hero__intro,
  .about-hero__photo,
  .about-hero__facts {
    grid-column: 1;
    grid-row: auto;
  }

  .about-hero__intro {
    max-width: var(--layout-reading);
  }

  .about-hero__photo {
    max-width: 460px;
  }

  .about-hero__facts {
    margin-top: var(--space-8);
  }
}

@media (width < 768px) {
  .about-hero {
    padding-top: var(--space-48);
  }
}