.main-producers {
   .producers-wrapper {
      margin: 0 calc(-1 * $grid-gutter-width / 2) 20px;
   }

   .producer-item {
      border: 1px solid $border-color;
      margin: calc($grid-gutter-width / 2);
      width: calc(20% - $grid-gutter-width);
      padding-left: 30px;
      padding-right: 30px;
      transition: all $transition-speed;

      @include haf {
         border-color: $brand-primary;
      }

      @media screen and (max-width: $lg - 1) {
         width: calc(25% - $grid-gutter-width);
      }

      @media screen and (max-width: $md - 1) {
         width: calc(percentage(calc(1 / 3)) - $grid-gutter-width);
      }

      @media screen and (max-width: $sm - 1) {
         width: calc(50% - $grid-gutter-width);
      }
   }
}

.producers-nav {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   background: $body-bg-alt;
   padding: 10px;
   margin-bottom: 10px;

   a {
      @include underline-hover;

      font-size: $font-size-larger;
      color: $text-dark;
      font-weight: $font-weight-bold;
      padding: 2px 5px;
      text-transform: uppercase;
   }

   @media screen and (min-width: $sm) and (max-width: $md - 1) {
      a {
         padding: 2px 3px;
      }
   }
}
