/* ABOUTME: Base styles for responsive images and figure elements. */
/* ABOUTME: Handles aspect ratios, lazy-loading placeholders, and copyright labels. */
figure {
	margin: 0;
	line-height: 0;
	width: 100%;
	position: relative;
	overflow: hidden;
}

figure img,
figure svg {
	max-width: 100%;
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: var(--desktop-aspect-ratio);
}

figure:has(svg) {
	width: 100%;
}

@media screen and (max-width: 768px) {
	figure img,
	figure svg {
		aspect-ratio: var(--mobile-aspect-ratio);
	}
}
.copyright-label {
	position: absolute;
	bottom: 0px;
	right: 0px;
	max-width: calc(100% - 8px);
	font-size: var(--step--2);
	background: white;
	z-index: 9999;
	border: 1px solid white;
	line-height: 1;
	border-top-left-radius: 3px;
	padding: 2px 3px;
	overflow-wrap: anywhere;
}