/**
 * Two Column WYSIWYG — side-by-side rich content columns with buttons
 */

/*** Left Column ***/

.module.two-column-wysiwyg .left {
	grid-column: 1 / 6;
	grid-row: 1;
}

.module.two-column-wysiwyg .left > * + * {
	margin-top: var(--text-spacing-small);
}

/*** Right Column ***/

.module.two-column-wysiwyg .right {
	grid-column: 7 / -1;
	grid-row: 1;
}

.module.two-column-wysiwyg .right > * + * {
	margin-top: var(--text-spacing-small);
}

.module.two-column-wysiwyg .right > * + .buttons {
	margin-top: var(--text-spacing-medium);
}

/*** Balanced ***/

.module.two-column-wysiwyg.balanced .left {
	grid-column: 1 / 7;
}

.module.two-column-wysiwyg.balanced .right {
	grid-column: 7 / -1;
}

/*** Eyebrow Balance ***/

/*
 * Side by side, a column with no eyebrow starts its heading a line higher than
 * its neighbor. Hold that line so both headings share a baseline — the height
 * is .eyebrow's line box (18px type on a 23px line).
 */

.module.two-column-wysiwyg > .container:has(.eyebrow) > :is(.left, .right):not(:has(.eyebrow))::before {
	content: '';
	display: block;
	height: calc(23rem / 16);
	margin-bottom: var(--text-spacing-small);
}

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

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

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

	.module.two-column-wysiwyg .left,
	.module.two-column-wysiwyg .right {
		grid-column: unset;
		grid-row: auto;
	}

	.module.two-column-wysiwyg > .container:has(.eyebrow) > :is(.left, .right):not(:has(.eyebrow))::before {
		display: none;
	}

}

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

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

	.module.two-column-wysiwyg > .container {
		gap: var(--text-spacing-medium);
	}

}