:root {
	--thumb: 16rem;
}
#gallery {
	& time {
		display: flex;
		align-self: center;
	}
}
#artworks {
	& 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;
		}
	}

	& figure {
		margin: 0;
		border-style: solid;
		& img {
			display: flex;
			width: 100%;
			height: var(--thumb);
			object-fit: contain;
			border-radius: var(--round);
		}

		& figcaption {
			font-size: 1.4rem;
			display: flex;
			align-items: baseline;
		}
		& .count {
			margin: auto 0 0 auto;
		}
	}
}

#art {
	display: flex;
	flex-direction: column;
	width: fit-content;
	h3 {
		display: flex;
		gap: var(--pad-sm);
	}
	& 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: 1500px) {
	#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;
	}
}