$grd-gapAxis: (
    x: ( left, right ),
    y: top
);

@function ieCol($col, $span) {
    @return pc(100 / $col * $span);
}
@function ieGap($val, $b) {
    @return ($val / $b / 2) +em;
}

@include media(ie) {
    //-- GRID
    .grd {
        display: flex;
        flex-wrap: wrap;

        @include isMedia($grd-gap) using ($val, $mb) {
            margin: em(-$val, $mb) ieGap(-$val, $mb) 0;
        }

        & > .app-track {
            @include isMedia($grd-gap) using ($val, $mb) {
                padding: em($val, $mb) ieGap($val, $mb) 0;
            }
        }
    }

    .g- {
        //-- TEMPLATE COLUMNS
        &tc\: {
            @include isMedia() using ($mc, $mb) {
                @include isNumber($grd-columns, $mc) using ($col) {
                    @for $span from 1 through $col {
                        @if $col >= $span {
                            & > .g-cs\:#{$span + $mc} {
                                width: ieCol($col, $span);
                            }
                        }
                    }
                }
            }
        }
        //-- GAP
        &g\: {
            @include isMedia() using ($mc, $mb) {
                // ALL
                @include isList($grd-gapIntegers, $mc) using ($size) {
                    margin: em(-$size, $mb) ieGap(-$size, $mb) 0;
                    & > .app-track {
                        padding: em($size, $mb) ieGap($size, $mb) 0;
                    }
                }
                // X & Y
                @include isMap($grd-gapAxis) using ($key, $sides) {
                    @include isList($grd-gapIntegers, $mc) using ($size) {
                        $val: if($key == y, $size * 2, $size);
                        @include isProp($sides) using ($side) {
                            margin-#{$side}: ieGap(-$val, $mb);
                        }
                        & > .app-track {
                            @include isProp($sides) using ($side) {
                                padding-#{$side}: ieGap($val, $mb);
                            }
                        }
                    }
                }
            }
        }
        //-- ALIGNMENT
        &js\: {
            &fe {
                @include flex(flex, null, flex-end, null);
            }
        }
    }
}
