.canvasContainer{width:100%;height:100vh}.canvasContainer.right,.canvasContainer.right .grid-layout{margin-left:auto}.canvasContainer .cube{position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;box-shadow:-1vw 1vw 1vw rgb(0 0 0/75%);cursor:pointer;margin:var(--m)}.canvasContainer .face{background-position:center;width:var(--w);height:var(--h);--mid:calc(var(--w)/2);position:absolute;display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;font-size:2rem;transition:transform 500ms;filter:saturate(60%)}.artLink,.grid-layout{transform-style:preserve-3d}.artLink{display:block}.canvasContainer .front{transform:translateZ(var(--d))}.canvasContainer .bottom.canvasTexture::after,.canvasContainer .front.canvasTexture::after,.canvasContainer .left.canvasTexture::after,.canvasContainer .right.canvasTexture::after,.canvasContainer .top.canvasTexture::after{content:" ";mix-blend-mode:multiply;display:block;height:100%;width:100%;opacity:.7}.canvasContainer .cube:hover .front{filter:saturate(100%)}.canvasContainer .back{transform:translateZ(0) rotateY(180deg);background:#4a4a4a}.canvasContainer .left,.canvasContainer .right{width:var(--d);transform:translateX(calc(var(--d)/2*-1)) translateZ(calc(var(--d)/2)) rotateY(-90deg);background-position:calc(50% + (var(--d)/2 + var(--w)/2)) center;filter:brightness(.4) saturate(60%)}.canvasContainer .cube:hover .left,.canvasContainer .cube:hover .right{filter:brightness(.4) saturate(100%)}.canvasContainer .right{transform:translateX(calc(var(--w) - var(--d)/2)) translateZ(calc(var(--d)/2)) rotateY(90deg);background-position:calc(50% - (var(--d)/2 + var(--w)/2)) center}.canvasContainer .top{height:var(--d);transform:translateY(calc(var(--d)/2*-1)) translateZ(calc(var(--d)/2)) rotateX(90deg);background-position:center calc(50% + (var(--d)/2 + var(--h)/2))}.canvasContainer .cube:hover .top{filter:saturate(100%)}.canvasContainer .bottom{height:var(--d);transform:translateY(calc(var(--h) - var(--d)/2)) translateZ(calc(var(--d)/2)) rotateX(-90deg);filter:brightness(.2) saturate(60%);background-position:center calc(50% - (var(--d)/2 + var(--h)/2))}.canvasContainer .cube:hover .bottom{filter:brightness(.2) saturate(100%)}.grid-layout{width:min-content;display:grid;grid-auto-flow:dense;transform-origin:center}@media (max-width:720px){.grid-layout{transform:rotate3d(0,1,0,27deg) translateX(24vw) translateZ(-77vw) translateY(-8vw)}.canvasContainer.right .grid-layout{transform:rotate3d(0,1,0,-27deg) translateX(-70vw) translateZ(-37vw) translateY(-8vw)}}.canvasContainer.right .right{display:block}.canvasContainer.right .grid-layout .cube{box-shadow:1vw 1vw 1.5vw rgb(0 0 0/75%)}.canvasContainer .cube:hover,.canvasContainer.right .cube:hover{box-shadow:0 0 12vmin #5fc6fd}.grid-item{transform-style:preserve-3d}.span-2-col{grid-column-end:span 2}.span-2-row{grid-row-end:span 2}.span-3-col{grid-column-end:span 3}.span-3-row{grid-row-end:span 3}.span-4-col{grid-column-end:span 4}.span-4-row{grid-row-end:span 4}.span-5-col{grid-column-end:span 5}.span-5-row{grid-row-end:span 5}