.grid-container{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
	"header"
	"section1"
	"section2"
	"section3"
	"footer";
}

.header{
	grid-area: header;
}

.banner{
	grid-area: section1;
}

.intro{
	grid-area: section2;	
}

.aanbod{
	grid-area: section3;
	grid-auto-rows: max-content;
}

.footer{
	grid-area: footer;
}

header{
	display: flex;
	flex-direction: row;
}

.rightHeaderSection{
	display: flex;
	flex-direction: row;
	flex-grow: 2;
	justify-content: flex-end;
}

.aanbod{
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 15px;
	grid-template-areas:
	"article1"
	"article2"
	"article3";
}

#brood{
	grid-area: article1;
}

#fruit{
	grid-area: article2;
}

#beleg{
	grid-area: article3;
}

/* - - - - - - - - - - - - - - - - - - - - - -
:: Medium devices - iPads, Tablets / Potrait 
   mode (768PX and up)
- - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (min-width: 768px){
	.aanbod{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-template-areas:
		"article1 article1"
		"article2 article3";
	}
}

/* - - - - - - - - - - - - - - - - - - - - - -
:: Medium devices 2 - iPads, Tablets / 
   Landscape mode (1024PX and up)
- - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (min-width: 1024px){
	.storeInfo{
		display: flex;
		flex-flow: row; /* de twee kolomen in 
		de grijze footer */
	}
}

/* - - - - - - - - - - - - - - - - - - - - - -
:: Large devices - Dekstops (1280PX and up)
- - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (min-width: 1280px){
	.leftHeaderSection{
		display: flex;
		flex-direction: row;
		flex-grow: 4;
	}

	nav ul{
		display: flex;
		flex-flow: row;
	}

	.aanbod{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr;
		grid-template-areas:
		"article1 article2 article3";
	}
}