/***
 *    Fonts
 ***/

 
 
/***
 *    Colors
 ***/


 
 /* background colors */
 

.bg-blue {
    background-color: #C3D4FF;
}

.bg-yellow {
    background-color: #FFFF7F;
}

.bg-green {
    background-color: #B2F67F;
    }

.bg-red {
    background-color: #FFB299;
}


/* grid */

.container {
	background-color: rgba(255, 255, 244, 0.95);
}


/* Media querries */

body {
	background-color: rgb(224, 219, 197);
	background-repeat: no-repeat;
	background-size: cover;
}


/*** 
 *   Screen Size S
 ***/

@media (max-width: 480px) {

	body {
		background-image: url("bg/artic-edu-ref-1925_3610-w400.jpg");
		height: 418vw;
	}
	
	.container {
		padding: 5vw;
		grid-template-columns: 90vw;
		grid-gap: 0;
	}

}



/*** 
 *   Screen Size M
 ***/
 
@media (min-width: 481px) and (max-width: 68rem) {

	body {
		background-image: url("bg/artic-edu-ref-1925_3610-w1350.jpg");
		height: 432vw;
		margin: 6vw;
	}

	.container {
		padding: 2vw 4vw 3vw 4vw;
		grid-gap: 4vw;
	}
	
	.col-max-4 {
		grid-template-columns: 36vw 36vw;
	}

}



/***
 *
 *   Screen Size L+
 ***/

@media (min-width: 68rem) {

	body {
		background-image: url("bg/artic-edu-ref-1939_2181-w4000.jpg");
		height: 140vw;
		margin: 6vw;
		margin-top: 3rem;
	}
	
	.container {
		padding: 2vw 6vw 3vw 6vw;
		grid-gap: 2vw;
	}
	
	.col-max-4 {
		grid-template-columns: 24vw 24vw 24vw;
	}

	header .intro {
		grid-column-start: 2;
	}
	
	header .intro-deco {
		grid-column: 3 / 4;
   	grid-row: 1 / 2;
   }

}


/*** 
 *   Screen Size XL
 ***/

@media (min-width: 88rem) {

	body {
		margin: 5vw;
	}

	.container {
		padding: 2vw 5vw 3vw 4vw;
		grid-gap: 3vw;
	}
	
	.col-max-4 {
		grid-template-columns: 18vw 18vw 18vw 18vw;
	}
	
	#content {
		grid-template-columns: 18vw 18vw 22vw 14vw;
	}

	header .intro {
		grid-column-start: 3;
	}
	
	header .intro-deco {
		grid-column: 4 / 5;
   	grid-row: 1 / 2;
   }
	
}