:root{--section-padding-top: 60px;--section-padding-bottom: 60px;--section-background-color: #FFFFFF}.interactive-cards-section{background-color:var(--section-background-color);padding-top:var(--section-padding-top);padding-bottom:var(--section-padding-bottom);color:#121212;box-sizing:border-box}.interactive-cards__title{text-align:center;margin:0 auto 40px;font-size:clamp(1.8rem,4vw,2.5rem);max-width:600px;line-height:1.2}.interactive-cards__container{display:grid;grid-template-columns:1fr;gap:20px;max-width:500px;margin:0 auto}.interactive-durian{position:relative;aspect-ratio:4 / 3;border-radius:16px;overflow:hidden;cursor:pointer;transition:aspect-ratio .5s cubic-bezier(.4,0,.2,1)}.interactive-durian.is-active{aspect-ratio:1 / 1.1}.interactive-durian__inner{position:relative;width:100%;height:100%}.interactive-durian__front,.interactive-durian__back{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;box-sizing:border-box;backface-visibility:hidden;transition:opacity .4s ease-in-out}.interactive-durian__front{padding:clamp(1.5rem,4vw,2rem)}.interactive-durian__back{padding:.2rem clamp(1.2rem,4vw,2rem) 1.5rem clamp(1.2rem,4vw,2rem);opacity:0;pointer-events:none;background-size:cover;background-position:center;--revealed-bg-image-desktop: none;--revealed-bg-image-mobile: none;--revealed-bg-color: #000;background-color:var(--revealed-bg-color);background-image:var(--revealed-bg-image-mobile, var(--revealed-bg-image-desktop))}.interactive-durian__back.text-color--light{text-shadow:0 1px 4px rgba(0,0,0,.5)}.interactive-durian.is-active .interactive-durian__front{opacity:0}.interactive-durian.is-active .interactive-durian__back{opacity:1;pointer-events:auto}.interactive-durian__media-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-user-select:none;user-select:none;pointer-events:none}.durian-media{width:100%;height:100%;object-fit:cover;position:absolute}.revealed-background-media{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden;border-radius:inherit}.revealed-video{width:100%;height:100%;object-fit:cover}.durian__revealed-content{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;position:relative;z-index:1}.durian__revealed-content h4{font-size:1.5rem;margin-bottom:.5rem;font-weight:700;color:var(--revealed-title-color, var(--text-color, #FFFFFF));letter-spacing:-.5px;line-height:1.1}.revealed-description{font-size:1.3rem;font-weight:600;line-height:1.4;color:var(--revealed-paragraph-color, var(--text-color, #FFFFFF));letter-spacing:-.3px}.durian__revealed-content .button{align-self:flex-end}.durian__main-title{position:absolute;margin:0;color:#fff;text-shadow:1px 1px 3px rgba(0,0,0,.4);font-size:1.6rem;font-weight:600;line-height:1.2;letter-spacing:-.5px;top:clamp(1.5rem,4vw,2rem);left:clamp(1.5rem,4vw,2rem);writing-mode:horizontal-tb;transform:none;transition:transform .4s ease,opacity .4s ease,writing-mode .2s ease}.desktop-only{display:none}.mobile-only{display:block}@media screen and (min-width: 768px) and (max-width: 989px){.revealed-description{max-width:65%}}@media screen and (min-width: 990px){.desktop-only{display:block}.mobile-only{display:none}.interactive-cards__container{display:flex;max-width:none;gap:15px;width:100%;align-items:stretch}.interactive-durian,.interactive-durian.is-active{flex:1;aspect-ratio:1 / 1;height:auto;position:relative;transition:flex .7s cubic-bezier(.4,0,.2,1)}.interactive-durian:hover{flex:2.5}.interactive-durian__back{background-image:var(--revealed-bg-image-desktop, var(--revealed-bg-image-mobile))}.durian__revealed-content{align-items:flex-end;text-align:right}.revealed-content__top-left{align-self:flex-start;text-align:left}.durian__revealed-content h4{font-size:2.2rem;letter-spacing:-.9px;line-height:1.05;margin-bottom:.8rem}.revealed-description{max-width:85%;font-size:1.5rem;letter-spacing:-.8px;line-height:1.3}.durian__main-title{writing-mode:horizontal-tb;transform:none;letter-spacing:-.4px}.interactive-cards__container:is(:hover) .interactive-durian:not(:hover) .durian__main-title{writing-mode:vertical-rl;transform:rotate(180deg);top:clamp(1.5rem,4vw,2rem);left:clamp(1.5rem,4vw,2rem)}.interactive-durian:hover .durian__main-title{opacity:0}.interactive-durian:hover .interactive-durian__back{opacity:1;pointer-events:auto}}.button--with-icon{display:inline-flex;align-items:center;justify-content:center;gap:.1rem;font-size:1.3rem;letter-spacing:-.1px;padding:1rem 1.3rem!important;height:auto;min-height:auto;line-height:1.2;border-radius:10px;font-weight:700;border:none;border-width:var(--button-border-width, 0px);border-style:solid;border-color:var(--button-border-color,rgb(0, 0, 0));text-decoration:none;text-shadow:none;box-shadow:none;transition:background-color .3s ease,color .3s ease;background-color:var(--button-bg-color, #000000);color:var(--button-text-color, #FFFFFF)}.button--with-icon:hover{background-color:var(--button-hover-bg-color, #333333);color:var(--button-hover-text-color, #FFFFFF)}.button--with-icon svg{width:1em;height:1em;stroke-width:3}
/*# sourceMappingURL=/cdn/shop/t/113/assets/section-interactive-cards.css.map */