website/_src/assets/css/citrus/gallery.css

#gallery {
	& article {
		border-radius: 4px;
		box-shadow:
			inset 0 0 0 4px color-mix(in lch, var(--light), var(--dark) 2%),
			inset 0 0 0 8px var(--citrus-mix-dark),
			var(--shadow-heavy);
		background-color: color-mix(
			in lch,
			var(--citrus-mix-dark),
			var(--citrus-mix)
		);
		background-image:
			var(--noise),
			linear-gradient(
				135deg,
				color-mix(in lch, var(--citrus-mix-dark), var(--citrus-mix)),
				var(--citrus-mix-dark)
			);
	}
	& a:has(figure) {
		font-family: "Urbanist", sans-serif;
		transition:
			border-color var(--trans),
			background-color var(--trans);
		box-shadow: var(--shadow-light);
		&:is(:hover, :focus) {
			& figure {
				transition: inherit;
				border-color: currentColor;
			}
		}
	}
	& a figure {
		border-width: 4px;
		border-radius: 0;
		&:is(:not(a:hover *, a:focus *)) {
			border-color: var(--light);
			background-color: var(--light);
		}
	}
}
:is(#art li, #art section a):nth-child(odd) {
	transform: var(--rot-minus);
}
#art div {
	background-color: var(--citrus-light);
	background-image: var(--noise), var(--paper);
	background-size: auto, 4px;
	box-shadow: var(--shadow-light);
	margin-bottom: var(--pad-xl);
	padding: var(--pad-xl);
	transform: var(--rot-plus);
	& p {
		line-height: 32px;
		padding: 0;
	}
}