/* **************************
	Holy Grail Layout with CSS Grid
************************** */

/* Define grid areas */
.blad-header { grid-area: header; }
.blad-footer { grid-area: footer; }
.blad-main { grid-area: main; }
.blad-nav { grid-area: navigation; }

.blad {
	display: grid;
	grid-template-areas: "navigation header"
	                     "navigation main "
	                     "navigation footer";
	grid-template-columns: 200px 1fr;
	grid-template-rows: auto 
						1fr 
						auto;
	min-height: 100vh;
}

@media screen and (max-width: 950px) {
	.blad {
		grid-template-areas: "header"
		                     "navigation"
		                     "main"
		                     "footer";

		grid-template-columns: 100%;
		grid-template-rows: auto
							auto
							1fr
							auto;
	}
}