/* Body Styles */

body {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 100%;
	grid-template-areas:
	"headergrid"
	"widegrid"
	"twoimggrid"
	"sectiongrid"
	"footergrid";
}

.Spacer {
	width: 5vw;
	grid-area: spacergrid;
}

section {
	grid-area: sectiongrid;
}

article p {
    font-family: effra, sans-serif;
	color: #999999;
	padding: 1vw 2vw 1vw 2vw;
}

article h3 {
    font-family: effra, sans-serif;
	color: #999999;
}


article {
	text-align: center;
}

.TwoImgSection {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-area: twoimggrid;
	margin-top: 1rem;
	justify-items: center;
	max-height: 20vh;
	overflow: clip;
	margin-left: 5vw;
	margin-right: 5vw;
}

.TwoImgSection img {
	max-width: 720px;
	max-height: 45%;
	object-fit: cover;
	object-position: center center;
}

.TwoImgDiv1 {
	width: 100%;
	display: block;
	text-align: right;
}

.TwoImgDiv2 {
	width: 100%;
	display: block;
	text-align: left;
}

.ThreeImgDiv {
	width: 100%;
	display: block;
	text-align: center;
}

.ThreeImgDiv img {
	max-width: 350px;
}

.ThreeArticleSection {
	display: grid;
	grid-template-rows: auto;
	grid-template-areas:
	"one two three";
	gap: 1vw;
	margin-top: 2rem;
}

.ArticleOne p, .ArticleTwo p, .ArticleThree p{
	max-width: 25vw;
}

.ArticleOne {
	grid-area: one;
	margin-left: 15vw;
}


.ArticleTwo {
	grid-area: two;
}

.ArticleThree {
	grid-area: three;
	margin-right: 15vw;
}

.WideSection {
	grid-area: widegrid;
	justify-items: center;
}

.WideImg {
	max-height: 80vh;
	width: 100%;
	object-fit: contain;
}

/* Media queries for mobile */

@media screen and (max-width:600px){
	
	.ThreeArticleSection {
		display: grid;
		grid-template-rows: auto;
		grid-template-areas:
		"one"
		"two"
		"three";
		gap: 1vw;
		margin-top: 2rem;
	}
	
	.ArticleOne p, .ArticleTwo p, .ArticleThree p{
		max-width: 90vw;
	}
	
	.ArticleOne {
		margin-left: auto;
		margin-right: auto;
	}
	
	.ArticleTwo {
		margin-left: auto;
		margin-right: auto;
	}
	
	.ArticleThree {
		margin-left: auto;
		margin-right: auto;
	}
	
	.TwoImgSection {
		max-height: 10vh;
		overflow: clip;
	}
	
	.TwoImgSection img {
		max-width: 720px;
		max-height: 20vh;
		object-fit: cover;
		object-position: center center;
	}
}