/*
 ██████   █████  ██      ██      ███████ ██████  ██    ██ ██████   ██████  ██   ██
██       ██   ██ ██      ██      ██      ██   ██  ██  ██  ██   ██ ██    ██  ██ ██
██   ███ ███████ ██      ██      █████   ██████    ████   ██████  ██    ██   ███
██    ██ ██   ██ ██      ██      ██      ██   ██    ██    ██   ██ ██    ██  ██ ██
 ██████  ██   ██ ███████ ███████ ███████ ██   ██    ██    ██████   ██████  ██   ██

A pure css gallery, made with a bunch of wonderful hacks! Will be upgraded to
be (slightly) less hacky once :target-within lands in browsers.

Exported to codepen: https://codepen.io/sbrl/details/YzZJYxg
 */

:root {
	--gallerybox-bg: hsla(0, 0%, 95%, 0.75);
}

@media (prefers-color-scheme: dark) {
	:root {
		--gallerybox-bg: hsla(0, 0%, 30%, 0.75);
	}
}

.gallery {
	position: relative; /* to make the figcaption snap to the right place */
	/*
	The <picture /> element causes a small amount of extra padding at the
	bottom of the element, so we use this to balance out the look at the top
	ideally we'd shift the <picture> out of the way, but we can't without also
	shifting the <img /> inside
	*/
	padding: 1em 0;
}

.gallery-item {
	margin: 0;
}

.gallery-item > figcaption {
	background: var(--gallerybox-bg);
	position: absolute;
	bottom: 0.25em; left: 0; right: 0;
	padding: 0.75em 1em;
	text-align: center;
}