* {
	margin: 0;
	padding: 0;
}

.grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	grid-template-areas:
	"title title"
	"header header"
	"sidebar sidebar"
	"content content"
	"footer footer";
	grid-gap: 30px;
}

.grid-err {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	grid-template-areas:
	"title-err title-err"
	"header-err header-err"
	"sidebar sidebar"
	"content content"
	"footer footer";
	grid-gap: 30px;
}

.title {
	grid-area: title;
	font-family: "Calibri", Times, serif;
	font-size: 20px;
	color: #3344DD;
}

.title-err {
	grid-area: title-err;
	font-family: "Calibri", Times, serif;
	font-size: 24px;
	color: #FF0000;
}

.header {
	grid-area: header;
	justify-self: center;
	font-family: "Calibri", Times, serif;
	font-size: 16px;
	color: #222222;
}

.header-err {
	grid-area: header-err;
	justify-self: center;
	font-family: "Calibri", Times, serif;
	font-size: 20px;
	color: #FF0000;
}

.sidebar {
	grid-area: sidebar;
	justify-self: left;
	font-family: "Calibri", Times, serif;
	font-size: 14px;
	color: #111111;
}

.content {
	grid-area: content;
	justify-self: left;
	font-family: "Calibri", Times, serif;
	font-size: 14px;
	color: #666666;
}

.footer {
	grid-area: footer;
	font-family: "Calibri", Times, serif;
	font-size: 12px;
	color: #3344DD;
}


.grid div:nth-child(even) {
//	background-color: #66aaff;
}

.grid div:nth-child(odd) {
//	background-color: #66aaff;
}

@media screen and (min-width: 600px) 
{
   .grid {
	display: grid;
	grid-template-columns: 1fr 200px 200px 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	grid-template-areas:
	". title title ."
	". header header ."
	". sidebar content ."
	". footer footer .";
   }

   .sidebar {
	grid-area: sidebar;
	justify-self: right;
   }

   .content {
	grid-area: content;
	justify-self: left;
   }


}