.wbz-container,
.wbz-container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

@media (min-width: 575px) { .wbz-container { max-width: 575px; } }
@media (min-width: 768px) { .wbz-container { max-width: 768px; } }
@media (min-width: 992px) { .wbz-container { max-width: 992px; } }
@media (min-width: 1140px) { .wbz-container { max-width: 1140px; } }
@media (min-width: 1440px) { .wbz-container { max-width: 1440px; } }


.wbz-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
    margin-top: 0;
}

.wbz-row > * {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-top: 0;
}


/* Verticale gutters (gy-*) via padding-top */
.wbz-row.wbz-gy-0 > * { padding-top: 0; }
.wbz-row.wbz-gy-1 > * { padding-top: 0.25rem; }
.wbz-row.wbz-gy-2 > * { padding-top: 0.5rem; }
.wbz-row.wbz-gy-3 > * { padding-top: 1rem; }
.wbz-row.wbz-gy-4 > * { padding-top: 1.25rem; }
.wbz-row.wbz-gy-5 > * { padding-top: 1.5rem; }

/* Negative margin op de row om padding-top van eerste rij te compenseren */
.wbz-row.wbz-gy-1 { margin-top: -0.25rem; }
.wbz-row.wbz-gy-2 { margin-top: -0.5rem; }
.wbz-row.wbz-gy-3 { margin-top: -1rem; }
.wbz-row.wbz-gy-4 { margin-top: -1.25rem; }
.wbz-row.wbz-gy-5 { margin-top: -1.5rem; }


/* Alle kolombreedtes */
.wbz-col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.wbz-col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.wbz-col-3 { flex: 0 0 25%; max-width: 25%; }
.wbz-col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.wbz-col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
.wbz-col-6 { flex: 0 0 50%; max-width: 50%; }
.wbz-col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.wbz-col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.wbz-col-9 { flex: 0 0 75%; max-width: 75%; }
.wbz-col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.wbz-col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.wbz-col-12 { flex: 0 0 100%; max-width: 100%; }

/* Auto kolommen */
.wbz-col { flex: 1 0 0%; max-width: 100%; }
.wbz-col-auto { flex: 0 0 auto; width: auto; }

/* Responsive kolommen */
@media (min-width: 576px) {
    .sm\:wbz-col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
    .sm\:wbz-col-12 { flex: 0 0 100%; max-width: 100%; }
    .sm\:wbz-col-auto { flex: 0 0 auto; width: auto; }
    .sm\:wbz-col { flex: 1 0 0%; }
}

@media (min-width: 768px) {
    .md\:wbz-col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
    .md\:wbz-col-12 { flex: 0 0 100%; max-width: 100%; }
    .md\:wbz-col-auto { flex: 0 0 auto; width: auto; }
    .md\:wbz-col { flex: 1 0 0%; }
}

@media (min-width: 992px) {
    .lg\:wbz-col-12 { flex: 0 0 100%; max-width: 100%; }
    .lg\:wbz-col-auto { flex: 0 0 auto; width: auto; }
    .lg\:wbz-col { flex: 1 0 0%; }
}

@media (min-width: 1200px) {
    .xl\:wbz-col-12 { flex: 0 0 100%; max-width: 100%; }
    .xl\:wbz-col-auto { flex: 0 0 auto; width: auto; }
    .xl\:wbz-col { flex: 1 0 0%; }
}

@media (min-width: 1440px) {
    .xxl\:wbz-col-12 { flex: 0 0 100%; max-width: 100%; }
    .xxl\:wbz-col-auto { flex: 0 0 auto; width: auto; }
    .xxl\:wbz-col { flex: 1 0 0%; }
}


.wbz-flex { display: flex; }
.wbz-inline-flex { display: inline-flex; }
.wbz-items-start { align-items: flex-start; }
.wbz-items-center { align-items: center; }
.wbz-items-end { align-items: flex-end; }
.wbz-justify-start { justify-content: flex-start; }
.wbz-justify-center { justify-content: center; }
.wbz-justify-end { justify-content: flex-end; }
.wbz-text-left { text-align: left; }
.wbz-text-center { text-align: center; }
.wbz-text-right { text-align: right; }
.wbz-hidden { display: none; }

/* Responsive utilities */
@media (min-width: 576px) { .sm\:wbz-flex { display: flex; } .sm\:wbz-text-left { text-align: left; } }
@media (min-width: 768px) { .md\:wbz-flex { display: flex; } .md\:wbz-text-left { text-align: left; } }
@media (min-width: 992px) { .lg\:wbz-flex { display: flex; } .lg\:wbz-text-left { text-align: left; } }
@media (min-width: 1200px) { .xl\:wbz-flex { display: flex; } .xl\:wbz-text-left { text-align: left; } }
@media (min-width: 1440px) { .xxl\:wbz-flex { display: flex; } .xxl\:wbz-text-left { text-align: left; } }