/**
 * Module: Statement
 *
 * The teal box is the content grid itself, so its children keep the container's columns.
 */

/*** Module: Statement ***/

.module.statement .content {
	row-gap: 0;
}

.module.statement .content > :not(.texture) {
	grid-column: 2 / span 10;
}

.module.statement .eyebrow {
	margin-bottom: var(--text-spacing-xsmall);
}

.module.statement .statement {
	margin: 0;
}

.module.statement .statement :is(strong, b) {
	font-weight: inherit;
}

.module.statement .content > .btn {
	justify-self: start;
	margin-top: var(--text-spacing-medium);
}

/** Background: Teal **/

.module.statement.bg-teal .content {
	background: var(--teal);
	padding: var(--module-spacing-medium) 0 var(--module-spacing-small);
	text-align: center;
}

.module.statement.bg-teal .eyebrow {
	color: var(--white);
}

.module.statement.bg-teal .statement {
	color: var(--white);
	padding: 0 calc(var(--one-column-width));
}

.module.statement.bg-teal .content > .btn {
	justify-self: center;
}

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

@media only screen and (max-width: calc(950rem / 16)) {
	.module.statement.bg-teal .statement {
		padding: 0;
	}
}

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

@media only screen and (max-width: calc(650rem / 16)) {
	.module.statement .content > :not(.texture) {
		grid-column: 1 / -1;
	}

	.module.statement.bg-teal .content {
		padding-inline: var(--text-spacing-small);
	}
}