.photo-page-hero {
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  background-color: var(--deep);
  background-image:
    linear-gradient(rgba(11, 41, 40, .76), rgba(11, 41, 40, .8)),
    var(--hero-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.photo-page-hero .eyebrow {
  color: #d1e6e0;
}

.photo-page-hero p {
  color: #e0ece8;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .2);
}

.photo-page-hero h1 {
  text-shadow: 0 2px 30px rgba(0, 0, 0, .25);
}

.hero-care,
.hero-answer,
.hero-appointment {
  --hero-image: url("/assets/clinic-child-consultation.webp");
  background-position: 50% 38%;
}

.hero-resources,
.hero-clinics {
  --hero-image: url("/assets/clinic-family-reading.webp");
  background-position: 50% 42%;
}

.hero-insights {
  --hero-image: url("/assets/hero-insights.webp");
}

.hero-media {
  --hero-image: url("/assets/hero-media.webp");
}

.hero-information {
  --hero-image: url("/assets/hero-insights.webp");
  background-position: 50% 48%;
}

@media (max-width: 650px) {
  .photo-page-hero {
    min-height: 440px;
    padding-block: 4rem;
  }

  .photo-page-hero h1 {
    font-size: clamp(2.75rem, 12vw, 3.7rem);
  }
}