/*
 * Feature (Figma: Discover - Design "Frame 426", Discover - Leisure craft "Frame" under the hero,
 * Discover - Intellectual and Social Sector "Frame 441"). See fields.php.
 */

.feature {
	display: grid;
	gap: 32px;
}

.feature__main,
.feature__text,
.feature__end {
	display: grid;
	align-content: start;
	gap: 16px;
}

.feature__heading--l {
	font-size: var(--t-title-l);
	line-height: var(--lh-title-l);
}

.feature__heading--s {
	font-size: var(--t-title-s);
	line-height: var(--lh-title-s);
}

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

.bg-dark .feature__body {
	color: inherit;
}

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

.feature__closing {
	font-family: var(--f-display);
	font-weight: 500;
}

.feature__closing--s {
	font-size: var(--t-title-s);
	line-height: var(--lh-title-s);
	color: var(--c-text-2);
}

.feature__closing--m {
	font-size: var(--t-title-s);
	line-height: var(--lh-title-s);
}

.feature__drawing img {
	margin-inline: auto;
}

.feature__media img {
	width: 100%;
	object-fit: cover;
}

/* Beside: phones stack text, a line, the photo, then the closing line and buttons. */
.feature--beside .feature__media {
	padding-top: 16px;
	border-top: 1px solid var(--c-line);
}

.feature--beside .feature__media img {
	aspect-ratio: 328 / 378;
}

.feature--beside .feature__end {
	margin-top: 28px;
}

@media (max-width: 767px) {
	.feature--beside .feature__buttons {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (min-width: 768px) {
	/* Text column 752, photo column 368; the closing line and buttons sit at the foot of the text. */
	.feature--beside {
		grid-template-columns: minmax(0, 752fr) minmax(0, 368fr);
		grid-template-rows: auto 1fr;
		grid-template-areas: "main media" "end media";
		gap: 40px 16px;
		align-items: start;
	}

	.feature--beside .feature__main {
		grid-area: main;
		max-width: 560px;
	}

	.feature--beside .feature__main--drawing {
		grid-template-columns: minmax(0, 272fr) minmax(0, 448fr);
		align-items: center;
		gap: 32px;
		max-width: none;
	}

	.feature--beside .feature__media {
		grid-area: media;
		align-self: center;
		padding-top: 0;
		border-top: 0;
	}

	.feature--beside .feature__media img {
		aspect-ratio: 368 / 500;
	}

	.feature--rule .feature__media {
		padding-left: 16px;
		border-left: 1px solid var(--c-line);
	}

	.feature--rule .feature__media img {
		aspect-ratio: 351 / 378;
	}

	.feature--beside .feature__end {
		grid-area: end;
		align-self: end;
		margin-top: 0;
	}

	.feature__closing--m {
		font-size: var(--t-title);
		line-height: var(--lh-title);
	}
}

/* Below: a 560px column in the middle of the page, the photo 40px under the text. */
.feature--below {
	max-width: calc(560px + 2 * var(--gutter));
	gap: 8px;
}

.feature--below .feature__text {
	gap: 8px;
}

.feature--below .feature__media {
	order: 1;
	margin-top: 32px;
}

.feature--below .feature__media img {
	aspect-ratio: 328 / 300;
}

@media (min-width: 768px) {
	.feature--below .feature__media img {
		aspect-ratio: 560 / 300;
	}
}

.feature--below .feature__buttons {
	justify-content: flex-start;
}