.vidSlider {
  --slide-count: 5;
  --width-sm-ratio: 1.15;
  --width-md-ratio: 1.25;
  --width-lg-ratio: 1.5;
  --total-ratio: calc(
    (var(--width-sm-ratio) + var(--width-md-ratio)) * 2 + var(--width-lg-ratio)
  );
  --default-slide-width: calc(1010px / var(--total-ratio));
  /* 5 is Total slides per view */
  --initial-slide-width: calc(1010px / var(--slide-count));
  min-height: 450px !important;
}
.vidSlider .swiper-wrapper {
  align-items: center;
}

/* ====================== Slide ====================== */
.vidSlider .swiper-slide {
  border-radius: 24px;
  transition: all 0.3s ease;
  width: var(--initial-slide-width) !important;
}
.vidSlider .swiper-slide:has(+ .swiper-slide + .swiper-slide-active),
.vidSlider .swiper-slide-active + .swiper-slide + .swiper-slide {
  width: calc(var(--default-slide-width) * var(--width-sm-ratio)) !important;
}
.vidSlider .swiper-slide:has(+ .swiper-slide-active),
.vidSlider .swiper-slide-active + .swiper-slide {
  width: calc(var(--default-slide-width) * var(--width-md-ratio)) !important;
}
.vidSlider .swiper-slide.swiper-slide-active {
  width: calc(var(--default-slide-width) * var(--width-lg-ratio)) !important;
}

.vidSlider .swiper-slide:nth-child(odd) {
  background-color: #f0f0f0;
}
.vidSlider .swiper-slide:nth-child(even) {
  background-color: #d0d0d0;
}

/* ============== Buttons ============== */
.vidSlider ~ .swiper-button-prev {
  left: -60px;
}
.vidSlider ~ .swiper-button-next {
  right: -60px;
}

.vidSlider ~ .swiper-button-prev:before,
.vidSlider ~ .swiper-button-next:before {
  content: "";
  position: absolute;

  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/flatsome-child/assets/icon/arrow-slider.webp)
    no-repeat center / 100%;

  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.vidSlider ~ .swiper-button-prev:before {
  transform: rotate(180deg);
}

.vidSlider ~ .swiper-button-prev svg,
.vidSlider ~ .swiper-button-next svg {
  display: none;
}

/* ============== Video ============== */
.vidSlider .swiper-slide .video-wrapper {
  height: 100%;
  width: 100%;
  position: relative;
}
.vidSlider .swiper-slide .video-wrapper video {
  aspect-ratio: 9/16;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  display: block;
}
.vidSlider .swiper-slide .video-wrapper .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

/* ============== Overlay ============== */
.vidSlider .swiper-slide .video-wrapper .desc-overlay {
  visibility: hidden;
  cursor: pointer;
}
.vidSlider .swiper-slide:hover .video-wrapper .desc-overlay {
  visibility: visible;
}

.vidSlider .swiper-slide .video-wrapper .desc-overlay {
  background: linear-gradient(
    358.98deg,
    rgba(188, 11, 32, 0.75) 21.93%,
    rgba(114, 133, 149, 0) 63.32%
  );
  border-radius: 24px;
  display: flex;
  align-items: flex-end;
  padding: 20px;

  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
}
.vidSlider .swiper-slide .video-wrapper .desc-overlay .desc {
  color: white;
}
.vidSlider .swiper-slide .video-wrapper .desc-overlay .desc .title {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 5px;
}
.vidSlider .swiper-slide .video-wrapper .desc-overlay .desc .text {
  font-size: 13px;
  line-height: 18px;
  margin-bottom: 0;
}

/* ============== Title Overlay Variation ============== */
.vidSlider
  .swiper-slide:has(+ .swiper-slide + .swiper-slide-active)
  .desc-overlay
  .desc
  .title,
.vidSlider
  .swiper-slide-active
  + .swiper-slide
  + .swiper-slide
  .desc-overlay
  .desc
  .title {
  font-size: 16px;
  line-height: 18px;
}
.vidSlider .swiper-slide:has(+ .swiper-slide-active) .desc-overlay .desc .title,
.vidSlider .swiper-slide-active + .swiper-slide .desc-overlay .desc .title {
  font-size: 18px;
  line-height: 20px;
}
.vidSlider .swiper-slide.swiper-slide-active .desc-overlay .desc .title {
  font-size: 20px;
  line-height: 24px;
}

/* ============== Text Overlay Variation ============== */
.vidSlider
  .swiper-slide:has(+ .swiper-slide + .swiper-slide-active)
  .desc-overlay
  .desc
  .text,
.vidSlider
  .swiper-slide-active
  + .swiper-slide
  + .swiper-slide
  .desc-overlay
  .desc
  .text {
  font-size: 9px;
  line-height: 13px;
}
.vidSlider .swiper-slide:has(+ .swiper-slide-active) .desc-overlay .desc .text,
.vidSlider .swiper-slide-active + .swiper-slide .desc-overlay .desc .text {
  font-size: 11px;
  line-height: 15px;
}
.vidSlider .swiper-slide.swiper-slide-active .desc-overlay .desc .text {
  font-size: 13px;
  line-height: 18px;
}

@media only screen and (max-width: 849px) {
  .vidSlider {
    min-height: unset !important;
  }

  .vidSlider .swiper-slide,
  .vidSlider .swiper-slide:has(+ .swiper-slide + .swiper-slide-active),
  .vidSlider .swiper-slide-active + .swiper-slide + .swiper-slide,
  .vidSlider .swiper-slide:has(+ .swiper-slide-active),
  .vidSlider .swiper-slide-active + .swiper-slide,
  .vidSlider .swiper-slide.swiper-slide-active {
    width: 240px !important;
  }

  /* ============== Buttons ============== */
  .vidSlider ~ .swiper-button-prev {
    left: 0;
  }
  .vidSlider ~ .swiper-button-next {
    right: 0;
  }
}

@media only screen and (max-width: 849px) {
  .vidSlider .swiper-slide,
  .vidSlider .swiper-slide:has(+ .swiper-slide + .swiper-slide-active),
  .vidSlider .swiper-slide-active + .swiper-slide + .swiper-slide,
  .vidSlider .swiper-slide:has(+ .swiper-slide-active),
  .vidSlider .swiper-slide-active + .swiper-slide,
  .vidSlider .swiper-slide.swiper-slide-active {
    width: 200px !important;
  }
}