.cube{--height:200px;--multiplicator:1;transform-style:preserve-3d;width:100%;transition:transform .3s ease-out;overflow:hidden}@media (width>=1024px){.cube{height:var(--height)}}.flip,.flop{border-radius:.5rem;height:100%}.flip{transform:translateZ(calc(var(--multiplicator)*var(--height)/2))}.flop{transform:rotateX(calc(var(--multiplicator)*-1*90deg))translateZ(calc(var(--multiplicator)*-1*var(--height)/2))}@media not all and (width>=1024px){.flop{display:none}}@media (width>=1024px){.cube.transitioning{pointer-events:none;overflow:visible}.cube:hover{pointer-events:auto;transform:rotateX(calc(var(--multiplicator)*90deg));overflow:visible}}