.cubes-wrapper{width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.cubes-scene{perspective:100000000px;grid-auto-rows:1fr;width:100%;height:100%;display:grid}.cube{aspect-ratio:1;width:100%;height:100%;transform-style:preserve-3d;position:relative}.cube:before{content:"";position:absolute;inset:-36px}.cube-face{background:var(--cube-face-bg);border:var(--cube-face-border);width:100%;height:100%;box-shadow:var(--cube-face-shadow);opacity:1;justify-content:center;align-items:center;display:flex;position:absolute}.cube-face--top{transform:translateY(-50%)rotateX(90deg)}.cube-face--bottom{transform:translateY(50%)rotateX(-90deg)}.cube-face--left{transform:translate(-50%)rotateY(-90deg)}.cube-face--right{transform:translate(50%)rotateY(90deg)}.cube-face--back,.cube-face--front{transform:rotateY(-90deg)translate(50%)rotateY(90deg)}