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

:root {
	--thumb: 16rem;
}
#gallery {
	& time {
		display: flex;
		align-self: center;
	}
}
#artworks {
	& p {
		font-size: 1.2rem;
	}
	& ul {
		display: grid;
		grid-template-columns: repeat(
			auto-fill,
			minmax(min(var(--thumb), 100%), 1fr)
		);
		padding: 0;
		margin: 0;
		gap: var(--pad-l);
		& a {
			display: block;
		}
	}

	& h2 {
		margin: var(--pad-xl) 0;
		font-size: var(--pad-xl);

		&:first-of-type {
			margin-top: 0;
		}
	}
	& figure {
		margin: 0;
		padding: var(--pad-sm);
		border-width: 2px;
		border-style: solid;
		& img {
			display: flex;
			width: 100%;
			height: var(--thumb);
			border-bottom: unset;
			object-fit: contain;
		}

		& figcaption {
			font-family: Urbanist, sans-serif;
			font-size: var(--pad-lm);
			display: flex;
			align-items: baseline;
		}
		& .count {
			margin: auto 0 0 auto;
		}
	}
}

#art {
	display: flex;
	flex-direction: column;
	width: fit-content;
	h3 {
		font-family: "Urbanist", sans-serif;
		display: flex;
		gap: var(--pad-sm);
	}
	& section:has(a:nth-child(n + 2)) {
		display: flex;
		flex-direction: row;
		gap: var(--pad-l);
	}
	& section {
		& a {
			display: flex;
			width: calc(var(--post) - var(--view) * 1.2);
			flex-direction: column;
		}
	}
}
@media screen and (max-width: 1400px) {
	#art section:has(a:nth-child(n + 2)) {
		flex-direction: column;
		& a {
			width: 100%;
		}
	}
}
@media screen and (max-width: 920px) {
	#art a:has(img) {
		width: auto;
	}
	#art section:has(a:nth-child(n + 2)) {
		flex-direction: column;
	}
}