$column-gap: 0.75rem !default

.column

display: block
flex-basis: 0
flex-grow: 1
flex-shrink: 1
padding: $column-gap
.columns.is-mobile > &.is-narrow
  flex: none
.columns.is-mobile > &.is-full
  flex: none
  width: 100%
.columns.is-mobile > &.is-three-quarters
  flex: none
  width: 75%
.columns.is-mobile > &.is-two-thirds
  flex: none
  width: 66.6666%
.columns.is-mobile > &.is-half
  flex: none
  width: 50%
.columns.is-mobile > &.is-one-third
  flex: none
  width: 33.3333%
.columns.is-mobile > &.is-one-quarter
  flex: none
  width: 25%
.columns.is-mobile > &.is-offset-three-quarters
  margin-left: 75%
.columns.is-mobile > &.is-offset-two-thirds
  margin-left: 66.6666%
.columns.is-mobile > &.is-offset-half
  margin-left: 50%
.columns.is-mobile > &.is-offset-one-third
  margin-left: 33.3333%
.columns.is-mobile > &.is-offset-one-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-narrow-mobile
    flex: none
  &.is-full-mobile
    flex: none
    width: 100%
  &.is-three-quarters-mobile
    flex: none
    width: 75%
  &.is-two-thirds-mobile
    flex: none
    width: 66.6666%
  &.is-half-mobile
    flex: none
    width: 50%
  &.is-one-third-mobile
    flex: none
    width: 33.3333%
  &.is-one-quarter-mobile
    flex: none
    width: 25%
  &.is-offset-three-quarters-mobile
    margin-left: 75%
  &.is-offset-two-thirds-mobile
    margin-left: 66.6666%
  &.is-offset-half-mobile
    margin-left: 50%
  &.is-offset-one-third-mobile
    margin-left: 33.3333%
  &.is-offset-one-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-narrow,
  &.is-narrow-tablet
    flex: none
  &.is-full,
  &.is-full-tablet
    flex: none
    width: 100%
  &.is-three-quarters,
  &.is-three-quarters-tablet
    flex: none
    width: 75%
  &.is-two-thirds,
  &.is-two-thirds-tablet
    flex: none
    width: 66.6666%
  &.is-half,
  &.is-half-tablet
    flex: none
    width: 50%
  &.is-one-third,
  &.is-one-third-tablet
    flex: none
    width: 33.3333%
  &.is-one-quarter,
  &.is-one-quarter-tablet
    flex: none
    width: 25%
  &.is-offset-three-quarters,
  &.is-offset-three-quarters-tablet
    margin-left: 75%
  &.is-offset-two-thirds,
  &.is-offset-two-thirds-tablet
    margin-left: 66.6666%
  &.is-offset-half,
  &.is-offset-half-tablet
    margin-left: 50%
  &.is-offset-one-third,
  &.is-offset-one-third-tablet
    margin-left: 33.3333%
  &.is-offset-one-quarter,
  &.is-offset-one-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%
+touch
  &.is-narrow-touch
    flex: none
  &.is-full-touch
    flex: none
    width: 100%
  &.is-three-quarters-touch
    flex: none
    width: 75%
  &.is-two-thirds-touch
    flex: none
    width: 66.6666%
  &.is-half-touch
    flex: none
    width: 50%
  &.is-one-third-touch
    flex: none
    width: 33.3333%
  &.is-one-quarter-touch
    flex: none
    width: 25%
  &.is-offset-three-quarters-touch
    margin-left: 75%
  &.is-offset-two-thirds-touch
    margin-left: 66.6666%
  &.is-offset-half-touch
    margin-left: 50%
  &.is-offset-one-third-touch
    margin-left: 33.3333%
  &.is-offset-one-quarter-touch
    margin-left: 25%
  @for $i from 1 through 12
    &.is-#{$i}-touch
      flex: none
      width: ($i / 12) * 100%
    &.is-offset-#{$i}-touch
      margin-left: ($i / 12) * 100%
