/* Your full CSS from the HTML — unchanged */
:root{
  --center-w: 420px;
  --side-w: 200px;
  --gap: 220px;
}

.custom-slider{
  width:100%;
  max-width:980px;
  margin:auto;
  padding:40px 20px 10px;
  text-align:center;
}

.slides{
  height:360px;
  position:relative;
}

.slide{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%) scale(0.7);
  opacity:0;
  transition:transform 600ms cubic-bezier(.2,.9,.2,1), opacity 600ms ease, filter 400ms ease;
  text-align:center;
  width:var(--center-w);
  pointer-events:none;
}

.slide img{
  width:100%;
  border-radius:18px;
  box-shadow:0 8px 30px rgba(0,0,0,0.12);
}

.slide.active{
  opacity:1;
  transform:translateX(-50%) scale(1);
  z-index:5;
  pointer-events:auto;
}

.slide.left{
  opacity:0.6;
  transform:translateX(calc(-50% - var(--gap))) scale(0.78);
  margin:60px 0 0 -90px;
  width:var(--side-w);
}

.slide.right{
  opacity:0.6;
  transform:translateX(calc(-50% + var(--gap))) scale(0.78);
  margin:60px 0 0 90px;
  width:var(--side-w);
}

.slide.hidden{
  opacity:0;
  transform:translateX(-50%) scale(0.6);
}

.slide h2, .slide p{
  opacity:0;
  transform:translateY(12px);
  transition:opacity 450ms ease, transform 450ms ease;
  margin:14px 0 0;
}

.slide.active h2, .slide.active p{
  opacity:1;
  transform:translateY(0);
  transition-delay:120ms;
}

.controls{
  margin-top:390px;
  display:flex;
  justify-content:center;
  gap:12px;
}

.controls button{
  width:42px;
  height:42px;
  border-radius:50%;
  border:0;
  background:#f0f0f0;
  cursor:pointer;
  font-size:18px;
}

@media(max-width:769px){
  :root{
    --center-w:320px;
    --side-w:0px;
    --gap:0px;
  }

  .slides{
    height:340px;
  }

  .slide.left, .slide.right{
    opacity:0;
    transform:translateX(-50%) scale(0.65);
    width:var(--center-w);
    margin:0;
    pointer-events:none;
  }

  .slide.active{
    transform:translateX(-50%) scale(1);
    width:var(--center-w);
    opacity:1;
  }

  .slide.hidden{
    opacity:0;
    transform:translateX(-50%) scale(0.55);
  }
}