/*** Module: Large Statement ***/

.module.large-statement {
	overflow-x: clip;
	padding-block: 400px;
}

.module.large-statement .intro {
	grid-column: 1 / -1;
	height: calc(100% + 300px);
}

.module.large-statement.align-center .intro {
	text-align: center;
}

/* Left — constrain the measure; the smaller (heading-4) statement reads as a
   section sub-statement rather than a full-width centered band. */
.module.large-statement.align-left .intro {
	grid-column: 1 / span 8;
	text-align: left;
}

.module.large-statement .intro > * + * {
	margin-top: var(--text-spacing-small);
}

.module.large-statement .intro > * {
	position: sticky;
	top: 50%;
	transform: translateY(-50%);
}

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

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

	.module.large-statement {
		padding-block: 240px;
	}

	.module.large-statement.align-left .intro {
		grid-column: 1 / -1;
	}

}

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

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

	.module.large-statement {
		padding-block: 120px;
	}

	/* No scroll pin on mobile — the statement scrolls with the page. */
	.module.large-statement .intro {
		height: auto;
	}

	.module.large-statement .intro > * {
		position: static;
		transform: none;
	}

}