<!-- start `page-footer` component; -->
<footer class="page-footer">
  <div class="container">
    <div class="row">
      <div class="col-12 col-sm-6 col-md-4">
        <div class="img-cover"><img src="../images/page-footer/acme__logo.png" alt="empty placeholder image" /></div>
        <nav class="page-footer__social"><a href="#">
            <svg class="icon-facebook">
              <title>Facebook</title>
              <use xlink:href="../images/icons/icons.svg#icon-facebook"></use>
            </svg></a> <a href="#">
            <svg class="icon-twitter">
              <title>Twitter</title>
              <use xlink:href="../images/icons/icons.svg#icon-twitter"></use>
            </svg></a> <a href="#">
            <svg class="icon-instagram">
              <title>Instagram</title>
              <use xlink:href="../images/icons/icons.svg#icon-instagram"></use>
            </svg></a> </nav><small class="page-footer__legal">&copy; 2019 ACME, a division of a Much Bigger Company Network, LLC.</small> 
      </div>
      <div class="col-12 col-sm-6 col-md-7 col-md-offset-1">
        <div class="row">
          <div class="col-12 col-md-4">
            <nav class="page-footer__links"><br class="d-sm-none" />
              <h3>Information</h3><a href="#">About Us</a> <a href="#">Accessibility</a> <a href="#">Corrections</a> <a href="#">Press Room</a> <a href="#">Advertise</a> <a href="#">Jobs</a> <a href="#">Developer's Network</a> <a href="#">Terms of Service</a> <a href="#">Privacy Notice</a> <a href="#">Ad Choices</a> <a href="#">Support</a> 
            </nav>
          </div>
          <div class="col-12 col-md-4">
            <nav class="page-footer__links"><br class="d-md-none" />
              <h3>Media Partners</h3><a href="#">Sports Weekly</a> <a href="#">Education</a> <a href="#">Grateful</a> <a href="#">Studio</a> <a href="#">Reviewed</a> 
            </nav>
          </div>
          <div class="col-12 col-md-4">
            <nav class="page-footer__links"><br class="d-md-none" />
              <h3>Stay Connected</h3><a href="#">Leave feedback</a> <a href="#">Contact Us</a> <a href="#">Staff</a> <a href="#">Get Home Delivery</a> <a href="#">Manage My Subscriptions</a> <a href="#">Newsletters</a> <a href="#">Podcasts</a> 
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>
<!-- end `page-footer` component; -->

{
  "logo": {
    "img": "../images/page-footer/acme__logo.png",
    "alt": "empty placeholder image"
  },
  "social": {
    "facebook": "#",
    "twitter": "#",
    "instagram": "#"
  },
  "legal": "© 2019 ACME, a division of a Much Bigger Company Network, LLC.",
  "column1": {
    "title": "Information",
    "links": [
      {
        "url": "#",
        "title": "About Us"
      },
      {
        "url": "#",
        "title": "Accessibility"
      },
      {
        "url": "#",
        "title": "Corrections"
      },
      {
        "url": "#",
        "title": "Press Room"
      },
      {
        "url": "#",
        "title": "Advertise"
      },
      {
        "url": "#",
        "title": "Jobs"
      },
      {
        "url": "#",
        "title": "Developer's Network"
      },
      {
        "url": "#",
        "title": "Terms of Service"
      },
      {
        "url": "#",
        "title": "Privacy Notice"
      },
      {
        "url": "#",
        "title": "Ad Choices"
      },
      {
        "url": "#",
        "title": "Support"
      }
    ]
  },
  "column2": {
    "title": "Media Partners",
    "links": [
      {
        "url": "#",
        "title": "Sports Weekly"
      },
      {
        "url": "#",
        "title": "Education"
      },
      {
        "url": "#",
        "title": "Grateful"
      },
      {
        "url": "#",
        "title": "Studio"
      },
      {
        "url": "#",
        "title": "Reviewed"
      }
    ]
  },
  "column3": {
    "title": "Stay Connected",
    "links": [
      {
        "url": "#",
        "title": "Leave feedback"
      },
      {
        "url": "#",
        "title": "Contact Us"
      },
      {
        "url": "#",
        "title": "Staff"
      },
      {
        "url": "#",
        "title": "Get Home Delivery"
      },
      {
        "url": "#",
        "title": "Manage My Subscriptions"
      },
      {
        "url": "#",
        "title": "Newsletters"
      },
      {
        "url": "#",
        "title": "Podcasts"
      }
    ]
  }
}

.page-footer {
  border-top: size(0.5) solid $color__highlightLight;
  background: $color__backgroundDark;
  color: $color__textLight;
  padding: size(1.5) 0 size(3);
  margin-top: size(3);

  .img-cover {
    width: size(12);
    height: size(9);

    @include breakpoint($breakpoint--sm) {
      width: size(9);
      height: size(6);
    }

    @include breakpoint($breakpoint--lg) {
      width: size(12);
      height: size(9);
    }
  }

  &__social {
    padding: size(1) 0;

    svg {
      height: size(1);
      width: size(1);
      fill: $color__textLight;
      vertical-align: bottom;
      transition: fill $duration__fill;
    }

    a {
      display: inline-block;
      text-decoration: none;
      transition: color $duration__color;

      + a {
        margin-left: size(0.5);
      }

      &:hover,
      &:focus {
        svg {
          fill: $color__highlightDark;
        }
      }
    }
  }

  // at the md breakpoint, provide extra space between links;
  // because the colomns are narrow, and the links wrap;
  // without a space between, it's difficult to tell where one link ends and the next starts;
  // this half sized space breaks the vertical grid, but it's the last element on the page and wont be very noticable;
  &__links {
    h3 {
      @include breakpoint($breakpoint--md) {
        margin-bottom: size(0.5);
      }

      @include breakpoint($breakpoint--lg) {
        margin-bottom: 0;
      }
    }

    // create a BR like effect;
    a {
      color: $color__textLight;
      text-decoration: none;
      transition: color $duration__color;

      &:hover,
      &:focus {
        color: $color__highlightDark;
        text-decoration: underline;
      }

      &:after {
        content: '';
        display: block;

        @include breakpoint($breakpoint--md) {
          margin-top: size(0.5);
        }

        @include breakpoint($breakpoint--lg) {
          margin-top: 0;
        }
      }
    }
  }
}