/* ========================================================================== Fullscreen layout override — 3.3a BmcCoupledThreeVideoScrubber Loaded after custom.css / index-CrlCel75.css in , so it wins the cascade on equal-specificity rules without needing !important. ========================================================================== */ body { margin: 0; } /* Wrapper takes the place of .module-section / sidebar layout. Nothing here caps the width, so the component's own width:100% (from custom.css) fills the actual viewport instead of a constrained reading column. */ .fullscreen-wrapper { display: flex; flex-direction: column; align-items: center; width: 100%; box-sizing: border-box; padding: var(--spacing-xl) var(--spacing-page-margins); gap: var(--spacing-m); } /* Controls panel: kept at its normal (non-fullscreen) width and centered under the bigger media, per your call. */ div.bmcExternalControls { max-width: 700px; margin: 0 auto; } .figure-caption { max-width: 700px; text-align: center; margin: 0 auto; } /* Stack the two panels on narrow screens instead of squeezing them to near-nothing at 50% each. */ @media (max-width: 900px) { .fullscreen-wrapper { padding: var(--spacing-l) var(--spacing-m); } div.bmcCoupledThreeVideoScrubber { flex-direction: column; } div#viewer2.bmc_3dviewer, div.bmcCoupledThreeVideoScrubber div.bmcVideoLottieScrubber { width: 100% !important; } } .fullscreen-wrapper .mod-nav { padding-top: 0; }