.grid-flow {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-sm);
}

.grid-flow > * {
	display: block;
}

.grid-flow.no-captions .figure-caption {
	display: none;
}

/* Base Fractional Widths */
.full, .two3, .one2, .one3 { grid-column: 1/-1; }

/* Layout Separators */
.separator {
	border-top: 1px solid var(--borderColor);
	grid-column: 1/-1 !important;
	display: grid;
	grid-template-columns: subgrid;
}
.separator > * {
	grid-column: 1/-1;
}

@media screen and (max-width: 64rem) { /* < lg */
	.index .one4 { width: 100%; }
}

@media screen and (min-width: 64rem) { /* DESKTOP */

	.grid-flow {
		grid-template-columns: repeat(12, 1fr);
	}

	.grid-flow > .center {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100% !important;
	}

	.one6.clear { grid-column: 1/span 2;	}
	.one4.clear { grid-column: 1/span 3;	}
	.one3.clear { grid-column: 1/span 4; }
	.one2.clear { grid-column: 1/span 6; }
	.two3.clear { grid-column: 1/span 8; }

	.one6 { grid-column: span 2;	}
	.one4 { grid-column: span 3;	}
	.one3 { grid-column: span 4; }
	.one2 { grid-column: span 6; }
	.two3 { grid-column: span 8; }

	.separator.one6 > * { grid-column: span 2;	}
	.separator.one4 > * { grid-column: span 3;	}
	.separator.one3 > * { grid-column: span 4; }
	.separator.one2 > * { grid-column: span 6; }
	.separator.two3 > * { grid-column: span 8; }

	.one6.clear { grid-column: span 2 / -1; }
	.one4.right { grid-column: span 3 / -1; }
	.one3.right { grid-column: span 4 / -1; }
	.one2.right { grid-column: span 6 / -1; }
	.two3.right { grid-column: span 8 / -1; }


	/* Separator Overrides */
	.separator,
	.grid-flow .full { 
		grid-column: 1/-1 !important;
	}

	/* Image Cropping Helpers */
	.crop img {
		min-height: 100%;
		object-fit: cover;
	}
	.crop.one2 img { height: 28vw; }
	.crop.one3 img { height: 19vw; }
	.crop.one4 img { height: 15vw; }

	.topmargin { 
		margin-top: 5em !important; 
	}
	figure.margin { /* TODO the css class is lying! */
		padding-top: var(--spacing-xl);
	}

	figcaption { text-align: left !important; }
}


.dynamic-flow-element {
	display: flex;
	flex-direction: column;
	grid-column: span 12;
}
@media screen and (min-width: 64rem) { /* < lg */
	.dynamic-flow-element {
		grid-column: span 8;
	}
}
@media screen and (min-width: 96rem) {
	.dynamic-flow-element {
		grid-column: span 6;
	}
}