.carousel {
    position: relative;
    width: var(--card-width);
    height: var(--card-height);
    left: 50%;
    transform: translateX(-50%);
    perspective: 500px;
    transform-style: preserve-3d;
    justify-content: center;
    align-items: center;
  }

  .card-container {
    position: absolute;
    width: 80%;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;

    transform: rotateY(calc(var(--offset) * 50deg))
      scaleY(calc(1 + var(--abs-offset) * -0.4))
      translateZ(calc(var(--abs-offset) * -30rem))
      translateX(calc(var(--direction) * -5rem));
    /* filter: blur(calc(var(--abs-offset) * 1rem)); */
    transition: all 0.3s ease-out;
  }