.page-mixes .mix-collage-section{padding:24px clamp(20px,3vw,48px) 40px}
.mix-collage{display:grid;gap:8px}
.mix-collage-group{display:grid;gap:8px;min-width:0}
.mix-collage-group.complete{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));aspect-ratio:16/9;grid-template-areas:"a a b c" "a a d e" "f f g g" "f f g g"}
.mix-collage-group.complete:nth-child(even){grid-template-areas:"b c a a" "d e a a" "g g f f" "g g f f"}
.mix-collage-group.complete>.video-card:nth-child(1){grid-area:a}.mix-collage-group.complete>.video-card:nth-child(2){grid-area:b}.mix-collage-group.complete>.video-card:nth-child(3){grid-area:c}.mix-collage-group.complete>.video-card:nth-child(4){grid-area:d}.mix-collage-group.complete>.video-card:nth-child(5){grid-area:e}.mix-collage-group.complete>.video-card:nth-child(6){grid-area:f}.mix-collage-group.complete>.video-card:nth-child(7){grid-area:g}
.mix-collage-group.partial{grid-template-columns:repeat(var(--tiles),minmax(0,1fr));grid-auto-rows:auto}
.mix-collage-group.tiles-1{--tiles:1}.mix-collage-group.tiles-2{--tiles:2}.mix-collage-group.tiles-3{--tiles:3}.mix-collage-group.tiles-4{--tiles:4}.mix-collage-group.tiles-5{--tiles:5}.mix-collage-group.tiles-6{--tiles:6}
.mix-collage .video-card{min-width:0;min-height:0;margin:0;overflow:hidden;background:#102533;border-radius:0}
.mix-collage .video-card>h3,.mix-collage .video-card>.muted,.mix-collage .time,.mix-collage .video-interactions{display:none}
.mix-collage .video-thumb{display:block;position:relative;width:100%;height:100%;aspect-ratio:auto;margin:0;overflow:hidden;border-radius:0;container-type:size}
.mix-collage-group.partial .video-thumb{height:auto;aspect-ratio:16/9}
/* YouTube 480x360 cached thumbnails contain a 16:9 picture inside black bars. Trim only that matte. */
.mix-collage .video-thumb img{position:absolute;left:50%;top:50%;width:min(100cqw,177.7778cqh);height:auto;aspect-ratio:4/3;object-fit:contain;transform:translate(-50%,-50%)}
.mix-collage .play-disc{opacity:0;transition:opacity .15s}
.mix-collage .video-thumb:hover .play-disc,.mix-collage .video-thumb:focus-visible .play-disc{opacity:1}
.mix-collage .video-thumb:focus-visible{outline:3px solid #65d9ff;outline-offset:-3px}
@media(max-width:600px){.mix-collage,.mix-collage-group{gap:5px}.mix-collage-group.complete{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));aspect-ratio:32/45;grid-template-areas:"a a" "a a" "b c" "d e" "f g"}.mix-collage-group.complete:nth-child(even){grid-template-areas:"a a" "a a" "c b" "e d" "g f"}.mix-collage-group.partial{grid-template-columns:repeat(min(var(--tiles),3),minmax(0,1fr))}.mix-collage .play-disc{opacity:.8}}
@media(prefers-reduced-motion:reduce){.mix-collage .play-disc{transition:none}}