.app{justify-content:center;align-items:center;width:100%;height:60vh;margin:0;font-family:DM Mono,monospace;display:flex;overflow:hidden}.carousel{perspective:1000px;width:23rem;height:30rem;transform-style:preserve-3d;position:relative}.card-container{width:100%;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));transition:all .3s ease-out;position:absolute}.card{background-color:hsl(280deg,40%,calc(100% - var(--abs-offset)*50%));color:#4b5563;border-radius:1rem;flex-direction:column;width:100%;height:100%;padding:1.5rem;display:flex;position:relative;box-shadow:0 10px 20px #0003}.card-image{object-fit:cover;z-index:1;border-radius:1rem;width:100%;height:320px;margin:-4rem auto .5rem;transition:all .3s ease-out;transform:translateY(-10px)}.card-container[style*="--active: 1"] .card-image{transform:translateY(-15px)}.card-title{text-align:center;color:#1f2937;margin-top:.5rem;margin-bottom:.5rem;font-size:1.5rem;font-weight:700}.card-content{text-align:center;flex-grow:1;justify-content:center;align-items:center;padding:0 .5rem;display:flex}.card-content,.card-title,.card-image{opacity:calc(.1 + var(--active)*.9);transition:all .3s ease-out}.nav{color:#fff;z-index:10;cursor:pointer;background:0 0;border:none;position:absolute;top:50%;transform:translateY(-50%)}.nav.left{left:-6rem}.nav.right{right:-6rem}