/**
 * Impact style: Figure Below Photo
 *
 * The row only; the intro, the column count and the figure/caption stack are shared.
 */

.module.impact.style-amount-below .amounts {
	gap: var(--gap);
}

.module.impact.style-amount-below .amounts > li {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-medium);
}

.module.impact.style-amount-below .media {
	aspect-ratio: 4 / 3;
	border-radius: 10px;
}

.module.impact.style-amount-below .figure {
	color: var(--dark-teal);
}

.module.impact.style-amount-below .description {
	color: var(--charcoal);
}

.module.impact.style-amount-below .amounts:has(> li:nth-child(5):last-child) {
	gap: var(--text-spacing-small);
}

.module.impact.style-amount-below .amounts:has(> li:nth-child(5):last-child) > li {
	gap: var(--text-spacing-xsmall);
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem/16)) {

	/* Alone on the last row it still measures one column, so its photograph matches the ones
	   above rather than shrinking to whatever the copy asks for. */
	.module.impact.style-amount-below .amounts > li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		max-width: calc((100% - var(--gap)) / 2);
		width: 100%;
	}

	/* A five-up sets its own gap, so the column it has to match is a different width. */
	.module.impact.style-amount-below .amounts:has(> li:nth-child(5):last-child) > li:last-child:nth-child(odd) {
		max-width: calc((100% - var(--text-spacing-small)) / 2);
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem/16)) {

	/* Two across rather than one: a photograph with a figure under it is a small enough lockup to
	   read at half a phone's width, and stacked single-file the row became most of the page. */
	.module.impact.style-amount-below .amounts,
	.module.impact.style-amount-below .amounts:has(> li:nth-child(5):last-child) {
		gap: var(--text-spacing-large) var(--text-spacing-xsmall);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.module.impact.style-amount-below .amounts > li {
		gap: var(--text-spacing-xsmall);
	}

	/* Alone on the last row it keeps a column's width, the way it does a rung up — the gap between
	   the columns is this rung's own, so the width it matches is worked out from that. */
	.module.impact.style-amount-below .amounts > li:last-child:nth-child(odd),
	.module.impact.style-amount-below .amounts:has(> li:nth-child(5):last-child) > li:last-child:nth-child(odd) {
		max-width: calc((100% - var(--text-spacing-xsmall)) / 2);
	}

}