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

.grid-main {
	display: grid;
	grid-template-columns: repeat(12,1fr);
	grid-template-rows: repeat(4,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: #deb;
	/* 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;  /* always at the right */
}

main {
	/* grid-column: 1 / -1;  -- define bounds */
	grid-area: mn;
}

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

.card {
	background-color: #ba93;
	padding: .5em;
	grid-column: 1 / -1;
}

aside {
	grid-area: asd;
}

footer {
	/* grid-column: span 12;  --define bounds */
	grid-area: ftr;
}

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

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

@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) );
	}

}