.ls-curved-carousel {
  --viewport-height: 40rem;
  --viewport-height-m: 35rem;
  --perspective: 600px;
  --perspective-m: 400px;
  --block-offset: 0;
  --block-offset-m: 0;
  --fadeout: none;

  position: relative;
  width: 100%;
  height: var(--viewport-height);
  transform-style: preserve-3d;
  user-select: none;
  overflow: hidden;
  z-index: 1;
  margin-block: var(--block-offset);
  -webkit-mask-image: var(--fadeout);
  mask-image: var(--fadeout);
}

.ls-curved-carousel.fadeout {
  --fadeout: linear-gradient(
    90deg,
    transparent,
    white 40%,
    white 60%,
    transparent 100%
  );
}

.ls-curved-carousel__stage {
  perspective: var(--perspective);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
  .ls-curved-carousel {
    height: var(--viewport-height-m);
    margin-block: var(--block-offset-m);
  }

  .ls-curved-carousel__stage {
    perspective: var(--perspective-m);
  }
}

.ls-curved-carousel__ring {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  gap: 0;
}

.ls-curved-carousel__slide {
  position: absolute;
  /* Width and height will be set by JavaScript */
  transform-style: preserve-3d;
  overflow: hidden;
}

.ls-curved-carousel__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

/* Video-specific styles */
video.ls-curved-carousel__media {
  pointer-events: none;
  background-color: #000;
}