@use "../settings/measurements" as *;
@use "../vendor/govuk-frontend" as *;

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

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

  // On tablet, add full width gutters
  @include govuk-media-query($from: tablet) {
    margin: 0 $moj-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: #{($width + $moj-gutter * 2)})") {
    margin: 0 auto;
  }
}

/*# sourceMappingURL=_width-container.scss.map */