/**
 * @file
 * Layout Grid & Macro Container Structuur
 */

/* --- Sectie: Verticale ritmiek --- */
.section {
    width: 100%;
    display: block;
    position: relative;
    padding-block: var(--spacing-xl);
}

@media (min-width: 992px) {
    .section {
        padding-block: var(--spacing-xxl);
    }
}

/* --- Container: Horizontale begrenzing --- */
.container {
    margin-inline: auto;
    width: 100%;
    padding-inline: var(--spacing-m);
    transition: max-width var(--transition-speed) ease;
}

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