body[data-page="about"] .page-hero {
  background-color: #06372B;
  background-image:
    linear-gradient(90deg, rgb(4 38 29 / 0.56) 0%, rgb(4 38 29 / 0.24) 42%, rgb(4 38 29 / 0.02) 72%),
    url("assets/about-hero-generated.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

body[data-page="about"] .page-hero::before {
  display: none;
}

body[data-page="about"] .page-hero::after {
  height: 3px;
  background: linear-gradient(90deg, transparent, #D5A15F 12%, #D5A15F 88%, transparent);
}

body[data-page="about"] .page-hero-grid {
  grid-template-columns: 1fr;
  width: min(100%, 1380px);
}

body[data-page="about"] .page-hero-grid > div:first-child {
  max-width: 680px;
}

body[data-page="about"] .page-hero h1::after {
  content: "";
  display: block;
  width: 88px;
  height: 2px;
  margin-top: 14px;
  background: linear-gradient(90deg, transparent, #D5A15F 28%, #FFF4D9 50%, #D5A15F 72%, transparent);
  box-shadow: 0 0 12px rgb(213 161 95 / 0.48);
}

body[data-page="about"] .heritage-figure.compact {
  display: none;
}

@media (min-width: 721px) {
  body[data-page="about"] .about-story-section {
    padding-top: clamp(0px, calc(9vw - 100px), 28px);
  }
}

@media (max-width: 720px) {
  body[data-page="about"] .page-hero {
    background-position: 62% center;
  }

  body[data-page="about"] .page-hero-grid > div:first-child {
    max-width: 100%;
  }

  body[data-page="about"] .about-story-section {
    padding-top: 48px;
  }
}