.flip-box{perspective:1000px;background-color:#0000;width:100%;height:300px}.flip-box-inner{text-align:center;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s ease-in-out;position:relative}.flip-box-front,.flip-box-back{backface-visibility:hidden;border-radius:1rem;width:100%;height:100%;position:absolute}.flip-box-front{background-color:var(--color-bg-subtle);color:#000}.flip-box-back{background-color:var(--color-primary);color:#fff;transform:rotateY(180deg)}@media (hover:none){.flip-box-inner{transition:transform .3s ease-in-out}}