.gridBanner {
	grid-area: Banner;
}

.gridIconTrek {
	grid-area: Trek;
}

.gridIconDwarf {
	grid-area: Dwarf;
}

.gridBio {
	grid-area: Bio;
}

.gridSJGPolicy {
	grid-area: SJG;
}

.gridIndex {
	grid-area: Index;
}

.gridBlank {
	grid-area: Blank;
}

.grid-Header {
	display: grid;
	grid-template-columns: auto auto 450px;
	grid-template-rows: auto auto auto 1fr;
	grid-gap: 0px;
	grid-template-areas:
		"Trek Banner Dwarf"
		"Index Index Bio"
		"Index Index SJG"
		"Index Index Blank";
 }

@media screen and (max-width: 1500px) {
	.grid-Header {
		grid-template-columns: auto 450px;
		grid-template-rows: auto auto auto auto auto auto 1fr;
		grid-template-areas:
			"Banner Dwarf"
			"Banner Dwarf"
			"Banner Trek"
			"Index Trek"
			"Index Bio"
			"Index SJG"
			"Index Blank";
	}
}

@media screen and (max-width: 1100px) {
	.grid-Header {
		grid-template-columns: auto 400px;
		grid-template-rows: auto auto auto auto auto 1fr;
		grid-template-areas:
			"Banner Banner"
			"Index Dwarf"
			"Index Trek"
			"Index Bio"
			"Index SJG"
			"Index Blank";
	}
}

@media screen and (max-width: 950px) {
	.grid-Header {
		grid-template-columns: 375px auto;
		grid-template-rows: auto auto auto 1fr auto auto;
		grid-template-areas:
			"Banner Banner"
			"Bio Dwarf"
			"Bio Trek"
			"Bio SJG"
			"Blank Blank"
			"Index Index";
	}
}

@media screen and (max-width: 792px) {
	.grid-Header {
		grid-template-columns: auto;
		grid-template-rows: auto auto auto auto auto auto auto;
		grid-template-areas:
			"Dwarf"
			"Banner"
			"Trek"
			"Bio"
			"SJG"
			"Blank"
			"Index";
	}
}