.carousel{position:relative;width:clamp(10rem,50vw,23rem);height:clamp(9rem,50vw,23rem);perspective:500px;transform-style:preserve-3d}.card-container{position:absolute;height:100%;transform:rotateY(calc(var(--offset) * 50deg)) scaleY(calc(1 + var(--abs-offset) * -.4)) translateZ(calc(var(--abs-offset) * -30rem)) translateX(calc(var(--direction) * -5rem));filter:blur(calc(var(--abs-offset) * 1rem))}.card,.card-container{width:100%;transition:all .3s ease-out}.card{padding:.6rem;background-color:hsl(280deg,40%,calc(100% - var(--abs-offset) * 50%));border-radius:1rem;color:#9ca3af;text-align:justify}.card h2{text-align:center;font-size:2rem;font-weight:700;margin:0 0 .7em;color:#1f2937}.card h2,.card p{transition:all .3s ease-out;opacity:var(--active)}.nav{color:#fff;font-size:5rem;position:absolute;display:flex;align-items:center;justify-content:center;top:50%;z-index:2;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:unset;border:unset;padding:0}.nav.left{transform:translateX(-100%) translatey(-50%)}.nav.right{right:0;transform:translateX(100%) translatey(-50%)}