/*GRID SETUP*/
body {
	display: grid;
	grid-template-areas: "hero"
						 "main"
						 "footer";
}

body>div {
	grid-area: hero;
}

header {
	grid-area: header;
}

main {
	grid-area: main;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

footer {
	grid-area: footer;
}

/*END OF GRID SETUP*/

/*------------------------------------------------------------------------------------*/

main {
	height: auto;
	margin: 40px 10% 40px 10%;
}

main>div {
	margin: 10px 10px;
}

footer {
	/*margin-top: 40px;*/
}


@media only screen and (max-width: 1000px) {

	main {
		grid-template-columns: 1fr 1fr;
	}
}

@media only screen and (max-width: 500px) {

	main {
		grid-template-columns: 1fr;
	}
}