sass-site/source/assets/stylesheets/regions/_contentinfo.scss

.contentinfo {
  @include padding-leader(2);
  @include padding-trailer(2);
  color: $color-text-weak;

  * { vertical-align: middle; }

  .container {
    @include leading-border;
    @include padding-trailer;
    border-color: $color-border;
  }

  ul { @include font-size-small;  }

  p {
    @include padding-trailer(.25);
    margin: {
      right: 0;
      left:  0;
    }

    &:last-child { padding-bottom: 0; }
  }

  a {
    color: $color-text;

    &:hover,
    &:focus { color: $color-text-strong; }
  }
}

.contentinfo-tools,
.contentinfo-social { @include padding-leader($font-size: $font-size-small); }

.contentinfo-tools ul {
  @extend %horizontal-list;
  font-size: 1em;
}

@include at-breakpoint($tablet-large) {
  .contentinfo {
    padding: {
         top: 0;
      bottom: 0;
    }
    height: $sticky-contentinfo-height;

    .container {
      @extend %table-layout-tablet-large;
      text-align: left;
    }

    ul {
      display: table-row;
      height: 100%;
    }
  }

  .contentinfo-legal,
  .contentinfo-tools,
  .contentinfo-social { @extend %table-layout-cell-tablet-large; }

  .contentinfo-tools,
  .contentinfo-social {
    padding: 0 0 0 ($gutter-width * 2);
    width: 1px;
    white-space: nowrap;
  }

  .contentinfo-social { @include adjust-leading-to(1, $font-size-small); }
}