.callout__media {
	/* Mobile-first — a fixed height (not aspect-ratio, since the width comes
	   from the grid-2 column and varies) — var(--callout-media-height-mobile)
	   (300px) up to var(--callout-media-height) (400px) at the same 61.75em
	   breakpoint .grid-2 itself switches to side-by-side at. */
	height: var(--callout-media-height-mobile);
	overflow: hidden;
	border-radius: var(--radius-lg);

	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

@media (min-width: 61.75em) {
	.callout__media {
		height: var(--callout-media-height);
	}
}

.callout__content > * + * {
	margin-block-start: var(--space-4);
}

/*
	text-align does double duty here: it right-aligns the heading/text, and —
	since .button is display: inline-flex — also shifts the button itself to
	the right within its <p>, so it lines up with the text above it rather
	than sitting stranded on the left.
*/
.callout__content--reversed {
	text-align: right;
}

.callout__text {
	font-size: var(--font-size-3);
}