/*------------------------------------*\
    ROWS, COLS, WRAP
\*------------------------------------*/

div, section, header, footer
{
	bborder: 1px solid black;
}
.wrap,
.wrap-md,
.wrap-sm
{
	padding: 0;
    margin: 0 auto;
    position: relative;
	bborder: 1px solid red;
}

.row
{
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap); /* Ruimte tussen de kolommen */
    bborder: 1px solid blue;
    height: 100%;
	
}
.row.nogap {
    gap: 0 !important;
}
.spread {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Optioneel: verticale uitlijning */
    width: 100%; /* Zorgt ervoor dat het element de volle breedte benut */
}



nav ul
{
	display: flex;
    justify-content: end;
    list-style: none;
}
nav ul li a
{
	padding: 5px 10px;
    font-weight: 700;
    text-decoration: none !important;
}
section
{
	padding: 2.0em 0;
}
.v-center {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Kolom-indeling voor zowel rijen als losse divs */
/* Voor div of li binnen de verschillende kolommen */
.col1, .row-col1 > div, .row-col1 > li { flex: 1 1 calc(100% - var(--gap)); }
.col2, .row-col2 > div, .row-col2 > li { flex: 1 1 calc(50% - var(--gap)); }
.col3, .row-col3 > div, .row-col3 > li { flex: 1 1 calc(33.33% - var(--gap)); }
.col4, .row-col4 > div, .row-col4 > li { flex: 1 1 calc(25% - var(--gap)); }
.col5, .row-col5 > div, .row-col5 > li { flex: 1 1 calc(20% - var(--gap)); }
.col6, .row-col6 > div, .row-col6 > li { flex: 1 1 calc(16.66% - var(--gap)); }
.col7, .row-col7 > div, .row-col7 > li { flex: 1 1 calc(14.28% - var(--gap)); }
.col8, .row-col8 > div, .row-col8 > li { flex: 1 1 calc(12.5% - var(--gap)); }
.col9, .row-col9 > div, .row-col9 > li { flex: 1 1 calc(11.11% - var(--gap)); }
.col10, .row-col10 > div, .row-col10 > li { flex: 1 1 calc(10% - var(--gap)); }
.col11, .row-col11 > div, .row-col11 > li { flex: 1 1 calc(9.09% - var(--gap)); }
.col12, .row-col12 > div, .row-col12 > li { flex: 1 1 calc(8.33% - var(--gap)); }

.col2b, .row-col2b > div, .row-col2b > li { flex: 0 0 calc(75% - var(--gap)); }
.col3b, .row-col3b > div, .row-col3b > li { flex: 1 1 calc(66.66% - var(--gap)); }
.col3b, .row-col3b > div, .row-col3b > li { flex: 1 1 calc(60.66% - var(--gap)); }

/* Zorg dat kolommen niet te klein worden */
.row > div, .col1, .col2, .col2b, .col3, .col4, .col5, .col6, 
.col7, .col8, .col9, .col10, .col11, .col12 {
    min-width: 50px;
}

@media (max-width: 800px) {
	
	
 /* Zorg ervoor dat alle kolommen 1 t/m 12 op mobiel onder elkaar staan */
    .row,
    .row-col1,
    .row-col2,
    .row-col3,
    .row-col4,
    .row-col5,
    .row-col6,
    .row-col7,
    .row-col8,
    .row-col9,
    .row-col10,
    .row-col11,
    .row-col12,
    .row-custom-1,
    .row-col2b,
    .row-col3b
    {
        flex-direction: column;
    }
	/* Als .keep-cols wordt toegevoegd, behoudt het de kolomstructuur */
    .row.keep-cols {
        flex-direction: row;
        flex-wrap: wrap;
    }
    /* Optioneel: Zorg ervoor dat losse .colX ook 100% breed worden */
    .col1,
    .col2,
    .col2b,
    .col3b,
    .col3,
    .col4,
    .col5,
    .col6,
    .col7,
    .col8,
    .col9,
    .col10,
    .col11,
    .col12 {
        width: 100%;
    }
	.stack {
		display: flex;
		flex-direction: column !important;
	}
	

	
}