@mixin generate-layout(
    $gapCount: $__steps
) 
{
    $layout: "#{dot()}Row";
    $item: "#{$layout}#{$__e}col";

    #{$layout} {
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 0;

        & > #{$item} {
            box-sizing: border-box;
            display: inline-block;
            width: 100%;
            vertical-align: top;
            font-size: $__fontSize;
            font-size: 1rem;
        }

        @each $align in center right {
            &#{$__m}#{$align} {
                text-align: $align;

                > #{$item} {
                    text-align: left;
                }
            }
        }

        @each $align in middle bottom {
            &#{$__m}#{$align} {
                > #{$item} {
                    vertical-align: $align;
                }
            }
        }

        @for $i from 1 through $gapCount {

             &#{$__m}gap#{$i} {
                margin-left: ms($i - 1) * -1;

                & > #{$item} {
                    padding-left: ms($i - 1);
                }
            }
        }
    }
}