//  Grid Columns

@mixin make-column-fluid($ratio) {
    width: ratio-to-percent($ratio);
}

@mixin make-offset-fluid($ratio) {
    margin-left: ratio-to-percent($ratio);
}

@mixin make-inset-fluid($ratio) {
    margin-right: ratio-to-percent($ratio);
}

@mixin columns-fluid($screen-size, $column-count) {
    @for $i from 1 through $column-count {
        .#{$screen-size}-#{$i} {
            @include make-column-fluid($i / $column-count);
        }

        .#{$screen-size}-h-#{$i} {
            @include make-column-height-fluid($i / $column-count);
        }

        .#{$screen-size}-offset-#{$i} {
            @include make-offset-fluid($i / $column-count);
        }

        .#{$screen-size}-center-x {
            margin-left: auto;
            margin-right: auto;
            &-unset {
                margin-left: unset;
                margin-right: unset;
            }
        }

        .#{$screen-size}-center-y {
            margin-top: auto;
            &-unset {
                margin-top: unset;
                margin-bottom: unset;
            }
        }


        .#{$screen-size}-inset-#{$i} {
            @include make-inset-fluid($i / $column-count);
        }
    }
}