html, body {padding: 0; margin: 0; height: calc(100vh); }

.item1 { grid-area: head; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: foot; }

@media (max-width: 740px){
	.grid-container {
	  display: grid;
	  grid-template-areas:
	    'head'
	    'menu'
	    'main'
	    'foot';
	  grid-template-columns: 1fr;
	  grid-gap: 0px;
	  padding: 0px;
	}
	
	div.tile {
		height: 10em;
		background-size: cover;
	}
	
	div.tileblah { padding: 0.5em; }
	div.tileblah h3 {margin:0; padding: 0.1em; font-size: 14pt; }
	p.tile_blah {margin:0; padding: 0.1em; font-size: 10pt; font-style: italic; }
	
	div.tileframe {
		display: grid; 
		grid-template-columns: 1fr 0.5fr;
	  	grid-gap: 0px;
	  	padding: 0px;
	}
	
	div.tileframeleft {
		display: grid; 
		grid-template-columns: 0.5fr 1fr;
	  	grid-gap: 0px;
	  	padding: 0px;
	}
	
	div.settings {
		display: grid; 
		grid-template-columns: 1fr;
	  	grid-gap: 0px;
	  	padding: 0px;
	}
	
	#courseframe {
		display: grid; 
		grid-template-columns: 1fr;
	  	grid-gap: 0px;
	  	padding: 0px;
	}
	
	#dashitems {
		display: grid; 
		grid-template-columns: 1fr 1fr;
	  	grid-gap: 5px;
	  	padding: 0px;
	}
	
}

@media (min-width: 740px) {
	.grid-container {
	  display: grid;
	  grid-template-areas:
	    'head'
	    'menu'
	    'main'
	    'foot';
	  grid-template-columns: 1fr;
	  grid-gap: 0px;
	  padding: 0px;
	}
	
	div.tile {
		height: 20em;
		background-size: cover;
	}
	
	div.tileblah { padding: 1em; }
	div.tileblah h3 {margin:0; padding: 0.5em; font-size: 20pt; }
	p.tile_blah {margin:0; padding: 0.25em; font-size: 16pt; font-style: italic; }
	
	div.tileframe {
		display: grid; 
		grid-template-columns: 1fr 0.5fr;
	  	grid-gap: 0px;
	  	padding: 0px;
	}
	
	div.tileframeleft {
		display: grid; 
		grid-template-columns: 0.5fr 1fr;
	  	grid-gap: 0px;
	  	padding: 0px;
	}
	
	div.settings {
		display: grid; 
		grid-template-columns: 1fr 1fr;
	  	grid-gap: 0px;
	  	padding: 0px;
	}
	
	#courseframe {
		display: grid; 
		grid-template-columns: 0.8fr 1.2fr;
	  	grid-gap: 0px;
	  	padding: 0px;
	}
	
	#dashitems {
		display: grid; 
		grid-template-columns: 1fr 1fr;
	  	grid-gap: 5px;
	  	padding: 0px;
	}
	
}

@media (min-width: 1200px) {
	.grid-container {
	  display: grid;
	  grid-template-areas:
	    'head'
	    'menu'
	    'main'
	    'foot';
	  grid-template-columns: 1fr;
	  grid-gap: 0px;
	  padding: 0px;
	}
	
	div.tile {
		height: 30em;
	}
	
	div.tileblah { padding: 1em; }
	div.tileblah h3 { font-size: 3em; }
	p.tile_blah {font-size: 1.8em; font-style: italic; }
	
	div.tileframe {
		display: grid; 
		grid-template-columns: 1fr 0.5fr;
	  	grid-gap: 0px;
	  	padding: 0px;
	}
	
	div.tileframeleft {
		display: grid; 
		grid-template-columns: 0.5fr 1fr;
	  	grid-gap: 0px;
	  	padding: 0px;
	}
	
	div.settings {
		display: grid; 
		grid-template-columns: 1fr 1fr;
	  	grid-gap: 0px;
	  	padding: 0px;
	}
	
	#courseframe {
		display: grid; 
		grid-template-columns: 0.8fr 1.2fr;
	  	grid-gap: 0px;
	  	padding: 0px;
	}
	
	#dashitems {
		display: grid; 
		grid-template-columns: 1fr 1fr;
	  	grid-gap: 5px;
	  	padding: 0px;
	}
	
	#mailframe{
		display: grid; 
		grid-template-columns: 1fr 0.3fr;
	  	grid-gap: 0px;
	  	padding: 0px;
	}
	
	p.error {margin: 0; padding: 0; padding-left: 1em; padding-right: 1em; display: inline; color: red; font-size: 8pt; }
	
}