/* Block: Feature columns. Figma: Syllabus 1:756-1:775 */

.section--features { --pt: var(--space-xl); }

/* Same specificity as the base rule for dark sections, so the Space settings still win. */
.section--features:not([class*="pb-"]),
.section--features.is-dark:not([class*="pb-"]) { --pb: var(--space-xl); }

.features {
	display: flex;
	margin: 0;
}

/* Equal text widths: every column after the first adds its own left padding (414 / 475 / 475). */
.features__item {
	flex: 1 1 0;
	min-width: 0;
	min-height: clamp(0px, 24.4vw, 468px);
}

.features__item + .features__item {
	padding-left: clamp(20px, 3.18vw, 61px);
	border-left: 1px solid var(--c-line-2);
}

.features__icon {
	height: clamp(48px, 3.65vw, 70px);
	margin-bottom: clamp(40px, 10.63vw, 204px);
}

.features__icon .shape {
	width: auto;
	height: 100%;
}

.features__title {
	font-size: clamp(1.25rem, 1.5625vw, 1.875rem); /* 30 */
	line-height: 1.267;
	letter-spacing: -0.03em;
}

.features__text {
	max-width: 21em;
	margin-top: clamp(20px, 2.19vw, 42px);
	padding-right: 16px;
	font-size: clamp(0.9375rem, 0.885vw, 1.0625rem); /* 17 */
	line-height: 1.53;
	letter-spacing: -0.028em;
}

@media (max-width: 767px) {
	.features { flex-direction: column; }

	/* flex-basis 0 would collapse the stacked items' height. */
	.features__item {
		flex: none;
		min-height: 0;
	}

	.features__item + .features__item {
		margin-top: 40px;
		padding: 40px 0 0;
		border-left: 0;
		border-top: 1px solid var(--c-line-2);
	}

	.features__icon { margin-bottom: 32px; }
}