.ugcwrap{display:flex;justify-content:center;margin:16px 0 4px}.ugcframe{position:relative;aspect-ratio:3/4;width:min(320px,84%);border-radius:22px;overflow:hidden;background:#0b1524;box-shadow:0 18px 44px #10203a3d;border:3px solid #fff;cursor:pointer;-webkit-tap-highlight-color:transparent}.ugcframe canvas.ugccv,.ugcframe img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.ugcframe video.ugcsrc{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none}.ugcbadge{position:absolute;left:10px;top:10px;z-index:3;background:#ffffffed;color:#16233a;font-size:10.5px;font-weight:800;padding:5px 10px;border-radius:999px;letter-spacing:.03em;pointer-events:none}.ugcbig{position:absolute;left:50%;top:50%;z-index:4;width:60px;height:60px;margin:-30px 0 0 -30px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;background:#fffffff0;color:#16233a;box-shadow:0 8px 24px #0b152459;opacity:0;transform:scale(.8);pointer-events:none;transition:opacity .2s ease,transform .2s cubic-bezier(.2,.8,.3,1)}.ugcbig svg{width:26px;height:26px;fill:currentColor;margin-left:3px}.ugcframe[data-state=paused] .ugcbig{opacity:1;transform:scale(1);pointer-events:auto}.ugcframe[data-state=paused] .ugcbig:hover{transform:scale(1.07)}.ugcbar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:9px;padding:22px 11px 10px;background:linear-gradient(180deg,#0b152400,#0b1524b8);opacity:0;transition:opacity .22s ease}.ugcframe:hover .ugcbar,.ugcframe[data-state=paused] .ugcbar,.ugcframe.touched .ugcbar{opacity:1}@media(hover:none){.ugcbar{opacity:1}}.ugcbar button{flex:0 0 auto;width:26px;height:26px;padding:0;display:grid;place-items:center;background:none;border:0;cursor:pointer;color:#fff;opacity:.92}.ugcbar button:hover{opacity:1}.ugcbar button svg{width:17px;height:17px;fill:currentColor}.ugcprog{flex:1 1 auto;height:16px;display:flex;align-items:center;cursor:pointer;touch-action:none}.ugcprog i{display:block;width:100%;height:3.5px;border-radius:999px;background:#ffffff57;position:relative;overflow:hidden;transition:height .15s ease}.ugcprog i:after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:#fff;border-radius:999px}.ugcprog:hover i{height:5px}.ugctime{flex:0 0 auto;color:#fff;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;opacity:.9}@media(min-width:900px){.sec-box{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);grid-template-areas:"head  head" "sub   cards" "video cards" "video divider" "video specs";column-gap:32px;row-gap:14px;align-items:start}.sec-box>.shead{grid-area:head}.sec-box>.ssub{grid-area:sub;margin-bottom:0}.sec-box>.ugcwrap{grid-area:video;justify-content:flex-start;margin:4px 0 0}.sec-box>.boxgrid{grid-area:cards;grid-template-columns:repeat(2,1fr);margin-top:0}.sec-box>.boxhead{grid-area:divider;margin:10px 0 0}.sec-box>.specrows{grid-area:specs;grid-template-columns:1fr;margin-top:6px}.ugcframe{width:100%;max-width:330px}}
/*# sourceMappingURL=/cdn/shop/t/9/assets/beastclava-ugc.css.map */