/* Keep narrow mobile viewports contained and let the long competition heading scale down. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@media (max-width: 720px) {
  .hero {
    width: 100%;
    height: 100svh;
    max-height: 100svh;
    aspect-ratio: auto;
    overflow: clip;
    isolation: isolate;
  }

  .hero-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .competition-spotlight h2 {
    min-width: 0;
    font-size: clamp(2.65rem, 11.5vw, 3rem);
  }
}