:root{--col-gap:4%;--row-gap:4%;--cube-perspective:100000000px;--cube-face-border:2px dashed #22d3ee4d;--cube-face-bg:#0a1628}.cube-animation{aspect-ratio:1;width:100%;height:auto;position:relative}.cube-animation--scene{column-gap:var(--col-gap);row-gap:var(--row-gap);width:100%;height:100%;perspective:var(--cube-perspective);grid-auto-rows:1fr;display:grid}.cube{aspect-ratio:1;width:100%;height:100%;transform-style:preserve-3d;cursor:pointer;position:relative}.cube:before{content:"";position:absolute;inset:-36px}.cube--active{cursor:pointer}.cube--inactive{opacity:.4}.cube-animation .cube-face{background:var(--cell-bg,var(--cube-face-bg));border:var(--cell-border,var(--cube-face-border));opacity:1;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute}.cube--active .cube-face{box-shadow:0 0 15px #22d3ee26}.cube-animation .cube-face--top{transform:translateY(-50%)rotateX(90deg)}.cube-animation .cube-face--bottom{transform:translateY(50%)rotateX(-90deg)}.cube-animation .cube-face--left{transform:translate(-50%)rotateY(-90deg)}.cube-animation .cube-face--right{transform:translate(50%)rotateY(90deg)}.cube-animation .cube-face--back,.cube-animation .cube-face--front{transform:rotateY(-90deg)translate(50%)rotateY(90deg)}.cube--active:hover .cube-face{box-shadow:0 0 25px #22d3ee4d}@media (max-width:768px){.cube-animation{width:100%}}