/*
 * bpDNA growth graphic (Homepage + Challenges we solve). Gated to those two pages in functions.php.
 *
 * The <picture> swaps a 1.6:1 desktop SVG (viewBox 2560x1600) for a SQUARE mobile one
 * (viewBox 343x343) at 781px. The two aspect ratios cannot share one box, so the desktop
 * crop has to be scoped to desktop: the markup previously pinned height:570px inline at every
 * width, which on mobile cover-cropped the square art to 356x570 and cut the left and right
 * "Market Share Growth" circles in half (issue #282).
 *
 * Mobile sizes from the square file's own ratio and is never cropped. Desktop crops the 1.6:1 file
 * back to the artwork: measured on the export, the drawing occupies the middle 1.133:1 with 17.1%
 * empty on each side and 3.5% top and bottom. Cropping to 1.15 takes 14% off each side, so the
 * whitespace goes and the outer circles keep a small margin. The old 600x570 box was 1.045 — just
 * past the whitespace, which is what shaved those circles (issue #299).
 *
 * The breakpoint matches the <source media> attribute in the markup; if one moves, both move.
 */

.bpdna {
	display: block;
	width: 100%;
}

.bpdna img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 782px) {
	.bpdna img {
		aspect-ratio: 1.15;
		object-fit: cover;
	}
}