/* Three demos share one overview; phones read them from top to bottom. */
.demo-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; padding-block:55px; align-items:start; }
.demo-gallery > .demo-section { width:100%; min-width:0; margin:0; padding:0; }
.demo-gallery .section-heading { display:block; margin-bottom:18px; }
.demo-gallery .section-heading h2 { font-size:24px; line-height:1.35; margin:0 0 12px; letter-spacing:0; }
.demo-gallery .section-heading .eyebrow { font-size:10px; margin-bottom:10px; letter-spacing:.8px; }
.demo-gallery .section-heading > p { font-size:13px; line-height:1.8; margin:0; min-height:100px; }
.demo-gallery .video-shell { border-radius:14px; }
.demo-gallery .video-label { padding:10px; gap:4px; flex-wrap:wrap; font-size:10px; min-height:58px; }
.demo-gallery .video-shell video { display:block; width:100%; aspect-ratio:16/9; }
.demo-gallery .video-caption { display:flex; flex-wrap:wrap; font-size:10px; gap:3px 8px; margin-top:10px; }
.demo-gallery .fine { font-size:10px; line-height:1.8; margin-top:8px; }
@media(max-width:760px) {
 .demo-gallery { grid-template-columns:1fr; gap:38px; padding-block:36px; }
 .demo-gallery .section-heading > p { min-height:0; font-size:14px; }
 .demo-gallery .section-heading h2 { font-size:25px; }
 .demo-gallery .video-label { font-size:12px; min-height:0; }
 .demo-gallery .fine,.demo-gallery .video-caption { font-size:12px; }
}

/* Full-size demos remain readable on desktop as well as phones. */
.demo-gallery { grid-template-columns:minmax(0,1fr); gap:64px; max-width:1100px; }
.demo-gallery .section-heading { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:end; }
.demo-gallery .section-heading h2 { font-size:clamp(26px,3vw,36px); margin:0; }
.demo-gallery .section-heading > p { min-height:0; font-size:15px; }
.demo-gallery .video-label { min-height:0; font-size:13px; padding:14px 18px; justify-content:space-between; }
.demo-gallery .fine,.demo-gallery .video-caption { font-size:12px; }
@media(max-width:760px) {
 .demo-gallery { gap:40px; }
 .demo-gallery .section-heading { display:block; }
 .demo-gallery .section-heading h2 { margin-bottom:12px; }
 .demo-gallery .section-heading > p { font-size:14px; }
 .demo-gallery .video-label { font-size:12px; padding:12px; }
}