.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: 12.5px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: calc(-1 * var(--gutter));
}

.col {
    width: 100%;
    padding-inline: var(--gutter);
}

[style*="--w"] {
    width: 100%;
    max-width: calc((100% / 12) * var(--w));
}

@media (min-width: 576px){
    [style*="--w-sm"] {
        width: calc((100% / 12) * var(--w-sm));
        max-width: calc((100% / 12) * var(--w-sm));
    }
}

@media (min-width: 768px){
    [style*="--w-md"] {
        width: calc((100% / 12) * var(--w-md));
        max-width: calc((100% / 12) * var(--w-md));
    }
}

@media (min-width: 992px) {
    [style*="--w-lg"] {
        width: calc((100% / 12) * var(--w-lg));
        max-width: calc((100% / 12) * var(--w-lg));
    }
}

@media (min-width: 1024px) {
    [style*="--w-xl"] {
        width: calc((100% / 12) * var(--w-xl));
        max-width: calc((100% / 12) * var(--w-xl));
    }
}

@media (min-width: 1200px) {
    [style*="--w-xxl"] {
        width: calc((100% / 12) * var(--w-xxl));
        max-width: calc((100% / 12) * var(--w-xxl));
    }
}