/*
---
name: Content
category: Foundations/Grid
tag: grid
---
The previous examples display boxes with a very similar context. If the content of the columns is different, by default all of them are positionated at the beginning of the row.

Content helpers allows you to change the alignment of an specific column or all the elements in a row.

```html
<div class="container">
  <div class="row align-center">
    <div class="col-3"><article>Align Center</article></div>
    <div class="col-3"><article>A very long long long long long long long long long long long long long long long long long long long long long long long long long long long long content</article></div>
    <div class="col-3"><article>Align Center</article></div>
    <div class="col-3"><article>Align Center</article></div>
  </div>
  <div class="row">
    <div class="col-3 align-start"><article>Align Start</article></div>
    <div class="col-3"><article>A very long long long long long long long long long long long long long long long long long long long long long long long long long long long long content</article></div>
    <div class="col-3 align-center"><article>Align Center</article></div>
    <div class="col-3 align-end"><article>Align End</article></div>
  </div>
  <div class="row align-center">
    <div class="col-3"><article>Align Center</article></div>
    <div class="col-3"><article>A very long long long long long long long long long long long long long long long long long long long long long long long long long long long long content</article></div>
    <div class="col-3 align-start"><article>Align Start</article></div>
    <div class="col-3"><article>Align Center</article></div>
  </div>
</div>
```
*/

.flex,
.row {
  display: flex;

  // Parent element will align vertically all its children
  &.align-center {
    align-items: center;
  }

  &.align-start {
    align-items: flex-start;
  }

  &.align-end {
    align-items: flex-end;
  }

  // Children elements will auto-align vertically
  .align-center {
    align-self: center;
  }

  .align-start {
    align-self: flex-start;
  }

  .align-end {
    align-self: flex-end;
  }
}

/*
---
name: Row reverse
category: Foundations/Grid
tag: grid
---

Row reverse is a helper that will allow to exchange the order of the columns

There are layouts with content/text on the left side and images on the right side for
the first row and, for the second, the image is on the left and the content on the right. When
the layout collapses, this helper will keep the correct order.

##### Options

* `.row-reverse`: Helper used on the `.row` that will reverse the order of its columns.

```html
<div class="container container-tiny">
  <div class="row collapse-b-ultrawide">
    <div class="col-7">
      <p>
        Bitnami has spent years perfecting the business of packaging applications. During this time,
        we have built the expertise and internal tooling required to automate the process of
        publishing and maintaining a catalog of applications and development environments
      </p>
    </div>
    <div class="col-5 text-c">
      <img src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg"/>
    </div>
  </div>
  <div class="row row-reverse collapse-b-ultrawide">
    <div class="col-7">
      <p>
        Bitnami has spent years perfecting the business of packaging applications. During this time,
        we have built the expertise and internal tooling required to automate the process of
        publishing and maintaining a catalog of applications and development environments
      </p>
    </div>
    <div class="col-5 text-c">
      <img src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg"/>
    </div>
  </div>
</div>
```
*/
.row {
  &.row-reverse {
    flex-direction: row-reverse;
  }
}