.container { max-width: ($breakpoint-xl - $grid-gutter * 2); padding-left: $grid-gutter; padding-right: $grid-gutter; margin-left: auto; margin-right: auto; } @include breakpoint(m) { .container-m { width: ($breakpoint-m - $grid-gutter * 2); max-width: auto; padding-left: $grid-gutter; padding-right: $grid-gutter; margin-left: auto; margin-right: auto; } } @include breakpoint(l) { .container-l { width: ($breakpoint-l - $grid-gutter * 2); max-width: auto; padding-left: $grid-gutter; padding-right: $grid-gutter; margin-left: auto; margin-right: auto; } } @include breakpoint(xl) { .container-xl { width: ($breakpoint-xl - $grid-gutter * 2); max-width: auto; padding-left: $grid-gutter; padding-right: $grid-gutter; margin-left: auto; margin-right: auto; } }