.ugc-videos{width:100%;padding-top:var(--ugc-padding-top, 40px);padding-bottom:var(--ugc-padding-bottom, 40px)}.ugc-videos__grid{list-style:none;margin:0;padding:0 var(--ugc-edge, 20px);display:grid;grid-template-columns:repeat(var(--ugc-columns-mobile, 2),minmax(0,1fr));gap:var(--ugc-gap, 12px)}@media screen and (min-width:750px){.ugc-videos__grid{grid-template-columns:repeat(var(--ugc-columns, 5),minmax(0,1fr))}}.ugc-videos__card{position:relative;overflow:hidden;aspect-ratio:9 / 16;border-radius:var(--ugc-radius, 8px);background-color:rgba(var(--color-foreground),.06)}.ugc-videos__video,.ugc-videos__poster{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.ugc-videos__poster{z-index:1;transition:opacity .3s ease}.ugc-videos__card--playing .ugc-videos__poster{opacity:0;pointer-events:none}.ugc-videos__play{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;transition:opacity .3s ease}.ugc-videos__card--playing .ugc-videos__play{opacity:0;pointer-events:none}.ugc-videos__play-circle{display:flex;align-items:center;justify-content:center;width:5.6rem;height:5.6rem;border-radius:50%;background-color:rgba(var(--color-background),.85);color:rgb(var(--color-foreground));transition:transform .3s cubic-bezier(.22,1,.36,1),background-color .3s ease}.ugc-videos__play:hover .ugc-videos__play-circle{transform:scale(1.08);background-color:rgb(var(--color-background))}.ugc-videos__play:focus-visible{outline:.2rem solid rgb(var(--color-foreground));outline-offset:-.4rem}.ugc-videos__play-circle svg{width:1.8rem;height:1.8rem;margin-left:.3rem;fill:currentColor}.ugc-videos__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem}.ugc-videos__placeholder .placeholder-svg{width:45%;height:auto;opacity:.35}.ugc-videos__placeholder .placeholder-svg,.ugc-videos__placeholder .placeholder-svg *{fill:rgb(var(--color-foreground))}.ugc-videos__placeholder-label{font-size:1.2rem;letter-spacing:.06em;text-transform:uppercase;opacity:.5}@media screen and (max-width:749px){.ugc-videos__placeholder-label{font-size:1.1rem}.ugc-videos__play-circle{width:4.4rem;height:4.4rem}.ugc-videos__play-circle svg{width:1.5rem;height:1.5rem}}@media(prefers-reduced-motion:reduce){.ugc-videos__play:hover .ugc-videos__play-circle{transform:none}}
/*# sourceMappingURL=/cdn/shop/t/15/assets/section-ugc-videos.css.map */