/* Small Mobile: 320px. (Default - mobile first) 
================================================= */
.container {
	width:280px;
}
.about-section .container {
	display: grid;
	grid-gap: 30px;
	grid-template:
		"title" 
		"portrait"
		"greeting"
		"description"
		"objective"
		"resume"
		/ 1fr;
		;
}
/* Quality of background image used */
.intro-section {
	background-image: url('../img/alley-lg.jpg'); /* Fallback Background Image for unsupported browsers */
	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url('../img/alley-lg.jpg');
}
/* New grid for gallery */
.project-gallery {	
	display: grid;
	grid-gap: 30px;
	grid-template: 
		"content" auto
		/ 1fr
		;
}
.contact-section .container {
	grid-template:
		"title" 
		"content"
		"form"
		;
}
/* Large Mobile, Mobile Landscape: 480px.
================================================= */
@media (min-width:480px) {
	.container{
		width: 450px;
	}
	/* Gallery: 2 elements per row */
	.project-gallery {	
		grid-template: 
			"content content" auto
			/ 1fr 1fr
			;
	}
} 
/* Tablet: 768px.
================================================= */
@media (min-width: 768px) {
	.container{
		width: 738px;
	}
	.about-section .container {
	display: grid;
	grid-template:
		"title title" 
		"portrait greeting"
		"portrait description"
		"resume objective"
		/ 1fr 2fr;
		;
	}
	/* Gallery: 3 elements per row */
	.project-gallery {	
		grid-template: 
			"content content content" auto
			/ 1fr 1fr 1fr
			;
	}
	.contact-section .container {
		grid-template:
			"title form" 
			"content form"
			;
	}
}

/* Browser: 980px.
================================================= */
@media (min-width: 980px) {
	.container{
		width: 950px;
	}
	/* Quality of background image increases */
	.intro-section {
		background-image: url('../img/alley-xl.jpg'); /* Fallback Background Image for unsupported browsers */
		background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url('../img/alley-xl.jpg');
	}
	.about-section .container {
	display: grid;
	grid-template:
		"title title" 
		"portrait greeting"
		"portrait description"
		"portrait objective"
		"portrait resume"
		/ 2fr 5fr;
		;
	}
}

/* Large Browser: 1200px.
================================================= */
@media (min-width: 1200px) {	
	.container{
		width: 1170px;
	}
	/* Gallery: 4 elements per row */
	.project-gallery {	
		grid-template: 
			"content content content content" auto
			/ 1fr 1fr 1fr 1fr
			;
	}
}