// Standard container for centered 12-column layouts. Collapses to full-width on mobile.
// Modifier classes can be applied to the wrapper to create different layouts.
//
// .-narrow - Three-quarters width container.
// .-half   - Half-width container, can be placed side-by-side to create two-column layouts.
//
// Styleguide Container

.container {
  @include clearfix();

  > .wrapper {
    position: relative;
    padding: $base-spacing;

    @include media($tablet) {
      @include span(12);
      @include push(2);
    }

    &.-narrow {
      @include media($tablet) {
        @include span(9);
      }
    }

    &.-half {
      @include media($tablet) {
        @include span(6);

        &:nth-of-type(2) {
          @include push(0);
        }
      }
    }
  }
}

// JS Enabled
.js {
  .container__body {
    p + .tabbed {
      margin-top: 9px;
    }
  }
}

// Standard container for centered 12-column layouts. Collapses to full-width on mobile.
// Modifier classes can be applied to the wrapper to create different layouts.
//
// .-narrow - Three-quarters width container.
// .-half   - Half-width container, can be placed side-by-side to create two-column layouts.
//
// Styleguide Container

.container {
  @include clearfix;

  > .wrapper {
    position: relative;
    padding: $base-spacing;

    @include media($tablet) {
      @include span(12);
      @include push(2);
    }

    &.-narrow {
      @include media($tablet) {
        @include span(9);
      }
    }

    &.-half {
      @include media($tablet) {
        @include span(6);

        &:nth-of-type(2n+1) {
          clear: both;
        }

        &:nth-of-type(2n) {
          @include push(0);
        }
      }
    }
  }
}

// JS Enabled
.js {
  .container__body {
    p + .tabbed {
      margin-top: 9px;
    }
  }
}

Fix "half" container display issue.
Fix "half" container display issue.
