@media only screen and (min-width: 320px) and (max-width: 599px){

	main{
		display: grid;
		grid-template-columns: repeat(1, auto);
		grid-template-rows: repeat(3, auto);
		grid-auto-rows: auto;
		grid-row-gap: 35px;
		margin-left: 16px;
		margin-right: 16px;
	}

	.title{
		grid-column: 1/2;
		grid-row: 1/2;
		padding-top: 150px;
	}

	.description{
		grid-column: 1/2;
		grid-row: 2/3;
		display: inline-grid;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(3, auto);
		grid-auto-rows: auto;
		grid-row-gap: 35px;
	}

	.col1{
		grid-column: 1/2;
		grid-row: 2/3;
	}

	.year{
		padding-top: 25px;
	}

	.mobile-img-header{
		grid-column: 1/2;
		grid-row: 1/2;
	}

	.col2{
		grid-column: 1/2;
		grid-row: 3/4;
	}

	.background{
		padding-top: 25px;
	}

	.approach{
		padding-top: 25px;
	}

	.gallery{
		grid-column: 1/2;
		grid-row: 3/4;
		display: inline-grid;
		grid-template-columns: repeat(1, auto);
		grid-template-rows: repeat(4, auto);
		grid-auto-rows: auto;
		grid-row-gap: 35px;
	}

	.image-1{
		grid-column: 1/2;
		grid-row: 1/2;
		align-self: flex-start;
	}

	video.image-1{
		width: 100%;
		height: 100%;
	}

	.text-1{
		grid-column: 1/2;
		grid-row: 2/3;
	}

	.image-2{
		grid-column: 1/2;
		grid-row: 3/4;
		align-self: flex-start;
	}

	video.image-2{
		width: 100%;
		height: 100%;
	}

	.text-2{
		grid-column: 1/2;
		grid-row: 4/5;
	}
	
	.image-3{
		grid-column: 1/2;
		grid-row: 5/6;
		align-self: flex-start;
	}

	video.image-3{
		width: 100%;
		height: 100%;
	}

	.text-3{
		grid-column: 1/2;
		grid-row: 6/7;
	}
}

@media only screen and (min-width: 600px) and (max-width: 799px){

	main{
		display: grid;
		grid-template-columns: repeat(2, auto);
		grid-template-rows: repeat(3, auto);
		grid-auto-rows: auto;
		grid-row-gap: 50px;
		grid-column-gap: 60px;
		margin-left: 65px;
		margin-right: 65px;
	}

	.title{
		grid-column: 1/3;
		grid-row: 1/2;
		padding-top: 135px;
	}

	.description{
		grid-column: 1/3;
		grid-row: 2/3;
		display: inline-grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(1, auto);
		grid-auto-rows: auto;
		grid-column-gap: 35px;
	}

	.col1{
		grid-column: 1/4;
		grid-row: 1/2;
	}

	.year{
		padding-top: 25px;
	}

	.mobile-img-header{
		display: none;
	}

	.col2{
		grid-column: 4/5;
		grid-row: 1/2;
	}

	.background{
		padding-top: 25px;
	}

	.approach{
		padding-top: 25px;
	}

	.gallery{
		grid-column: 1/3;
		grid-row: 3/4;
		display: inline-grid;
		grid-template-columns: repeat(4, auto);
		grid-template-rows: repeat(3, auto);
		grid-auto-rows: auto;
		grid-row-gap: 55px;
		grid-column-gap: 50px;
	}

	.image-1{
		grid-column: 1/3;
		grid-row: 1/2;
		align-self: flex-start;
	}

	video.image-1{
		width: 100%;
		height: 100%;
	}

	.text-1{
		grid-column: 3/5;
		grid-row: 1/2;
	}

	.image-2{
		grid-column: 3/5;
		grid-row: 2/3;
		align-self: flex-start;
	}

	video.image-2{
		width: 100%;
		height: 100%;
	}

	.text-2{
		grid-column: 1/3;
		grid-row: 2/3;
	}
	
	.image-3{
		grid-column: 1/3;
		grid-row: 3/4;
		align-self: flex-start;
	}

	video.image-3{
		width: 100%;
		height: 100%;
	}

	.text-3{
		grid-column: 3/5;
		grid-row: 3/4;
	}

}

