.about-image-grid {
	--about-grid-columns: 60;
	--about-grid-size: calc(100vw / var(--about-grid-columns));
	--about-dot-size: 1.5px;
	--about-grid-edge-padding: var(--about-dot-size);
	--about-pin-size: calc(var(--about-grid-size) * .85);
	background-color: var(--sz-chalk);
	background-image:
		radial-gradient(circle at 0 0, var(--sz-grid-line) 0 var(--about-dot-size), transparent calc(var(--about-dot-size) + .5px)),
		radial-gradient(circle at 100% 0, var(--sz-grid-line) 0 var(--about-dot-size), transparent calc(var(--about-dot-size) + .5px)),
		radial-gradient(circle at 0 100%, var(--sz-grid-line) 0 var(--about-dot-size), transparent calc(var(--about-dot-size) + .5px)),
		radial-gradient(circle at 100% 100%, var(--sz-grid-line) 0 var(--about-dot-size), transparent calc(var(--about-dot-size) + .5px));
	background-position: 0 var(--about-grid-edge-padding);
	background-size: var(--about-grid-size) var(--about-grid-size);
	box-sizing: border-box;
	min-height: calc(var(--about-grid-size) * 35 + var(--about-grid-edge-padding) * 2);
	padding-block: var(--about-grid-edge-padding);
	position: relative;
	width: 100%;
}

.about-image-grid__canvas { min-height: calc(var(--about-grid-size) * 35); position: relative; width: 100%; }
.about-image-grid__figure { margin: 0; position: absolute; }
.about-image-grid__figure img { display: block; height: 100%; object-fit: cover; width: 100%; }

/* All frame edges land on the same dot lattice used by the background. */
.about-image-grid__figure--team { height: calc(var(--about-grid-size) * 17); left: calc(var(--about-grid-size) * 5); top: calc(var(--about-grid-size) * 3); width: calc(var(--about-grid-size) * 28); }
.about-image-grid__figure--client { height: calc(var(--about-grid-size) * 16); left: calc(var(--about-grid-size) * 28); top: calc(var(--about-grid-size) * 16); width: calc(var(--about-grid-size) * 16); z-index: 2; }
.about-image-grid__figure--site { height: calc(var(--about-grid-size) * 16); left: calc(var(--about-grid-size) * 42); top: calc(var(--about-grid-size) * 4); width: calc(var(--about-grid-size) * 13); }

.about-image-grid__pin { background: var(--sz-graphite); height: var(--about-pin-size); pointer-events: none; position: absolute; width: var(--about-pin-size); z-index: 4; }
.about-image-grid__pin--bottom-left { bottom: 0; left: 0; transform: translate(-50%, 50%); }
.about-image-grid__pin--top-right { right: 0; top: 0; transform: translate(50%, -50%) rotate(45deg); }
.about-image-grid__pin--top-center { left: 50%; top: 0; transform: translate(-50%, -50%) rotate(45deg); }
.about-image-grid__pin--top-left { left: 0; top: 0; transform: translate(-50%, -50%); }
.about-image-grid__pin--bottom-right { bottom: 0; right: 0; transform: translate(50%, 50%); }

@media (max-width: 64rem) and (min-width: 48rem) {
	.about-image-grid {
		--about-dot-size: 1.15px;
		--about-pin-size: calc(var(--about-grid-size) * .95);
	}
}

@media (max-width: 47.9375rem) {
	.about-image-grid {
		--about-grid-columns: 13;
		--about-dot-size: 1.75px;
		--about-pin-size: calc(var(--about-grid-size) * .62);
		min-height: calc(var(--about-grid-size) * 27 + var(--about-grid-edge-padding) * 2);
	}
	.about-image-grid__canvas { min-height: calc(var(--about-grid-size) * 27); }
	.about-image-grid__figure--team { height: calc(var(--about-grid-size) * 8); left: calc(var(--about-grid-size) * 4); top: calc(var(--about-grid-size) * 2); width: calc(var(--about-grid-size) * 7); }
	.about-image-grid__figure--team .about-image-grid__pin { bottom: auto; left: auto; right: 0; top: 0; transform: translate(50%, -50%) rotate(45deg); }
	.about-image-grid__figure--client { height: calc(var(--about-grid-size) * 6); left: calc(var(--about-grid-size) * 2); top: calc(var(--about-grid-size) * 9); width: calc(var(--about-grid-size) * 6); z-index: 2; }
	.about-image-grid__figure--site { height: calc(var(--about-grid-size) * 8); left: calc(var(--about-grid-size) * 5); top: calc(var(--about-grid-size) * 17); width: calc(var(--about-grid-size) * 5); }
}