body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: hsl(240, 56%, 98%);
  margin: 0;
}

.swiper {
  position: absolute;
  width: 120px;
  height: 468px;
  cursor: pointer;
}

.camera {
  $d-carousel-item-width: 45px;
  $d-carousel-item-height: 45px;
  --d-carousel-item-gap: 5px;
  --d-carousel-transition: 0.3s;
  --d-carousel-perspective: 250px;
  --d-carousel-rotate-x: 0;
  --d-carousel-translate-z: -100px;
  --d-carousel-item-width: #{$d-carousel-item-width};
  --d-carousel-item-height: #{$d-carousel-item-height};
  --d-carousel-item-gap-double: calc(var(--d-carousel-item-gap) * 2);
  --camera-width: calc(
    var(--d-carousel-item-width) + var(--d-carousel-item-gap-double)
  );
  --camera-height: calc(
    var(--d-carousel-item-height) + var(--d-carousel-item-gap-double)
  );

  position: relative;
  width: var(--camera-width);
  height: var(--camera-height);
  perspective: var(--d-carousel-perspective);
  pointer-events: none;

  .d-carousel {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: translateZ(var(--d-carousel-translate-z)) rotateX(var(--d-carousel-rotate-x));
    transition: var(--d-carousel-transition);
    pointer-events: none;

    &-item {
      --d-carousel-item-rotate-x: calc(var(--i) * var(--d-carousel-item-deg));
      --d-carousel-item-translate-z: var(--d-carousel-item-r);

      position: absolute;
      left: var(--d-carousel-item-gap);
      top: var(--d-carousel-item-gap);
      width: var(--d-carousel-item-width);
      height: var(--d-carousel-item-height);
      border-radius: 5px;
      backface-visibility: hidden;
      pointer-events: none;

      transform: rotateX(var(--d-carousel-item-rotate-x))
        translateZ(var(--d-carousel-item-translate-z));
    }
  }
}

.tip {
  position: absolute;
  top: 4rem;
}