.column
    flex: 1 0
    padding-left: $gutter
    padding-right: $gutter

    &[class*="is-tablet-"]
    &[class*="is-screen-"]
    &[class*="is-widescreen-"]
    &[class*="is-ultrawide-"]
        flex: 1 0 100%
        width: 100%

    for $n in (0..$columns)
        &.is-{$n}
        &.is-mobile-{$n}
            flex: 0 0 ($n / $columns * 100)%
            width: ($n / $columns * 100)%
        &.is-offset-{$n}
        &.is-offset-mobile-{$n}
            margin-{$start-direction}: ($n / $columns * 100)%

    +tablet()
        for $n in (0..$columns)
            &.is-tablet-{$n}
                flex: 0 0 ($n / $columns * 100)%
                width: ($n / $columns * 100)%
            &.is-offset-tablet-{$n}
                margin-{$start-direction}: ($n / $columns * 100)%

    +screen()
        for $n in (0..$columns)
            &.is-screen-{$n}
                flex: 0 0 ($n / $columns * 100)%
                width: ($n / $columns * 100)%
            &.is-offset-screen-{$n}
                margin-{$start-direction}: ($n / $columns * 100)%

    +widescreen()
        for $n in (0..$columns)
            &.is-widescreen-{$n}
                flex: 0 0 ($n / $columns * 100)%
                width: ($n / $columns * 100)%
            &.is-offset-widescreen-{$n}
                margin-{$start-direction}: ($n / $columns * 100)%

    +ultrawide()
        for $n in (0..$columns)
            &.is-ultrawide-{$n}
                flex: 0 0 ($n / $columns * 100)%
                width: ($n / $columns * 100)%
            &.is-offset-ultrawide-{$n}
                margin-{$start-direction}: ($n / $columns * 100)%


    &.is-middle
        align-self: center

    &.is-top
        align-self: flex-start

    &.is-bottom
        align-self: flex-end

    >.row
        margin: 0 multiple($gutter, -1)
        width: "calc(100% + %s)" % multiple($gutter, 2)