website/_src/assets/css/gallery.css

:root {
	--thumb: 16rem;
}
#artworks {
	& ul {
		display: grid;
		grid-template-columns: repeat(
			auto-fill,
			minmax(min(var(--thumb), 100%), 1fr)
		);
		padding: 0;
		margin: 0;
		gap: var(--pad-l);
	}

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

		&:first-of-type {
			margin-top: 0;
		}
	}

	& a {
		display: block;
		text-decoration: unset;
		& figure {
			margin: 0;
			padding: var(--pad-sm);
			border-width: 2px;
			border-style: solid;
			border-radius: var(--round);
			& img {
				display: flex;
				width: 100%;
				height: var(--thumb);
				border-bottom: unset;
				object-fit: contain;
				border-radius: inherit;
			}

			& figcaption {
				font-family: Urbanist, sans-serif;
				font-size: var(--pad-lm);
			}
		}
	}
}

#art {
	display: flex;
	flex-direction: column;
	h3 {
		font-family: "Urbanist", sans-serif;
	}
	& section:has(a:nth-child(n + 2)) {
		display: flex;
		flex-direction: row;
		gap: var(--pad-l);
	}
	& section {
		margin: var(--pad-l) 0;
		& a {
		display: flex;
		height: max-content;
		text-decoration: none;
		flex-direction: column;
	}
	}
	& time {
		display: flex;
		font-weight: bold;
	}
	& a {
		max-width: var(--post);
		width: fit-content;
		& figure {
			max-width: inherit;
		}
	}
}
@media screen and (max-width: 920px) {
	#art section {
		align-self: center;
	}
	#art section:has(a:nth-child(n + 2)) {
		flex-direction: column;
	}
}