.column
  flex: 1
  padding: 10px
  .columns.is-mobile > &.is-full
    flex: none
    width: 100%
  .columns.is-mobile > &.is-half
    flex: none
    width: 50%
  .columns.is-mobile > &.is-third
    flex: none
    width: 33.3333%
  .columns.is-mobile > &.is-quarter
    flex: none
    width: 25%
  .columns.is-mobile > &.is-offset-half
    margin-left: 50%
  .columns.is-mobile > &.is-offset-third
    margin-left: 33.3333%
  .columns.is-mobile > &.is-offset-quarter
    margin-left: 25%
  @for $i from 1 through 12
    .columns.is-mobile > &.is-#{$i}
      flex: none
      width: ($i / 12) * 100%
    .columns.is-mobile > &.is-offset-#{$i}
      margin-left: ($i / 12) * 100%
  +mobile
    &.is-full-mobile
      flex: none
      width: 100%
    &.is-half-mobile
      flex: none
      width: 50%
    &.is-third-mobile
      flex: none
      width: 33.3333%
    &.is-quarter-mobile
      flex: none
      width: 25%
    &.is-offset-half-mobile
      margin-left: 50%
    &.is-offset-third-mobile
      margin-left: 33.3333%
    &.is-offset-quarter-mobile
      margin-left: 25%
    @for $i from 1 through 12
      &.is-#{$i}-mobile
        flex: none
        width: ($i / 12) * 100%
      &.is-offset-#{$i}-mobile
        margin-left: ($i / 12) * 100%
  +tablet
    &.is-full,
    &.is-full-tablet
      flex: none
      width: 100%
    &.is-half,
    &.is-half-tablet
      flex: none
      width: 50%
    &.is-third,
    &.is-third-tablet
      flex: none
      width: 33.3333%
    &.is-quarter,
    &.is-quarter-tablet
      flex: none
      width: 25%
    &.is-offset-half,
    &.is-offset-half-tablet
      margin-left: 50%
    &.is-offset-third,
    &.is-offset-third-tablet
      margin-left: 33.3333%
    &.is-offset-quarter,
    &.is-offset-quarter-tablet
      margin-left: 25%
    @for $i from 1 through 12
      &.is-#{$i},
      &.is-#{$i}-tablet
        flex: none
        width: ($i / 12) * 100%
      &.is-offset-#{$i},
      &.is-offset-#{$i}-tablet
        margin-left: ($i / 12) * 100%
  +desktop
    &.is-full-desktop
      flex: none
      width: 100%
    &.is-half-desktop
      flex: none
      width: 50%
    &.is-third-desktop
      flex: none
      width: 33.3333%
    &.is-quarter-desktop
      flex: none
      width: 25%
    &.is-offset-half-desktop
      margin-left: 50%
    &.is-offset-third-desktop
      margin-left: 33.3333%
    &.is-offset-quarter-desktop
      margin-left: 25%
    @for $i from 1 through 12
      &.is-#{$i}-desktop
        flex: none
        width: ($i / 12) * 100%
      &.is-offset-#{$i}-desktop
        margin-left: ($i / 12) * 100%

.columns
  margin-left: -10px
  margin-right: -10px
  margin-top: -10px
  &:last-child
    margin-bottom: -10px
  &:not(:last-child)
    margin-bottom: 10px
  // Modifiers
  &.is-centered
    justify-content: center
  &.is-gapless
    margin-left: 0
    margin-right: 0
    margin-top: 0
    &:last-child
      margin-bottom: 0
    &:not(:last-child)
      margin-bottom: 20px
    & > .column
      margin: 0
      padding: 0
  &.is-grid
    // Responsiveness
    +tablet
      flex-wrap: wrap
      & > .column
        flex-basis: 33.3333%
        max-width: 33.3333%
        padding: 10px
        width: 33.3333%
        & + .column
          margin-left: 0
  &.is-mobile
    display: flex
  &.is-multiline
    flex-wrap: wrap
  &.is-vcentered
    align-items: center
  // Responsiveness
  +tablet
    &:not(.is-desktop)
      display: flex
  +desktop
    // Modifiers
    &.is-desktop
      display: flex

.tile-content
  align-items: stretch
  flex: 1
  margin: 0 !important
  // Responsiveness
  +tablet
    display: flex

.tile
  flex: 1
  // Modifiers
  &.is-parent
    padding: 10px
  // Responsiveness
  +tablet
    // Sizes
    @for $i from 1 through 12
      &.is-#{$i}
        flex: none
        width: ($i / 12) * 100%

.tiles
  align-items: stretch
  // Modifiers
  &.is-ancestor
    margin-left: -10px
    margin-right: -10px
    margin-top: -10px
    &:last-child
      margin-bottom: -10px
    &:not(:last-child)
      margin-bottom: 10px
  &.is-vertical
    flex-direction: column
    & > .tile-content:not(:last-child)
      margin-bottom: 20px !important
  // Responsiveness
  +tablet
    display: flex