.scene{width:auto;position:relative}.cube{aspect-ratio:2;transform-style:preserve-3d;height:475px;transform:translateZ(237.5px)}.cube.show-front{transform:translateZ(-100px)rotateY(0)}.cube.show-bottom{transform:translateZ(-100px)rotateX(90deg)}.cube__face--front{transform:rotateY(0deg)translateZ(var(--cube-depth))}.cube__face--bottom{transform:rotateX(-90deg)translateZ(var(--cube-depth))}@media (min-width:1300px){.cube{height:475px;transform:translateZ(237.5px)}.cube__face--front{transform:rotateY(0)translateZ(237.5px)}.cube__face--bottom{transform:rotateX(-90deg)translateZ(237.5px)}}@media (max-width:1300px) and (min-width:641px){.cube{height:350px;transform:translateZ(175px)}.cube__face--front{transform:rotateY(0)translateZ(175px)}.cube__face--bottom{transform:rotateX(-90deg)translateZ(175px)}}@media (max-width:640px){.cube{height:200px;transform:translateZ(100px)}.cube__face--front{transform:rotateY(0)translateZ(100px)}.cube__face--bottom{transform:rotateX(-90deg)translateZ(100px)}}