.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--margin-mb);
    padding-right: var(--margin-mb);
}

.grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter-mb);
}

@media (min-width: 768px) {
    .container {
        padding-left: var(--margin-tb);
        padding-right: var(--margin-tb);
    }

    .grid-12 {
        gap: var(--gutter-tb);
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: var(--margin-dk);
        padding-right: var(--margin-dk);
    }

    .grid-12 {
        gap: var(--gutter-dk);
    }
}