.collage-gallery{display:block;position:relative}.collage-gallery__list{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:0;padding:0}.collage-gallery__item{position:relative;overflow:hidden;background:#f4f2ee;animation:collage-fade .6s ease both}.collage-gallery__item[data-slot=hidden]{display:none}.collage-gallery__item[data-slot=main]{grid-column:1 / 3;grid-row:1;aspect-ratio:4 / 5}.collage-gallery__item[data-slot=top]{grid-column:1;grid-row:2;aspect-ratio:4 / 5}.collage-gallery__item[data-slot=bottom]{grid-column:2;grid-row:2;aspect-ratio:4 / 5}.collage-gallery[data-count="1"] .collage-gallery__list{grid-template-columns:1fr}.collage-gallery[data-count="1"] .collage-gallery__item[data-slot=main]{grid-column:1}.collage-gallery[data-count="2"] .collage-gallery__item[data-slot=top]{grid-column:1 / 3}.collage-gallery__open{display:block;width:100%;height:100%;margin:0;padding:0;border:0;background:none;cursor:zoom-in}.collage-gallery__image{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}.collage-gallery__open:hover .collage-gallery__image{transform:scale(1.04)}.collage-gallery__open:focus-visible{outline:.2rem solid var(--palette-primary);outline-offset:-.4rem}@media screen and (min-width:750px){.collage-gallery__list{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:6 / 5}.collage-gallery__item[data-slot=main]{grid-column:1;grid-row:1 / 3;aspect-ratio:auto}.collage-gallery__item[data-slot=top]{grid-column:2;grid-row:1;aspect-ratio:auto}.collage-gallery__item[data-slot=bottom]{grid-column:2;grid-row:2;aspect-ratio:auto}.collage-gallery[data-count="1"] .collage-gallery__list{grid-template-columns:1fr;aspect-ratio:4 / 5}.collage-gallery[data-count="2"] .collage-gallery__item[data-slot=top]{grid-column:2;grid-row:1 / 3}}.collage-gallery__nav{display:flex;align-items:center;justify-content:center;gap:1.6rem;margin-top:1.6rem;font-size:1.3rem;letter-spacing:.12em}.collage-gallery__nav[hidden]{display:none}.collage-gallery__arrow{display:flex;align-items:center;justify-content:center;width:4.4rem;height:4.4rem;border:1px solid rgba(var(--color-foreground),.35);background:transparent;color:rgb(var(--color-foreground));cursor:pointer;transition:background-color .3s ease,color .3s ease}.collage-gallery__arrow:hover{background:rgb(var(--color-foreground));color:rgb(var(--color-background))}.collage-gallery__arrow .icon{width:1rem}.collage-gallery__arrow[name=previous] .svg-wrapper{transform:rotate(90deg)}.collage-gallery__arrow[name=next] .svg-wrapper{transform:rotate(-90deg)}.collage-lightbox{width:100vw;max-width:100vw;height:100vh;max-height:100vh;margin:0;padding:0;border:0;background:#121212f0;color:#fff}.collage-lightbox[open]{display:flex;align-items:center;justify-content:center}.collage-lightbox::backdrop{background:#121212f0}.collage-lightbox__image{max-width:min(92vw,120rem);max-height:88vh;object-fit:contain}.collage-lightbox__close,.collage-lightbox__arrow{position:absolute;display:flex;align-items:center;justify-content:center;width:4.8rem;height:4.8rem;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;cursor:pointer;transition:background-color .3s ease,color .3s ease}.collage-lightbox__close:hover,.collage-lightbox__arrow:hover{background:#fff;color:var(--palette-charcoal)}.collage-lightbox__arrow[hidden]{display:none}.collage-lightbox__close{top:2rem;right:2rem}.collage-lightbox__close .icon{width:1.8rem}.collage-lightbox__arrow{top:50%;margin-top:-2.4rem}.collage-lightbox__arrow .icon{width:1.2rem}.collage-lightbox__arrow--prev{left:2rem}.collage-lightbox__arrow--prev .svg-wrapper{transform:rotate(90deg)}.collage-lightbox__arrow--next{right:2rem}.collage-lightbox__arrow--next .svg-wrapper{transform:rotate(-90deg)}.collage-lightbox__counter{position:absolute;bottom:2rem;left:0;right:0;font-size:1.3rem;letter-spacing:.16em;text-align:center}html.collage-lightbox-open{overflow:hidden}@keyframes collage-fade{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.collage-gallery__item{animation:none}.collage-gallery__image{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/9/assets/component-product-collage-gallery.css.map */