.image-grid{
	background: transparent;
	width: 100%;
	display: grid;
	grid-template-rows: repeat(1fr);
	border-left: 1px solid var(--color-black);
	border-top: 0;
	max-width: 95%;
	margin: 0 auto;
	position: relative;
}
.image-grid.two{
	grid-template-columns: repeat(2, 1fr);
}
.image-grid.three{
	grid-template-columns: repeat(3, 1fr);
}
.image-grid.four{
	grid-template-columns: repeat(4, 1fr);
}
.image-grid.five{
	grid-template-columns: repeat(5, 1fr);
}
.image-grid.six{
	grid-template-columns: repeat(6, 1fr);
}
.image-grid.seven{
	grid-template-columns: repeat(7, 1fr);
}
.image-grid.eight{
	grid-template-columns: repeat(8, 1fr);
}
.image-grid.nine{
	grid-template-columns: repeat(9, 1fr);
}
.image-grid .img-block{
	padding: 55px 0;
	display: flex;
	justify-content: center;
	align-content: center;
	border-right: 1px solid var(--color-black);
	border-bottom: 1px solid var(--color-black);
}

.image-grid .img-block img{
	max-width: 60%;
	height: auto;
	object-fit: contain;
	border: none;
	box-shadow: none;
}

.one{
    grid-column: span 1;
}
.two{
    grid-column: span 2;
}
.three{
	grid-column: span 3;
}
.four{
    grid-column: span 4;
}

@media screen and (max-width: 800px){
     .one, .two, {
		grid-column: span 1;
	 }
	 .three, .four{
		grid-column: span 2;
	 }
	.image-grid.four{
		grid-template-columns: repeat(2, 1fr);
	}
	.image-grid.six{
		grid-template-columns: repeat(2, 1fr);
	}
	.image-grid.five {
		grid-template-columns: repeat(2, 1fr);
	}
	.image-grid.three{
		grid-template-columns: repeat(2, 1fr);
	}
	
	
}