* {
	margin: 0;
	padding: 0;
}

main {
	height: 100px;
	display: grid;
	grid-template-columns: minmax(0px, 10%) repeat(6, 1fr) minmax(0px, 10%);
	grid-template-rows: repeat(10, 50px);
	grid-gap: 20px;
}

div#head1 {
	grid-column: span 1;
	grid-row: span 1;
}

div#head2 {
	grid-column: span 2;
	grid-row: span 1;
	background-color: red;
}

div#head3 {
	grid-column: span 4;
	grid-row: span 1;
	background-color: red;
}

div#head4 {
	grid-column: span 1;
	grid-row: span 1;
}

div#hero {
	grid-column: 1/-1;
	background-color: red;
	grid-row: span 4;
}

div#call1 {
	grid-column: span 1;
	grid-row: span 2;
}

div#call2 {
	grid-column: span 2;
	background-color: red;
	grid-row: span 2;
}

div#call3 {
	grid-column: span 2;
	grid-row: span 2;
	background-color: red;
}

div#call4 {
	grid-column: span 2;
	grid-row: span 2;
	background-color: red;
}

div#call5 {
	grid-column: span 1;
	grid-row: span 2;
}

div#gallery1 {
	grid-column: span 1;
	grid-row: span 10;
}

div#gallery2 {
	grid-column: span 6;
	grid-row: span 10;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	grid-auto-rows: 100px;
	grid-gap: 20px;
	grid-auto-flow: dense;
}

div#gInner1 {
	grid-column: span 2;
	grid-row: span 2;
	background-color: red;
}

div#gInner2 {
	background-color: red;
	
}

div#gInner3 {
	grid-column: span 2;
	background-color: red;

}

div#gInner4 {
	grid-row: span 3;
	background-color: red;

}

div#gInner5 {
	grid-row: span 2;
	background-color: red;

}

div#gInner6 {
	grid-column: span 2;
	grid-row: span 2;
	background-color: red;

}

div#gInner7 {
	background-color: red;
	
}

div#gInner8 {
	background-color: red;
	
}

div#gInner9 {
	background-color: red;

}

div#gInner10 {
	grid-column: span 2;
	background-color: red;
	
}

div#gInner11 {
	background-color: red;
	
}

div#gInner12 {
	background-color: red;
	
}

div#gInner13 {
	background-color: red;
	
}

div#gallery3 {
	grid-column: span 1;
	grid-row: span 10;
}

footer {
	grid-column: 1/-1;
	height: 75px;
	background-color: red;
}


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

	main {
		grid-template-columns: repeat(12, 1fr);
	}
	
	div#head1, div#head4, div#call1, div#call5, div#gallery1, div#gallery3 {
		display: none;
	}

	div#head2 {
		grid-column: span 4;
	}

	div#head3 {
		grid-column: span 8;
	}

	div#call2 {
		grid-column: span 4;
	}

	div#call3 {
		grid-column: span 4;
		
	}

	div#call4 {
		grid-column: span 4;
	}

	div#gallery2 {
		grid-column: span 12;
	}
}

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

	div#head3 {
		grid-column: 1/-1;
		grid-row: 1/2;
	}

	div#head2 {
		grid-column: 1/-1;
		grid-row: 2/3;
	}

	div#hero {
		display: none;
	}

	div#call2 {
		grid-column: 1/-1;
	}

	div#call3 {
		grid-column: 1/-1;
	}

	div#call4 {
		grid-column: 1/-1;
	}
}