.ltxe-flip-box { --ltxe-fb-height: 280px; height: var(--ltxe-fb-height); perspective: 1000px; } .ltxe-flip-box--equal { height: 100%; min-height: var(--ltxe-fb-height); } .ltxe-flip-box__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s ease; } .ltxe-flip-box--3d .ltxe-flip-box__inner { transform-style: preserve-3d; } .ltxe-flip-box__face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; backface-visibility: hidden; background: #1a1a2e; color: #fff; overflow: auto; } .ltxe-flip-box__back { background: #e94560; transform: rotateY(180deg); } .ltxe-flip-box--vertical .ltxe-flip-box__back { transform: rotateX(180deg); } .ltxe-flip-box--hover:hover .ltxe-flip-box__inner, .ltxe-flip-box--hover:focus-within .ltxe-flip-box__inner, .ltxe-flip-box.is-flipped .ltxe-flip-box__inner { transform: rotateY(180deg); } .ltxe-flip-box--vertical.ltxe-flip-box--hover:hover .ltxe-flip-box__inner, .ltxe-flip-box--vertical.ltxe-flip-box--hover:focus-within .ltxe-flip-box__inner, .ltxe-flip-box--vertical.is-flipped .ltxe-flip-box__inner { transform: rotateX(180deg); } .ltxe-flip-box:not(.ltxe-flip-box--3d) .ltxe-flip-box__inner { transform-style: flat; } .ltxe-flip-box__graphic { display: block; margin-bottom: 0.75rem; font-size: 2rem; } .ltxe-flip-box__front-title, .ltxe-flip-box__back-title { margin: 0 0 0.5rem; font-size: 1.35rem; } .ltxe-flip-box__front-desc, .ltxe-flip-box__back-desc { margin: 0 0 1rem; } .ltxe-flip-box a.ltxe-flip-box__btn, .ltxe-flip-box a.ltxe-flip-box__btn:link, .ltxe-flip-box a.ltxe-flip-box__btn:visited, .ltxe-flip-box a.ltxe-flip-box__btn:hover, .ltxe-flip-box a.ltxe-flip-box__btn:focus, .ltxe-flip-box a.ltxe-flip-box__btn:active, .ltxe-flip-box__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0.6em 1.2em; background: #1a1a2e; color: #fff; -webkit-text-fill-color: #fff; text-decoration: none; border-radius: 6px; } .ltxe-flip-box--click { cursor: pointer; } @media (prefers-reduced-motion: reduce) { .ltxe-flip-box { height: auto; perspective: none; } .ltxe-flip-box__inner { transform: none !important; transition: none; height: auto; } .ltxe-flip-box__face { position: relative; transform: none !important; backface-visibility: visible; height: auto; } .ltxe-flip-box__back { margin-top: 0.75rem; } }