message: Strict page container width.
diff: $-main-max-width = 650px
  +// Because flexbox allows the columns to flexibly size, we need to do a manual
  +// cut-off by setting the width forcefully. This calc line basically tries to
  +// find the correct width for the main content column and should work at any
  +// screen width since it's using calc() with the percentage.
  +-main-max-width($-num-columns)
  + width: s('calc(100% - calc(100% / 12 * 3 * %s) - %s)', $-num-columns, ($grid-gutter-width * $-num-columns))
  + max-width: $-main-max-width
  +
  // On xs the content stacks, we shove "main" to the bottom.
  .-row
  display: flex
  @@ -23,9 +31,8 @@ $-main-max-width = 650px
  .-row
  align-items: center
  - .-left, .-main, .-right
  - width: $percentage-10
  - max-width: $-main-max-width
  + .-main, .-left, .-right
  + width: ($container-sm / 12 * 10)
  // Desktop sizes is where we break it out into different columns.
  @media $media-md-up
  @@ -40,8 +47,8 @@ $-main-max-width = 650px
  order: 0
  .-main
  + -main-max-width(1)
  flex: 2 0
  - max-width: $-main-max-width
  order: 1
  .-right
  @@ -49,3 +56,7 @@ $-main-max-width = 650px
  padding-left: $grid-gutter-width
  min-width: $percentage-3
  order: 2
  +
  +@media $media-lg
  + .-main
  + -main-max-width(2)
  