/* ==========================================================================
   Single service (dcp_service)
   ========================================================================== */

.service-page .page-banner--image {
	display: flex;
	align-items: flex-end;
	min-height: clamp(320px, 42vw, 520px);
}

.service-page .page-banner__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-page .page-banner--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(9, 16, 34, .25) 0%, rgba(9, 16, 34, .85) 100%);
}

.service-page .page-banner--image::after {
	display: none;
}

.service-layout {
	display: grid;
	gap: clamp(32px, 5vw, 56px);
	align-items: start;
}

@media (min-width: 960px) {
	.service-layout {
		grid-template-columns: minmax(0, 1fr) 360px;
	}

	.service-aside {
		position: sticky;
		inset-block-start: calc(var(--header-height) + 24px);
	}
}

.service-content {
	font-size: 1.0625rem;
}

.aside-box {
	padding: 26px;
}

.aside-box + .aside-box {
	margin-block-start: 20px;
}

.aside-box__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-end: 12px;
	font-size: 1.25rem;
}

.aside-box__title .icon {
	color: var(--color-red);
}

.aside-box__warranty {
	margin: 0 0 6px;
	color: var(--color-navy);
	font-size: 1.375rem;
	font-weight: 800;
}

.aside-box__link {
	display: inline-block;
	margin-block-end: 18px;
	color: var(--color-muted);
	font-size: .9375rem;
}

.aside-links {
	padding: 0;
	margin: 0;
	list-style: none;
}

.aside-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 12px;
	border-block-end: 1px solid var(--color-border);
	color: var(--color-navy);
	font-weight: 600;
	text-decoration: none;
}

.aside-links li:last-child a {
	border-block-end: 0;
}

.aside-links a:hover {
	color: var(--color-red);
}