/*
WIDTH CALCULATION REFERENCE: 

https://mark.ie/blog/calculating-flex-basis-for-items-when-the-parent-flex-item-uses-gap/

FORMAT:

width: calc(100% / var(--number-of-items) - (var(--gap) * var(--number-of-gaps) / var(--number-of-items)));
*/

.thumbnail_grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 30px;
	justify-content: center;
}

@media(max-width: 700px) {
	.thumbnail_grid {
		gap: 20px;
	}
}

.thumbnail_grid-item {
	width: calc(100% / 4 - (30px * 3 / 4));
	box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1); 
}

@media(max-width: 700px) {
	.thumbnail_grid-item {
		width: calc(100% / 2 - (20px * 1 / 2));
	}
}