@media only screen and (min-width: 800px){

	main{
		display: grid;
		grid-template-columns: repeat(2, auto);
		grid-template-rows: repeat(3, auto);
		grid-auto-rows: auto;
		grid-row-gap: 50px;
		grid-column-gap: 60px;
		margin-left: 65px;
		margin-right: 65px;
	}

	.title{
		grid-column: 1/3;
		grid-row: 1/2;
		padding-top: 130px;
	}

	.description{
		grid-column: 1/3;
		grid-row: 2/3;
		display: inline-grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(1, auto);
		grid-auto-rows: auto;
		grid-column-gap: 35px;
	}

	.col1{
		grid-column: 1/3;
		grid-row: 1/2;
	}

	.year{
		padding-top: 25px;
	}

	.mobile-img-header{
		display: none;
	}

	.col2{
		grid-column: 3/4;
		grid-row: 1/2;
	}

	.background{
		padding-top: 25px;
	}

	.approach{
		padding-top: 25px;
	}

	.gallery{
		grid-column: 1/3;
		grid-row: 3/4;
		display: inline-grid;
		grid-template-columns: repeat(4, auto);
		grid-template-rows: repeat(2, auto);
		grid-auto-rows: auto;
		grid-row-gap: 75px;
		grid-column-gap: 50px;
	}

	.image-1{
		grid-column: 1/4;
		grid-row: 1/2;
		align-self: flex-start;
	}

	video.image-1{
		width: 100%;
		height: 100%;
	}

	.text-1{
		grid-column: 4/5;
		grid-row: 1/2;
	}

	.image-2{
		grid-column: 2/5;
		grid-row: 2/3;
		align-self: flex-start;
	}

	video.image-2{
		width: 100%;
		height: 100%;
	}

	.text-2{
		grid-column: 1/2;
		grid-row: 2/3;
	}
	
	.image-3{
		grid-column: 1/4;
		grid-row: 3/4;
		align-self: flex-start;
	}

	video.image-3{
		width: 100%;
		height: 100%;
	}

	.text-3{
		grid-column: 4/5;
		grid-row: 3/4;
	}
}

@media print{

	main{
		display: grid;
		grid-template-columns: repeat(2, auto);
		grid-template-rows: repeat(3, auto);
		grid-auto-rows: auto;
		grid-row-gap: 37.5pt;
		grid-column-gap: 45pt;
		margin-left: 48.75pt;
		margin-right: 48.75pt;
	}

	.title{
		grid-column: 1/3;
		grid-row: 1/2;
		padding-top: 97.5pt;
	}

	.description{
		grid-column: 1/3;
		grid-row: 2/3;
		display: inline-grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(1, auto);
		grid-auto-rows: auto;
		grid-column-gap: 26.25pt;
	}

	.col1{
		grid-column: 1/3;
		grid-row: 1/2;
	}

	.year{
		padding-top: 18.75pt;
	}

	.mobile-img-header{
		display: none;
	}

	.col2{
		grid-column: 3/4;
		grid-row: 1/2;
	}

	.background{
		padding-top: 18.75pt;
	}

	.approach{
		padding-top: 18.75pt;
	}

	.gallery{
		grid-column: 1/3;
		grid-row: 3/4;
		display: inline-grid;
		grid-template-columns: repeat(4, auto);
		grid-template-rows: repeat(3, auto);
		grid-auto-rows: auto;
		grid-row-gap: 56.25pt;
		grid-column-gap: 37.5pt;
	}

	.image-1{
		grid-column: 1/4;
		grid-row: 1/2;
		align-self: flex-start;
	}

	video.image-1{
		width: 100%;
		height: 100%;
	}

	.text-1{
		grid-column: 4/5;
		grid-row: 1/2;
	}

	.image-2{
		grid-column: 2/5;
		grid-row: 2/3;
		align-self: flex-start;
	}

	video.image-2{
		width: 100%;
		height: 100%;
	}

	.text-2{
		grid-column: 1/2;
		grid-row: 2/3;
	}
	
	.image-3{
		grid-column: 1/4;
		grid-row: 3/4;
		align-self: flex-start;
	}

	video.image-3{
		width: 100%;
		height: 100%;
	}

	.text-3{
		grid-column: 4/5;
		grid-row: 3/4;
	}

	h1 {
		font-size: 18pt;
		line-height: 22pt;
	}

	h2{
		font-size: 16pt;
		line-height: 20pt;
	}

	h3{
		font-size: 12pt;
		line-height: 16pt;
	}

	p{
		font-size: 10pt;
		line-height: 14pt;
	}
}