.MainContent{
	width: 100%;
	background-color: lightgray;
}
.MainContent img{
	width: 100%;
	height: 100%;
	padding: 5%;
}
.MainContent a{
	color: black;
	text-decoration: none;
}
.MainContent a:visited{
	color: black;
	text-decoration: none;
}
.photos{
	display: flex;
	align-items: center;
	margin-left: 2%;
	margin-right: 2%;
}
p{
	text-align:left;
	margin-left: 2%;
}
H3{
	margin-left: 2%;
	padding-top: 1%;
}

hr{
	color: black;
}

.imagegrid {
	background-color: lightgrey;

	--gap: 16px;
	--num-cols: 3;
	--row-height: 300px;

	box-sizing: border-box;
	padding: var(--gap);

	display: grid;
	grid-template-columns: repeat(var(--num-cols),1fr);
	grid-auto-rows: var(--row-height);
	gap: var(--gap);
}

.imagegrid > img {
	width: 100%;
	height: 100%;
	object-fit:cover;
}

.imagegrid-col-2 {
	grid-column: span 2;
}

@media screen and (max-width: 1024px) {
	.imagegrid {
		--num-cols: 2;
		--row-height: 200px;
	}
}