.grid-container {
	display: grid;
	grid-template-areas:
		'menu menu header header'
		'menu menu main main'
		'menu menu main main';
	gap: .5%;
	background-color: ;
	padding: 0%;
	width:90%;
	margin-left:auto;
	margin-right:auto;
}

.grid-container > div {
  background-color: ;
  padding: 1%;
  text-align: center;
}
.item1 { grid-area: header; }
.item1 h2 { margin:0%; float:left;}
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item3 p { text-align:left; margin:0%; }


@media screen and (max-width: 600px) {
	
	.grid-container {
	display: grid;
	grid-template-areas:
		'header header header header'
		'menu menu menu menu'
		'main main main main';
	gap: .5%;
	background-color: ;
	padding: 0%;
	width:90%;
	margin-left:auto;
	margin-right:auto;
}

.grid-container > div {
  background-color: ;
  padding: 1%;
  text-align: center;
}
.item1 { grid-area: header; }
.item1 h2 { margin:0%; float:none;}
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item3 p { text-align:center; margin:0%; }
	
	
	
	
	
}