.crombie-kfi {
	--crombie-kfi-text-default: #6B6B6B;
	--crombie-kfi-text-hover: #FFC432;
	--crombie-kfi-left-width: 40%;
	--crombie-kfi-columns-gap: 80px;
	display: grid;
	grid-template-columns: var(--crombie-kfi-left-width) 1fr;
	gap: var(--crombie-kfi-columns-gap);
	margin-bottom: 95px;
	width: 100%;
}

.crombie-kfi__left {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	padding: 0 0 0 97px;
}

.crombie-kfi__right {
	display: flex;
	flex-direction: column;
	padding: 0 0 0 97px;
}

/* Pills */

.crombie-kfi__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.crombie-kfi__pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background-color: #2A2A2A;
	color: #FFFFFF;
	border-radius: 999px;
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.3s ease;
}

a.crombie-kfi__pill:hover {
	background-color: #3A3A3A;
}

/* Title */

.crombie-kfi__title {
	margin: 0;
	color: #FFFFFF;
	font-family: "Urbanist", sans-serif;
	font-weight: 900;
	font-size: 48px;
	line-height: 1.15;
	letter-spacing: 0;
}

/* Description */

.crombie-kfi__description,
.crombie-kfi__description p {
	margin: 0;
	color: #DDDDDD;
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: 0;
}

/* Solutions list */

.crombie-kfi__solutions {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.crombie-kfi__solution {
	display: flex;
	align-items: center;
	gap: 16px;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.3s ease;
}

.crombie-kfi__icon {
	position: relative;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
}

.crombie-kfi__icon img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.3s ease;
}

.crombie-kfi__icon-default {
	opacity: 1;
}

.crombie-kfi__icon-color {
	opacity: 0;
}

.crombie-kfi__text {
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.4;
	color: var(--crombie-kfi-text-default);
	transition: color 0.3s ease;
}

/* Hover + highlighted (first item by default) */

a.crombie-kfi__solution:hover .crombie-kfi__text,
.crombie-kfi__solution.is-highlighted .crombie-kfi__text {
	color: var(--crombie-kfi-text-hover);
	text-decoration: underline;
	text-underline-offset: 4px;
}

a.crombie-kfi__solution:hover .crombie-kfi__icon-default,
.crombie-kfi__solution.is-highlighted .crombie-kfi__icon-default {
	opacity: 0;
}

a.crombie-kfi__solution:hover .crombie-kfi__icon-color,
.crombie-kfi__solution.is-highlighted .crombie-kfi__icon-color {
	opacity: 1;
}

/* When hovering any other item in the list, the auto-highlighted (first) item goes back to default */

.crombie-kfi__solutions:hover .crombie-kfi__solution.is-highlighted:not(:hover) .crombie-kfi__text {
	color: var(--crombie-kfi-text-default);
	text-decoration: none;
}

.crombie-kfi__solutions:hover .crombie-kfi__solution.is-highlighted:not(:hover) .crombie-kfi__icon-default {
	opacity: 1;
}

.crombie-kfi__solutions:hover .crombie-kfi__solution.is-highlighted:not(:hover) .crombie-kfi__icon-color {
	opacity: 0;
}

/* Responsive */

@media (max-width: 1200px) and (min-width: 768px) {
	.crombie-kfi__left,
	.crombie-kfi__right {
		padding: 0 0 0 62px;
	}

	.crombie-kfi__title {
		font-size: 36px;
	}
}

@media (max-width: 768px) {
	.crombie-kfi {
		grid-template-columns: 1fr !important;
		gap: 36px !important;
		margin-bottom: 64px;
		--crombie-kfi-left-width: 100%;
		--crombie-kfi-columns-gap: 36px;
	}

	.crombie-kfi__left,
	.crombie-kfi__right {
		padding: 0;
		width: 100%;
	}

	.crombie-kfi__left {
		gap: 16px;
	}

	.crombie-kfi__title {
		font-size: 32px;
	}

	.crombie-kfi__description,
	.crombie-kfi__description p {
		font-size: 16px;
	}

	.crombie-kfi__solutions {
		gap: 16px;
	}

	.crombie-kfi__text {
		font-size: 14px;
	}

	.crombie-kfi__icon {
		width: 24px;
		height: 24px;
	}

	.crombie-kfi__pill {
		font-size: 13px;
		padding: 5px 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.crombie-kfi__solution,
	.crombie-kfi__icon img,
	.crombie-kfi__text,
	.crombie-kfi__pill {
		transition: none;
	}
}