.koi-intro {
	--container-gutter-vertical: 3rem;
	--item-gap: 2rem;
	--facts-direction: column;
	--fact-min-width: unset;
	--fact-width: 100%;
	--impact-quote-font-size: 1.5rem;

	--ar-icon-width: 70px;
	--ar-icon-height: 33px;
	--ar-icon-aspect-ratio: 70 / 33;
	--ar-content-mobile-display: block;

	--maps-icon-aspect-ratio: 18 / 16;

	@media (width >=48rem) {
		--container-gutter-vertical: 6rem;
		--margin-block: 3rem;
		--item-gap: 2rem;
		--facts-direction: row;
		--fact-width: unset;
		--fact-min-width: 300px;
		--impact-quote-font-size: 2.75rem;
		--ar-content-mobile-display: none;
	}

	display: flex;
	flex-direction: column;
	gap: var(--item-gap);
	align-items: center;
}

.koi-intro-heading {
	font-size: 2.5rem;
	font-weight: 700;
	margin-block: 0;
	text-align: center;
	text-transform: uppercase;

	@media (width >=64rem) {
		font-size: 3.25rem;
	}
}

.koi-intro-icon {
	place-self: center;
	order: -1;
}

.koi-intro-facts {
	display: flex;
	flex-direction: var(--facts-direction);

	gap: 3rem;
}

.koi-intro-fact {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: var(--fact-min-width);
	width: var(--fact-width);

	text-align: center;

	> * {
		margin: 0;
		padding: 0;
	}
}

.koi-intro-fact-heading {
	color: var(--colors-brand);
	font-family: var(--fonts-maiah);
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 100%;
	/* 24px */
	text-transform: uppercase;
}

.koi-intro-fact-text {
	& > :last-child {
		margin-block-end: 0;
		padding-block-end: 0;
	}
}

.koi-intro-content {
	font-size: 0.875rem;
	text-align: center;
	text-wrap: balance;
	@media (width >=64rem) {
		font-size: 1.25rem;
	}
}

.koi-intro-impact-quote {
	margin: 0;
	padding: 0;
	text-wrap: balance;
	text-align: center;
	font-family: var(--fonts-maiah);
	font-size: var(--impact-quote-font-size);
	font-style: normal;
	font-weight: 400;
	line-height: 110%;
	/* 55px */
	letter-spacing: -1px;
}

.koi-intro-ar-mobile {
	display: var(--ar-content-mobile-display);
}

.koi-intro-ar-mobile-link {
	--_background-color: transparent;
	--_foreground-color: var(--colors-brand);

	display: flex;
	align-items: center;
	justify-content: flex-start;
	color: var(--_foreground-color);
	background-color: var(--_background-color);

	padding: 14px var(--sds-size-space-400);

	justify-content: center;
	align-items: center;
	gap: var(--sds-size-space-400);

	border: 2px solid var(--colors-brand);

	& > * {
		display: block;
	}

	&:hover,
	&:focus-visible {
		--_background-color: var(--colors-brand);
		--_foreground-color: var(--colors-white);
	}

	&::before,
	&::after {
		content: '';
		background-color: currentColor;
		mask-size: cover;
		mask-repeat: no-repeat;
		mask-position: center;
	}

	&::before {
		mask-image: var(--ar-icon);
		aspect-ratio: var(--ar-icon-aspect-ratio);
		width: 52px;
	}

	&::after {
		mask-image: var(--arrow-right);
		aspect-ratio: 25/16;
		width: 25px;
		margin-inline: auto 0;
	}

	.koi-intro-ar-mobile-link-label {
		font-family: var(--fonts-proxima-nova);
		font-size: 1.25rem;
		font-style: normal;
		font-weight: 700;
		line-height: 100%;
		/* 20px */
		text-transform: uppercase;
		text-box-trim: trim-both;
	}

	.ar {
		font-style: italic;
	}
}

.koi-intro-maps {
	display: flex;
	padding-block: var(--sds-size-space-300);
}

.koi-intro-maps-link {
	--_text-decoration: none;

	display: flex;
	flex-direction: row;
	gap: var(--sds-size-space-300);
	align-items: center;

	color: var(--colors-brand);
	font-family: var(--fonts-proxima-nova);
	font-size: 1rem;
	font-style: normal;
	font-weight: 600;
	line-height: 100%;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: var(--_text-decoration);

	&:hover,
	&:focus-visible {
		--_text-decoration: underline;
	}

	&::before {
		content: '';
		background-color: currentColor;
		mask-size: cover;
		mask-repeat: no-repeat;
		mask-position: center;
		mask-image: var(--maps-icon);
		aspect-ratio: var(--maps-icon-aspect-ratio);
		width: 18px;
	}
}