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

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

	#intro{
		grid-column: 1/2;
		grid-row: 1/2;
		padding-top: 140px;
		font-size: small;
	}

	.project{
		display: inline-grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(4, auto);
		grid-auto-rows: auto;
		grid-row-gap: 15px;
		align-self: flex-start;
	}

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

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

	.description{
		grid-column: 1/3;
		grid-row: 3/4;
	}
	
	.cta{
		grid-column: 1/2;
		grid-row: 4/5;
		align-items: flex-end;
	}

	#gsw-1{
		grid-column: 1/2;
		grid-row: 4/5;
	}

	#y-ar{
		grid-column: 1/2;
		grid-row: 3/4;
	}

	#uc-cc{
		grid-column: 1/2;
		grid-row: 5/6;
	}

	#sc{
		grid-column: 1/2;
		grid-row: 7/8;
	}

	#dg{
		grid-column: 1/2;
		grid-row: 6/7;
	}

	#ps{
		grid-column: 1/2;
		grid-row: 2/3;
	}

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

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

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

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

}

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

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

	#intro{
		grid-column: 1/3;
		grid-row: 1/2;
		padding-right: 20%;
		padding-top: 145px;
	}

	.project{
		display: inline-grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(4, auto);
		grid-auto-rows: auto;
		grid-row-gap: 15px;
		align-self: flex-start;
	}

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

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

	.description{
		grid-column: 1/3;
		grid-row: 3/4;
	}
	
	.cta{
		grid-column: 1/2;
		grid-row: 4/5;
		align-items: flex-end;
	}

	#gsw-1{
		grid-column: 2/3;
		grid-row: 3/4;
	}

	#y-ar{
		grid-column: 2/3;
		grid-row: 2/3;
	}

	#uc-cc{
		grid-column: 1/2;
		grid-row: 3/4;
	}

	#sc{
		grid-column: 2/3;
		grid-row: 4/5;
	}

	#dg{
		grid-column: 1/2;
		grid-row: 4/5;
	}

	#ps{
		grid-column: 1/2;
		grid-row: 2/3;
	}

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

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

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

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

}

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

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

	#intro{
		grid-column: 1/3;
		grid-row: 1/2;
		padding-right: 35%;
		padding-top: 130px;
	}

	.project{
		display: inline-grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(4, auto);
		grid-auto-rows: auto;
		grid-row-gap: 15px;
		align-self: flex-start;
	}

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

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

	.description{
		grid-column: 1/3;
		grid-row: 3/4;
	}
	
	.cta{
		grid-column: 1/2;
		grid-row: 4/5;
		align-items: flex-end;
	}

	#gsw-1{
		grid-column: 2/3;
		grid-row: 3/4;
	}

	#y-ar{
		grid-column: 2/3;
		grid-row: 2/3;
	}

	#uc-cc{
		grid-column: 1/2;
		grid-row: 3/4;
	}

	#sc{
		grid-column: 2/3;
		grid-row: 4/5;
	}

	#dg{
		grid-column: 1/2;
		grid-row: 4/5;
	}

	#ps{
		grid-column: 1/2;
		grid-row: 2/3;
	}

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

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

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

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

}

@media print {

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

	#intro{
		grid-column: 1/3;
		grid-row: 1/2;
		padding-right: 35%;
		padding-top: 97.5pt;
	}

	.project{
		display: inline-grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(4, auto);
		grid-auto-rows: auto;
		grid-row-gap: 11.25pt;
		align-self: flex-start;
	}

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

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

	.description{
		grid-column: 1/3;
		grid-row: 3/4;
	}
	
	.cta{
		grid-column: 1/2;
		grid-row: 4/5;
		align-items: flex-end;
	}

	#gsw-1{
		grid-column: 2/3;
		grid-row: 3/4;
	}

	#y-ar{
		grid-column: 2/3;
		grid-row: 2/3;
	}

	#uc-cc{
		grid-column: 1/2;
		grid-row: 3/4;
	}

	#sc{
		grid-column: 2/3;
		grid-row: 4/5;
	}

	#dg{
		grid-column: 1/2;
		grid-row: 4/5;
	}

	#ps{
		grid-column: 1/2;
		grid-row: 2/3;
	}

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

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

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

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

	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;
	}
}