.flip-card{background-color:transparent;width:100%;aspect-ratio:var(--CARD-ASPECT-RATIO);border-radius:var(--CARD-BORDER-RADIUS, 0);perspective:1000px}.flip-card__inner{position:relative;width:100%;height:100%;text-align:center;transition:transform .8s;transform-style:preserve-3d}.flip-card:hover .flip-card__inner{transform:rotateY(180deg)}@keyframes flipTitleHide{0%{opacity:1}50%{opacity:0}to{opacity:0}}@keyframes flipTitleShow{0%{opacity:0}50%{opacity:0}to{opacity:1}}.flip-card__title{opacity:1;transition:none}.flip-card:hover .flip-card__front>*:not(.image-wrapper){animation-name:flipTitleHide;animation-duration:.8s;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-delay:0s}.flip-card:not(:hover) .flip-card__front>*:not(.image-wrapper){animation-name:flipTitleShow;animation-duration:.8s;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-delay:0s}.flip-card .flip-card__button{z-index:2;background:#fff;width:1.5rem;height:1.5rem;border-radius:50%;--icons: var(--color-navy);padding:0;--ICON-STROKE-WIDTH: 2px;justify-self:flex-end;margin:1rem 1rem 0 0}.flip-card__front,.flip-card__back{position:absolute;width:100%;height:100%}.flip-card__back{-webkit-backface-visibility:hidden;backface-visibility:hidden;font-size:var(--font-heading-small);border-radius:var(--CARD-BORDER-RADIUS, 0);background-color:var(--CARD-BACKGROUND-COLOR, var(--COLOR-BG));background-color:color-mix(in srgb,var(--CARD-BACKGROUND-COLOR) 95%,transparent 5%);color:#fff;transform:rotateY(180deg);display:grid;grid-template-areas:"content";padding:.5rem}.flip-card__back>*{grid-area:content}.flip-card__front{display:grid;grid-template-areas:"image"}.flip-card__front>*{grid-area:image}.flip-card__front .flip-card__title{z-index:1;justify-content:center;align-self:flex-end;color:var(--text);font-weight:700}.flip-card__front img{border-radius:var(--CARD-BORDER-RADIUS, 0)}.flip-card__back .flip-card__text{z-index:2;color:var(--CARD-TEXT);align-self:center;text-wrap:balance}.flip-card__front .flip-card__title{text-shadow:#000 0px 0px 5px}.flip-card__back .flip-card__text{font-size:26px}@media screen and (max-width:749px){.flip-card__front .flip-card__title{font-size:22px}.flip-card__back .flip-card__text{font-size:16px}}.flip-card__back .flip-card__text-floating{color:var(--CARD-TEXT-FLOATING);align-self:flex-end;text-align:left}.flip-card__back p{line-height:120%}
/*# sourceMappingURL=/cdn/shop/t/148/assets/flip-cards.css.map */