.brand {
    $self: &;
    &__list {
        border: 1px;
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        flex-flow: row wrap;
        background-color: #fff;
        border-left: 1px solid #dedede;
        border-top: 1px solid #dedede;

        &--three {
            #{$self}__list-item {
                @include media-breakpoint-up(sm) {
                    flex: 1 0 33.333333%;
                    max-width: 33.333333%;
                }
            }
        }

        &--four {
            #{$self}__list-item {
                @include media-breakpoint-up(sm) {
                    flex: 1 0 25%;
                    max-width: 25%;
                }
            }
        }

        a {
            width: 100%;
            text-align: center;
        }
    }

    &__list-item {
        display: flex;
        align-items: center;
        height: 80px;
        max-width: 50%;
        flex: 100%;
        justify-content: center;
        border-right: 1px solid #dedede;
        border-bottom: 1px solid #dedede;
        padding: 15px;

        @include media-breakpoint-up(sm) {
            flex: 1 0 50%;
            max-width: 50%;
            height: 100px;
        }

        img {
            height: auto;
            width: auto;
            max-height: 70px;
            max-width: 100%;
            padding: 10px;
        }
    }
}
