/**

Wux Grid css 2.0

Wux grid gebruiken:

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

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

:root {
    --inline-spacing: 1.8rem;
}

/*** ---------- Containers ---------- ***/
.container, .container-fluid { --wpb-width: var(--container-width); width: 100%; max-width: var(--wpb-width); margin-left: auto; margin-right: auto; padding-left: var(--inline-spacing); padding-right: var(--inline-spacing); position: relative; }

@media (min-width: 576px) {
    body { --wp--style--global--content-size: var(--container-width--sm); } 
    .container { --wpb-width: var(--container-width--sm); }
}

@media (min-width: 768px) {
    body { --wp--style--global--content-size: var(--container-width--md); } 
    .container { --wpb-width: var(--container-width--md); }
}

@media (min-width: 992px) {
    body { --wp--style--global--content-size: var(--container-width--lg); } 
    .container { --wpb-width: var(--container-width--lg); }
}

@media (min-width: 1200px) {
    body { --wp--style--global--content-size: var(--container-width--xl); } 
    .container { --wpb-width: var(--container-width--xl); }

    .container.container--small { --wpb-width: 960px; }
    .container.container--medium { --wpb-width: 1030px; }
}

@media (min-width: 1400px) {
    body { --wp--style--global--content-size: var(--container-width--xxl); } 
    .container { --wpb-width: var(--container-width--xxl); }

    .container.container--small { --wpb-width: 960px; }
    .container.container--medium { --wpb-width: 1140px; }
}

@media (min-width: 1600px) {
    body { --wp--style--global--content-size: var(--container-width--xxxl); } 
    .container { --wpb-width: var(--container-width--xxxl); }

    .container.container--small { --wpb-width: 960px; }
    .container.container--medium { --wpb-width: 1140px; }
    .container.container--large { --wpb-width: 1500px; }
}

/*** ---------- Utilities ---------- ***/
.row { --inline-spacing: 1rem; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); margin-inline: calc(var(--inline-spacing) * -1); row-gap: 2rem }
.row > .col { grid-column: span 12; padding-inline: var(--inline-spacing); }

.row.gap--32 { --inline-spacing: 1.6rem; row-gap: calc(var(--inline-spacing) * 2); }

.align-start, .align-top { align-items: start; }
.align-center { align-items: center; }
.align-end, .align-bottom { align-items: end; }

.justify-start { justify-content: start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: end; }
.justify-between { justify-content: space-between; }

.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; }
}

.col--12 { grid-column: span 12; }

@media (min-width: 576px) {
    .col.col--sm-2 { grid-column:span 2 } 
    .col.col--sm-3 { grid-column: span 3 } 
    .col.col--sm-4 { grid-column: span 4 } 
    .col.col--sm-5 { grid-column: span 5 } 
    .col.col--sm-6 { grid-column: span 6 } 
    .col.col--sm-7 { grid-column: span 7 } 
    .col.col--sm-8 { grid-column: span 8 } 
    .col.col--sm-9 { grid-column: span 9 } 
    .col.col--sm-10 { grid-column: span 10 } 
    .col.col--sm-11 { grid-column: span 11; }
    .col.col--sm-12 { grid-column: span 12; }
}

@media (min-width: 768px) {
    .col.col--md-2 { grid-column:span 2 } 
    .col.col--md-3 { grid-column: span 3 } 
    .col.col--md-4 { grid-column: span 4 } 
    .col.col--md-5 { grid-column: span 5 } 
    .col.col--md-6 { grid-column: span 6 } 
    .col.col--md-7 { grid-column: span 7 } 
    .col.col--md-8 { grid-column: span 8 } 
    .col.col--md-9 { grid-column: span 9 } 
    .col.col--md-10 { grid-column: span 10 } 
    .col.col--md-11 { grid-column: span 11 } 
    .col.col--md-12 { grid-column: span 12 } 
}

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

    .row.gap--lg-32 { --inline-spacing: 1.6rem; }
}

@media (min-width: 1200px) {
    .col.col--xl-2 { grid-column:span 2 }
    .col.col--xl-3 { grid-column: span 3 } 
    .col.col--xl-4 { grid-column: span 4 } 
    .col.col--xl-5 { grid-column: span 5 } 
    .col.col--xl-6 { grid-column: span 6 } 
    .col.col--xl-7 { grid-column: span 7 } 
    .col.col--xl-8 { grid-column: span 8 } 
    .col.col--xl-9 { grid-column: span 9 } 
    .col.col--xl-10 { grid-column: span 10 } 
    .col.col--xl-11 { grid-column: span 11 }

    .row.gap--xl-64 { --inline-spacing: 3.2rem; }
}

@media (min-width: 1400px) {
    .col.col--xxl-2 { grid-column:span 2 }
    .col.col--xxl-3 { grid-column: span 3 } 
    .col.col--xxl-4 { grid-column: span 4 } 
    .col.col--xxl-5 { grid-column: span 5 } 
    .col.col--xxl-6 { grid-column: span 6 } 
    .col.col--xxl-7 { grid-column: span 7 } 
    .col.col--xxl-8 { grid-column: span 8 } 
    .col.col--xxl-9 { grid-column: span 9 } 
    .col.col--xxl-10 { grid-column: span 10 } 
    .col.col--xxl-11 { grid-column: span 11 }
}