/* system-pages.css - phone and tablet layout of the hero on the 12 systems pages (#4068).
   Each page carries its own <style>; this file is linked after it, so these rules win.
   The screen inside .mockup-content is scaled to the frame's width by main.js (fitMockupFrames),
   so the frame here only sets its shape. */

@media (max-width: 900px) {
    .hero {
        min-height: 0;
        padding: 28px 16px 40px
        }
    .hero-container { gap: 28px }
    .mockup-content {
        height: auto;
        aspect-ratio: 16 / 10
        }
    }