.client-list{
	margin:20px auto 0px;
	max-width: var(--wp--style--global--wide-size);
	padding: 20px 0;
}
.client-list .inner{
	width: 100%;
}
.client-logo-list{
	width:100%;
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
}
.client-logo-list li{
	aspect-ratio: 5 / 2;
  width: 20%;
  flex: 0 0 20%;
  box-sizing: border-box;
}
.client-logo-list li picture a,
.client-logo-list li picture{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 30px 0px 0px;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
}
.client-logo-list li picture a img,
.client-logo-list li picture img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: grayscale(100%);
}
@-webkit-keyframes buttonpop {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}
@keyframes buttonpop {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

.client-logo-list li:hover picture a img,
.client-logo-list li:hover picture img{
	filter: grayscale(0%);
}

.client-logo-list li picture a:hover,
.client-logo-list li picture:hover,
.client-logo-list li picture a:focus,
.client-logo-list li picture:focus,
.client-logo-list li picture a:active,
.client-logo-list li picture:active{
  -webkit-animation-name: buttonpop;
  animation-name: buttonpop;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
@media screen and (max-width:900px){
	.client-logo-list li{
		width: calc(33% - 30px);
	}
}
@media screen and (max-width:600px){
	.client-logo-list li{
		width: calc(50% - 30px);
		aspect-ratio: 1/1;
	}
}