/* Hero Media Component - Modular Video/Image Holder */

.hero-media {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.25);
  aspect-ratio: 16 / 10;
  background: #f5f7fb;
}

.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-media-tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.7);
  color: #f9f9f9;
  font-size: 0.8rem;
}

/* Hero media responsive */
@media (max-width: 880px) {
  .hero-media {
    order: -1;
  }
}