html, body {
	scroll-snap-type: none !important;
}

.scroll-section {
	scroll-snap-align: none !important;
}


.gallery-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 150px;
	grid-gap: 10px;

	padding: 70px 30px;
}

.gallery-item {
	height: 100%;
	width: 100%;
	position: relative;
}

.gallery-image-cover {
	position: absolute;
	z-index: 10;

	height: 100%;
	width: 100%;

	background-color: rgba(18, 18, 18, 0.4);
}

.gallery-image {
	width: 100%;
	height: 100%;

	object-fit: cover;

	border: solid 2px #282828;
}

/* select images */

/* Column Spans */
/*.gallery-item:nth-child(4) {
	grid-column-start: span 2;
}*/

/* Row spans */
/*.gallery-item:nth-child(5) {
	grid-row-start: span 2;
}*/

.gallery-item:nth-child(1) {
	grid-column-start: span 2;
	grid-row-start: span 2;
}

.gallery-item:nth-child(2) {
	grid-column-start: span 2;
	grid-row-start: span 2;
}

.gallery-item:nth-child(3) {
	grid-column-start: span 2;
	grid-row-start: span 2;
}

.gallery-item:nth-child(4) {
	grid-column-start: span 1;
	grid-row-start: span 2;
}

.gallery-item:nth-child(5) {
	grid-column-start: span 1;
	grid-row-start: span 4;
}

.gallery-item:nth-child(6) {
	grid-column-start: span 1;
	grid-row-start: span 2;
}

.gallery-item:nth-child(7) {
	grid-column-start: span 2;
	grid-row-start: span 2;
}

.gallery-item:nth-child(8) {
	grid-column-start: span 1;
	grid-row-start: span 2;
}

.gallery-item:nth-child(9) {
	grid-column-start: span 1;
	grid-row-start: span 2;
}

.gallery-item:nth-child(10) {
	grid-column-start: span 1;
	grid-row-start: span 2;
}

.gallery-item:nth-child(11) {
	grid-column-start: span 1;
	grid-row-start: span 2;
}

.gallery-item:nth-child(12) {
	grid-column-start: span 1;
	grid-row-start: span 2;
}

.gallery-item:nth-child(13) {
	grid-column-start: span 1;
	grid-row-start: span 2;
}

.gallery-item:nth-child(14) {
	grid-column-start: span 1;
	grid-row-start: span 2;
}

.gallery-item:nth-child(15) {
	grid-column-start: span 1;
	grid-row-start: span 2;
}

.gallery-item:nth-child(16) {
	grid-column-start: span 1;
	grid-row-start: span 2;
}

.gallery-item:nth-child(17) {
	grid-column-start: span 1;
	grid-row-start: span 2;
}

.gallery-item:nth-child(18) {
	grid-column-start: span 1;
	grid-row-start: span 2;
}

.gallery-item:nth-child(19) {
	grid-column-start: span 1;
	grid-row-start: span 4;
}

.gallery-item:nth-child(20) {
	grid-column-start: span 1;
	grid-row-start: span 4;
}

.gallery-item:nth-child(21) {
	grid-column-start: span 1;
	grid-row-start: span 4;
}

.gallery-item:nth-child(22) {
	grid-column-start: span 1;
	grid-row-start: span 2;
}

.gallery-item:nth-child(23) {
	grid-column-start: span 2;
	grid-row-start: span 2;
}

.gallery-item:nth-child(24) {
	grid-column-start: span 1;
	grid-row-start: span 2;
}

.gallery-item:nth-child(25) {
	grid-column-start: span 1;
	grid-row-start: span 2;
}

.gallery-item:nth-child(26) {
	grid-column-start: span 2;
	grid-row-start: span 4;
}

