:root{--size:120px;--duration:.9s;--face-bg:#fff;--face-color:#222;--accent:#2b8cff}.scene{width:calc(var(--size)*2);height:calc(var(--size)*2);justify-content:center;align-items:center;display:flex}.cube{width:var(--size);height:var(--size);transform-style:preserve-3d;transition:transform var(--duration)cubic-bezier(.2,.9,.3,1);position:relative;transform:rotateX(-20deg)rotateY(25deg)}.face{background:var(--face-bg);backface-visibility:hidden;border:3px solid #0000000f;border-radius:10px;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;box-shadow:0 6px 18px #02061799,inset 0 -6px 14px #0000000f}.face img{object-fit:cover;border-radius:8px;width:100%;height:100%}.face.front{transform:rotateY(0deg)translateZ(calc(var(--size)/2))}.face.back{transform:rotateY(180deg)translateZ(calc(var(--size)/2))}.face.right{transform:rotateY(90deg)translateZ(calc(var(--size)/2))}.face.left{transform:rotateY(-90deg)translateZ(calc(var(--size)/2))}.face.top{transform:rotateX(90deg)translateZ(calc(var(--size)/2))}.face.bottom{transform:rotateX(-90deg)translateZ(calc(var(--size)/2))}@media (max-width:420px){:root{--size:90px}}