#main-footer {
  padding: 30px 0;
  margin-top: 40px;
  background: $off-white-2;
}

.footer--logos {
  @include nav-small {
    max-width: 230px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
}

.footer--logo {
  display: inline-block;
  vertical-align: middle;
  padding-top: 10px;
  padding-bottom: 10px;

  &.chef {
    width: 27%;
    padding-right: 5%;
    border-right: 1px solid $inspec-grey;
  }

  &.inspec {
    width: 46%;
    padding-left: 5%;
  }
}

.footer--links {
  @extend .no-bullet;
  margin: 25px 0 0;
  font-size: 14px;
  line-height: 1.1;

  & > li {
    margin-bottom: 25px;
  }

  @media (min-width: 640px) {
    margin: 10px 0 5px;

    & > li {
      display: inline-block;
      margin: 0 25px 0 0;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  @media (min-width: 880px) {
    display: inline-block;

    &:first-child {
      margin-right: 25px;
    }
  }
}

.footer--link {
  color: $inspec-grey;
  text-transform: uppercase;
  font-family: $heading-font;

  &:hover,
  &:focus,
  &:active {
    color: darken($inspec-grey, 15%);
  }
}