/*
---
name: Sizes
category: Foundations/Grid
tag: helpers
---

The grid is limited by the `max-width` property. By default, the rows can not be wider than `1300px` ([uxl breakpoint](/category/Foundations/Variables/index.html#Breakpoints)). We can disable this behaviour using the `.container-fluid` class:

```html
<div class="container container-fluid">
  <div class="row">
    <div class="col-4"><article>4</article></div>
    <div class="col-4"><article>4</article></div>
    <div class="col-4"><article>4</article></div>
  </div>
</div>

<div class="container margin-t-big">
  <div class="row">
    <div class="col-2"><article>2</article></div>
    <div class="col-4"><article>4</article></div>
    <div class="col-4"><article>4</article></div>
    <div class="col-2"><article>2</article></div>
  </div>
</div>

<div class="container container-small margin-t-big">
  <div class="row">
    <div class="col-3"><article>3</article></div>
    <div class="col-3"><article>3</article></div>
    <div class="col-3"><article>3</article></div>
    <div class="col-3"><article>3</article></div>
  </div>
</div>

<div class="container container-tiny margin-t-big">
  <div class="row">
    <div class="col-2"><article>2</article></div>
    <div class="col-4"><article>4</article></div>
    <div class="col-4"><article>4</article></div>
    <div class="col-2"><article>2</article></div>
  </div>
</div>
```
*/

.container {
  // Remove max-width limitation for fluid containers
  &.container-fluid {
    max-width: none;
  }

  // A reduced width element. The width of this grid is the same of 9 columns
  &.container-small {
    max-width: calc(8 * (#{$grid-width} / #{$grid-columns}) + #{$grid-gutter} / 2);
  }

  &.container-tiny {
    max-width: calc(6 * (#{$grid-width} / #{$grid-columns}) + #{$grid-gutter} / 2);
  }
}