.grid-test
  .row
    color white
  .col-12
    background-color: red
  .col-10
    background-color: orange
  .col-8
    background-color: yellow
  .col-6
    background-color: green
  .col-4
    background-color: blue
  .col-2
    background-color: turquoise
  .col-1
    background-color: purple

.grid
  @media size-M
    flex-grow: 1
    align-self: stretch
    margin-left: grid-margin-M
    margin-right: grid-margin-M
  @media size-L
    width: 966px
    max-width: 966px
    margin-right: auto
    margin-left: auto
  @media size-XL
    width: 1170px
    margin-right: auto
    margin-left: auto

// Rows
.row
  display: flex
  flex-direction: row

// Columns
.column
  width: 100%
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center

.col-12
  width: 100%

.col-10
  width: 10 * (100%/12)

.col-8
  width: 8 * (100%/12)

.col-6
  width: 6 * (100%/12)

.col-4
  width: 4 * (100%/12)

.col-2
  width: 2 * (100%/12)

.col-1
  width: 1 * (100%/12)


// Orientation & justification
.flex
  display: flex

.center
  justify-content: center
  align-items: center
  text-align: center
  margin: 0 auto

.middle
  align-items: center

.grow
  flex-grow: 1

.right
  justify-content: flex-end
  text-align: right

.left
  justify-content: flex-start
  text-align: left