// Container 
.container {
  max-width: $container-page-width;
  // On desktop screens, when screen size is greater than the actual width of the page
  // then content is centred instead of adding gutters 
  margin-left: auto;
  margin-right: auto;
  // As soon as the viewport is less than page width plus both gutters,
  // then add gutter spacing to container   
  @include mq.mq($until: $container-page-width + $gutter * 2) {
    margin-left: $gutter-half;
    margin-right: $gutter-half;
  }
}
// Full width container
.full-width-container {
    max-width: 100%;
    margin-left: $gutter-half;
    margin-right: $gutter-half;
}