/* MEDIA QUERIES */
@media (min-width: 768px) {
	.gallery-container {
		grid-template-columns: repeat(4, 1fr);
	}

	/* select images */

	/* Column Spans */
	/*.gallery-item:nth-child(4) {
		grid-column-start: span 2;
	}*/

	/* Row spans */
	/*.gallery-item:nth-child(5) {
		grid-row-start: span 2;
	}*/

	.gallery-item:nth-child(1) {
		grid-column-start: span 2;
		grid-row-start: span 2;
	}

	.gallery-item:nth-child(2) {
		grid-column-start: span 2;
		grid-row-start: span 2;
	}

	.gallery-item:nth-child(3) {
		grid-column-start: span 4;
		grid-row-start: span 2;
	}

	.gallery-item:nth-child(4) {
		grid-column-start: span 2;
		grid-row-start: span 5;
	}

	.gallery-item:nth-child(5) {
		grid-column-start: span 2;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(6) {
		grid-column-start: span 2;
		grid-row-start: span 2;
	}

	.gallery-item:nth-child(7) {
		grid-column-start: span 4;
		grid-row-start: span 2;
	}

	.gallery-item:nth-child(8) {
		grid-column-start: span 2;
		grid-row-start: span 2;
	}

	.gallery-item:nth-child(9) {
		grid-column-start: span 2;
		grid-row-start: span 4;
	}

	.gallery-item:nth-child(10) {
		grid-column-start: span 2;
		grid-row-start: span 2;
	}

	.gallery-item:nth-child(11) {
		grid-column-start: span 2;
		grid-row-start: span 4;
	}

	.gallery-item:nth-child(12) {
		grid-column-start: span 2;
		grid-row-start: span 4;
	}

	.gallery-item:nth-child(13) {
		grid-column-start: span 2;
		grid-row-start: span 2;
	}

	.gallery-item:nth-child(14) {
		grid-column-start: span 2;
		grid-row-start: span 2;
	}

	.gallery-item:nth-child(15) {
		grid-column-start: span 2;
		grid-row-start: span 2;
	}

	.gallery-item:nth-child(16) {
		grid-column-start: span 2;
		grid-row-start: span 2;
	}

	.gallery-item:nth-child(17) {
		grid-column-start: span 2;
		grid-row-start: span 2;
	}

	.gallery-item:nth-child(18) {
		grid-column-start: span 2;
		grid-row-start: span 2;
	}

	.gallery-item:nth-child(19) {
		grid-column-start: span 2;
		grid-row-start: span 2;
	}

	.gallery-item:nth-child(20) {
		grid-column-start: span 2;
		grid-row-start: span 2;
	}

	.gallery-item:nth-child(21) {
		grid-column-start: span 2;
		grid-row-start: span 4;
	}

	.gallery-item:nth-child(22) {
		grid-column-start: span 2;
		grid-row-start: span 2;
	}

	.gallery-item:nth-child(23) {
		grid-column-start: span 2;
		grid-row-start: span 2;
	}

	.gallery-item:nth-child(24) {
		grid-column-start: span 2;
		grid-row-start: span 2;
	}

	.gallery-item:nth-child(25) {
		grid-column-start: span 2;
		grid-row-start: span 2;
	}

	.gallery-item:nth-child(26) {
		grid-column-start: span 4;
		grid-row-start: span 3;
	}
}

@media (min-width: 1024px) {
	.gallery-container {
		grid-template-columns: repeat(6, 1fr);
		width: 90%;
		margin: auto;
	}

	/* select images */

	/* Column Spans */
	/*.gallery-item:nth-child(1) {
		grid-column-start: span 2;
	}*/

	/* Row spans */
	/*.gallery-item:nth-child(5) {
		grid-row-start: span 2;
	}*/

	.gallery-item:nth-child(1) {
		grid-column-start: span 4;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(2) {
		grid-column-start: span 2;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(3) {
		grid-column-start: span 3;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(4) {
		grid-column-start: span 3;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(5) {
		grid-column-start: span 3;
		grid-row-start: span 4;
	}

	.gallery-item:nth-child(6) {
		grid-column-start: span 3;
		grid-row-start: span 4;
	}

	.gallery-item:nth-child(7) {
		grid-column-start: span 6;
		grid-row-start: span 4;
	}

	.gallery-item:nth-child(8) {
		grid-column-start: span 2;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(9) {
		grid-column-start: span 2;
		grid-row-start: span 4;
	}

	.gallery-item:nth-child(10) {
		grid-column-start: span 2;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(11) {
		grid-column-start: span 2;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(12) {
		grid-column-start: span 2;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(13) {
		grid-column-start: span 2;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(14) {
		grid-column-start: span 2;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(15) {
		grid-column-start: span 2;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(16) {
		grid-column-start: span 2;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(17) {
		grid-column-start: span 2;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(18) {
		grid-column-start: span 2;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(19) {
		grid-column-start: span 2;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(20) {
		grid-column-start: span 2;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(21) {
		grid-column-start: span 2;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(22) {
		grid-column-start: span 2;
		grid-row-start: span 2;
	}

	.gallery-item:nth-child(23) {
		grid-column-start: span 2;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(24) {
		grid-column-start: span 2;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(25) {
		grid-column-start: span 2;
		grid-row-start: span 3;
	}

	.gallery-item:nth-child(26) {
		grid-column-start: span 6;
		grid-row-start: span 5;
	}
}