/**
 * Media and text: half is `grid items-center gap-10 lg:grid-cols-2`, split
 * the picture in 7 of 12 columns (`gap-12 lg:gap-16`). The text column's
 * heading is a section heading, its text `mt-4 text-lg`, each paragraph
 * `mt-4` (Press), its links `mt-6`, its buttons `mt-8`.
 * With the picture on the right, it follows the text from 1024px only.
 */

.sba-c-media-text .sba-c-media-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 40px;
}

.sba-c-media-text .sba-c-media-split {
	gap: 48px;
}

.sba-c-media-text .sba-c-ratio-4-5 img { aspect-ratio: 4 / 5; }
.sba-c-media-text .sba-c-ratio-16-9 img { aspect-ratio: 16 / 9; }

.sba-c-media-text .sba-c-media-copy .sba-c-prose,
.sba-c-media-text .sba-c-media-copy .sba-c-prose > * + * {
	margin-top: 16px;
}

.sba-c-media-text .sba-c-media-copy .sba-c-links {
	margin-top: 24px;
}

/* A video in the picture's place: `aspect-video rounded-xl bg-footer-bg`. */
.sba-c-media-text .sba-c-media-video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
	background-color: var(--sba-footer-bg);
}

.sba-c-media-text .sba-c-media-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The small heading and its text `mt-6 text-lg` (Home's review); links
   after buttons `mt-5`. */
.sba-c-media-text .sba-c-media-heading-small .sba-c-section-title {
	font-size: 24px;
	line-height: 1.25;
}

.sba-c-media-text .sba-c-media-heading-small .sba-c-media-copy .sba-c-prose {
	margin-top: 24px;
}

.sba-c-media-text .sba-c-media-copy .sba-c-buttons + .sba-c-links {
	margin-top: 20px;
}

.sba-c-media-text .sba-c-media-tight {
	gap: 40px;
}

/* The tagline under the text, `mt-8`, the buttons under it `mt-8`. */
.sba-c-media-text .sba-c-media-copy .sba-c-tagline {
	margin-top: 32px;
}

/* On charcoal (the Global Village's film): the text white and muted. */
.sba-c-media-text.sba-c-bg-charcoal .sba-c-media-copy .sba-c-prose {
	color: rgb(255 255 255 / 0.75);
}

@media (min-width: 768px) {
	.sba-c-media-text .sba-c-media-heading-small .sba-c-section-title {
		font-size: 30px;
		line-height: 36px;
	}
}

@media (min-width: 1024px) {
	.sba-c-media-text .sba-c-media-row.sba-c-media-tight {
		gap: 40px;
	}

	.sba-c-media-text .sba-c-media-half {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sba-c-media-text .sba-c-media-split {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 64px;
	}

	.sba-c-media-text .sba-c-media-split .sba-c-media-figure { grid-column: span 7; }
	.sba-c-media-text .sba-c-media-split .sba-c-media-copy { grid-column: span 5; }

	.sba-c-media-text .sba-c-media-image-right .sba-c-media-figure {
		order: 2;
	}
}