/* A more compact playground: original media and order, with more space around the collection. */
.random-page .gallery{max-width:1080px;padding:28px 24px 0}
.random-page .media-row{gap:18px;margin-bottom:18px}
.random-page .media-row .card{height:330px}
.random-page .gallery-end{max-width:1080px;padding:26px 24px 48px}
@media(min-width:1600px){.random-page .gallery,.random-page .gallery-end{max-width:1160px}.random-page .media-row .card{height:350px}}
@media(max-width:700px){.random-page .gallery{padding:22px 7% 0}.random-page .media-row{gap:16px;margin-bottom:16px}.random-page .media-row .card{height:auto}.random-page .gallery-end{padding:22px 7% 42px}}

/* Live, focusable motion studies. The complete square viewport scales as a unit. */
.random-page .media-row.motion-studies .motion-study-card{position:relative;flex:1 1 0%;height:auto;aspect-ratio:1;overflow:hidden;background:#e9ece6}
.motion-study-card iframe{position:absolute;inset:0;width:700px;height:700px;max-width:none;border:0;transform-origin:0 0;display:block}
@media(max-width:700px){.random-page .media-row.motion-studies{flex-direction:column}.random-page .media-row.motion-studies .motion-study-card{flex:none;width:100%}}

/* No full-row oversized tiles; square interactive studies stay compact too. */
.random-page #ember-survey,.random-page #ember-motion{flex:none!important;width:min(100%,440px);height:auto!important;max-height:none;aspect-ratio:4/3!important;margin-inline:auto}
.random-page #ember-survey img,.random-page #ember-motion video{width:100%;height:100%;object-fit:contain}
.random-page .media-row.motion-studies{justify-content:center}
.random-page .media-row.motion-studies .motion-study-card{max-width:330px;max-height:330px}
@media(min-width:1600px){.random-page .media-row.motion-studies .motion-study-card{max-width:350px;max-height:350px}}
@media(max-width:700px){.random-page .media-row .card{max-height:330px}.random-page .media-row.motion-studies{align-items:center}.random-page .media-row.motion-studies .motion-study-card{max-width:330px;max-height:330px}}
/* Let just the two interactive studies fill their existing gallery row. */
@media(min-width:701px){.random-page .media-row.motion-studies .motion-study-card{max-width:none;max-height:none}}
