.hero-video-wrapper {
  position: relative;
  width: 100%;
  max-height: 60vh;
  overflow: hidden;
  background: #FFFFFF;
}

.hero-video-container {
  max-width: 1400px;
  margin: 0 auto;
}

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

@media (max-width: 768px) {
  .hero-video-wrapper {
    max-height: 40vh;
  }
  .hero-video {
    height: 40vh;
    object-fit: cover;
  }
}

@media (max-width: 480px) {
  .hero-video-wrapper {
    max-height: 30vh;
  }
  .hero-video {
    height: 30vh;
  }
}

/* Responsive embedded video containers (YouTube, Vimeo, etc.) */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}

/* Make any iframe in content responsive */
.field iframe,
.text-formatted iframe {
  max-width: 100%;
}

/* Media elements in content */
.field video,
.text-formatted video {
  max-width: 100%;
  height: auto;
}