@include border-box-sizing;

h1 {
  font-size: 22px;
  line-height: 1.2;
  font-weight: bold;
}

h2 {
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
  padding: 1em 0 0 0;
}

h3,
h4 {
  font-size: 16px;
}

nav {
  font-size: 14px;
}

a {
  color: $blue;

  &:hover,
  &:active,
  &:focus {
    color: darken($blue, 20);
  }
}

.container {
  @include container($total-columns);
  @include show-grid(background);
  padding: 0 $grid-padding;
  position: relative;
}

.content {
  padding: $gutter-width 0 0 0;
}

main {
  background: white;
  color: $charcoal;
  position: relative;
}

.main {
  position: relative;
  z-index: 1; // move to the top of the stacking order
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

h1 {
  font-size: 22px;
  line-height: 1.2;
  font-weight: bold;
}

h2 {
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
  padding: 1em 0 0 0;
}

h3,
h4 {
  font-size: 16px;
}

nav {
  font-size: 14px;
}

a {
  color: $blue;

  &:hover,
  &:active,
  &:focus {
    color: darken($blue, 20);
  }
}

.container {
  @include container($total-columns);
  @include show-grid(background);
  padding: 0 $grid-padding;
  position: relative;
}

.content {
  padding: $gutter-width 0 0 0;
}

main {
  background: white;
  color: $charcoal;
  position: relative;
}

.main {
  position: relative;
  z-index: 1; // move to the top of the stacking order
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

Replace box-sizing mixin with native box sizing
Replace box-sizing mixin with native box sizing
