website/_src/assets/css/default/gallery.css

#artworks {
	& ul {
		display: grid;
		grid-template-columns: repeat(
			auto-fill,
			minmax(min(var(--thumb), 100%), 1fr)
		);
		gap: var(--pad-l);
		& a {
			display: block;
		}
	}
	& figure {
		margin: 0;
		border-style: solid;
		& img {
			height: var(--thumb);
			object-fit: cover;
		}
		& figcaption {
			display: inline-flex;
			font-size: 1.4rem;
		}
		& .count {
			margin: auto 0 0 auto;
		}
	}
}

#art {
	& p {
		max-width: var(--post);
	}
	& section:has(a:nth-child(n + 2)) {
		display: flex;
		flex-direction: row;
		gap: var(--pad-l);
	}
	& section:has(a:nth-child(n + 3)) {
		flex-direction: column;
	}
	& section {
		& a {
			display: flex;
			width: calc(var(--post) - var(--view));
			flex-direction: column;
		}
	}
}
@media screen and (max-width: 916px) {
	#art p {
		max-width: auto;
	}
	#art a:has(img) {
		width: auto;
	}
	#art section:has(a:nth-child(n + 2)) {
		flex-direction: column;
	}
}