.site {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 50px auto 50px;
	grid-template-areas: 
	'header header header header header header header header header header header header'
	'left left main main main main main main main main right right'
	'footer footer footer footer footer footer footer footer footer footer footer footer';
	grid-gap: .5em;
	height: 800px;
	text-align: center;
	color: #000;
}

.masthead {
	grid-area: right;
	background-color: #95b8e7;
}

.page-title {
	grid-area: header;
	background-color: #00bbf0;
}

.main-content {
	grid-area: main;
	background-color: #7c73e6;
}

.sidebar {
	grid-area: left;
	background-color: #d9faff;
}

.footer-content {
	grid-area: footer;
	background-color: #fff1c1;
}
@media screen and (max-width:800px){
	.site {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 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 main main main main main main main main main'
	'right right right right right right right right right right right right'
	'footer footer footer footer footer footer footer footer footer footer footer footer';
	grid-gap: .5em;
	height: 600px;
	text-align: center;
	color: #000;
}	
}