/* Bound the photo composition as well as its height; copy can still grow it. */
.hero { isolation: isolate; display: grid; width: 100%; max-width: var(--media-container); margin-inline: auto; min-block-size: min(58.75vw, 100svh, 846px); color: var(--color-light); }
.hero__media, .hero__shade, .hero__content { grid-area: 1 / 1; }
.hero__media { contain: size; min-inline-size: 0; min-block-size: 0; }
.hero__shade { background: linear-gradient(180deg, rgb(0 0 0 / .05), rgb(0 0 0 / .5)); }
.hero__content { align-self: end; padding-block: 230px clamp(24px, 7.1svh, 60px); text-align: center; }
.hero__title { max-width: 1000px; margin-inline: auto; font-family: var(--font-display); font-size: clamp(54px, 5.55vw, 80px); font-weight: 500; line-height: 1.1; text-transform: uppercase; text-wrap: balance; white-space: pre-line; }
.hero__lead { max-width: 720px; margin: 18px auto 0; font-size: 18px; line-height: 1.4; text-wrap: balance; }
.hero__action { margin-top: 30px; }
.hero--brand .hero__lead { margin-top: 23px; line-height: 25px; }
.hero--brand .hero__action { margin-top: 42px; }
.hero--story .hero__content { text-align: left; }
.hero--story .hero__title { max-width: 690px; margin-inline: 0 auto; font-size: clamp(3rem, 4.86vw, 4.375rem); line-height: 1.01; }
.hero--story .hero__lead { max-width: 690px; margin: 31px auto 0 0; }
@media (max-width: 639px) {
  .hero { min-block-size: 100svh; }
  .hero--brand .hero__image { object-position: 87% 50%; }
  .hero__content, .hero--story .hero__content { padding-block: max(128px, 22svh) clamp(24px, 5.9svh, 50px); text-align: center; }
  .hero__title { max-width: 370px; margin-inline: auto; font-size: clamp(2.5rem, 12.3vw, 3rem); line-height: 1.1; }
  .hero--story .hero__title { max-width: 370px; margin-inline: auto; font-size: clamp(2.375rem, 12vw, 2.9375rem); line-height: 1.01; }
  .hero__lead, .hero--story .hero__lead { max-width: 330px; margin: 24px auto 0; font-size: 16px; line-height: 1.5625; }
  .hero__action { margin-top: 26px; }
  .hero--brand .hero__lead { margin-top: 24px; }
  .hero--brand .hero__action { margin-top: 26px; }
}