/*
 * Cordia icon font
 */
@font-face {
	font-family: "cordia";
	src:
		url("../fonts/cordia/cordia.woff") format("woff"),
		url("../fonts/cordia/cordia.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

.service-links {
	--service-links-red: var(--nv-primary-accent, #eb0a1e);
	--service-links-text: var(--nv-text-color, #333333);
	--service-links-border: var(--nv-c-1, #cccccc);

	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--nv-site-bg, #ffffff);
	color: var(--service-links-text);
}

.service-links__inner {
	width: min(100%, 1296px);
	margin-inline: auto;
	padding-inline: 24px;
}

/*
 * Four equal-width columns.
 *
 * Keep this selector identical in specificity to the selectors used
 * inside the media queries.
 */
.service-links__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-links__item {
	position: relative;
	min-width: 0;
	margin: 0;
	padding: 0 20px;
	text-align: center;
}

/*
 * Vertical separators on the four-column layout.
 */
.service-links__item:not(:last-child)::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 160px;
	background: var(--service-links-border);
	content: "";
}

.service-links__link {
	display: flex;
	min-height: 160px;
	align-items: center;
	flex-direction: column;
	color: var(--service-links-text);
	text-decoration: none;
	transition:
		color 250ms ease,
		transform 250ms ease;
}

.service-links__link:hover,
.service-links__link:focus-visible {
	color: var(--service-links-red);
	text-decoration: none;
	transform: scale(1.05);
}

.service-links__link:focus-visible {
	border-radius: 3px;
	outline: 2px solid currentColor;
	outline-offset: 6px;
}

.service-links__icon {
	display: flex;
	height: 94px;
	align-items: flex-start;
	justify-content: center;
	color: var(--service-links-red);
}

.service-links__icon-glyph {
	display: block;
	font-family: "cordia";
	font-size: 88px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	line-height: 1;
	text-transform: none;
	speak: never;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.service-links__title {
	display: block;
	max-width: 100%;
	margin-top: 13px;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.15;
	text-transform: uppercase;
	white-space: nowrap;
}

.service-links__description {
	display: block;
	margin-top: 5px;
	font-family: "Josefin Sans", sans-serif;
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.35;
}

/*
 * Cordia icon mappings.
 */
.icon-financing-logo::before {
	content: "\61";
}

.icon-preowned-logo::before {
	content: "\66";
}

.icon-parts-logo::before {
	content: "\65";
}

.icon-newvehicles-logo::before {
	content: "\64";
}

/*
 * Two equal-width columns.
 *
 * This breakpoint occurs before the longest title would be forced
 * to wrap or collide with another item.
 */
@media (max-width: 1050px) {
	.service-links {
		padding-block: 32px;
	}

	.service-links__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 36px;
	}

	.service-links__item {
		padding-inline: 24px;
	}

	/*
	 * Only odd items need a vertical separator:
	 * 1 | 2
	 * 3 | 4
	 */
	.service-links__item::after {
		display: none;
	}

	.service-links__item:nth-child(odd)::after {
		top: 0;
		right: 0;
		display: block;
		width: 1px;
		height: 160px;
	}

	.service-links__link {
		min-height: 160px;
	}
}

/*
 * One column.
 */
@media (max-width: 600px) {
	.service-links {
		padding-block: 24px;
	}

	.service-links__inner {
		padding-inline: 18px;
	}

	.service-links__grid {
		grid-template-columns: 1fr;
		row-gap: 0;
	}

	.service-links__item {
		padding: 24px 8px;
	}

	.service-links__item:first-child {
		padding-top: 8px;
	}

	.service-links__item:last-child {
		padding-bottom: 8px;
	}

	/*
	 * Change the separators from vertical to horizontal.
	 */
	.service-links__item:nth-child(odd)::after,
	.service-links__item:not(:last-child)::after {
		top: auto;
		right: 10%;
		bottom: 0;
		display: block;
		width: 80%;
		height: 1px;
	}

	.service-links__item:last-child::after {
		display: none;
	}

	.service-links__link {
		min-height: 0;
	}

	.service-links__icon {
		height: 82px;
	}

	.service-links__icon-glyph {
		font-size: 78px;
	}

	.service-links__title {
		margin-top: 8px;
		font-size: 20px;
	}
}