.home-hero {
    /* Keep the terminal card aligned with the monitor center in the hero artwork.
       The monitor in the generated image is slightly right of the viewport center,
       so the correction scales gently with viewport width and is disabled on phones. */
    --home-hero-terminal-offset-x: clamp(10px, 1.15vw, 20px);
    --home-hero-terminal-width: min(
        1120px,
        calc(
            100vw
            - (var(--home-hero-edge) * 2)
            - var(--home-hero-terminal-offset-x)
            - var(--home-hero-terminal-offset-x)
        )
    );
}

.home-hero-slogans {
    left: calc(50% + var(--home-hero-terminal-offset-x));
    transform: translateX(-50%);
}

@media (min-width: 2021px) {
    .home-hero {
        --home-hero-terminal-offset-x: clamp(18px, 0.85vw, 24px);
    }
}

@media (max-width: 860px) {
    .home-hero {
        --home-hero-terminal-offset-x: 0px;
        --home-hero-terminal-width: min(100%, calc(100vw - (var(--home-hero-edge) * 2)));
    }
}