$brandsGap: 30;
$brandsItemsEachRow: 2;

.o-brands {
  padding-bottom: 30px;

  @include mq(1200) {
    width: column(10, 12);
    margin: auto;
  }
}

.o-brands__title {
  @include font(mid-large, 29, medium);
  color: palette(primary, 700);
}

.o-brands__title ~ .o-brands__subtitle {
  margin-top: 15px;
}

.o-brands__heading {
  margin-bottom: 40px;

  @include mq(m) {
    margin-bottom: 80px;
  }
}

.o-brands__grid {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin: -#{$brandsGap}px;
}

.o-brands__item {
  margin: #{$brandsGap}px;
  width: calc((100% - #{$brandsGap * ($brandsItemsEachRow * 2)}px) / #{$brandsItemsEachRow});
  text-align: center;

  @include mq(475) {
    $brandsItemsEachRow: 3;
    width: calc((100% - #{$brandsGap * ($brandsItemsEachRow * 2)}px) / #{$brandsItemsEachRow});
  }

  @include mq(650) {
    $brandsItemsEachRow: 4;
    width: calc((100% - #{$brandsGap * ($brandsItemsEachRow * 2)}px) / #{$brandsItemsEachRow});
  }

  @include mq(1000) {
    $brandsItemsEachRow: 5;
    width: calc((100% - #{$brandsGap * ($brandsItemsEachRow * 2)}px) / #{$brandsItemsEachRow});
  }
}