diffy-story-triptych.diffy-triptych{--triptych-panel-mobile-width: clamp(220px, 72vw, 280px);display:block;width:100%;padding-top:var(--triptych-padding-top-mobile);padding-bottom:var(--triptych-padding-bottom-mobile);overflow:hidden;background:#fff;color:#111;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.diffy-triptych__inner{box-sizing:border-box;width:100%;max-width:1200px;margin:0 auto;padding:0 20px;text-align:center}.diffy-triptych__heading{margin:0 0 10px;color:#111;font-size:28px;font-weight:600;letter-spacing:-.035em;line-height:1.1}.diffy-triptych__subheading{max-width:600px;margin:0 auto 28px;color:#555;font-size:15px;font-weight:400;line-height:1.5}.diffy-triptych__row{position:relative;display:flex;width:calc(100% + 40px);margin:0 -20px;padding:20px calc((100% - var(--triptych-panel-mobile-width)) / 2 + 14px) 40px;align-items:center;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scroll-padding-inline:calc((100% - var(--triptych-panel-mobile-width)) / 2 + 14px);scroll-snap-type:x mandatory;overscroll-behavior-x:contain;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:none}.diffy-triptych__row::-webkit-scrollbar{display:none}.diffy-triptych__panel{position:relative;flex:0 0 var(--triptych-panel-mobile-width);width:var(--triptych-panel-mobile-width);aspect-ratio:4 / 5;margin:0 -14px;padding:0;overflow:hidden;-webkit-appearance:none;appearance:none;border:1px solid #eaeaea;border-radius:16px;background:#f8f9fa;color:#111;cursor:pointer;filter:brightness(.76);opacity:1;scroll-snap-align:center;scroll-snap-stop:always;transform:scale(.86);transition:transform .4s cubic-bezier(.22,1,.36,1),filter .3s ease,box-shadow .4s ease}.diffy-triptych__panel.is-center{z-index:3;filter:brightness(1);opacity:1;transform:scale(1);box-shadow:0 20px 45px #11111124}.diffy-triptych__panel:focus-visible{outline:3px solid #4b0082;outline-offset:4px}.diffy-triptych__image{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,1,.36,1)}.diffy-triptych__panel--multiply .diffy-triptych__image{mix-blend-mode:multiply}.diffy-triptych__placeholder{display:grid;width:100%;height:100%;padding:24px;place-items:center;color:#777;font-size:14px;line-height:1.5}.diffy-triptych__caption{position:absolute;z-index:2;bottom:16px;left:16px;max-width:calc(100% - 32px);padding:8px 12px;border-radius:999px;background:#ffffffe6;box-shadow:0 4px 16px #11111114;color:#111;font-size:13px;font-weight:600;line-height:1.25;opacity:1;text-align:left;transform:none}.diffy-triptych__expand{position:absolute;z-index:2;top:16px;right:16px;display:grid;width:34px;height:34px;border-radius:50%;background:#ffffffeb;box-shadow:0 4px 16px #1111111a;color:#111;opacity:1;place-items:center;transform:none}.diffy-lightbox{position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;box-sizing:border-box;display:grid;padding:max(72px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));overflow-x:hidden;overflow-y:auto;align-items:center;justify-items:center;background:#fffffffb;opacity:0;overscroll-behavior:contain;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.diffy-lightbox[hidden]{display:none}.diffy-lightbox.is-active{opacity:1;visibility:visible}.diffy-lightbox__close{position:fixed;z-index:2;top:max(20px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));display:grid;width:44px;height:44px;padding:0;place-items:center;-webkit-appearance:none;appearance:none;border:0;border-radius:50%;background:#111;color:#fff;cursor:pointer;transition:transform .2s ease,background-color .2s ease}.diffy-lightbox__close:hover{transform:scale(1.06)}.diffy-lightbox__close:focus-visible{outline:3px solid #4b0082;outline-offset:3px}.diffy-lightbox__figure{width:min(100%,1200px);margin:auto;text-align:center}.diffy-lightbox__media{display:grid;min-height:min(55vh,440px);place-items:center}.diffy-lightbox__image{display:block;width:auto;max-width:100%;height:auto;max-height:68vh;margin:0 auto;border-radius:16px;object-fit:contain;box-shadow:0 20px 50px #1111111a}.diffy-lightbox__image:not([src]){visibility:hidden}.diffy-lightbox__caption{margin-top:24px;color:#111;font-size:22px;font-weight:600;letter-spacing:-.025em;line-height:1.2}.diffy-lightbox__description{max-width:600px;margin:12px auto 0;color:#555;font-size:15px;font-weight:400;line-height:1.5}.diffy-lightbox__caption:empty,.diffy-lightbox__description:empty{display:none}@media screen and (min-width:769px){diffy-story-triptych.diffy-triptych{padding-top:var(--triptych-padding-top-desktop);padding-bottom:var(--triptych-padding-bottom-desktop)}.diffy-triptych__heading{font-size:40px}.diffy-triptych__subheading{margin-bottom:36px;font-size:16px}.diffy-triptych__row{width:100%;max-width:1000px;margin:0 auto;padding:0;justify-content:center;overflow:visible;scroll-snap-type:none}.diffy-triptych__panel{flex:0 0 33.333%;width:33.333%;margin:0;filter:brightness(1);opacity:1;scroll-snap-align:none}.diffy-triptych__panel:nth-child(1){z-index:1;filter:brightness(.88);transform:scale(.85) translate(25%)}.diffy-triptych__panel:nth-child(2){z-index:3;transform:scale(1.05);box-shadow:0 30px 60px #11111126}.diffy-triptych__panel:nth-child(3){z-index:1;filter:brightness(.88);transform:scale(.85) translate(-25%)}.diffy-triptych__row:hover .diffy-triptych__panel:not(:hover){filter:brightness(.68);opacity:1;transform:scale(.8) translate(0);box-shadow:none}.diffy-triptych__row .diffy-triptych__panel:is(:hover,:focus-visible){z-index:10;filter:brightness(1);opacity:1;transform:scale(1.08) translateY(-10px);box-shadow:0 36px 72px #1113}.diffy-triptych__panel:is(:hover,:focus-visible) .diffy-triptych__image{transform:scale(1.015)}.diffy-triptych__caption{bottom:24px;left:24px;max-width:calc(100% - 48px);opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .3s ease}.diffy-triptych__expand{top:24px;right:24px;opacity:0;transform:scale(.85);transition:opacity .25s ease,transform .3s ease}.diffy-triptych__panel:is(:hover,:focus-visible) .diffy-triptych__caption,.diffy-triptych__panel:is(:hover,:focus-visible) .diffy-triptych__expand{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.diffy-triptych__row{scroll-behavior:auto}.diffy-triptych__panel,.diffy-triptych__image,.diffy-triptych__caption,.diffy-triptych__expand,.diffy-lightbox,.diffy-lightbox__close{transition:none}.diffy-triptych__panel:is(:hover,:focus-visible) .diffy-triptych__image{transform:none}}
/*# sourceMappingURL=/cdn/shop/t/22/assets/diffy-story-triptych.css.map */