//                                                     d8b      888 888    888
//                                                     Y8P      888 888    888
//                                                              888 888    888
// 88888b.d88b.   8888b.  888  888       888  888  888 888  .d88888 888888 88888b.
// 888 "888 "88b     "88b `Y8bd8P'       888  888  888 888 d88" 888 888    888 "88b
// 888  888  888 .d888888   X88K  888888 888  888  888 888 888  888 888    888  888
// 888  888  888 888  888 .d8""8b.       Y88b 888 d88P 888 Y88b 888 Y88b.  888  888
// 888  888  888 "Y888888 888  888        "Y8888888P"  888  "Y88888  "Y888 888  888

// Max-Width
//
// ^^^scss
// @include constrained($max-width)
// ^^^
//
// The `breakpoint()` Sass mixin takes a single optional parameter, `$max-width`. If no `$max-width` is passed, it will default to the `$content-max-width` defined in [Tokens ➔ Content](/tokens/content). This mixin can be used to set the maximum width of a block level element, and center it in the browser.
//
// Markup:
// Source
//
// Styleguide SassDirectives.MaxWidth
//
// Weight: 8
@mixin constrained($max-width: $content-max-width) {
  @include breakpoint(l) {
    margin-left: auto;
    margin-right: auto;
    max-width: $max-width;
    width: 100%;
  }
}