_container.scss

.container {
  width: 100%;
  margin: 0 auto;
  position: relative;
  @include from($desktop) {
    max-width: $desktop - (2 * $gap);
    width: $desktop - (2 * $gap) ;

    &.is-fluid {
      margin-left: $gap;
      margin-right: $gap;
      max-width: none;
      width: auto;
    }
  }
  @include until($widescreen) {
    &.is-widescreen {
      max-width: $widescreen - (2 * $gap);
      width: auto;
    }
  }
  @include until($fullhd) {
    &.is-fullhd {
      max-width: $fullhd - (2 * $gap);
      width: auto;
    }
  }
  @include from($widescreen) {
    max-width: $widescreen - (2 * $gap);
    width: $widescreen - (2 * $gap);
  }
  @include from($fullhd) {
    max-width: $fullhd - (2 * $gap);
    width: $fullhd - (2 * $gap);
  }
}

_initial_variables.scss

// the relevant portion of this file

// The container horizontal gap, which acts as the offset for breakpoints
$gap: 32px !default;
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
$tablet: 769px !default;
// 960px container + 3rem
$desktop: 960px + (2 * $gap) !default;
// 1152px container + 3rem
$widescreen: 1152px + (2 * $gap)  !default;
// 1344px container + 3rem
$fullhd: 1344px + (2 * $gap)  !default;