.producers-wrapper {
   margin-bottom: 50px;

   h2 {
      margin-bottom: 35px;
   }

   .btn {
      min-width: 240px;
   }
}

.producers {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: $spacer;
}

.producer-item {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 20%;
   padding: $spacer $spacer-lg;

   a {
      display: block;
      width: 100%;
      text-align: center;
      color: $text-dark;
   }

   img {
      margin: 0 auto;
      transition: filter $transition-speed;
   }

   @include haf {
      img {
         filter: invert(70%);
      }
   }
}

@media screen and (max-width: $lg - 1) {
   .producer-item {
      width: percentage(calc(1 / 3));

      &:nth-child(10) {
         display: none;
      }
   }
}

@media screen and (max-width: $sm - 1) {
   .producers-wrapper {
      margin-bottom: 30px;

      h2 {
         margin-bottom: 20px;
      }

      .btn {
         width: 100%;
      }
   }

   .producer-item {
      width: 50%;

      &:nth-child(9) {
         display: none;
      }
   }
}
