.splide.is-active { visibility: visible; }
.elementor-editor-active .sj-splide { visibility: visible; }
/* Card shell inside each slide */
.discover-carousel .splide__slide .card-wrapper{
  display:block;
  position:relative;
  color:#fff;
  overflow:hidden;
  border-radius:10px;
  height:240px;
}

/* (Optional) linear easing – only matters if you use step-by-step autoplay.
   Splide AutoScroll (continuous) doesn’t need this, but it won’t hurt. */
.discover-carousel .splide__list{
  transition-timing-function: linear !important;
}

@media (min-width:1024px){
  .discover-carousel .splide__slide .card-wrapper{ height:300px; }
}

/* Grey gradient scrim */
.discover-carousel .splide__slide .card-wrapper::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:40%;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
  transition: height .4s ease;
  z-index:1;
  border-radius:10px !important;
}

/* Scrim grows on hover */
.discover-carousel .splide__slide .card-wrapper:hover::after{
  height:100%;
}

/* Title on top of image */
.discover-carousel .splide__slide h5{
  position:absolute;
  bottom:20px; left:0; right:0;
  text-align:center;
  z-index:2;
  margin:15px;
  padding:0 10px;
  color:#fff;
  font-weight:500;
  line-height:1.3;
}

/* Image fit */
.discover-carousel .splide__slide img{
  border-radius:10px;
  position:relative;
  height:100%;
  width:100%;
  object-fit:cover;
}