.modern-services-list{
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: repeat(2, 1fr);
	row-gap: 16px;
	column-gap: 8px;
	@media screen and (min-width:1024px){
	grid-template-columns: repeat(3, 1fr);
	column-gap: 16px;
	row-gap:24px;
	}

	@media screen and (min-width:1440px){
	grid-template-columns: repeat(4, 1fr);
	column-gap: 24px;
	}
}

.modern-services-list li{
	display: flex;
	transition: all .3s ease;
	opacity:0;
	transform: translate(0, -10px);
}

.modern-services-list li.in-viewport{
	opacity:1;
	transform: translate(0, 0px);
}

.modern-services-list li a{
	display: flex;
	flex-direction: column;
	background: white;
	border-radius: 16px;
	transition: all .2s ease;
	padding:8px;
	gap: 8px;
	border:solid 1px var(--neutral);
	font-size: .75rem;
	font-weight: 500;
   word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
	text-wrap: balance;
	height:100%;
	width:100%;
	line-height: 130%;
   box-shadow: 
        0px 22px 22px 0px rgba(200, 197, 219, 0.045),
        0px 9.19px 9.19px 0px rgba(200, 197, 219, 0.0646),
        0px 4.91px 4.91px 0px rgba(200, 197, 219, 0.08),
        0px 2.75px 2.75px 0px rgba(200, 197, 219, 0.0954),
        0px 1.46px 1.46px 0px rgba(200, 197, 219, 0.115),
        0px 0.61px 0.61px 0px rgba(200, 197, 219, 0.16);

	@media screen and (min-width:768px){
	flex-direction: row; align-items: center;
	padding: 16px 16px 16px 8px;
	gap: 16px;
	}

	@media screen and (min-width:1024px){font-size: .875rem;}

}

.modern-services-list li a:active{
	box-shadow: none;
	border-color: var(--primary);
	transform: scale(.99);
}

@media (hover:hover){
	.modern-services-list li a:hover{
		border-color: var(--primary);
		background: var(--light-orange);
		box-shadow: none;
	}
}

.modern-services-list li a .modern-services-list-item-icon{
	border: solid 1px var(--neutral);
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.5);
	backdrop-filter: blur(16px);
	height: 40px;
	width: 40px;
	min-width: 40px;
	border-radius: calc(40px / 2);
	@media screen and (min-width:1024px){width: 64px; min-width: 64px; height: 64px; border-radius: calc(64px / 2)}
}

.modern-services-list li a .modern-services-list-item-icon img{
	max-width: 48px;
	max-height:48px;
	@media screen and (min-width:1024px){max-width: 72px; max-height:72px;}
}

.modern-services-list li a .modern-services-list-item-name{}

.modern-services-list li a> svg{
	min-width:16px;
	margin: auto 0 0 auto;
	@media screen and (min-width:768px){margin: 0 0 0 auto;}
}