.ugc-videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:616px;margin:24px 0}
.ugc-card{position:relative;min-width:0;aspect-ratio:9/16;overflow:hidden;border:1px solid #e7dfd5;border-radius:10px;background:#f2ede7}
.ugc-video{display:block;width:100%;height:100%;object-fit:cover}
.ugc-card.is-playing .ugc-video{object-fit:contain}
.ugc-card>.ugc-video{cursor:pointer}
.ugc-play{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:56px;height:56px;padding:0;border:1px solid #ffffff70;border-radius:50%;background:#ffffff59;color:#fff;box-shadow:0 3px 16px #00000014;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);transform:translate(-50%,-50%);transition:background .18s ease,box-shadow .18s ease;cursor:pointer}
.ugc-play[hidden],.ugc-fullscreen[hidden],.ugc-error[hidden],.ugc-fullscreen-notice[hidden]{display:none}
.ugc-play svg{width:24px;height:24px;margin-left:3px;fill:currentColor;stroke:none;pointer-events:none}
.ugc-play:hover{background:#ffffff80;box-shadow:0 3px 18px #00000026}
.ugc-play:focus-visible,.ugc-fullscreen:focus-visible{outline:3px solid #292929;outline-offset:4px}
.ugc-error,.ugc-fullscreen-notice{position:absolute;right:6px;bottom:6px;left:6px;margin:0;padding:8px;border-radius:6px;background:#fffffff2;color:#292929;text-align:center;font-size:12px;line-height:1.35}
.ugc-error a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media(max-width:760px){.ugc-videos{gap:9px;margin:22px 0}.ugc-card{border-radius:8px}}
@media(max-width:760px),(pointer:coarse){.ugc-play{width:44px;height:44px}.ugc-play svg{width:20px;height:20px}}

.ugc-play .ugc-pause-icon{display:none;margin-left:0}
.ugc-card.is-playing .ugc-play-icon,.ugc-card.is-user-paused .ugc-play-icon,.ugc-zoom-frame.is-playing .ugc-play-icon{display:none}
.ugc-card.is-playing .ugc-pause-icon,.ugc-card.is-user-paused .ugc-pause-icon,.ugc-zoom-frame.is-playing .ugc-pause-icon{display:block}
.ugc-fullscreen{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid #ffffff70;border-radius:50%;background:#29292940;color:#fff;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);cursor:pointer}
.ugc-fullscreen svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ugc-fullscreen:hover{background:#29292970}
.ugc-video:fullscreen{object-fit:contain;background:#000}
.ugc-video:-webkit-full-screen{object-fit:contain;background:#000}
@media(max-width:760px){.ugc-fullscreen{top:4px;right:4px}}

@media(max-width:760px),(pointer:coarse){.ugc-fullscreen{width:28.8px;height:28.8px}.ugc-fullscreen svg{width:15.2px;height:15.2px}.ugc-fullscreen::after{content:"";position:absolute;inset:-3.6px}}

/* Keep a visible blurred margin around the mobile video, in either orientation. */
.ugc-lightbox{position:fixed;inset:0;width:min(80vw,45vh);width:min(80vw,45dvh);height:fit-content;max-width:none;max-height:none;margin:auto;padding:0;border:0;border-radius:12px;background:transparent;overflow:visible;color:#fff}
.ugc-lightbox[open]{display:block}
.ugc-lightbox::backdrop{background:#17171770;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ugc-zoom-frame{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;border-radius:12px;background:#000;box-shadow:0 20px 70px #0006}
.ugc-zoom-frame>.ugc-video{width:100%;height:100%;object-fit:contain}
.ugc-zoom-frame>.ugc-play{width:44px;height:44px}
.ugc-zoom-frame>.ugc-play svg{width:20px;height:20px}
.ugc-zoom-close{z-index:1}