/* Media Component Styles */
.media {
  padding: var(--spacing-xxl) 0;
  position: relative;
}

.media__container {
  max-width: 855px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  position: relative;
  z-index: 10;

  padding: 105px;
  /* height: 100vh; */

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.media__video-container {
  position: relative;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;
}

.media__background {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;

  margin: 0 auto;
}

.media__background-img {
  opacity: 1;
}

/* Video */
.media__video {
  position: relative;

  width: 606px;
  height: 286px;
  z-index: 2;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  background: linear-gradient(0deg, #000000 0%, #000000 100%), black;
  border: 1px solid var(--color-cyan-3);
  border-radius: var(--radius-md);
}

.media__video-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* Responsive Design */

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
  .media__container {
    padding: 120px var(--spacing-xl);
  }
  
  .media__video {
    width: 675px;
    height: 319px;
  }
  
  .media__background-img {
    width: 750px;
    height: auto;
    max-width: 100%;
  }
}

/* Desktop (992px to 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
  .media__container {
    padding: 90px var(--spacing-lg);
  }
  
  .media__video {
    width: 563px;
    height: 266px;
  }
  
  .media__background-img {
    width: 638px;
    height: auto;
    max-width: 100%;
  }
}

/* Tablet (768px to 991px) */
@media (max-width: 991px) and (min-width: 768px) {
  .media__container {
    padding: 80px var(--spacing-md);
  }
  
  .media__video {
    width: 600px;
    height: 283px;
  }
  
  .media__background-img {
    width: 700px;
    height: auto;
    max-width: 100%;
  }
}

/* Mobile Large (576px to 767px) */
@media (max-width: 767px) and (min-width: 576px) {
  .media {
    padding: var(--spacing-xl) 0;
  }
  
  .media__container {
    padding: 60px var(--spacing-sm);
  }
  
  .media__video {
    max-width: 500px;
    height: 236px;
  }
  
  .media__background-img {
    max-width: 550px;
    height: auto;
  }
}

/* Mobile Small (up to 575px) */
@media (max-width: 575px) {
  .media {
    padding: var(--spacing-lg) 0;
  }
  
  .media__container {
    padding: 40px var(--spacing-xs);
  }
  
  .media__video {
    max-width: 320px;
    height: 189px;
  }
  
  .media__background-img {
    max-width: 370px;
    height: auto;
  }
}

/* Extra Small Mobile (up to 375px) */
@media (max-width: 375px) {
  .media__container {
    padding: 30px var(--spacing-xs);
  }
  
  .media__video {
    max-width: 300px;
    height: 151px;
  }
  
  .media__background-img {
    max-width: 340px;
    height: auto;
  }
}

/* Video Controls Styling */
.media__video-element::-webkit-media-controls-panel {
  background: rgba(0, 0, 0, 0.7);
}

.media__video-element::-webkit-media-controls-play-button,
.media__video-element::-webkit-media-controls-pause-button {
  background: var(--color-cyan-3);
  border-radius: 50%;
}

.media__video-element::-webkit-media-controls-timeline {
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
}