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

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

.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 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;
	display: grid;
	grid-template-columns: repeat(1, minmax(200px,1fr));
	gap: 1em;
	padding: 1em;
}

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

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

.card {
	background-color: #ba93;
	padding: .5em;
}

footer {
	grid-column: span 12;
}

@media (min-width: 550px) {
	.grid-parent {
		grid-template-columns: repeat(2, minmax(200pax,1fr));
	}
}

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