/* 
.main-head {grid-area: header;}
.content {grid-area: content;}
.main-footer {grid-area: footer;}
 */
 
.wrapper {
	display: grid;
	grid-gap: 10px;
	grid-template-areas:
	"header"
	"content"
	"footer";
}
/* 
.wrapper {
	max-width: 1024px;
	margin: 0 auto;
}

.wrapper > * {
	border: 2px solid gainsboro;
	border-radius: 5px;
	padding: 10px;
}
*/

@media (min-width: 768px) {
	.wrapper {
		grid-template-columns: 1fr;
		grid-template-areas:
		"header "
		"content"
		"footer"
	}
}