.site {
	display: grid;
	grid-template-columns:repeat(12, 1fr);
	grid-template-rows:50px auto 50px;
	height:800px;
	grid-gap:5px;
	text-align:center;
}

.masthead {
	background-color: #00204a;
	color:#fff;
	grid-column: 1 / 13;
	grid-row:1 / 2;
	border-radius:10px;
}

.page-title {
	background-color: #00bbf0;
	grid-column: 1 / 3;
	grid-row:2 / 3;
	border-radius:10px;
}

.main-content {
	background-color: #7c73e6;
	color:#ccc;
	grid-column: 3 / 11;
	grid-row:2 / 3;
	border-radius:10px;
}

.sidebar {
	background-color: #d9faff;
	grid-column: 11 / 13;
	grid-row:2 / 3;
	border-radius:10px;
}

.footer-content {
	background-color: #fff1c1;
	grid-column: 1 / 13;
	grid-row:3 / 4;
	border-radius:10px;
}
/* for tablet / medium screens */
@media screen and (max-width: 800px) {
	.site{
		grid-template-rows:50px auto 50px 50px;
		height:600px;
	}
	.page-title {
		grid-column: 1 / 4;
	}
	.main-content {
		grid-column: 4 / 13;
	}
	.sidebar {
		grid-column: 1 / 13;
		grid-row:3 / 4;
	}
	.footer-content {
		grid-row:4 / 5;
	}
}