.video-carousel::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--gradient-left);
  z-index: 0;
  max-height: 100%
}
.video-carousel .swiper-fade .swiper-slide{pointer-events:all;}
.video-carousel__btn {
  margin-top: var(--sm-1)
}
.video-carousel__btn .cta {
  padding: 0
}
.video-carousel .xs-pr-0 {
  padding-right: 0
}
.video-carousel .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: auto
}
.video-carousel__thumbnail-slide {
  margin-top: var(--sm-1);
  margin-bottom: var(--sm-1)
}
.video-carousel__thumbnail-slide .swiper-slide {
  cursor: pointer
}
.video-carousel__thumbnail-slide .swiper-slide .cta {
  position: absolute;
  top: var(--sm-3);
  left: var(--sm-3)
}
.video-carousel__thumbnail-slide .swiper-slide .caption {
  -webkit-transition: all .5s;
  transition: all .5s
}
.video-carousel__thumbnail-slide .swiper-slide.active .caption,
.video-carousel__thumbnail-slide .swiper-slide:hover .caption {
  background: var(--black);
  color: var(--white)
}
.video-carousel__thumbnail-slide .swiper-slide.active .icon-play::before {
  content: "\e90a"
}
@media (min-width:768px) {
  .video-carousel__btn {
    margin-top: 0
  }
  .video-carousel .xs-pr-0 {
    padding-right: calc(var(--bs-gutter-x) * .5)
  }
  .video-carousel__main-slide .swiper-wrapper {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
  }
  .video-carousel__main-slide .swiper-wrapper .swiper-slide img {
    width: 100%;
    height: auto
  }
  .video-carousel__thumbnail-slide {
    max-height: 55rem;
    overflow-y: auto;
    padding-right: var(--sm-3);
    margin-top: 0;
    margin-bottom: 0
  }
  .video-carousel__thumbnail-slide::-webkit-scrollbar {
    width: 3px
  }
  .video-carousel__thumbnail-slide::-webkit-scrollbar-track {
    background: #d9d9d9;
    border-radius: 10rem
  }
  .video-carousel__thumbnail-slide::-webkit-scrollbar-thumb {
    background: var(--black);
    border-radius: 10rem;
    cursor: pointer;
  }
  .video-carousel__thumbnail-slide .swiper-wrapper {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    height: auto;
    max-width: 26.4rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: var(--sm-3)
  }
  .video-carousel__thumbnail-slide .swiper-wrapper .swiper-slide img {
    width: 100%;
    height: auto
  }
}
@media (min-width:992px) {
  .video-carousel__thumbnail-slide {
    max-height: 61.5rem
  }
}