.dvg-gallery{
    --dvg-gap: 12px;
    --dvg-radius: 16px;
    --dvg-text: #18181b;
    --dvg-muted: #71717a;
    --dvg-border: rgba(24,24,27,.10);
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}
.dvg-gallery *{box-sizing:border-box}
.dvg-main-wrap{width:100%}
.dvg-main{
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:var(--dvg-radius);
    background:#09090b;
    box-shadow:0 10px 35px rgba(0,0,0,.12);
}
.dvg-player{display:block;width:100%;height:100%;border:0;object-fit:contain;background:#09090b}
.dvg-main-title{
    margin:12px 2px 0;
    font-size:clamp(16px,1.6vw,22px);
    line-height:1.35;
    font-weight:700;
    color:var(--dvg-text);
}
.dvg-strip-wrap{width:100%;margin-top:14px;overflow:hidden}
.dvg-strip{
    width:100%;
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - (3 * var(--dvg-gap))) / 4);
    gap:var(--dvg-gap);
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 0 10px;
    scroll-snap-type:x proximity;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
}
.dvg-thumb{
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    color:inherit;
    text-align:start;
    cursor:pointer;
    scroll-snap-align:start;
    font:inherit;
}
.dvg-thumb-media{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:12px;
    background:#18181b;
    border:2px solid transparent;
    transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.dvg-thumb-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.dvg-thumb:hover .dvg-thumb-media img{transform:scale(1.04)}
.dvg-thumb:hover .dvg-thumb-media{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.12)}
.dvg-thumb.is-active .dvg-thumb-media{border-color:currentColor;box-shadow:0 0 0 2px rgba(255,255,255,.9) inset}
.dvg-play{
    position:absolute;
    inset:50% auto auto 50%;
    transform:translate(-50%,-50%);
    width:38px;
    height:38px;
    border-radius:999px;
    display:grid;
    place-items:center;
    padding-left:2px;
    background:rgba(0,0,0,.72);
    color:#fff;
    font-size:15px;
    line-height:1;
    backdrop-filter:blur(6px);
}
.dvg-thumb-fallback{display:grid;place-items:center;width:100%;height:100%;font-size:30px;color:#fff}
.dvg-thumb-title{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:7px 2px 0;
    min-height:2.6em;
    font-size:13px;
    line-height:1.3;
    font-weight:600;
    color:var(--dvg-text);
}
.dvg-thumb:focus-visible .dvg-thumb-media{outline:3px solid currentColor;outline-offset:2px}
.dvg-empty{
    padding:16px 18px;
    border:1px dashed rgba(24,24,27,.22);
    border-radius:12px;
    background:rgba(24,24,27,.035);
    color:#52525b;
    line-height:1.6;
    text-align:start;
}

@media (max-width: 767px){
    .dvg-gallery{--dvg-gap:6px;--dvg-radius:12px}
    .dvg-strip-wrap{margin-top:9px}
    .dvg-strip{padding-bottom:8px}
    .dvg-thumb-media{border-radius:8px;border-width:2px}
    .dvg-play{width:26px;height:26px;font-size:11px}
    .dvg-thumb-title{font-size:10px;margin-top:5px;min-height:2.4em}
    .dvg-main-title{margin-top:9px;font-size:16px}
}

@media (prefers-reduced-motion: reduce){
    .dvg-thumb-media,.dvg-thumb-media img{transition:none}
}