.site {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: 50px auto 50px;
	grid-template-areas:
		'header header header header header header header header header header header header'
		'left left middle middle middle middle middle middle middle middle right right'
		'footer footer footer footer footer footer footer footer footer footer footer footer'
		;
		height: 800px;
		grid-gap:.5em;
		font-size: .8em;
}



.header {
	grid-area:header;
	background-color: #8a8a8a;
	color:#141414;
	border-radius: 10px;
}

.left {
	grid-area:left;
	background-color: #5591be;
	color:#fff;
	border-radius: 10px;
}

.main {
	grid-area:middle;
	background-color: #479561;
	color:#141414;
	border-radius: 10px;
}

.right {
	grid-area:right;
	background-color: #aa6e41;
	color:#fff;
	border-radius: 10px;
}

.footer {
	grid-area:footer;
	background-color: #e5e619;
	color:#141414;
	border-radius: 10px;
}

h2 {
	display: flex;
	justify-content: center;
}

  

@media screen and (max-width: 800px) {
	.site {
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: 50px auto 50px 50px;
		grid-template-areas:
			'header header header header header header header header header header header header'
			'left left left middle middle middle middle middle middle middle middle middle'
			'right right right right right right right right right right right right'
			'footer footer footer footer footer footer footer footer footer footer footer footer'
			;
			height: 600px;
			grid-gap:.25em;
	}
}