.brands-grid-sm {
    display: block;
}

.brands-grid-xl {
    display: none;
}

.brands-grid-sm .grid {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 320px;
}

.brands-grid-sm .brand {
    background: #323443;
    border-radius: 10px;
    margin: 0 1% 2%;
    width: 48%;
    min-height: 120px;
    transition: background .3s ease;
}

.brands-grid-sm .brand:nth-child(4n-1) {
    margin-top: 20px;
}

.brands-grid-sm .brand:nth-child(4n-2),
.brands-grid-sm .brand:nth-child(4n-1) {
    background: #585A65;
}

.brands-grid-sm .brand,
.brands-grid-xl .brand {
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand img.ct-client-img {
    max-width: 60%;
    max-height: 40px;
    width: auto;
    object-fit: contain;
    filter: invert(1);
    transition: transform .3s ease;
    /* opacity: .5; */
}

.brand:hover img.ct-client-img {
    opacity: 1;
}

@media (min-width: 768px) {
    .brands-grid-sm {
        display: none;
    }
    .brands-grid-xl {
        display: block;
    }
    .brands-grid-xl .grid {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        max-height: 480px;
    }
    .brands-grid-xl .brand {
        background: #323443;
        border-radius: 10px;
        margin: 0 10px 20px;
        height: 180px;
        transition: background .3s ease;
    }
    .brands-grid-xl .brand:first-of-type,
    .brands-grid-xl .brand:last-of-type {
        margin-bottom: 100px;
    }
    .brands-grid-xl .brand:nth-child(1),
    .brands-grid-xl .brand:nth-child(4n) {
        margin-top: 50px;
    }
    .brands-grid-xl .brand:nth-child(1),
    .brands-grid-xl .brand:nth-child(3),
    .brands-grid-xl .brand:nth-child(7),
    .brands-grid-xl .brand:nth-child(10),
    .brands-grid-xl .brand:nth-child(4n) {
        background: #585A65;
    }
    .brands-grid-xl .col:nth-child(even) {
        transform: translateY(0);
    }
    .brands-grid-xl .col:nth-child(odd) {
        transform: translateY(10%);
    }
}

.brands-grid-xl .brand img.ct-client-img {
    max-width: 60%;
    max-height: 85px;
    width: 160px;
}


.brands-grid-xl .brand:hover img.ct-client-img {
    transform:scale(1.2);
}

.brands-grid-xl .brand:hover {
    background: #fff8;
}