/* UQ / Demo */
.uq-demo-grid{display:grid;gap:28px}
@media(min-width:800px){.uq-demo-grid{grid-template-columns:1fr 1fr}}
.uq-demo-grid .uq-figure{aspect-ratio:var(--demo-ratio,4/3)}
.uq-figure figcaption{position:absolute;left:0;bottom:0;background:color-mix(in srgb, var(--uq-ink) 82%, transparent);color:var(--uq-cream);font-family:var(--uq-font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:0 var(--uq-r) 0 0}
/* Autoplaying loop video sits in the same frame as a photo would. */
.uq-demo-video{display:block;width:100%;height:100%;object-fit:cover}
/* Whole graphic inside the frame; the cream ground matches the infographics'
   own background, so the side gaps read as part of the artwork. */
.uq-demo-grid .uq-figure.uq-fit--zmiesc{background:var(--uq-cream)}
.uq-demo-grid .uq-fit--zmiesc img,.uq-demo-grid .uq-fit--zmiesc .uq-demo-video{object-fit:contain}