@charset UTF-8;

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

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

nav {
		grid-column: -2/-1;
}

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

footer {
	grid-column: span 12; 
	grid-area: ftr;
}


aside {
	grid-area: asd;
}

.grid-main {
	display: grid;
	grid-template-columns: repeat(12,1fr);
	gap: 1em;
	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";
	padding: 1em;
}

.grid-parent {
	background-color: #eee;
	display: grid;
	grid-template-columns: repeat(1, minmax(200px,1fr) );
	gap: 1em;
	grid-template: subgrid;
	padding: 1em;
}

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

@media (min-width: 550px) {
	.grid-parent {
		grid-template-columns: repeat(2, minmax(200px,1fr) );
	}
	
	.card {
		grid-column: span 3;
	}
	
@media (min-width: 850px) {
	.grid-main: {
		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";
	}
	.grid-parent,header {
		grid-template-columns: repeat(3, minmax(200px,1fr) );
	}

	.card {
		grid-column: span 3;
	}
}