/*
 * Text and image. Figma 2359:62315 rows: photo 607x360, text 549 wide,
 * centred vertically, 24 gap between rows. --image-right swaps the columns.
 * Mobile 2359:62345: photo 350x234 above text.
 */

.text-image__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.text-image__row {
	display: grid;
	grid-template-columns: 607fr 549fr;
	align-items: center;
	gap: clamp(24px, 4.4vw, 64px);
}

.text-image__row--image-right { grid-template-columns: 549fr 607fr; }
.text-image__row--image-right .text-image__media { order: 2; }

.text-image__row > .text-image__body:only-child { grid-column: 1 / -1; }

.text-image__media {
	aspect-ratio: 607 / 360;
	border-radius: var(--r-m);
	overflow: hidden;
	background: var(--c-bg-grey);
}

.text-image__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}

.text-image__title { font: var(--f-header-m); color: var(--c-text-dark); }
.text-image__text { font: var(--f-body-s); color: var(--c-text-dark); }
.text-image__button { margin-top: 16px; }

@media (max-width: 767px) {
	.text-image__row,
	.text-image__row--image-right {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 16px;
	}

	.text-image__row--image-right .text-image__media { order: 0; }
	.text-image__media { aspect-ratio: 350 / 234; }
	.text-image__title { font: var(--f-header-s); }
}