.carousel-frame { height:300px; }
    .carousel-frame .splide  .carousel-frame .splide__slide {
        overflow: hidden;
    }

.carousel-frame {
  /*max-width: 600px;*/

  margin-inline: auto;
  position: relative;
}
.carousel-toolbar{
  display:none;
  justify-content:space-between;
  /*margin: .5rem 0;*/
}
/*
.carousel-btn{
  border: 1px solid #ccc;
  background: #fff;
  padding: .35rem .6rem;
  cursor: pointer;
  line-height: 1;
  font-size: 20px;
  border-radius: 6px;
}

.carousel-btn:disabled{
  opacity: .5;
  cursor: default;
}
*/

/* Track/list/slide: prevent height thrash */
.carousel-frame .splide,
.carousel-frame .splide__slide,
.carousel-frame .splide__track,
.carousel-frame .splide__list {
  height: 100%;
}

    /* If you want, hint only the moving container */
.carousel-frame .splide__list {
  will-change: transform;
  backface-visibility: hidden;
}


.carousel-frame .splide__slide {
  height: 100%;
  overflow: hidden;
}

/* Tune this height to what you want */
.carousel-frame {
  --slide-h: 300px;
}

.slide-inner-frame {
  height: var(--slide-h);
  position: relative;
  overflow: hidden;
  /* small perf hint */
  /*transform: translateZ(0); *//*creates a new compositing layer and can change sub-pixel rounding/antialiasing at the edges.*/
  transform: none; 
    height: 100%;
}
    .slide-inner-frame > a {
        height: 100%;
        display:flex;
        justify-content: center;
        align-items: center;
    }

/* Image always occupies the same space -> no jumping */
.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text overlay so it doesn't push layout */
.text-area {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  color: #fff;
}

.text-area.no-image {
  position: relative;
  background: #222;
  height: 100%;
}

/* Keep text from reflowing heights unpredictably */
.slide-text, .slide-reference {
  margin: 0;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.slide-text { -webkit-line-clamp: 3; }
.slide-reference { -webkit-line-clamp: 1; }

/* Smooth transforms */
.carousel-frame .splide__track {
  will-change: transform;
}

/* Hide prev/next when NOT in step mode */
.carousel-frame.is-automaticstepmode .carousel-toolbar,
.carousel-frame.is-clickstepmode .carousel-toolbar {
  display: flex;
}

/* 1) Ensure nothing "shows through" between slides */
.carousel-frame,
.carousel-frame .splide,
.carousel-frame .splide__track {
  background: #fff; /* or the same background as your slides */
}

/* 2) Kill any baseline/inline spacing */
.carousel-frame .splide__list,
.carousel-frame .splide__slide {
  line-height: 0;
  font-size: 0;
}

/* 3) Force the image to fully cover its box */
.carousel-frame .slide-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 4) Reduce subpixel seams during transforms */
.carousel-frame .splide__track,
.carousel-frame .splide__list {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* 5) If you use gap, make sure it’s intentional (not tiny rounding) */
.carousel-frame .splide__slide {
  background: #fff; /* same as track background */
}