body {
	font-family: system-ui, sans-serif;
	font-size: 100%;
	line-height: 144%;
	margin: 0;
	color:#333;
}

.grid-main {
	display: grid;
	grid-template-columns: repeat(12,1fr);
	grid-template-rows: repeat(3,auto);
	grid-template-areas:
		"hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr" 
	  /*"mn  mn  mn  mn  mn  mn  mn  mn  mn  mn  mn  mn"*/
		"asd asd asd asd asd asd asd asd asd asd asd asd"
		"ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr"
	   ;
	gap: 1em;
	padding: 1em;
}

header {
	min-height: 30vh ;
	background-color: #91B8F2;
	/* display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center; */
	
	/*grid-column: 1 / -1; ----- define bounds */
	grid-area: hdr;
	display: grid;
	grid-template-columns: repeat(1, minmax(200px,1fr) );
	gap: 1em;
	padding: 1em;
}
nav{
	grid-column: -2/-1;
}
main{
	/*grid-column: 1 / -1;*/
	grid-area:mn;
}

.grid-parent {
	background-color: #333;
	display: grid;
	grid-template-columns: subgrid;
	gap: 1em;
	padding: 1em;
}

.card {
	background-color: white;
	padding: .5em;
}
aside{
	grid-area: asd;
}
footer{
	/*grid-column: 1 / -1;*/
	grid-area:ftr;
}

/* Media Queries ------------------------*/

@media (min-width: 550px) {  /* mid-width screen */
	header {
		grid-template-columns: repeat(2, minmax(200px,1fr) );
	}
}

@media (min-width: 850px) {  /* wide screen */
    .grid-main {
	    grid-template-areas: 
	    "hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr"
		"mn  mn  mn  mn  mn  mn  asd asd asd asd asd asd"
		"ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr";
	}
	.card{
		grid-column: span 3;
	}
	header {
		grid-template-columns: repeat(3, minmax(200px,1fr) );
	}

}