/**
 * Value Props style: Statement + Icon Pairs
 *
 * The icon circle is the module's shared 48px disc from value-props.css — this file only adds
 * the plus glyph and the three-column layout around it.
 */

.module.value-props.style-icon-pairs .container {
	display: flex;
	flex-direction: column;
	gap: var(--module-spacing-small);
}

.module.value-props.style-icon-pairs .container > :is(h1, h2, h3, h4, h5, h6) {
	text-align: center;
}

.module.value-props.style-icon-pairs .props {
	column-gap: var(--text-spacing-large);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	row-gap: var(--module-spacing-small);
}

.module.value-props.style-icon-pairs .props > li {
	align-items: center;
	column-gap: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: var(--text-spacing-xsmall);
}

.module.value-props.style-icon-pairs .props > li > .add {
	height: 24px;
	width: 24px;
}

.module.value-props.style-icon-pairs .props > li > .add svg {
	display: block;
	height: 100%;
	width: 100%;
}

.module.value-props.style-icon-pairs .props > li > p {
	flex-basis: 100%;
	margin: 0;
	text-align: center;
}

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

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

	.module.value-props.style-icon-pairs .props {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* An odd last prop keeps a column's width rather than running the row, and centres on the two
	   above it — it spans both tracks so the centring has the whole row to work against. */
	.module.value-props.style-icon-pairs .props > li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - var(--gap)) / 2);
	}

}

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

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

	.module.value-props.style-icon-pairs .props {
		gap: var(--text-spacing-large);
		grid-template-columns: minmax(0, 1fr);
	}

	/* One column, so the odd last prop has no pair to centre against — it runs the row like the
	   two above it. */
	.module.value-props.style-icon-pairs .props > li:last-child:nth-child(odd) {
		width: 100%;
	}

	.module.value-props.style-icon-pairs .container {
		gap: var(--text-spacing-large);
	}

}