.course-overview {
	background: var(--color-light, #f1f2f3);
	color: var(--color-dark);
}

.course-overview__inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--grid-gap);
}

.course-overview__eyebrow {
	grid-column: 1 / span 3;
	padding-top: 0.7rem;
}

.course-overview__content {
	grid-column: 4 / -1;
}

.course-overview__title {
	max-width: 15ch;
	font-size: clamp(3rem, 5.7vw, 7rem);
	letter-spacing: -0.055em;
	line-height: 0.93;
	text-wrap: balance;
}

.course-overview__intro {
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	align-items: end;
	gap: var(--grid-gap);
	margin-top: var(--space-lg);
}

.course-overview__intro > p {
	grid-column: 1 / span 5;
	max-width: 38rem;
	color: rgba(16, 16, 16, 0.68);
	font-size: var(--text-medium);
	line-height: 1.55;
}

.course-overview__intro .button {
	grid-column: 7 / -1;
	justify-self: end;
}

.course-overview__benefits {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--grid-gap);
	margin-top: var(--space-xl);
}

.course-benefit {
	display: grid;
	min-height: 17rem;
	padding-top: 1.25rem;
	grid-template-rows: auto auto 1fr;
	align-content: start;
	border-top: 1px solid rgba(16, 16, 16, 0.24);
}

.course-benefit__number {
	color: var(--color-accent);
	font-size: 0.7rem;
	font-weight: 700;
}

.course-benefit h3 {
	min-height: 2em;
	max-width: 12ch;
	margin: clamp(2.5rem, 4vw, 4rem) 0 0;
	font-size: clamp(1.7rem, 2.4vw, 2.8rem);
	letter-spacing: -0.04em;
	line-height: 1;
}

.course-benefit p {
	margin: 1.25rem 0 0;
	color: rgba(16, 16, 16, 0.65);
	font-size: 0.95rem;
	line-height: 1.55;
}

@media (max-width: 959px) {
	.course-overview__eyebrow,
	.course-overview__content {
		grid-column: 1 / -1;
	}

	.course-overview__content {
		margin-top: 2rem;
	}

	.course-overview__intro > p,
	.course-overview__intro .button {
		grid-column: 1 / -1;
	}

	.course-overview__intro .button {
		justify-self: start;
		margin-top: 1rem;
	}

	.course-overview__benefits {
		grid-template-columns: 1fr;
	}

	.course-benefit {
	min-height: auto;
	}


	.course-benefit h3 {
	min-height: auto;
	margin-top: 2rem;
	}
}

@media (max-width: 599px) {
	.course-overview__intro .button {
		width: 100%;
		justify-content: center;
	}
}

.course-overview__title-word {
	display: inline-block;
	will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
	.course-overview__eyebrow,
	.course-overview__title-word,
	.course-overview__intro > *,
	.course-benefit {
		opacity: 1 !important;
		transform: none !important;
	}
}