@media (prefers-color-scheme: light) {
	#artworks {
		& a {
			transition: color var(--trans), background-color var(--trans),
				border-color var(--trans);

			& figure {
				color: var(--primary-dark-400);
				border-color: var(--primary-600);
				background-color: var(--primary-300);

				& time {
					color: var(--primary-dark-500);
				}

				& figcaption {
					color: var(--primary-dark-500);
				}

				&:is(:hover, :focus) {
					border-color: currentColor;
					background-color: var(--primary-500);
				}
			}
		}
	}
}

@media (prefers-color-scheme: dark) {
	#artworks {
		& a {
			transition: color var(--trans), background-color var(--trans),
				border-color var(--trans);

			& figure {
				color: var(--secondary-light-400);
				border-color: var(--secondary-600);
				background-color: var(--secondary-300);

				& time {
					color: var(--secondary-light-500);
				}

				& figcaption {
					color: var(--secondary-light-500);
				}

				&:is(:hover, :focus) {
					border-color: currentColor;
					background-color: var(--secondary-500);
				}
			}
		}
	}
}

#artworks {
	& ul {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
		padding: 0;
		margin: 0;
		gap: 1rem;
	}

	& h2 {
		margin: 2rem 0;
		font-size: 2rem;

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

	& a {
		display: block;
		text-decoration: unset;
		& figure {
			margin: 0;
			padding: 0.4rem;
			border-width: 2px;
			border-style: solid;
			border-radius: var(--round);

			& img {
				display: flex;
				height: 12rem;
				width: 100%;
				border-bottom: unset;
				object-fit: contain;
				border-radius: inherit;
			}

			& figcaption {
				font-family: Urbanist, sans-serif;
				font-size: 1.2rem;
			}
		}
	}
}

#gallery article {
	& h3 {
		margin-bottom: 1rem;
	}
	& figure {
		& time {
			display: flex;
			font-weight: bold;
		}

		& a {
			width: fit-content;
			align-self: center;
			& img {
				min-height: fit-content;
				max-height: 18rem;
				object-fit: contain;
				border-radius: inherit;
				border-style: inherit;
				border-width: inherit;
				border-color: inherit;
			}
		}
	}
}