/**

Wux Grid css 1.0

Wux grid gebruiken:

// Dit is handig voor kolommen met verschillende breedtes
<div class="wpb-row">
<div class="wpb-col--12 cols-md-6 cols-xl-4">

</div>
<div class="wpb-col--12 wpb-col--md-6 wpb-col--xl-4">

</div>
<div class="wpb-col--12 wpb-col--md-6 wpb-col--xl-4">

</div>
</div>

of

// Dit is handig wanneer je kolommen allemaal hetzelfde zijn.
<div class="d-grid d-grid--md-6 d-grid--xl-4 g-10">
<div>

</div>
<div>

</div>
<div>

</div>
</div>

 **/

/*** ---------- Utilities ---------- ***/

.d-grid { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); }

.wpb-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }

.order-0 { order: 0; }
.order-1 { order: 1; }

@media (min-width: 576px) {
    .order-sm-0 { order: 0; }
    .order-sm-1 { order: 1; }
}

@media (min-width: 768px) {
    .order-md-0 { order: 0; }
    .order-md-1 { order: 1; }
}

@media (min-width: 992px) {
    .order-lg-0 { order: 0; }
    .order-lg-1 { order: 1; }
}

.align-start, .align-top { -webkit-box-align: start; -ms-flex-align: start; align-items: start; }
.align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.align-end, .align-bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: end; }

.justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; }
.justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; }
.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.flex-wrap { flex-wrap: wrap; }

/*** ----- Gutters ----- ***/

.g-20 { column-gap: 2rem; row-gap: 2rem; }

.g-24 { column-gap: 2.4rem; row-gap: 2.4rem; }

@media (min-width: 768px) {
    .g-md-48 { column-gap: 4.8rem; row-gap: 4.8rem; }
}

@media (min-width: 992px) {
    .g-lg-32 { column-gap: 3.2rem; row-gap: 3.2rem; }

    .g-lg-64 { column-gap: 6.4rem; row-gap: 6.4rem; }
}

/*** ----- Columns ----- ***/
.wpb-col--12 { grid-column: span 12; }

@media (min-width: 992px) {
    .wpb-col--lg-9 { grid-column: span 9; }
    .wpb-col--lg-8 { grid-column: span 8; }
    .wpb-col--lg-7 { grid-column: span 7; }
    .wpb-col--lg-6 { grid-column: span 6; }
    .wpb-col--lg-5 { grid-column: span 5; }
    .wpb-col--lg-4 { grid-column: span 4; }
    .wpb-col--lg-3 { grid-column: span 3; }
}

@media (min-width: 1200px) {
    .wpb-col--xl-8 { grid-column: span 8; }
    .wpb-col--xl-4 { grid-column: span 4; }
}

.cols-1 { --gc: 1; }
.cols-2 { --gc: 2; }
.cols-3 { --gc: 3; }
.cols-4 { --gc: 4; }
.cols-5 { --gc: 5; }
.cols-6 { --gc: 6; }
.cols-7 { --gc: 7; }
.cols-8 { --gc: 8; }
.cols-9 { --gc: 9; }
.cols-10 { --gc: 10; }
.cols-11 { --gc: 11; }
.cols-12 { --gc: 12; }

@media (min-width: 576px) {
    .cols-sm-1 { --gc: 1; }
    .cols-sm-2 { --gc: 2; }
    .cols-sm-3 { --gc: 3; }
    .cols-sm-4 { --gc: 4; }
    .cols-sm-5 { --gc: 5; }
    .cols-sm-6 { --gc: 6; }
    .cols-sm-7 { --gc: 7; }
    .cols-sm-8 { --gc: 8; }
    .cols-sm-9 { --gc: 9; }
    .cols-sm-10 { --gc: 10; }
    .cols-sm-11 { --gc: 11; }
    .cols-sm-12 { --gc: 12; }
}

@media (min-width: 768px) {
    .cols-md-1 { --gc: 1; }
    .cols-md-2 { --gc: 2; }
    .cols-md-3 { --gc: 3; }
    .cols-md-4 { --gc: 4; }
    .cols-md-5 { --gc: 5; }
    .cols-md-6 { --gc: 6; }
    .cols-md-7 { --gc: 7; }
    .cols-md-8 { --gc: 8; }
    .cols-md-9 { --gc: 9; }
    .cols-md-10 { --gc: 10; }
    .cols-md-11 { --gc: 11; }
    .cols-md-12 { --gc: 12; }
}

@media (min-width: 992px) {
    .cols-lg-1 { --gc: 1; }
    .cols-lg-2 { --gc: 2; }
    .cols-lg-3 { --gc: 3; }
    .cols-lg-4 { --gc: 4; }
    .cols-lg-5 { --gc: 5; }
    .cols-lg-6 { --gc: 6; }
    .cols-lg-7 { --gc: 7; }
    .cols-lg-8 { --gc: 8; }
    .cols-lg-9 { --gc: 9; }
    .cols-lg-10 { --gc: 10; }
    .cols-lg-11 { --gc: 11; }
    .cols-lg-12 { --gc: 12; }
}

@media (min-width: 1200px) {
    .cols-xl-1 { --gc: 1; }
    .cols-xl-2 { --gc: 2; }
    .cols-xl-3 { --gc: 3; }
    .cols-xl-4 { --gc: 4; }
    .cols-xl-5 { --gc: 5; }
    .cols-xl-6 { --gc: 6; }
    .cols-xl-7 { --gc: 7; }
    .cols-xl-8 { --gc: 8; }
    .cols-xl-9 { --gc: 9; }
    .cols-xl-10 { --gc: 10; }
    .cols-xl-11 { --gc: 11; }
    .cols-xl-12 { --gc: 12; }
}

@media (min-width: 1400px) {
    .cols-xxl-1 { --gc: 1; }
    .cols-xxl-2 { --gc: 2; }
    .cols-xxl-3 { --gc: 3; }
    .cols-xxl-4 { --gc: 4; }
    .cols-xxl-5 { --gc: 5; }
    .cols-xxl-6 { --gc: 6; }
    .cols-xxl-7 { --gc: 7; }
    .cols-xxl-8 { --gc: 8; }
    .cols-xxl-9 { --gc: 9; }
    .cols-xxl-10 { --gc: 10; }
    .cols-xxl-11 { --gc: 11; }
    .cols-xxl-12 { --gc: 12; }
}

/*** ----- Margins ----- ***/

@media (min-width: 576px) {
}

@media (min-width: 768px) {
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}