.card-slider {
  overflow-x: clip;
  --color-utility: var(--base-4)
}
.card-slider__swiper {
  overflow: visible
}
.card-slider__slider-navigation {
  gap: 1.6rem
}
.card-slider__card-container {
  margin-top: var(--md-2)
}
.card-slider__card {
  height: 20rem;
  width: 100%;
  max-width: 100%;
  position: relative;
  padding: var(--sm-1);
  display: flex;
  flex-direction: column;
  justify-content: end
}
.card-slider__front-content {
  max-width: 20.4rem;
  opacity: 1
}
.card-slider__front-content .card-slider__content-wrapper {
  display: none
}
.card-slider__card:not(.swiper-slide-active) {
  opacity: .2;
  box-shadow: 0 3px 47px 0 rgba(18,34,43,.22);
  -webkit-backdrop-filter: blur(1.2rem);
  backdrop-filter: blur(1.2rem)
}
.card-slider__card:is(.swiper-slide-active)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  background: var(--Gradient-Overlays-Dark-overlays-Bottom-Gradient,linear-gradient(180deg,var(--Tint-Dark-Transparent,rgba(25,45,56,0)) 0,var(--Primary-Primary6,rgba(25,45,56,.5)) 100%))
}
.card-slider__card:is(.swiper-slide-active) .card-slider__main-content {
  transition: opacity .8s ease-in-out .5s
}
.card-slider__card:not(.swiper-slide-active) .card-slider__main-content {
  opacity: 0;
  transition-delay: 0
}
.card-slider__img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%
}
.card-slider__img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center
}
@media (min-width:768px) {
  .card-slider__card {
    height: 30.4rem;
    width: 100%;
    max-width: 66.6666666667%
  }
  .card-slider__front-content {
    max-width: 34.4rem
  }
}
@media (min-width:1200px) {
  .card-slider__swiper {
    transform: translateX(-17%)
  }
  .card-slider__card {
    height: 50.4rem
  }
  .card-slider__front-content {
    max-width: 44.2rem
  }
  .card-slider__front-content .card-slider__content-wrapper {
    display: block
  }
}
.no-js .card-slider__card-container {
  display: flex;
  flex-direction: column;
  gap: var(--sm-1)
}
.no-js .card-slider__card {
  opacity: 1
}
.no-js .card-slider__card .card-slider__main-content {
  opacity: 1
}