.kop-ugc__grid{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:3.2rem}.kop-ugc__grid::-webkit-scrollbar{display:none}@media screen and (min-width:750px){.kop-ugc__grid{grid-auto-flow:row;grid-template-columns:repeat(var(--kop-ugc-cols, 3),minmax(0,1fr));grid-auto-columns:auto;overflow:visible;gap:1.2rem}}.kop-ugc__item{scroll-snap-align:start;min-width:0}.kop-ugc__open{position:relative;display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:pointer;text-align:start}.kop-ugc__media{position:relative;display:block;overflow:hidden;aspect-ratio:1 / 1;background-color:rgb(var(--color-background-card))}.kop-ugc__grid--portrait .kop-ugc__media{aspect-ratio:4 / 5}.kop-ugc__img,.kop-ugc__video,.kop-ugc__media svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}@media(hover:hover){.kop-ugc__open:hover .kop-ugc__img,.kop-ugc__open:hover .kop-ugc__video{transform:scale(1.03)}}.kop-ugc__pill{position:absolute;inset-inline-start:1.2rem;bottom:1.2rem;z-index:1;pointer-events:none}.kop-ugc-drawer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1002}.kop-ugc-drawer[hidden]{display:none}.kop-ugc-drawer__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(var(--color-overlay) / .5);opacity:0;transition:opacity .3s ease}.kop-ugc-drawer__panel{position:absolute;inset-inline:0;bottom:0;max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;background-color:rgb(var(--color-drawer-background, var(--color-background)));color:rgb(var(--color-foreground));transform:translateY(100%);transition:transform .3s ease,opacity .3s ease;outline:none}.kop-ugc-drawer__side{display:contents}.kop-ugc-drawer__header{order:0;position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:1.4rem 2rem;border-bottom:1px solid rgb(var(--color-border));background-color:rgb(var(--color-drawer-background, var(--color-background)))}.kop-ugc-drawer__media{order:1;flex:0 0 auto;background-color:rgb(var(--color-background-card))}.kop-ugc-drawer__media:empty{display:none}.kop-ugc-drawer__media .kop-ugc-look__media{height:100%}.kop-ugc-drawer__media img,.kop-ugc-drawer__media video{display:block;width:100%;height:auto;max-height:46vh;object-fit:cover}.kop-ugc-drawer__body{order:2;flex:0 0 auto;padding:.4rem 2rem 2rem}.kop-ugc-drawer__footer{order:3;position:sticky;bottom:0;z-index:2;padding:1.4rem 2rem;border-top:1px solid rgb(var(--color-border));background-color:rgb(var(--color-drawer-background, var(--color-background)))}.kop-ugc-drawer__footer[hidden]{display:none}@media screen and (min-width:750px){.kop-ugc-drawer__panel{inset:50% auto auto 50%;bottom:auto;width:min(44rem,calc(100vw - 6.4rem));height:min(68rem,calc(100vh - 6.4rem));max-height:none;display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;opacity:0;transform:translate(-50%,-48%)}.kop-ugc-drawer__panel.has-media{width:min(100rem,calc(100vw - 6.4rem));grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.kop-ugc-drawer__side{display:flex;flex-direction:column;min-height:0}.kop-ugc-drawer__header{position:static;padding:1.8rem 2.4rem}.kop-ugc-drawer__media{order:0;position:relative;min-height:0;overflow:hidden}.kop-ugc-drawer__side{order:1}.kop-ugc-drawer__media .kop-ugc-look__media{position:absolute;top:0;right:0;bottom:0;left:0}.kop-ugc-drawer__media img,.kop-ugc-drawer__media video{width:100%;height:100%;max-height:none}.kop-ugc-drawer__body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:.4rem 2.4rem 2.4rem}.kop-ugc-drawer__footer{position:static;padding:1.6rem 2.4rem}}.kop-ugc-drawer.is-open .kop-ugc-drawer__overlay{opacity:1}.kop-ugc-drawer.is-open .kop-ugc-drawer__panel{transform:none}@media screen and (min-width:750px){.kop-ugc-drawer.is-open .kop-ugc-drawer__panel{opacity:1;transform:translate(-50%,-50%)}}.kop-ugc-drawer__title{margin:0}.kop-ugc-drawer__close{display:flex;padding:0;border:0;background:none;color:inherit;cursor:pointer}.kop-ugc-drawer__close svg{width:2.4rem;height:2.4rem}.kop-ugc-look__caption{margin:1.2rem 0 0;opacity:.7}.kop-ugc-look__list{margin:0;padding:0}.kop-ugc-drawer__body .kop-ugc-look__media{display:none}
/*# sourceMappingURL=/cdn/shop/t/34/assets/kop-ugc-gallery.css.map */