/**
 * Module: Value Props
 *
 * Columns come from the Columns field as a .cols-{n} class. The item list is its own 12-column
 * grid so a short last row keeps the same column positions as the rows above it.
 */

/*** Module: Value Props ***/

.module.value-props .container {
	row-gap: 0;
}

.module.value-props .container > .heading-2 {
	grid-column: 1 / span 8;
	margin-bottom: var(--module-spacing-medium);
}

.module.value-props .items {
	grid-column: 1 / -1;
	row-gap: var(--module-spacing-medium);
}

.module.value-props .item {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	grid-column: span 4;
}

.module.value-props.cols-2 .item {
	grid-column: span 6;
}

.module.value-props.cols-4 .item {
	grid-column: span 3;
}

.module.value-props.cols-2 .item > :not(.icon) {
	max-width: calc(503 / 578 * 100%);
}

.module.value-props .item > .icon {
	color: var(--cyan);
	height: calc(40rem / 16);
	margin-bottom: var(--text-spacing-xsmall);
	width: auto;
}

.module.value-props .item > .eyebrow {
	margin-bottom: var(--text-spacing-xsmall);
}

.module.value-props .item > .heading-4 + .description {
	margin-top: var(--text-spacing-xxsmall);
}

.module.value-props .container > .btn {
	grid-column: 1 / -1;
	justify-self: start;
	margin-top: var(--text-spacing-xlarge);
}

/** Background Image **/

.module.value-props.textured {
	padding-bottom: calc(var(--module-spacing-xlarge) + var(--text-spacing-large));
	--texture-fade: 70%;
}

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

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

	.module.value-props .container > .heading-2 {
		grid-column: 1 / -1;
	}

	.module.value-props.cols-4 .item {
		grid-column: span 6;
	}

}

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

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

	.module.value-props .container > .heading-2 {
		margin-bottom: var(--module-spacing-small);
	}

	.module.value-props .items {
		row-gap: var(--text-spacing-xlarge);
	}

	.module.value-props:is(.cols-2, .cols-3, .cols-4) .item {
		grid-column: 1 / -1;
	}

	.module.value-props.cols-2 .item > :not(.icon) {
		max-width: none;
	}

	.module.value-props.textured {
		padding-bottom: var(--module-spacing-large);
	}

}