@layer styles {
  /* Mobile first: the hero is a plain full-width image with the text beneath
     it, which is the only arrangement that reliably keeps type legible on a
     narrow screen. Overlaying comes back at the breakpoint below, where there
     is room for it. */
  .hero {
    position: relative;
    margin-bottom: var(--space--medium);
  }

  .hero__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    /* The aspect ratio sets the height until it would get taller than this;
       object-fit keeps the frame filled, so capping it crops rather than
       squashes. Without the cap a 21:9 hero is 600px tall on a 1400px screen
       and pushes everything else below the fold. */
    max-height: 400px;
    object-fit: cover;
  }

  .hero__overlay {
    padding-block: var(--space) 0;
  }

  .hero__content {
    padding-inline: var(--page-side-padding);
  }

  .hero__text {
    margin-top: 0.5rem;
    max-width: 55ch;
  }

  /* Keep in step with the `media` attribute on the <source> in
     partials/components/hero.mustache. */
  @media (min-width: 48em) {
    .hero__image {
      aspect-ratio: 21 / 9;
    }

    /* The scrim spans the whole image; the text inside it stays on the
       content grid. Putting the gradient on the text element instead left a
       visibly edged band floating in the middle of the photo. */
    .hero__overlay {
      position: absolute;
      inset-inline: 0;
      bottom: 0;
      padding-block: var(--space--large) var(--space--medium);
      background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0));
      color: #fff;
    }

    .hero__heading,
    .hero__text {
      color: inherit;
    }
  }
}