.section-footer {

  .container {
    @include media-breakpoint-down(lg) {
      max-width: inherit;
    }
  }
}


.footer-bg {
  @extend .hero-bg;
  position: absolute;
  z-index: -1;

  picture {
    @include media-breakpoint-up(md) {
      align-items: flex-end;
    }
  }
}


.footer {
  &, & * {
    color: scale_color($gray-400, $lightness: 90%);
  }

  a:hover, a:focus {
    color: $primary;
  }

  .row {
    justify-content: space-between;

  }

  .col {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    @include media-breakpoint-up(lg) {
      flex-direction: row;
      align-items: flex-end;
    }

    &--social {
      order: 1;
      text-align: center;
      font-size: $font-size-lg;
      width: 100%;
      padding-top: 100px;
      padding-bottom: 100px;

      @include media-breakpoint-down(sm) {
        font-size: $font-size-lg * 1.2;
      }

      a {
        @include media-breakpoint-down(sm) {
          white-space: nowrap;
        }
      }

      br {
        @include media-breakpoint-down(sm) {
          display: none
        }
      }
    }

    &--logo {
      order: 2;
      @include media-breakpoint-up(lg) {
        order: 3;
        width: 20%;
      }
    }

    &--copyright {
      order: 4;
      @include media-breakpoint-up(lg) {
        order: 2;
        width: 40%;
        justify-content: flex-start;
      }
    }

    &--footernav {
      order: 3;
      @include media-breakpoint-up(lg) {
        order: 4;
        width: 40%;
        justify-content: flex-end;
      }
    }
  }

  .col--copyright {
    .nav {
      @include media-breakpoint-down(sm) {
        flex-direction: column;
        align-items: center;
      }
    }

    .nav-link {
      padding-left: 0;
      padding-right: 0;
    }
  }

  .col--footernav .menu-pages {
    @include media-breakpoint-down(sm) {
      flex-direction: column;
      align-items: center;
    }

    .nav-link {
      padding-left: $nav-link-padding-y / 4;
      padding-right: $nav-link-padding-y / 4;
    }
  }

  .footer-logo {
    min-height: $font-size-base * 6;
    height: 5vw;
    //margin-bottom: $nav-link-padding-y + $nav-link-padding-y * 1.5;

    img {
      height: 100%;
      width: auto;
    }

  }

}
