.clients-block .clients-container {
    display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(80px, 7vw, 100px) clamp(50px, 9vw, 100px);
}
.clients-block .client .wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.clients-block .client img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    transition: all .15s linear;
    position: relative;
}
.clients-block .client:hover img {
    filter: grayscale(0%);
}
.clients-block .client.alt-image .client-image-dark {
    opacity: 1;
}
.clients-block .client.alt-image:hover .client-image-dark {
    opacity: 0;
}

.clients-block .client.alt-image .client-image {
    opacity: 0;
    position: absolute;
}
.clients-block .client.alt-image:hover .client-image {
    opacity: 1;
}


@media all and (max-width: 768px) {
.clients-block .clients-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.clients-block .client img {
    width: 100%;
}
}
@media all and (max-width: 480px) {
.clients-block .clients-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 60px 50px;
}
}