html, body, div{display:grid}html{min-height:100%}.scene{--ma:25deg;--oz:4em;--dz:3em;--fn:cubic-bezier(.175, .885, .32, 1.275);--back:linear-gradient(135deg, #222, #111);--over:;--g:1.25em;--l:1px;overflow:hidden;perspective:65em;color:#eee}.scene, .text{place-content:center}.scene > *, .card::before, .text{grid-area:1/ 1}.grid{grid-template-columns:repeat(var(--n), 1fr);z-index:1}.card{--di:(2*var(--i)/(var(--n) - 1) - 1);--dj:(1 - 2*(var(--j))/(var(--n) - 1));container-type:size;border:solid 1px rgb(from currentcolor r g b / 8%);width:clamp(12.5em, 35vmin, 35em);aspect-ratio:2/ 3;border-radius:1.25em;transform-origin:50% 50% var(--oz);transform-style:preserve-3d;transform:rotatex(calc(var(--dj)*var(--ma)))rotatey(calc(var(--di)*var(--ma)));box-shadow:0 30px 60px -12px rgb(0 0 0 / .6);background:conic-gradient(from 90deg at var(--l) var(--l), #0000 25%, rgb(from currentcolor r g b/ 8%) 0%) 0/ var(--g) var(--g), var(--over) var(--back);transition:transform .4s var(--fn);&::before{margin:-50cqh -50cqw;translate:calc(var(--di, 0)*-40%) calc(var(--dj, 0)*40%);opacity:calc(min(var(--i, -1) + 1, 1));background:radial-gradient(65cqw, rgb(from currentcolor r g b/ .2), #0000);transition:inherit;transition-property:translate, opacity;content:''}}.text{translate:0 0 var(--dz);font:6cqw sans-serif;text-align:center}