/* Shared layout system */
:root {
    --site-max-width: 1400px;
    --site-padding-x: 24px;
    --section-padding-y: 80px;
}

.container,
.main-container,
.cs-container,
.cs-hero-container {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-padding-x);
    padding-right: var(--site-padding-x);
}

.container {
    box-sizing: border-box;
}

.home-page .container {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

.home-page .hero {
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    :root {
        --site-padding-x: 20px;
        --section-padding-y: 56px;
    }

    .home-page .container {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@media (max-width: 480px) {
    :root {
        --site-padding-x: 16px;
        --section-padding-y: 48px;
    }
}