.video-overflow {
  width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  position: relative;
}

.mobile-video-container {
  width: 100%;
  position: relative;
}

.space {
  height: clamp(32px, 8vw, 64px);
}

.responsive-video {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  display: block;
}

.playground-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: none;
}

/* For browsers that support aspect-ratio */
@supports (aspect-ratio: 16/9) {
  .mobile-video-container {
    aspect-ratio: 16/9;
  }

  .responsive-video {
    height: 100%;
  }
}

/* Desktop - Full width with video determining height */
@media (min-width: 1025px) {
  .mobile-video-container {
    min-height: 60vh;
    max-height: 100vh;
  }
}

/* Tablet adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
  .mobile-video-container {
    min-height: 50vh;
    max-height: 80vh;
  }

  .space {
    height: clamp(24px, 6vw, 48px);
  }
}

/* Mobile adjustments */
@media (max-width: 768px) and (min-width: 481px) {
  .mobile-video-container {
    min-height: 40vh;
    max-height: 70vh;
  }

  .space {
    height: clamp(16px, 4vw, 32px);
  }
}

@media (max-width: 600px) {
  .video-overflow {
    height: auto;
    margin-block: 20px;
  }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
  .mobile-video-container {
    min-height: 35vh;
    max-height: 60vh;
  }

  .responsive-video {
    display: none;
  }

  .playground-video {
    display: block;
  }

  .space {
    height: clamp(12px, 3vw, 24px);
  }
}

/* Very small screens */
@media (max-width: 360px) {
  .mobile-video-container {
    min-height: 30vh;
    max-height: 50vh;
  }
}

/* Landscape mobile - prioritize width */
@media (max-height: 500px) and (orientation: landscape) {
  .mobile-video-container {
    min-height: 70vh;
    max-height: 90vh;
  }

  .space {
    height: clamp(8px, 2vw, 16px);
  }
}

/* Ultra-wide screens */
@media (min-aspect-ratio: 21/9) {
  .mobile-video-container {
    min-height: 40vh;
    max-height: 70vh;
  }
}

/* Tall/narrow screens */
@media (max-aspect-ratio: 9/16) {
  .mobile-video-container {
    min-height: 50vh;
    max-height: 80vh;
  }
}