/**
 * Featured Story — large quote with image, similar to testimonial
 */

/*** Content ***/

.module.featured-story .content {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	grid-column: 1 / 7;
	grid-row: 1;
}

.module.featured-story .content > .eyebrow + .quote {
	margin-top: var(--text-spacing-small);
}

.module.featured-story .quote + .attribution {
	margin-top: var(--text-spacing-medium);
}

.module.featured-story .attribution + .buttons,
.module.featured-story .quote + .buttons {
	margin-top: var(--text-spacing-xlarge);
}

/*** Quote ***/

.module.featured-story .quote {
	margin: 0;
	padding: 0;
}

.module.featured-story .quote p {
	font-family: var(--heading-font);
	font-size: calc(58rem / 16);
	line-height: 1.1;
	margin: 0;
}

/*** Image ***/

.module.featured-story .media {
	aspect-ratio: 4 / 3;
	border-radius: var(--border-radius-large);
	grid-column: 8 / -1;
	grid-row: 1;
}

/** No Image **/

.module.featured-story.no-image .content {
	grid-column: 1 / 9;
}

/*
 * ====================================================================== *
 * MQ <=1200px — Laptop
 * ====================================================================== *
 */

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

	.module.featured-story .quote p {
		font-size: calc(44rem / 16);
	}

}

/*
 * ====================================================================== *
 * MQ <=950px — Tablet
 * ====================================================================== *
 */

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

	.module.featured-story > .container {
		display: flex;
		flex-direction: column;
		gap: var(--text-spacing-large);
	}

	.module.featured-story .content {
		grid-column: unset;
		grid-row: auto;
	}

	.module.featured-story .media {
		grid-column: unset;
		grid-row: auto;
		max-width: 600px;
	}

}

/*
 * ====================================================================== *
 * MQ <=650px — Mobile
 * ====================================================================== *
 */

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

	.module.featured-story .quote p {
		font-size: calc(36rem / 16);
	}

	.module.featured-story .media {
		aspect-ratio: 3 / 2;
		max-width: none;
	}

}