/* ==========================================================================
   HERO — apenas video de fundo, autoplay imediato (mobile-first)
   Depende das variaveis definidas em :root (main.css), que deve ser
   enfileirado ANTES deste arquivo.
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.hero__video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.reduced-motion .hero__video {
  object-fit: cover;
}

@media (min-width: 992px) {
  .hero__video {
    aspect-ratio: 21 / 9;
    max-height: 75vh;
  }
}