.site {
	display: grid;
	grid-template-columns: repeat (12, 1fr);
	grid-template-rows:50px auto 50px;
	grid-height:800px;
	
	grid-template-areas:
		"masthead"
		"title main sidebar"
		"footer"
		;
		
}

.masthead {
	grid-area: "masthead";
	background-color: #00204a;
	color:#fff;
	grid-column: 1 / 12;
}

.page-title {
	grid-area:"title";
	grid-column:1 / 3;
	background-color: #00bbf0;
}

.main-content {
	grid-area:"main";
	grid-column: 3 / 10;
	background-color: #7c73e6;
	color:#ccc;
}

.sidebar {
	grid-area:"sidebar";
	grid-column: 10 / 12;
	background-color: #d9faff;
}

.footer-content {
	grid-area:"footer";
	grid-column: 1 / 12;
	background-color: #fff1c1;
}

@media screen and (max-width:800px){
	
	.site{
		grid-height:600px;
	}
	
	.page-title {
		grid-area:"title";
		grid-column:1 / 4;
	}

	.main-content {
		grid-area:"main";
		grid-column: 4 / 12;
	}
	
	.sidebar {
		grid-column:1 / 12;
		grid-row: 2 / 3;
	}