:has(article.services) #bx-panel {
	position: fixed !important;
	bottom: 0;
	left: 0;
	right: 0;
}

.servicesIntro {
	display: grid;
	align-content: start;
	gap: 20px;
	padding: 30px var(--padding-inline);
	background: #eee;
	font-size: 18px;
}
.servicesIntro h1 {
	margin: 0;
}

.servicesItem {
	display: grid;
	gap: 30px;
	padding: 30px var(--padding-inline);
	transition: all 300ms linear;
}
.servicesItem.hover {
	background: var(--color-accent);
}
.servicesItem h2 {
	margin: 0;
	font-size: 30px;
	line-height: 1.2;
}
.servicesItem picture {
	height: 240px;
	aspect-ratio: 160 / 240;
}
.servicesItem nav {
	display: grid;
	gap: 15px;
}
.servicesItem a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 3px 10px;
	font-size: 20px;
	text-transform: lowercase;
}
.servicesItem a svg {
	opacity: 0;
	transition: all 400ms linear;
}
.servicesItem a:hover {
	color: var(--color-light);
	background: var(--color-dark);
}
.servicesItem a:hover svg {
	opacity: 1;
}

@media (max-width: 1199px) {
	article.services {
		padding: 0;
	}
	.servicesIntro {
		min-height: 400px;
	}
	.servicesSpace {
		display: none;
	}
}

@media (min-width: 1200px) {
	.services {
		position: relative;
	}
	.services_bg {
		position: sticky;
	  top: var(--header-height);
	  overflow: hidden;
		padding: 0;
	}
	.services_window {
		position: relative;
	  width: 100%;
	  height: calc(var(--jsh) - var(--header-height));
	}
	.services_row {
		display: grid;
		grid-auto-flow: column;
		position: absolute;
	  inset: 0 auto 0 0;
	  transition: transform 300ms ease-out;
	}
	.servicesIntro {
		width: calc((var(--jsw) * 0.5));
		padding: 40px 140px 40px 40px;
	}
	.servicesItem {
		justify-items: start;
		align-content: start;
		width: 472px;
		height: calc(var(--jsh) - var(--header-height));
		padding: 40px 20px;
	}
	:has(#bx-panel) .servicesItem {
		height: calc(var(--jsh) - var(--header-height) - 39px);
	}
	.servicesItem nav {
		overflow: auto;
	}
	.servicesSpace {
		width: calc((var(--jsw) / 2) - 472px + 20px);
	}
	.services + .foot {
		display: none;
	}
}

@media (min-height: 800px) {
	.servicesItem picture {
		height: 405px;
	}
}

@media (min-height: 1024px) {
	.servicesItem {
		max-height: calc(var(--jsh) - (var(--header-height) * 2));
	}
	:has(#bx-panel) .servicesItem {
		max-height: calc(var(--jsh) - (var(--header-height) * 2) - 39px);
	}
}

@media (min-width: 1600px) {
	.services_row {
		grid-template-columns: 700px;
	}
}