.wx-svckindgrid article,
.wx-svcsteps li {
	transition:
		background-color 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09),
		border-color 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09),
		color 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
}

.wx-svckindgrid article {
	grid-template-columns: auto minmax(0, 1fr);
}

.wx-svckindgrid span,
.wx-svcsteps span {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
}

.wx-svckindgrid span::after,
.wx-svcsteps span::after {
	content: "";
	width: 1.6rem;
	height: 1px;
	background: currentColor;
	transform-origin: left center;
	transition: transform 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
}

.wx-svcsteps {
	gap: 0;
}

.wx-svcsteps li {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	padding: 1.15rem 1rem;
}

.wx-svccard__media img {
	transform-origin: center center;
	will-change: transform;
}

.wx-svccard__tags {
	transition: color 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
}

@media (hover: hover) and (pointer: fine) {
	.wx-svckindgrid article:hover,
	.wx-svcsteps li:hover {
		background: var(--wx-accent);
		border-color: var(--wx-accent);
	}

	.wx-svckindgrid article:hover span,
	.wx-svckindgrid article:hover p,
	.wx-svcsteps li:hover span,
	.wx-svcsteps li:hover p {
		color: #fff;
	}

	.wx-svckindgrid article:hover span::after,
	.wx-svcsteps li:hover span::after {
		transform: scaleX(1.8);
	}

	.wx-svccard__link:hover .wx-svccard__tags {
		color: var(--wx-text);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wx-svckindgrid article,
	.wx-svcsteps li,
	.wx-svckindgrid span::after,
	.wx-svcsteps span::after,
	.wx-svccard__tags {
		transition: none;
	}
}