.footer {
  @include font-size($font-small);

  background: theme-color("charcoal");
  color: color("white");
  padding: 20px 48px 40px;

  &__row {
    @extend .row;
    margin-top: $footer-margin;
  }

  &__logo-area {
    @extend .section__header;
    margin-bottom: 24px;
  }

  &__body {
    @extend .row;
    @extend .section__body--full-width;
    margin-bottom: $footer-margin;
  }

  &__heading {
    @include font-size($footer-heading-font-size);
    color: theme-color("red");
    padding-bottom: 8px;
  }

  &__section {
    @extend .col-6;
    @extend .col-md-4;
    margin-bottom: 24px;
  }

  &__links-link {
    @extend .text-small;
  }

  &__social-icon {
    @include font-size($footer-social-icon-mobile);
    margin: 8px;

    @include tablet {
      @include font-size($footer-social-icon);
    }
  }

  &__copywrite {
    @extend .col-md-3;

    @include tablet {
      text-align: right;
    }
  }

  &__links-list,
  &__social-links {
    @extend .list--inline;
    @extend .offset-md-3;
    @extend .col-md-6;

    .footer__social-links-item,
    .footer__links-item {
      @include tablet {
        margin-bottom: 0;
      }
    }
  }


  &__links-item {
    &::before {
      content: "/ ";
      display: inline-block;
      padding-right: 8px;
    }

    &:first-child {
      &::before {
        content: "";
        padding: 0;
      }
    }
  }

  a {
    color: color("white");
    text-decoration: none;

    &:hover {
      color: theme-color("blue");
    }
  }
}