.youtube-swiper-container {
  margin: 2em 0;
  width: 100%;
}
.youtube-swiper-row {
  display: flex;
  flex-direction: column;
}
.youtube-main-column,
.youtube-thumb-column {
  width: 100%;
}
.youtube-main-column {
  aspect-ratio: 16/9;
  position: relative;
}
.youtube-main-column .swiper-button-next,
.youtube-main-column .swiper-button-prev {
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.5em;
    border-radius: 50%;
    bottom: -20px;
    top: auto;
    transform: translateY(0);
}
  .swiper-button-next:after, .swiper-button-prev:after{
    font-size: 30px;
  }
.youtube-main-column .swiper-button-next {
    left: 60px;
}
.youtube-main-column .swiper-button-prev {
    left: 10px;
}
.youtube-thumb-column {
  margin-top: 20px;
}
.thumb-swiper .swiper-slide {
  opacity: 0.5;
  cursor: pointer;
}
.thumb-swiper .swiper-slide-thumb-active {
  opacity: 1;
}
.thumb-swiper img {
  width: auto;
  height: 100px;
  display: block;
  object-fit: contain;
}
.video-frame{
  height: auto;
} 
.youtube-caption {
  font-size: 1rem;
  font-family: inherit;
  color: white;
  background: rgba(0,0,0,0.6);
  position:absolute; 
  bottom: 0;
  left: 0; 
  width: 100%;
  margin: 0; padding: 10px;
  box-sizing: border-box;
  text-overflow: ellipsis; 
  overflow: hidden; 
  white-space: nowrap;;
  max-width: 100% !important;   
}
  .bg-thumb{
    height: 100%; 
    background-size: cover; 
    background-position: center; 
    position: relative;
  }
  .thumb-swiper{
    height: 100%;
  }
  .youtube-thumb-column {
        width: 100%;
        height: 120px;
        overflow-x: auto;
    }

/* Desktop layout */
@media (min-width: 768px) {
    .youtube-swiper-row {
        flex-direction: row;
        gap: 1rem;
    }
    .youtube-main-column {
        width: 66.66%;
        aspect-ratio: unset;
    }
    .video-frame{
      height: 500px;
    } 
    .youtube-thumb-column {
        width: 33.33%;
        height: 500px;
        overflow-y: auto;
    }
    .thumb-swiper {
        height: 100%;
    }
  .youtube-main-column .swiper-button-next,
  .youtube-main-column .swiper-button-prev {
    bottom: -60px;
  }
  .youtube-thumb-column {
    margin-top: 0;
  }
}