.courses-index {
	background: #f1f2f3
	;
	color: var(--color-dark);
}

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

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

.courses-index__heading {
	display: grid;
	grid-column: 4 / -1;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	gap: var(--grid-gap);
}

.courses-index__heading h2 {
	grid-column: 1 / -1;
	max-width: 13ch;
	font-size: clamp(3.2rem, 6vw, 7.5rem);
	letter-spacing: -0.055em;
	line-height: 0.92;
}

.courses-index__heading > p {
	grid-column: 6 / -1;
	max-width: 34rem;
	margin-top: var(--space-md);
	color: rgba(16, 16, 16, 0.65);
	font-size: var(--text-medium);
}

.courses-index__navigation {
	margin-top: var(--space-xl);
}

.courses-index__list {
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(16, 16, 16, 0.24);
	list-style: none;
}

.courses-index__item {
	border-bottom: 1px solid rgba(16, 16, 16, 0.24);
}

.courses-index__link {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: center;
	gap: var(--grid-gap);
	padding-block: clamp(1.6rem, 2.8vw, 2.8rem);
	color: var(--color-dark);
	isolation: isolate;
	transition: color 350ms ease;
}

.courses-index__link::before {
	position: absolute;
	z-index: -1;
	inset: 0 -1.25rem;
	background: var(--color-dark);
	content: "";
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.courses-index__number {
	grid-column: 1;
	font-size: var(--text-small);
	font-weight: 700;
	transition:
		color 300ms ease,
		transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.courses-index__name {
	grid-column: 2 / span 5;
	font-size: clamp(1.8rem, 3.5vw, 4.2rem);
	letter-spacing: -0.04em;
	line-height: 1;
	transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.courses-index__meta {
	grid-column: 7 / span 3;
	color: rgba(16, 16, 16, 0.62);
	font-size: 0.82rem;
	line-height: 1.4;
	transition: color 300ms ease;
}

.courses-index__audience {
	grid-column: 10 / -1;
	justify-self: end;
	max-width: 15rem;
	color: rgba(16, 16, 16, 0.62);
	font-size: 0.75rem;
	line-height: 1.4;
	text-align: right;
	text-transform: uppercase;
	transition: color 300ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.courses-index__link:hover,
	.courses-index__link:focus-visible {
		color: var(--color-white);
	}

	.courses-index__link:hover::before,
	.courses-index__link:focus-visible::before {
		transform: scaleY(1);
	}

	.courses-index__link:hover .courses-index__number,
	.courses-index__link:focus-visible .courses-index__number {
		color: var(--color-accent);
		transform: translateX(0.35rem);
	}

	.courses-index__link:hover .courses-index__name,
	.courses-index__link:focus-visible .courses-index__name {
		transform: translateX(0.65rem);
	}

	.courses-index__link:hover .courses-index__meta,
	.courses-index__link:hover .courses-index__audience,
	.courses-index__link:focus-visible .courses-index__meta,
	.courses-index__link:focus-visible .courses-index__audience {
		color: rgba(255, 255, 255, 0.68);
	}
}

@media (max-width: 959px) {
	.courses-index__eyebrow,
	.courses-index__heading {
		grid-column: 1 / -1;
	}

	.courses-index__heading {
		margin-top: 2rem;
	}

	.courses-index__heading > p {
		grid-column: 1 / -1;
	}

	.courses-index__number {
		grid-column: 1;
	}

	.courses-index__name {
		grid-column: 2 / -1;
	}

	.courses-index__meta {
		grid-column: 2 / span 6;
		margin-top: 1rem;
	}

	.courses-index__audience {
		grid-column: 8 / -1;
		margin-top: 1rem;
	}
}

@media (max-width: 599px) {
	.courses-index__link {
		grid-template-columns: 2rem minmax(0, 1fr);
	}

	.courses-index__number {
		grid-column: 1;
	}

	.courses-index__name,
	.courses-index__meta,
	.courses-index__audience {
		grid-column: 2;
		justify-self: start;
		text-align: left;
	}

	.courses-index__audience {
		margin-top: 0.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.courses-index__link::before,
	.courses-index__number,
	.courses-index__name {
		transition: none;
	}
}