.cc-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;
  z-index: 1;
  margin-block: var(--block-offset);

  -webkit-mask-image: var(--fadeout);
  mask-image: var(--fadeout);
    --max-width: 2000px;
  width: min(100%, var(--max-width));
  margin-inline: auto;
  clip-path: inset(0);
}

.cc-curved-carousel.fadeout {
  /* if inline --fadeout is set, it wins */
}

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

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

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

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

.cc-curved-carousel__slide {
  position: absolute;
  transform-style: preserve-3d;
  overflow: hidden;
}

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