main {
	flex: 1;
	padding-top: var(--header-height);
	margin: 0 auto;
	width: 100%;
}
/* -- grid -- */

.gallery-grid {
	column-count: 3;
	gap: var(--space-2);
	min-height: 400px;
	@media (max-width: 1024px) { column-count: 2; }
	@media (max-width: 768px) {
		column-count: 1;
		column-gap: var(--space-3);
	}
}
.gallery-item {
	position: relative;
	overflow: hidden;
	background: rgb(var(--secondary-color));
	margin-bottom: var(--space-2);
	display: block;
	width: 100%;
	cursor: pointer;
}
.gallery-item:hover .gallery-item__img { filter: grayscale(0); }
.gallery-item:hover .gallery-item__overlay { opacity: 1; }
.gallery-item__img {
	width: 100%;
	height: auto;
	filter: grayscale(1);
	transition: filter var(--duration-slow) var(--ease);
}
.gallery-item__overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--space-5);
	background: linear-gradient(transparent, rgb(var(--background-color)));
	opacity: 0;
	transition: opacity var(--duration-quick) var(--ease);
}
.gallery-item__caption {
	font-size: var(--text-sm);
	font-weight: var(--weight-light);
	line-height: var(--leading-normal);
}
.gallery-item__author {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-base);
	margin-top: var(--space-2);
	color: rgb(var(--accent-color));
}
.gallery-loader {
	column-span: all;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	color: rgb(var(--foreground-color) / 0.75);
	height: 200px;
	transition: opacity var(--duration-quick) var(--ease);
}