.curved-slideshow {
  position: relative;
  width: 100%;
  height: 440px;
  margin: 2rem auto;
  perspective: 1600px;
  overflow: hidden;
}

.curved-slideshow__track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
  overflow: visible;
}

.cs-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  pointer-events: none;
}

.cs-item img {
  display: block;
  width: clamp(200px, 20vw, 320px);
  height: clamp(150px, 15vw, 240px);
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

/* Buttons */
.cs-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .35rem .7rem;
  font-size: 1.8rem;
  cursor: pointer;
  z-index: 5;
  line-height: 1;
  user-select: none;
}
.cs-btn:hover { background: rgba(0,0,0,0.7); }
.cs-btn.prev { left: 8px; }
.cs-btn.next { right: 8px; }

@media (max-width: 640px){
  .curved-slideshow{ height: 380px; }
}