// Describe me so no evil shall be committed in wielding this class!
.wrapper {
  @include outer-container;
}

header {
  @include outer-container(100%);

  background-color: $pink;
  color: $white;

  h1 {
    margin-top: 0;
  }
}

footer {
  @include outer-container(100%);

  background-color: $non-black;
  color: $white;
}

main {
  @include outer-container();

  article {

    @include span-columns(8 of 12);

    @include media($tablet) {
      @include span-columns(6 of 8);
      @include shift(2);
    }

    @include media($mobile) {
      @include span-columns(4 of 4);
      @include shift(0);
    }

  }

}

.sidebar {

  @include span-columns(3 of 12);

  @include media($tablet) {
    @include span-columns(2 of 8);
  }

  @include media($mobile) {
    @include span-columns(4 of 4);
  }
}

nav {
  ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
  }
}

// Describe me so no evil shall be committed in wielding this class!
.wrapper {
  @include outer-container;
}

header {
  @include outer-container(100%);

  background-color: $pink;
  color: $white;

  h1 {
    margin-top: 0;
  }
}

footer {
  @include outer-container(100%);

  background-color: $non-black;
  color: $white;
}

main {
  @include outer-container();

  article {

    @include span-columns(7 of 12);

    @include media($tablet) {
      @include span-columns(6 of 8);
      @include shift(2);
    }

    @include media($mobile) {
      @include span-columns(4 of 4);
      @include shift(0);
    }

  }

}

.sidebar {

  @include span-columns(3 of 12);

  @include media($tablet) {
    @include span-columns(2 of 8);
  }

  @include media($mobile) {
    @include span-columns(4 of 4);
  }
}

nav {
  ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
  }
}

Reduce column-span on article element to maintain readable line-length
Reduce column-span on article element to maintain readable line-length
