.flip-card{--flip-duration: .9s;display:block;position:relative;width:100%;perspective:200rem}.flip-card__inner{display:grid;transform-style:preserve-3d;transition:transform var(--flip-duration) cubic-bezier(.33,.1,.25,1);will-change:transform}.flip-card .flip-card__sizer{display:block;grid-area:1 / 1;pointer-events:none}.flip-card__face{grid-area:1 / 1;display:grid;position:relative;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-color:rgb(var(--color-overlay))}.flip-card__face:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;pointer-events:none;background-color:rgba(var(--color-overlay),var(--color-overlay-opacity))}.flip-card__face--front:after{background-color:transparent}.flip-card__media,.flip-card__media .media-wrapper,.flip-card__media .media{position:absolute;top:0;left:0;right:0;bottom:0}.flip-card__media .placeholder{background-color:#00000080}.flip-card__face--back{visibility:hidden;pointer-events:none;transform:var(--flip-transform, rotateY(180deg));transition:visibility 0s linear var(--flip-duration)}.flip-card.is-flipped .flip-card__inner{transform:var(--flip-transform, rotateY(180deg))}.flip-card.is-flipped .flip-card__face--back{visibility:visible;pointer-events:auto;transition-delay:0s}.flip-card.is-flipped .flip-card__face--front{pointer-events:none}@media(hover:hover)and (min-width:750px){.flip-card[data-trigger=hover]:hover .flip-card__inner,.flip-card[data-trigger=hover]:focus-within .flip-card__inner{transform:var(--flip-transform, rotateY(180deg))}.flip-card[data-trigger=hover]:hover .flip-card__face--back,.flip-card[data-trigger=hover]:focus-within .flip-card__face--back{visibility:visible;pointer-events:auto;transition-delay:0s}.flip-card[data-trigger=hover]:hover .flip-card__face--front,.flip-card[data-trigger=hover]:focus-within .flip-card__face--front{pointer-events:none}}@media(prefers-reduced-motion){.flip-card__inner{transition-duration:0ms}}.flip-card__trigger{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3;padding:0;border:0;background:transparent;cursor:pointer;color:inherit;-webkit-appearance:none;appearance:none}.flip-card__hint{position:relative;z-index:2;width:100%;padding:3rem 0;pointer-events:none;color:rgb(var(--color-foreground));transition:opacity var(--duration-default) ease}.flip-card__hint--text{text-shadow:0 .1rem .6rem rgba(0,0,0,.35)}.flip-card__hint>*:first-child{margin-top:0}.flip-card__hint>*:last-child{margin-bottom:0}.flip-card__hint--button{display:flex}.flip-card__hint--button.left{justify-content:flex-start}.flip-card__hint--button.center{justify-content:center}.flip-card__hint--button.right{justify-content:flex-end}.flip-card__hint .button--link{color:rgb(var(--color-foreground))}@media screen and (max-width:749px){.flip-card__hint--button.mobile-left{justify-content:flex-start}.flip-card__hint--button.mobile-center{justify-content:center}.flip-card__hint--button.mobile-right{justify-content:flex-end}}@media(hover:hover)and (min-width:750px){.flip-card[data-trigger=hover]:hover .flip-card__hint{opacity:0}}.flip-card__close{position:absolute;top:1.5rem;inset-inline-end:1.5rem;z-index:3;display:flex;align-items:center;justify-content:center;width:4.4rem;height:4.4rem;padding:1.2rem;border:0;background:transparent;color:rgb(var(--color-foreground));cursor:pointer;-webkit-appearance:none;appearance:none}.flip-card__close .icon{width:100%;height:100%}@media(hover:hover)and (min-width:750px){.flip-card[data-trigger=hover] .flip-card__close{display:none}}.flip-card .banner__content,.flip-card .banner__box{box-sizing:border-box}.flip-card .banner__content{z-index:2;padding:0 1.5rem}.flip-card__face--back .banner__content{position:relative;height:auto}.flip-card .banner__box{padding:3rem 0}@media screen and (max-width:749px){.flip-card__face--back .banner__content{align-items:center}}@media screen and (min-width:750px){.flip-card .banner__content.page-width{padding:5rem}.flip-card .banner__box{padding:4rem 6rem}.flip-card--container .flip-card__face--back:after{content:none}.flip-card--container .banner__box{background-color:rgba(var(--color-overlay),var(--color-overlay-opacity))}}
/*# sourceMappingURL=/cdn/shop/t/6/assets/section-flip-card-banner.css.map */