/**
 * Content Media — side-by-side image and content with image-left and image-right layouts plus immersive and standalone display modes.
 */

.module.content-media .container.grid {
	align-items: center;
}

.module.content-media .media {
	grid-column: 1 / span 6;
	grid-row: 1;
	margin-right: calc(var(--gap) * -1);
}

.module.content-media .media.display-immersive {
	--immersive-fade-angle: 155deg;
	position: absolute;
}

.module.content-media .media.display-standalone {
	grid-column: 1 / span 5;
	margin: 0 calc(var(--gap) * -1);
}

.module.content-media .media.display-standalone img {
	border-radius: 32px;
}

.module.content-media .media.display-standalone + .content {
	grid-column: 7 / -1;
}

/* Image-right layout flips the gradient so the fade points toward the page bg (left side, where the text content lives) instead of toward the right viewport edge. */
.module.content-media.layout-image-right .media.display-immersive {
	--immersive-fade-angle: 205deg;
}

.module.content-media .content {
	grid-column: 7 / -2;
	margin-right: calc(var(--gap) * -1);
	grid-row: 1;
}

.module.content-media.layout-image-right .media {
	grid-column: 7 / -1;
	margin-right: 0;
	margin-left: calc(var(--gap) * -1);
}

.module.content-media.layout-image-right .content {
	grid-column: 2 / span 5;
}

.module.content-media.layout-image-right .media.display-standalone {
	grid-column: 8 / -1;
}

.module.content-media.layout-image-right .media.display-standalone + .content {
	grid-column: 1 / span 6;
}

.module.content-media .media img {
	display: block;
	height: auto;
	width: 100%;
}

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

.module.content-media .content > .heading-3 {
	color: var(--maroon);
}

.module.content-media .content > .description,
.module.content-media .content > .heading-3 + .description,
.module.content-media .content > .description + .btn,
.module.content-media .content > .heading-3 + .btn {
	margin-top: var(--text-spacing-medium);
}

.module.content-media .content > .eyebrow + .description {
	margin-top: var(--text-spacing-xsmall);
}

.module.content-media .content > .description:only-child {
	margin: 0;
}

/** Photo Caption **/

.module.content-media .photo-caption {
	grid-column: 8 / -1;
	grid-row: 1;
}

.module.content-media.layout-image-right .photo-caption {
	grid-column: 1 / span 5;
}

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

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

	.module.content-media .content,
	.module.content-media .media.display-standalone + .content {
		grid-column: 7 / -1;
		margin-right: 0;
	}

	.module.content-media.layout-image-right .content,
	.module.content-media.layout-image-right .media.display-standalone + .content {
		grid-column: 1 / span 6;
		margin-left: 0;
	}

	.module.content-media .media,
	.module.content-media .media.display-standalone {
		margin-right: 0;
	}

	.module.content-media.layout-image-right .media,
	.module.content-media.layout-image-right .media.display-standalone {
		margin-left: 0;
	}

}

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

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

	/* Selector list enumerates every variant up to the 5-class .layout-image-right .media.display-standalone + .content so the reset wins on specificity. */
	.module.content-media .media,
	.module.content-media .media.display-immersive,
	.module.content-media .media.display-standalone,
	.module.content-media.layout-image-right .media,
	.module.content-media.layout-image-right .media.display-immersive,
	.module.content-media.layout-image-right .media.display-standalone,
	.module.content-media .content,
	.module.content-media .media.display-standalone + .content,
	.module.content-media.layout-image-right .content,
	.module.content-media.layout-image-right .media.display-standalone + .content {
		grid-column: 1 / -1;
		grid-row: auto;
		margin: 0;
	}

	.module.content-media .content {
		text-align: center;
	}

	.module.content-media .media,
	.module.content-media .media.display-immersive,
	.module.content-media .media.display-standalone,
	.module.content-media.layout-image-right .media,
	.module.content-media.layout-image-right .media.display-immersive,
	.module.content-media.layout-image-right .media.display-standalone {
		margin: -100px auto;
		max-width: 650px;
		order: 1;
	}

	.module.content-media .media.display-standalone,
	.module.content-media.layout-image-right .media.display-standalone {
		margin-bottom: 0;
		margin-top: 0;
		order: -1;
	}

	.module.content-media .media.display-immersive,
	.module.content-media.layout-image-right .media.display-immersive {
		position: relative;
	}

}