.brands-indexes.brands-indexes--all .brands-index-row .brands-index-row-items {
    column-count: auto;
    display: flex;
    flex-wrap: wrap;
}

.brands-indexes.brands-indexes--all .brands-index-row .brands-index-row-items .brand-index-item {
    width: calc(50% - 10px);
    margin-right: 20px;
}

.brands-indexes.brands-indexes--all .brands-index-row .brands-index-row-items .brand-index-item:nth-child(2n) {
    margin-right: 0;
}

@media (min-width: 991px) {
    .brands-indexes.brands-indexes--all .brands-index-row .brands-index-row-items .brand-index-item {
        width: calc(16.66% - 17px);
        margin-right: 20px;
    }

    .brands-indexes.brands-indexes--all .brands-index-row .brands-index-row-items .brand-index-item:nth-child(2n) {
        margin-right: 20px;
    }

    .brands-indexes.brands-indexes--all .brands-index-row .brands-index-row-items .brand-index-item:nth-child(6n) {
        margin-right: 0;
    }
}

/* Блок популярных брендов: загрузочное состояние и раскладка логотипов, классы ставит script.js этого шаблона */
/* [comment in English in case encoding breaks] */
/* popular brands block: loading state and logo layout, classes are set by script.js of this template */
/* Пока логотипы измеряются и инициализируется слайдер: блок прозрачный, высота зафиксирована примерно на две строки, лишнее обрезано */
/* [comment in English in case encoding breaks] */
/* while logos are measured and the slider initializes: block is transparent, height fixed to about two rows, overflow hidden */
.brands-logos .brands-logos-items{
  -webkit-transition:opacity 0.4s ease;
  transition:opacity 0.4s ease;
}
.brands-logos .brands-logos-items.is-sizing{
  height:150px;
  overflow:hidden;
  opacity:0;
}
/* [comment in English in case encoding breaks] */
/* desktop brands logos: variable-width cells in two rows, vars and order are set by script.js of this template */
@media screen and (min-width:991px){
  .brands-logos .brands-logos-items,
  .brands-logos .brands-logos-items.is-sizing{
    opacity: 0;
    max-height: 120px;
  }
  /* [comment in English in case encoding breaks] */
  /* real gap between logos, rows start from the left so columns line up */
  .brands-logos .brands-logos-items.is-sized{
    column-gap:20px;
    -webkit-box-pack:start;
    -webkit-justify-content:flex-start;
    justify-content:flex-start;
    opacity: 1;
  }
  /* [comment in English in case encoding breaks] */
  /* column width (--logo-c) is shared by both rows, logo (--logo-f) is centered in it with side margins; */
  /* [comment in English in case encoding breaks] */
  /* the box shows only the visible part of the logo: it has ink ratio, image is shifted by ink offset */
  .brands-logos .brands-logos-items.is-sized .brand-logo-item{
    position:relative;
    overflow:hidden;
    width:calc((100% - (var(--logo-n) - 1) * 20px) * var(--logo-f));
    margin-left:calc((100% - (var(--logo-n) - 1) * 20px) * (var(--logo-c) - var(--logo-f)) / 2);
    margin-right:calc((100% - (var(--logo-n) - 1) * 20px) * (var(--logo-c) - var(--logo-f)) / 2);
    aspect-ratio:var(--ink-r);
    -webkit-order:var(--logo-order);
    order:var(--logo-order);
    overflow: visible;
  }
  .brands-logos .brands-logos-items.is-sized .brand-logo-item img{
    position:absolute;
    top:0;
    left:0;
    max-width:none;
    width:calc(100% / var(--ink-w));
    margin:calc(-100% / var(--ink-w) * var(--ink-y)) 0 0 calc(-100% / var(--ink-w) * var(--ink-x));
  }
}
@media screen and (max-width:767px){
  /* Высота блока на время загрузки: в слайдере одна строка логотипов */
  /* [comment in English in case encoding breaks] */
  /* block height while loading: the slider shows a single row of logos */
  .brands-logos .brands-logos-items.is-sizing{
    height:140px;
  }
}