@mixin govuk-width-container {
  // Limit the width of the container to the page width
  max-width: $govuk-page-width;

  @include govuk-if-ie8 {
    width: $govuk-page-width;
  }

  // On mobile, add half width gutters
  margin: 0 $govuk-gutter-half;

  // On tablet, add full width gutters
  @include govuk-media-query($from: tablet) {
    margin: 0 $govuk-gutter;
  }

  // As soon as the viewport is greater than the width of the page plus the
  // gutters, just centre the content instead of adding gutters.
  @include govuk-media-query($and: "(min-width: #{($govuk-page-width + $govuk-gutter * 2)})") {
    margin: 0 auto;
  }
}

@include govuk-exports("govuk/objects/width-container") {
  .govuk-width-container {
    @include govuk-width-container;
  }
}