.partners-logos {
  @include make-row();


  .partner-logo-item {
    @include make-col-ready();
    padding-top: 15px;
    padding-bottom: 15px;

    @include media-breakpoint-down(lg) {
      @include make-col(4);
    }

    @include media-breakpoint-down(sm) {
      @include make-col(6);
    }

    .partner-logo-inner {
      position: relative;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      img {
        max-width: 100%;
        display: inline-block;
      }

      .hover-mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        visibility: hidden;
        opacity: 0;
        z-index: 10;
        transition: all 0.25s ease-in-out;

        &:after {
          display: block;
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          height: 100%;
          visibility: hidden;
          opacity: 0;
          background-color: color('blue');
          z-index: 8;
        }

        .hover-mask-info {
          position: relative;
          color: $white;
          line-height: 1;
          z-index: 30;

          a {
            color: $white;
          }
          h4 {
            color: $white;
            margin-bottom: 0;
          }
          .desc p {
            margin: 5px 0 0 0;
          }
        }
      }

      &:hover {
        .hover-mask {
          visibility: visible;
          opacity: 1;
          &:after {
            visibility: visible;
            opacity: 0.8;
          }
        }
      }
    }

    &.img-hover {
      img {
        filter: grayscale(100%);
        transition: all 0.2s ease-in-out;
      }

      &:hover {
        img {
          filter: grayscale(0);
        }
      }
    }
  }

  @include media-breakpoint-up(lg) {

    &.two_cols .partner-logo-item {
      @include make-col(6);
    }

    &.three_cols .partner-logo-item {
      @include make-col(4);
    }

    &.four_cols .partner-logo-item {
      @include make-col(3);
    }

    &.five_cols .partner-logo-item {
      flex: 0 0 20%;
      max-width: 20%;;
    }

    &.six_cols .partner-logo-item {
      @include make-col(2);
    }
  }



  &.no-gap {
    margin-left: 0 !important;
    margin-right: 0 !important;

    .partner-logo-item {
      padding: 0 !important;
    }
  }

  &.with-borders {

    .partner-logo-inner {
      border: 1px solid $border-color;
    }

    &.no-gap {
      .partner-logo-inner {
        margin-bottom: -1px;
        margin-right: -1px;
      }
    }
  }
}