.brand-swap ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
}

.brand-swap ul li {
    border-right: 1px solid #E3E1DF;
}

.brand-swap ul li a {
    padding: 12px 20px;
    display: block;
    font-size: 0;
    line-height: 0;
    position: relative;
}

.brand-swap ul li a:after {
    content: '';
    height: 2px;
    background: #484a48;
    position: absolute;
    bottom: 8px;
    left: 20px;
    right: 20px;
    transition: all 300ms ease;
    opacity: 0;
    visibility: hidden;
}

.brand-swap ul li.active a:after,
.brand-swap ul li a:hover:after {
    opacity: 1;
    visibility: visible;
}

.brand-swap ul li a svg {
    height: 26px;
    width: auto;
}

@media only screen and (max-width: 991px) {
    .brand-swap ul li a {
        padding: 10px 14px;
    }

    .brand-swap ul li a:after {
        left: 14px;
        right: 14px;
        bottom: 6px;
    }

    .brand-swap ul li a svg {
        height: 20px;
    }
}

@media only screen and (max-width: 480px) {
    .brand-swap ul li a {
        padding: 10px 7px;
    }

    .brand-swap ul li a:after {
        left: 7px;
        right: 7px;
    }

    .brand-swap ul li a svg {
        height: 17px;
    }
}