figure {
	margin: 1em 0;

	&:has(figcaption),
	&.outlined {
		padding: .5rem;
		margin-inline: -.5em;
		border: 1px solid var(--color-gray-80);
		box-shadow: 0 .1em .2em var(--color-gray-95);
		text-align: center;
		background: white;
	}

	&:has(figcaption) {
		counter-increment: figure;
	}

	/* Annoying Markdown artifacts */
	> p,
	figcaption > p:only-child {
		display: contents;
	}

	> img,
	> video,
	> p > img,
	> p > video {
		width: 100%;
		max-height: 75svh;
		object-fit: contain;
	}

	& figcaption {
		font: 500 75% var(--font-sans);
		color: var(--color-gray-medium);
		background: var(--color-gray-95);
		padding: .5rem;
		margin: -.5rem;
		margin-top: .5rem;
		text-align: left;

		&::before {
			content: "Figure " counter(figure) ": ";
			font-weight: bold;
		}

		& a:where(:not(:hover, :focus, :active)) {
			color: inherit;
			text-decoration: underline;
			text-decoration-color: color-mix(in lab, currentColor, transparent 70%);
		}
	}

	/* Variations */

	&.center,
	&.width-m {
		width: fit-content;
		margin-inline: auto;
	}

	&.width-m {
		max-width: var(--content-width-s);
	}

	&.no-padding {
		padding: 0;
		margin-inline: 0;

		> figcaption {
			margin: 0;
		}

		> img {
			display: block;
		}
	}

	&.float {
		--figure-max-width: calc(var(--content-width) / 2 - 2em);
		--figure-min-width: 200px;

		float: inline-start;
		min-width: var(--figure-min-width);
		max-width: var(--figure-max-width);
		margin-block: 0 1em;

		/* Margin */
		--figure-clamped-width: clamp(var(--figure-min-width), 100%, var(--figure-max-width));
		--figure-max-outset: calc(min(var(--figure-clamped-width), var(--content-margin-min)) - 1em);
		--figure-outset: min(3em, var(--figure-max-outset));

		margin-inline: calc(-1 * var(--figure-outset)) 1em;

		&:where(:nth-child(odd of .float)) {
			/* Right floats */
			float: inline-end;
			margin-inline: 1em calc(-1 * var(--figure-outset));

			&:where(:root.has-toc *) {
				/* Do not collide with TOC */
				--figure-outset: 0em;
			}
		}

		/* Link figures can be smaller */
		&:where(:has(> a > img)) {
			--figure-max-width: 200px;
			--figure-min-width: 100px;
		}

		@media (width > 1200px) {
			/* Place figure in margin if possible */
			&.margin {
				--figure-width: calc(var(--content-margin-min) - 2em);
				--figure-outset: var(--figure-max-outset);

				max-width: var(--figure-clamped-width);
				margin-block-end: 0;
			}
		}
	}

	&.caption-h {
		display: flex;
		gap: 1em;

		figcaption {
			flex: 1;
		}
	}

	& > a > img {
		display: block;
	}

	/* Has multiple images? */
	&:has(> :nth-last-child(3), img:nth-of-type(2)),
	&.multiple {
		/* Pointless <p> created from Markdown */
		& > p:has(> img):not(:has(> :not(img))) { /* Only contains img children */
			display: contents;
		}

		&:has(> .main) { /* Has main image? */
			display: grid;
			grid-template-columns: 3fr 1fr;
			grid-auto-flow: dense;
			gap: .3rem;

			> .main {
				grid-row-end: span 2;
				height: 100%;
			}

			> :not(.main, figcaption) {
				grid-column: 2;

				xmax-width: 250px;
			}

			& figcaption {
				grid-column-end: span 2;
			}
		}

		&:not(:has(> .main)) { /* No main image, display all side by side */
			display: flex;
			align-items: start;
			flex-wrap: wrap;
			gap: .5rem;

			> :not(figcaption),
			> p > img {
				width: calc(50% - .25rem);
				min-width: 0;
				flex: 1;
				object-fit: contain;
			}

			> figcaption {
				flex-basis: 100%;
				box-sizing: content-box;
			}
		}
	}
}