+desktop
  &.is-narrow-desktop
    flex: none
  &.is-full-desktop
    flex: none
    width: 100%
  &.is-three-quarters-desktop
    flex: none
    width: 75%
  &.is-two-thirds-desktop
    flex: none
    width: 66.6666%
  &.is-half-desktop
    flex: none
    width: 50%
  &.is-one-third-desktop
    flex: none
    width: 33.3333%
  &.is-one-quarter-desktop
    flex: none
    width: 25%
  &.is-offset-three-quarters-desktop
    margin-left: 75%
  &.is-offset-two-thirds-desktop
    margin-left: 66.6666%
  &.is-offset-half-desktop
    margin-left: 50%
  &.is-offset-one-third-desktop
    margin-left: 33.3333%
  &.is-offset-one-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%
+widescreen
  &.is-narrow-widescreen
    flex: none
  &.is-full-widescreen
    flex: none
    width: 100%
  &.is-three-quarters-widescreen
    flex: none
    width: 75%
  &.is-two-thirds-widescreen
    flex: none
    width: 66.6666%
  &.is-half-widescreen
    flex: none
    width: 50%
  &.is-one-third-widescreen
    flex: none
    width: 33.3333%
  &.is-one-quarter-widescreen
    flex: none
    width: 25%
  &.is-offset-three-quarters-widescreen
    margin-left: 75%
  &.is-offset-two-thirds-widescreen
    margin-left: 66.6666%
  &.is-offset-half-widescreen
    margin-left: 50%
  &.is-offset-one-third-widescreen
    margin-left: 33.3333%
  &.is-offset-one-quarter-widescreen
    margin-left: 25%
  @for $i from 1 through 12
    &.is-#{$i}-widescreen
      flex: none
      width: ($i / 12) * 100%
    &.is-offset-#{$i}-widescreen
      margin-left: ($i / 12) * 100%
+fullhd
  &.is-narrow-fullhd
    flex: none
  &.is-full-fullhd
    flex: none
    width: 100%
  &.is-three-quarters-fullhd
    flex: none
    width: 75%
  &.is-two-thirds-fullhd
    flex: none
    width: 66.6666%
  &.is-half-fullhd
    flex: none
    width: 50%
  &.is-one-third-fullhd
    flex: none
    width: 33.3333%
  &.is-one-quarter-fullhd
    flex: none
    width: 25%
  &.is-offset-three-quarters-fullhd
    margin-left: 75%
  &.is-offset-two-thirds-fullhd
    margin-left: 66.6666%
  &.is-offset-half-fullhd
    margin-left: 50%
  &.is-offset-one-third-fullhd
    margin-left: 33.3333%
  &.is-offset-one-quarter-fullhd
    margin-left: 25%
  @for $i from 1 through 12
    &.is-#{$i}-fullhd
      flex: none
      width: ($i / 12) * 100%
    &.is-offset-#{$i}-fullhd
      margin-left: ($i / 12) * 100%

.columns

margin-left: (-$column-gap)
margin-right: (-$column-gap)
margin-top: (-$column-gap)
&:last-child
  margin-bottom: (-$column-gap)
&:not(:last-child)
  margin-bottom: calc(1.5rem - #{$column-gap})
// Modifiers
&.is-centered
  justify-content: center
&.is-gapless
  margin-left: 0
  margin-right: 0
  margin-top: 0
  & > .column
    margin: 0
    padding: 0 !important
  &:not(:last-child)
    margin-bottom: 1.5rem
  &:last-child
    margin-bottom: 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

.columns.is-variable

--columnGap: 0.75rem
margin-left: calc(-1 * var(--columnGap))
margin-right: calc(-1 * var(--columnGap))
.column
  padding-left: var(--columnGap)
  padding-right: var(--columnGap)
@for $i from 0 through 8
  &.is-#{$i}
    --columnGap: $i * 0.25rem