// Mostly copied from govuk_elements layout

// GOV.UK front end toolkit dependencies
@import "../govuk/measurements";
@import "../govuk/conditionals";
@import "../govuk/grid_layout";
@import "helpers";

@mixin site-width-container($width) {
  max-width: $width;
  @include ie-lte(8){
    width: $width;
  }

  margin: 0 $gutter-half;
  @include media(tablet){
    margin: 0 $gutter;
  }
  @include media($min-width: ($width + $gutter * 2)){
    margin: 0 auto;
  }
}

// Wrapper sets the site width
.wrapper {
  @include site-width-container($site-width);
}

// Content wraps the entire site content block
#content {
  @include site-width-container($site-width);
  @extend %contain-floats;
  padding-bottom: $gutter;

  @include media(tablet) {
    padding-bottom: $gutter*2;
  }
}

// Grid layout
// ==========================================================================

// Usage:
// For two equal columns

// <div class="grid-row">
//   <div class="column-half">
//
//   </div>
//   <div class="column-half">
//
//   </div>
// </div>

// Use .grid-row to define a row for grid columns to sit in
.grid-row {
  @extend %grid-row;
}

// Use .grid-column to create a grid column with 15px gutter
// By default grid columns break to become full width at tablet size
.grid-column {
  @include grid-column(1/1);
}

.column-quarter {
  @include grid-column(1/4);
}

.column-half {
  @include grid-column(1/2);
}

.column-third {
  @include grid-column(1/3);
}

.column-two-thirds {
  @include grid-column(2/3);
}
