.services {
	margin-bottom: 120px;
	display: flex;
	flex-direction: column;
	gap: 46px;
}


.services-list {
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	gap: 24px;
	display: grid;
}

.service-link {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.service-cas {
	font-weight: 400;
	font-size: 16px;
	line-height: 16px;
	color: var(--brand100);
	margin: 0;
	display: flex;
	flex-wrap: nowrap;
	gap: 16px;
	align-items: center;
	transition: .3s linear;
}

.service-cas-img{
	content: '';
	width: 8px;
	display: block;
	height: 12px;
	background-color: var(--brand100);
	-webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3csvg width='9' height='17' viewBox='0 0 9 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0.75 0.75L8.25 8.25L0.75 15.75' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") no-repeat center;
	mask: url("data:image/svg+xml;charset=UTF-8,%3csvg width='9' height='17' viewBox='0 0 9 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0.75 0.75L8.25 8.25L0.75 15.75' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") no-repeat center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform 0.3s ease;
}

.service-item {
	padding: 24px;
	border-radius: 12px;
	border: 1px solid var(--brand300);
	background-color: var(--brand250);
}

.service-title {
	font-weight: 500;
	font-size: 24px;
	line-height: 150%;
	text-decoration: underline;
	color: var(--brand100);
	margin: 0;
	transition: .3s linear;
}

.service-item:hover .service-title{
	color: var(--brand200);
}

.service-item:hover .service-cas {
	color: var(--brand200);
	gap: 32px;
}

.service-item:hover .service-cas-img {
	background-color: var(--brand200);
}

.services-load-more-wrapper {
	display: flex;
	width: calc(50% + 90px);
	justify-content: space-between;
	align-items: center;
}

.services-counter {
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	color: var(--text);
}

.services-load-btn  {
	display: flex;
	gap: 12px;
	align-items: center;
}

.services-load-more__img {
	mask-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6.75 10.5L9.75 13.5M9.75 13.5L12.75 10.5M9.75 13.5V6M18.75 9.75C18.75 10.9319 18.5172 12.1022 18.0649 13.1942C17.6126 14.2861 16.9497 15.2782 16.114 16.114C15.2782 16.9497 14.2861 17.6126 13.1942 18.0649C12.1022 18.5172 10.9319 18.75 9.75 18.75C8.5681 18.75 7.39778 18.5172 6.30585 18.0649C5.21392 17.6126 4.22177 16.9497 3.38604 16.114C2.55031 15.2782 1.88738 14.2861 1.43508 13.1942C0.982792 12.1022 0.75 10.9319 0.75 9.75C0.75 7.36305 1.69821 5.07387 3.38604 3.38604C5.07387 1.69821 7.36305 0.75 9.75 0.75C12.1369 0.75 14.4261 1.69821 16.114 3.38604C17.8018 5.07387 18.75 7.36305 18.75 9.75Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: 20px 20px;
	background-color: currentColor;
	width: 20px;
	height: 20px;
	transition: .3s linear;
	display: block;
}

@media(max-width: 768px) {
	.services {
		gap: 24px;
		margin-bottom: 100px;
	}
	
	.services-list {
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	}
	
	.service-item {
		padding: 16px;
	}
	
}

@media (max-width: 590px) {
	.services-load-more-wrapper {
		width: 100%;
	}
}

@media(max-width: 500px) {
	.service-title {
		font-size: 18px;
	}
	
	.services-list {
		gap: 16px;
	}
}

@media (max-width: 400px) {
	.services-load-more-wrapper {
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
		flex-direction: column;
	}

	.services-load-more-wrapper,
	.services-load-container,
	.services-load-btn{
		width: 100%;
		justify-content: center;
	}
}