/**
 * Steps — a numbered sequence, each step a title and a short description.
 *
 * The numeral is set off the global type scale, so its size lives here. It is decorative:
 * the ordered list carries the order for assistive tech.
 */

/*** Module: Steps ***/

.module.steps ol {
	display: flex;
	flex-direction: column;
	gap: var(--module-spacing-medium);
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.steps li {
	align-items: start;
}

.module.steps .number {
	color: var(--slate);
	font-family: var(--body-font);
	font-size: calc(64rem / 16);
	font-weight: 700;
	grid-column: 1 / span 2;
	letter-spacing: 0;
	line-height: 1;
	padding-right: var(--gap);
	text-align: right;
}

.module.steps .content {
	grid-column: 3 / span 7;
	margin-left: calc(var(--gap) * -1);
}

.module.steps .content > * {
	margin: 0;
}

.module.steps .content > * + * {
	margin-top: var(--text-spacing-xsmall);
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1200 - Smaller Desktop Sizes / Larger Tablet Sizes */
/***************************************************************************************************************************************************************************************/

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

	.module.steps .number {
		font-size: calc(48rem / 16);
	}

	.module.steps .content {
		grid-column: 3 / span 8;
	}

}

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

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

	.module.steps li {
		gap: var(--text-spacing-xsmall);
	}

	.module.steps .number {
		grid-column: 1 / -1;
		padding-right: 0;
		text-align: left;
	}

	.module.steps .content {
		grid-column: 1 / -1;
		margin-left: 0;
	}

}