:root {
  --cvc-center-scale: 1.15;
  --cvc-side-scale: 0.85;
  --cvc-grayscale: 100%;
  --cvc-transition-duration: 0.4s;
  --cvc-depth-rotation: 8deg;
  --cvc-slide-spacing: 30px;
  --cvc-shadow-strength: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.cvc-container {
  position: relative;
  perspective: 1200px;
  padding: 40px 0;
}

.cvc-swiper {
  width: 100%;
  height: 100%;
  overflow: visible; /* To see the overflowing side slides */
}

.cvc-slide {
  max-width: 300px;
  margin: 0 auto;
  transform-style: preserve-3d;
  transition:
    transform var(--cvc-transition-duration) ease,
    filter var(--cvc-transition-duration) ease,
    opacity var(--cvc-transition-duration) ease;
  will-change: transform, filter, opacity;
  opacity: 0.75;
  filter: grayscale(var(--cvc-grayscale));
  transform: scale(var(--cvc-side-scale)) rotateY(var(--cvc-depth-rotation));
}

@media (max-width: 767px) {
  .cvc-slide {
    max-width: 100%;
  }
}

.cvc-slide.cvc-slide--active {
  transform: scale(var(--cvc-center-scale)) rotateY(0deg);
  filter: grayscale(0%);
  opacity: 1;
  z-index: 10;
}

.cvc-slide-inner {
    position: relative;
    padding-top: calc(100% / (9 / 19.5));
}

.cvc-mockup-sizer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cvc-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
  z-index: 1;
}

.cvc-phone-frame {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(var(--cvc-shadow-strength));
  display: none;
  z-index: 2;
}

.cvc-slide--active .cvc-phone-frame {
  display: block;
}

.cvc-phone-frame img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.cvc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 20;
  font-size: 30px;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cvc-arrow--left {
  left: -60px;
}

.cvc-arrow--right {
  right: -60px;
}