/* ==============================================================
CONTAINER
============================================================== */

.container{

max-width:var(--max-width);

margin:0 auto;

padding-left:var(--space-3);

padding-right:var(--space-3);

}


/* ==============================================================
SECTIONS
============================================================== */

.section{

margin-top:var(--space-7);

margin-bottom:var(--space-7);

}

.section-small{

margin-top:var(--space-5);

margin-bottom:var(--space-5);

}

.section-large{

margin-top:var(--space-8);

margin-bottom:var(--space-8);

}


/* ==============================================================
GRID SYSTEM
============================================================== */

.grid-2{

display:grid;

grid-template-columns:1fr 1fr;

gap:var(--space-6);

align-items:start;

}

.grid-3{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:var(--space-6);

}

.grid-center{

max-width:900px;

margin-left:auto;

margin-right:auto;

}


/* ==============================================================
CONTENT WIDTH HELPERS
============================================================== */

.text-width{

max-width:650px;

}

.content-width{

max-width:900px;

}

.narrow{

max-width:500px;

}


/* ==============================================================
ALIGNMENT HELPERS
============================================================== */

.offset-right{

margin-left:auto;

}

.offset-left{

margin-right:auto;

}

.center{

margin-left:auto;

margin-right:auto;

}

.text-center{

text-align:center;

}


/* ==============================================================
STACK SPACING (voor blocks)
============================================================== */

.stack > * + *{

margin-top:var(--space-3);

}

.stack-large > * + *{

margin-top:var(--space-5);

}


/* ==============================================================
RESPONSIVE
============================================================== */

@media(max-width:1024px){

.grid-3{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.grid-2,
.grid-3{

grid-template-columns:1fr;

gap:var(--space-5);

}

.section{

margin-top:var(--space-6);

margin-bottom:var(--space-6);

}

}

@media(max-width:480px){

.container{

padding-left:var(--space-2);

padding-right:var(--space-2);

}

}