.geometric-grid {
	--grid-columns: 40;
	--grid-size: calc(100vw / var(--grid-columns));
	--grid-line-width: 1px;
	--panel-border-width: 1.25px;
	--panel-inset: calc(var(--grid-size) * 7);
	--panel-cut: var(--grid-size);
	--section-padding-top: calc(var(--grid-size) * 3);
	--section-padding-bottom: calc(var(--grid-size) * 3);
	--panel-padding-top: calc(var(--grid-size) * 2);
	--panel-padding-bottom: calc(var(--grid-size) * 2);
	--panel-snap-padding: 0px;

	box-sizing: border-box;
	position: relative;
	width: 100%;
	padding-block: var(--section-padding-top) var(--section-padding-bottom);
	background-color: var(--section-background);
	background-image:
		linear-gradient(to right, var(--grid-line) var(--grid-line-width), transparent var(--grid-line-width)),
		linear-gradient(to bottom, var(--grid-line) var(--grid-line-width), transparent var(--grid-line-width));
	background-position: 0 0;
	background-size: var(--grid-size) var(--grid-size);
}

.geometric-grid__panel {
	box-sizing: border-box;
	position: relative;
	isolation: isolate;
	/* Grid strokes extend right from each column boundary. Include the final
	 * stroke so the panel's right border overlaps it, like its left border. */
	width: calc(100% - (var(--panel-inset) * 2) + var(--grid-line-width));
	margin-inline: var(--panel-inset) auto;
	padding-block: var(--panel-padding-top) calc(var(--panel-padding-bottom) + var(--panel-snap-padding));
	background: var(--grid-line);
	clip-path: polygon(
		var(--panel-cut) 0,
		calc(100% - var(--panel-cut)) 0,
		100% var(--panel-cut),
		100% calc(100% - var(--panel-cut)),
		calc(100% - var(--panel-cut)) 100%,
		var(--panel-cut) 100%,
		0 calc(100% - var(--panel-cut)),
		0 var(--panel-cut)
	);
}

.geometric-grid .geometric-grid__panel::before {
	/* Compensate for the inset on both axes so the 45-degree borders
	 * have the same perpendicular thickness as the straight edges. */
	--panel-inner-cut: calc(var(--panel-cut) - var(--panel-border-width) * .5857864376);
	position: absolute;
	inset: var(--panel-border-width);
	z-index: 0;
	content: "";
	background: var(--panel-background);
	clip-path: polygon(
		var(--panel-inner-cut) 0,
		calc(100% - var(--panel-inner-cut)) 0,
		100% var(--panel-inner-cut),
		100% calc(100% - var(--panel-inner-cut)),
		calc(100% - var(--panel-inner-cut)) 100%,
		var(--panel-inner-cut) 100%,
		0 calc(100% - var(--panel-inner-cut)),
		0 var(--panel-inner-cut)
	);
}

@media (max-width: 64rem) {
	.geometric-grid {
		--grid-columns: 32;
		--panel-inset: calc(var(--grid-size) * 2);
		--panel-cut: calc(var(--grid-size) * 3);
		--panel-padding-top: calc(var(--grid-size) * 3);
		--panel-padding-bottom: calc(var(--grid-size) * 3);
	}
}

@media (max-width: 47.9375rem) {
	.geometric-grid {
		--grid-columns: 16;
		--panel-inset: var(--grid-size);
		--panel-cut: calc(var(--grid-size) * 2);
	}
}