/* === Grid === */
.row {
    overflow: hidden;
    margin-left: -4%;
    > [class*="col-"], > [class*="tablet-"] {
        box-sizing: border-box;
        float: left;
    }
    &.no-gutter {
        margin-left: 0;
    }
}
@cols: 5, 10, 15, 20, 25, 100/3, 40, 50, 60, 100*(2/3), 75, 80, 85, 90, 95, 100;
.row {
    .-(@i: length(@cols)) when (@i > 0) {
        @divider: e(extract(@cols, @i));
        @className: `Math.floor(@{divider})`;
        @n: `100/parseFloat(@{divider})`;
        @n-1: @n - 1;
        @gutter: `4.0`;
        @d: `(100-@{gutter}*@{n})/@{n}`;
        .col-@{className} {
            width: ~"@{d}%";
            margin-left: ~"@{gutter}%";
        }
        &.no-gutter {
            @d: `100/@{n}`;
            .col-@{className} {
                width: ~"@{d}%";
                margin: 0;
            }
        }
        .-((@i - 1));
    } .-;
}
@media all and (min-width:768px) {
    .row {
        margin-left: -2%;
    }
    .row {
        .-(@i: length(@cols)) when (@i > 0) {
            @divider: e(extract(@cols, @i));
            @className: `Math.floor(@{divider})`;
            @n: `100/parseFloat(@{divider})`;
            @n-1: @n - 1;
            @gutter: `2.0`;
            @d: `(100-@{gutter}*@{n})/@{n}`;
            .col-@{className} {
                width: ~"@{d}%";
                margin-left: ~"@{gutter}%";
            }
            &.no-gutter {
                @d: `100/@{n}`;
                .col-@{className} {
                    width: ~"@{d}%";
                    margin: 0;
                }
            }
            .-((@i - 1));
        } .-;
    }
    .row {
        .-(@i: length(@cols)) when (@i > 0) {
            @divider: e(extract(@cols, @i));
            @className: `Math.floor(@{divider})`;
            @n: `100/parseFloat(@{divider})`;
            @n-1: @n - 1;
            @gutter: `2.0`;
            @d: `(100-@{gutter}*@{n})/@{n}`;
            .tablet-@{className} {
                width: ~"@{d}%";
                margin-left: ~"@{gutter}%";
            }
            &.no-gutter {
                @d: `100/@{n}`;
                .tablet-@{className} {
                    width: ~"@{d}%";
                    margin: 0;
                }
            }
            .-((@i - 1));
        } .-;
    }
}