/* Photos and text (Figma: Our Approach "Frame 398", one 560×360 photo with the text at its foot;
   "Frame" under "Frame 403", two 272×300 photos with the text and button at the top). */

.photos-text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 16px;
}

/* Text at the foot of the photos (the photos stay at the top when the text is the taller). */
.photos-text--bottom .photos-text__content {
	align-self: end;
}

/* Without photos the text still keeps to the right half. */
.photos-text__content {
	grid-column: 2;
	display: grid;
	align-content: start;
	gap: 16px;
}

.photos-text__photos {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 16px;
}

.photos-text__img {
	width: 100%;
	aspect-ratio: 272 / 300;
	object-fit: cover;
}

.photos-text__photos--1 .photos-text__img {
	aspect-ratio: 560 / 360;
}

.photos-text__text {
	color: var(--c-text-2);
}

.bg-dark .photos-text__text {
	color: inherit;
}

.photos-text__text > * + * {
	margin-top: var(--lh-body);
}

@media (max-width: 767px) {
	.photos-text {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.photos-text--bottom {
		gap: 16px;
	}

	.photos-text__content {
		grid-column: auto;
	}

	.photos-text__photos {
		grid-auto-flow: row;
		gap: 32px;
	}

	.photos-text__img {
		aspect-ratio: 328 / 300;
	}

	.photos-text__photos--1 .photos-text__img {
		aspect-ratio: 328 / 381;
	}

	.photos-text__buttons .btn {
		flex: 1 1 100%;
	}
}