.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--container-padding);
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
}

.columns-1 {
    grid-template-columns: var(--columns-1);
}

.columns-2 {
    grid-template-columns: 1fr;
}

.columns-3 {
    grid-template-columns: 1fr;
}

.columns-4 {
    grid-template-columns: 1fr;
}

@media screen and (min-width: 40rem) {
    .columns-2 {
        grid-template-columns: var(--columns-2);
    }
    .columns-3 {
        grid-template-columns: var(--columns-2);
    }
    .columns-4 {
        grid-template-columns: var(--columns-2);
    }
}

@media screen and (min-width: 72rem) {
    .columns-3 {
        grid-template-columns: var(--columns-3);
    }
    .columns-4 {
        grid-template-columns: var(--columns-4);
    }
}

.text-center {
    text-align: center;
}

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