.brands {
    --offset: 2.1rem;
}

.brands .swiper {
    overflow: unset;
}

.brands .swiper-wrapper {
    overflow: unset;
}

.brands__text {
    max-width: 55rem;
}

.brands__list {
    padding-block: var(--offset);
    margin-block: calc(var(--offset) * -1);
}

.brands-item {
    display: block;
    max-width: 30.6rem;
    box-shadow: 0 0 var(--offset) 0 rgb(0 0 0 / 15%);
    filter: grayscale(100%);
    transition: 0.3s;
}

.brands-item__image {
    width: 30.6rem;
    max-width: 100%;
}

.brands-item:focus {
    filter: grayscale(0%);
}

@media (hover: hover) and (pointer: fine) {
    .brands-item:hover {
        filter: grayscale(0%); 
    }
}

@media (hover: none) {
    .brands-item:active {
        filter: grayscale(0%); 
    }
}



@media screen and (max-width: 575.9px) {
    .brands-item {
        max-width: 18rem;
    }
}