.lx-row
    width: 100%
    display: flex
    flex-flow: wrap row
    align-items: center
    justify-content: center
    gap: $row-gap

    &.is-gapless
        gap: 0

.lx-col
    display: block
    flex-basis: 0
    flex-grow: 1
    flex-shrink: 1

    @for $i from 0 through 12
        &.is-#{$i}
            flex: none
            width: percentage(math.div($i, 12))

@media screen and (max-width: #{$breakpoint})
    .lx-row
        flex-flow: wrap column

    .lx-col
        width: 100%

        @for $i from 0 through 12
            &.is-#{$i}
                width: 100%
