.brand-plugin-alphabet {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 1400px;
    padding: 0 6px;
    background: #f5f5f5;
    z-index: 100;
}

.brand-plugin-alphabet-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.brand-plugin-alphabet-list--letters {
    flex-wrap: wrap;
}

.brand-plugin-alphabet-list__item {
    padding: 0 4px;
}

.brand-plugin-alphabet-list__item--letter {
    padding: 5px 4px;
}

.brand-plugin-alphabet-list__item--show-all {
    border-left: 1px solid #b7b7b7;
}

.brand-plugin-alphabet-list__brands {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    box-sizing: border-box;
    width: 100%;
}

.brand-plugin-alphabet-list__item--letter:hover .brand-plugin-alphabet-list__brands {
    display: flex;
}

.brand-plugin-alphabet-list__letter {
    color: #206dc4;
    cursor: pointer;
}

.brand-plugin-alphabet-list__letter:hover {
    color: #f00f00;
}

.brand-plugin-alphabet-brands {
    padding: 12px 10px;
    background: #ffffff;
    box-shadow: 0px 5px 5px #777;
}

.brand-plugin-alphabet-brands__title {
    align-self: flex-start;
    font-size: 4em;
    line-height: 1;
    padding: 20px;
}

.brand-plugin-alphabet-brands__list {
    flex-grow: 1;
    list-style: none;
    column-count: 4;
    margin: 0;
    padding: 0;
}

.brand-plugin-alphabet-brands__item {
    display: block;
    padding: 3px 0;
}

@media (max-width: 760px) {
    .brand-plugin-alphabet-brands__list {
        column-count: 3;
    }
}

@media (max-width: 450px) {
    .brand-plugin-alphabet-brands__list {
        column-count: 2;
    }
}