.container,
.container-wide {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--page-padding);
}

.container {
    max-width: var(--container-max);
}

.container-wide {
    max-width: var(--container-wide-max);
}

.section {
    padding-block: var(--section-spacing);
}

@media (min-width: 480px) {
    :root {
        --page-padding: var(--space-20);
    }
}

@media (min-width: 768px) {
    :root {
        --page-padding: var(--space-24);
        --section-spacing: var(--space-96);
    }
}

@media (min-width: 1024px) {
    :root {
        --page-padding: var(--space-32);
        --section-spacing: var(--space-120);
        --panel-padding: var(--space-32);
    }
}

@media (min-width: 1440px) {
    :root {
        --section-spacing: var(--space-144);
    }
}