/* Center the complete desktop message, rather than offsetting its first line.
   Load after the baseline responsive rules. Mobile retains its current layout. */
@layer responsive {
  @media (min-width: 901px) {
    .hero {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: auto;
      min-height: clamp(750px, 94svh, 1100px);
      max-height: none;
      padding-top: 96px;
      padding-bottom: 96px;
    }

    .hero-content {
      flex: 0 0 auto;
      margin-top: 0;
      margin-bottom: 0;
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  @media (min-width: 901px) and (max-width: 1200px) {
    .hero {
      min-height: clamp(690px, 94svh, 1100px);
    }
  }

  @media (max-width: 900px) {
    /* The overlay belongs to the media box, so the separated phone copy and
       the playback button remain undimmed. It also covers the video poster. */
    .hero-media::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .12);
      pointer-events: none;
    }
  }
}