: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;
			& 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);
			}
		}
	}
}

#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;
			width: calc(var(--post) - var(--view));
			flex-direction: column;
		}
	}
	& time {
		display: flex;
		font-weight: bold;
	}
}
@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;
	}
}