.services {
    margin-block: 100px;
}

.services .services-title {
	margin: 0;
}

.services .services-items {
	--services-columns: 3;
    display: flex;
	justify-content: center;
	flex-wrap: wrap;
    gap: 36px;
}

.services .services-items:not(:first-child) {
    margin-top: 80px;
}

.services .services-item {
	position: relative;
    display: flex;
    flex-direction: column;
    width: calc((100% / var(--services-columns)) - 24px);
    padding: 36px;
	background: var(--blue-ray);
	overflow: hidden;
}

.services .services-item::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #3B435E 40%, var(--blue-dark) 100%);
	opacity: 0;
	transition: var(--transition);
	pointer-events: none;
	z-index: 0;
}

.services .services-item__image {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	opacity: 0;
	transition: var(--transition);
	transform: translateX(calc(50% + 20px));
	pointer-events: none;
	z-index: 1;
}

.services .services-item__image img {
	max-height: 100%;
	object-fit: contain;
}

.services .services-item__title {
	margin-bottom: 28px;
    color: var(--blue-dark);
	transition: var(--transition);
	z-index: 2;
}

.services .services-item__description {
    font-weight: 600;
    color: var(--blue-dark);
	transition: var(--transition);
	z-index: 2;
}

.services .services-item__description:not(:last-child) {
    margin-bottom: 22px;
}

.services .services-item__button {
	margin-top: auto;
	z-index: 2;
}

/* Hover */
.services .services-item:hover::before {
	opacity: 1;
}

.services .services-item:hover .services-item__image {
	opacity: 1;
	transform: translateX(50%);
	transition-delay: 0.15s;
}

.services .services-item:hover .services-item__title {
	color: var(--white);
}

.services .services-item:hover .services-item__description {
	color: var(--white);
}

@media (max-width: 1024px) {
	.services {
        margin-block: 80px;
    }

	.services .services-items {
		--services-columns: 2;
		gap: 30px;
	}

	.services .services-items:not(:first-child) {
		margin-top: 60px;
	}

	.services .services-item {
		width: calc((100% / var(--services-columns)) - 15px);
		padding: 30px;
	}

	.services .services-item__title {
		margin-bottom: 24px;
	}

	.services .services-item__description:not(:last-child) {
		margin-bottom: 20px;
	}
}

@media (max-width: 767px) {
	.services {
        margin-block: 60px;
    }

	.services .services-items {
		--services-columns: 1;
		gap: 20px;
	}

	.services .services-items:not(:first-child) {
		margin-top: 40px;
	}

	.services .services-item {
		width: 100%;
		padding: 24px;
	}

	.services .services-item__title {
		min-height: auto !important;
		margin-bottom: 18px;
	}

	.services .services-item__description:not(:last-child) {
		margin-bottom: 16px;
	}
}