:root {
	--gallery-spacing: var(--spacing);
	--gallery-base-height: 240px;
}

@media screen and (max-width: 900px) {
	:root {
		--gallery-base-height: 200px;
	}
}

@media screen and (max-width: 700px) {
	:root {
		--gallery-base-height: 160px;
	}
}

@media screen and (max-width: 500px) {
	:root {
		--gallery-base-height: 120px;
	}
}

.gallery {
	padding: var(--gallery-spacing);
	padding-right: 0;

	display: flex;
	flex-wrap: wrap;
}

.gallery-item {
	margin-right: -0.5px;
}

.gallery-item picture {
	margin: var(--gallery-spacing);

	display: block;
}

.gallery-item img {
	display: block;
	height: calc(var(--gallery-base-height) * 1.2); /* 320px is native size on desktop, 160px is native size on mobile */
	width: auto;
	object-fit: cover;
}