/* Block: Numbered steps. Figma: Syllabus 1:736-1:754 */

.section--steps {
	--pt: clamp(64px, 7.55vw, 145px);
	--pb: var(--space-xl);
}

.steps {
	display: grid;
	grid-template-columns: 40.18% minmax(0, 1fr); /* right column starts 548 into the 1364 box */
}

.steps__title {
	grid-column: 2;
	max-width: 13.2em; /* 659 at 50px */
	letter-spacing: -0.05em;
}

.steps__aside {
	grid-column: 1;
	grid-row: 2;
	margin-top: clamp(40px, 5.94vw, 114px); /* label lines up with the text of the first step */
}

.steps__label { max-width: 10em; }

.steps__count {
	margin-top: clamp(24px, 3.65vw, 70px);
	font-size: clamp(7rem, 17.19vw, 20.625rem); /* 330 */
	font-weight: 400;
	line-height: 0.742;
	letter-spacing: -0.03em;
}

.steps__list {
	grid-column: 2;
	grid-row: 2;
	margin: clamp(32px, 4.06vw, 78px) 0 0;
}

.steps__item {
	display: grid;
	grid-template-columns: 15.3% 41.05% minmax(0, 1fr); /* 125 / 335 / rest of 816 */
	padding: clamp(24px, 2.03vw, 39px) 0 clamp(24px, 2.4vw, 46px);
	border-top: 1px solid var(--c-line-strong);
}

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

.steps__number { line-height: 1.13; }

.steps__name {
	padding-right: 16px;
	line-height: 1.267;
}

.steps__text {
	font-size: clamp(0.9375rem, 0.9375vw, 1.125rem); /* 18 */
	line-height: 1.556;
	letter-spacing: -0.027em;
}

@media (max-width: 1024px) {
	.steps { grid-template-columns: 1fr; }

	.steps__title,
	.steps__aside,
	.steps__list {
		grid-column: 1;
		grid-row: auto;
	}

	.steps__aside {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 24px;
		margin-top: var(--space-s);
	}

	.steps__count { margin-top: 0; font-size: clamp(5rem, 22vw, 9rem); }
}

@media (max-width: 600px) {
	.steps__item { grid-template-columns: 3.2em minmax(0, 1fr); }
	.steps__text { grid-column: 2; margin-top: 12px; }
}