.card-flip-carousel{background-color:var(--colour-bianca);display:flex;flex-direction:column;gap:32px}@property --back-text-reveal{syntax: "<percentage>"; inherits: false; initial-value: 0%;}.card-flip-carousel .carousel{display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;gap:8px;cursor:grab;scroll-snap-type:x mandatory;scroll-padding-left:var(--page-margin-side-mobile);-ms-overflow-style:none;scrollbar-width:none}.card-flip-carousel .carousel::-webkit-scrollbar{display:none}.card-flip-carousel .carousel.dragging{cursor:grabbing;scroll-snap-type:none}.card-flip-carousel .desktop{display:none}.card-flip-carousel .bottom-container{margin:0 var(--page-margin-side-mobile);padding-bottom:2rem;border-bottom:1px solid var(--colour-dark-10)}.card-flip-carousel .top-container{padding:0 var(--page-margin-side-mobile)}.card-flip-carousel .heading strong{color:var(--colour-rouge);font-weight:inherit}.card-flip-carousel .card:first-of-type{margin-left:var(--page-margin-side-mobile)}.card-flip-carousel .card:last-of-type{margin-right:var(--page-margin-side-mobile)}.card-flip-carousel .card{width:262px;height:347px;border-radius:12px;overflow:hidden;flex-shrink:0;position:relative;cursor:pointer;scroll-snap-align:start}.card-flip-carousel .card-inner{position:absolute;width:100%;height:100%;transition:transform 1s;transform-style:preserve-3d}.card-flip-carousel .card.flipped .card-inner{transform:rotateY(180deg);transition:transform .5s}.card-flip-carousel .front,.card-flip-carousel .back{position:absolute;height:100%;width:100%;backface-visibility:hidden;border-radius:12px}.card-flip-carousel .front{opacity:1;overflow:hidden;padding:12px;transition:opacity .5s ease-in-out}.card-flip-carousel .card.flipped .front,.card-flip-carousel .card.flipped .front:after{opacity:0}.card-flip-carousel .back{transform:rotateY(180deg);padding:16px;display:flex;flex-direction:column}.card-flip-carousel .card__image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}.card-flip-carousel .front:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,#0000004d,#0000)}.card-flip-carousel .label{z-index:2;position:relative;display:flex;align-items:center;justify-content:space-between}.card-flip-carousel .front .label{color:var(--colour-white)}.card-flip-carousel .back .card-body{--back-text-reveal: 0%;--back-text-feather: 22%;opacity:0;mask-image:linear-gradient(to bottom,#000 0%,#000 var(--back-text-reveal),transparent calc(var(--back-text-reveal) + var(--back-text-feather)),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 var(--back-text-reveal),transparent calc(var(--back-text-reveal) + var(--back-text-feather)),transparent 100%);transition:--back-text-reveal 1.6s ease,opacity .2s linear}.card-flip-carousel .card.flipped .back .card-body{--back-text-reveal: 100%;opacity:1}.card-flip-carousel .icon-diagonal-arrow{padding:8px;border-radius:8px;background:var(--colour-white-40);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.card-flip-carousel .card-body{margin-top:24px;font-size:14px;line-height:1.5}.card-flip-carousel .link-btn{display:flex;align-items:center;justify-content:flex-start;margin-top:auto;font-weight:700;color:inherit;gap:4px;line-height:1.5;letter-spacing:.05em;text-decoration:none;cursor:pointer}.card-flip-carousel .icon-close{padding:4px;width:24px;height:24px}.card-flip-carousel .white .back svg path{fill:var(--colour-white)}@media screen and (min-width:1000px){.card-flip-carousel .desktop{display:flex}.card-flip-carousel .mobile{display:none}.card-flip-carousel .top-container{display:flex;justify-content:space-between;padding:0 var(--page-margin-side-desktop)}.card-flip-carousel .card:first-of-type{margin-left:var(--page-margin-side-desktop)}.card-flip-carousel .card:last-of-type{margin-right:var(--page-margin-side-desktop)}.card-flip-carousel .carousel{gap:24px;scroll-padding-left:var(--page-margin-side-desktop)}.card-flip-carousel .card{height:426px;width:302px}.card-flip-carousel .card:hover .card-inner{transform:rotateY(180deg);transition:transform .5s}.card-flip-carousel .card:hover .back .card-body{--back-text-reveal: 100%;opacity:1}.card-flip-carousel .card:hover .front,.card-flip-carousel .card:hover .front:after{opacity:0}}
/*# sourceMappingURL=/cdn/shop/t/32/assets/card-flip-carousel.css.map */
