.flipbox-3d{position:relative;width:100%;height:var(--fb-height);min-height:180px;perspective:var(--fb-perspective);outline:none}.flipbox-3d__inner{position:relative;width:100%;height:100%;transition:transform var(--fb-speed) cubic-bezier(.2,.75,.25,1);transform-style:preserve-3d}.flipbox-3d__inner--flat{transform-style:flat}.flipbox-3d__face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--fb-radius);background-position:center;background-size:cover;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 18px 45px rgba(15,23,42,.22)}.flipbox-3d__front{color:var(--fb-front-color);background-color:var(--fb-front-bg)}.flipbox-3d__back{color:var(--fb-back-color);background-color:var(--fb-back-bg)}.flipbox-3d__overlay{position:absolute;inset:0;background:linear-gradient(145deg,rgba(0,0,0,.08),rgba(0,0,0,.42))}.flipbox-3d__content{position:relative;z-index:1;width:100%;padding:clamp(24px,5vw,56px);text-align:center;transform:translateZ(48px)}.flipbox-3d__inner--flat .flipbox-3d__content{transform:none}.flipbox-3d__title{margin:0 0 12px;color:inherit;font-size:clamp(26px,4vw,46px);line-height:1.08}.flipbox-3d__text{font-size:clamp(16px,1.5vw,19px);line-height:1.6}.flipbox-3d__text p:last-child{margin-bottom:0}.flipbox-3d__button{display:inline-flex;margin-top:22px;padding:12px 22px;border:2px solid currentColor;border-radius:999px;color:inherit;text-decoration:none;font-weight:700;transition:.2s ease}.flipbox-3d__button:hover{background:#fff;color:#111;transform:translateY(-2px)}.flipbox-3d--left .flipbox-3d__back{transform:rotateY(180deg)}.flipbox-3d--right .flipbox-3d__back{transform:rotateY(-180deg)}.flipbox-3d--up .flipbox-3d__back{transform:rotateX(-180deg)}.flipbox-3d--down .flipbox-3d__back{transform:rotateX(180deg)}.flipbox-3d--left:is(:hover,:focus-visible,.is-flipped) .flipbox-3d__inner{transform:rotateY(-180deg)}.flipbox-3d--right:is(:hover,:focus-visible,.is-flipped) .flipbox-3d__inner{transform:rotateY(180deg)}.flipbox-3d--up:is(:hover,:focus-visible,.is-flipped) .flipbox-3d__inner{transform:rotateX(180deg)}.flipbox-3d--down:is(:hover,:focus-visible,.is-flipped) .flipbox-3d__inner{transform:rotateX(-180deg)}.flipbox-3d--click:hover .flipbox-3d__inner{transform:none}.flipbox-3d--click.flipbox-3d--left.is-flipped .flipbox-3d__inner{transform:rotateY(-180deg)}.flipbox-3d--click.flipbox-3d--right.is-flipped .flipbox-3d__inner{transform:rotateY(180deg)}.flipbox-3d--click.flipbox-3d--up.is-flipped .flipbox-3d__inner{transform:rotateX(180deg)}.flipbox-3d--click.flipbox-3d--down.is-flipped .flipbox-3d__inner{transform:rotateX(-180deg)}@media(max-width:767px){.flipbox-3d{height:max(280px,var(--fb-height))}.flipbox-3d__content{padding:24px}}@media(prefers-reduced-motion:reduce){.flipbox-3d__inner{transition-duration:.01ms}}