.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-shade {
  background: linear-gradient(90deg, rgba(7, 7, 10, .9) 0%, rgba(7, 7, 10, .68) 42%, rgba(7, 7, 10, .12) 78%);
}

@media (max-width: 850px) {
  .hero-media {
    object-position: center center;
  }

  .hero-shade {
    background: linear-gradient(0deg, rgba(7, 7, 10, .94) 0%, rgba(7, 7, 10, .58) 48%, rgba(7, 7, 10, .08) 78%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media {
    display: none;
  }

  .hero {
    background: #0b0b0e url("assets/colombia-dance-poster.jpg") center / cover no-repeat;
  }
}