.container {
  margin: 0 auto;
  position: relative;
  padding: 0 ($columns-gutter / 2);

  @include from($tablet) {
    padding: 0 $columns-gutter-md;
  }

  @include from($desktop) {
    max-width: $desktop - (2 * $container-gap);
    width: $desktop - (2 * $container-gap);

    &.is-fluid {
      margin-left: $container-gap;
      margin-right: $container-gap;
      max-width: none;
      width: auto;
    }
  }

  @include until($widescreen) {
    &.is-widescreen {
      max-width: $widescreen - (2 * $container-gap);
      width: auto;
    }
  }

  @include until($fullhd) {
    &.is-fullhd {
      max-width: $fullhd - (2 * $container-gap);
      width: auto;
    }
  }

  @include from($widescreen) {
    max-width: $widescreen - (2 * $container-gap);
    width: $widescreen - (2 * $container-gap);
  }

  @include from($fullhd) {
    max-width: $fullhd - (2 * $container-gap);
    width: $fullhd - (2 * $container-gap);
  }
}