.logos {
  &__wrapper {
    padding-bottom: $spacing--l;
  }

  &__list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-top: calc(
      ((#{$baseline} * 1.5) + 0.8%) * -1); //small correction in negative margin to compensate % image padding.
  }

  &__item {
    margin: ($baseline * 1.5) 0;
    width: grid-columns(3, 6);

    img {
      @include transition(opacity $transition-duration--fast, ease);
      filter: grayscale(1);
      height: auto;
      left: 50%;
      max-height: 100%;
      opacity: 0.5;
      padding: 7.5% 15%;
      transform: translateX(-50%);
      width: auto;
    }

    a:hover img {
      opacity: 1;
    }
  }
}

@include viewport--l {
  .logos {
    &__wrapper {
      padding-bottom: $baseline * 11;
    }

    &__list {
      margin-top: calc(
        ((#{$baseline} * 3) + 0.95%) * -1
      ); //small correction in negative margin to compensate % image padding.
    }

    &__item {
      margin: ($baseline * 2.5) 0;
      width: grid-columns(3, 9);
    }
  }

  // two column layout
  .logos__list--double {
    margin-top: calc(
      ((#{$baseline} * 4.25) + 0.95%) * -1
    ); //small correction in negative margin to compensate % image padding.
    width: grid-columns(8, 9);

    .logos__item {
      width: grid-columns(4, 8);
    }
  }
}