/* Block: Intro with tags and image. Figma: Syllabus 1:721-1:735 */

.section--intro-split { --pt: clamp(48px, 5.42vw, 104px); }

.intro-split {
	display: grid;
	grid-template-columns: 36.44% minmax(0, 1fr); /* divider sits 497 into the 1364 box */
	border-top: 1px solid var(--c-ink);
}

.intro-split__body { padding: clamp(32px, 3.59vw, 69px) 24px clamp(32px, 2.6vw, 50px) 0; }

.intro-split__title {
	max-width: 9.1em; /* 363 at 40px */
	font-size: clamp(1.625rem, 2.08vw, 2.5rem); /* 40 */
	line-height: 1.15;
	letter-spacing: -0.04em;
}

.intro-split__text {
	max-width: 22.9em; /* 411 at 18px */
	margin-top: clamp(32px, 4.64vw, 89px);
	font-size: clamp(0.9375rem, 0.9375vw, 1.125rem); /* 18 */
	line-height: 1.44;
	letter-spacing: -0.027em;
}

.intro-split__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 420px;
	margin: clamp(24px, 2.45vw, 47px) 0 0;
}

.intro-split__tag {
	min-height: clamp(38px, 2.5vw, 48px);
	padding-inline: clamp(16px, 1.3vw, 25px);
	font-size: clamp(0.9375rem, 0.9375vw, 1.125rem);
}

.intro-split__aside {
	padding: clamp(32px, 3.65vw, 70px) 0 clamp(32px, 4.84vw, 93px) clamp(20px, 2.76vw, 53px);
	border-left: 1px solid var(--c-ink);
}

.intro-split__media { aspect-ratio: 814 / 440; }

@media (max-width: 1024px) {
	.intro-split { grid-template-columns: 1fr; }
	.intro-split__body { padding-right: 0; }

	.intro-split__aside {
		padding: 0 0 var(--space-s);
		border-left: 0;
		order: -1;
		margin-top: var(--space-s);
	}
}
