// =============================================
// Grid
// =============================================

@mixin grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    > * {
        width: 100%;
    }
}


// =============================================
// Grid gutter
// =============================================

@mixin grid-gutter($gap: $gutter) {
    $half-gutter: $gap / 2;
    margin-left: -$half-gutter;
    margin-right: -$half-gutter;

    > * {
        padding-left: $half-gutter;
        padding-right: $half-gutter;
    }
}


// =============================================
// Grid Col
// =============================================

@mixin grid-col($col: 100%) {
    @if length($col) > 1 {
        width: (nth($col, 1) / nth($col, 3)) * 100%;
    } @else {
        width: $col;
    }
}


// =============================================
// Grid Center
// =============================================

@mixin grid-center {
    justify-content: center;
}


// =============================================
// Grid Justify
// =============================================

@mixin grid-justify {
    justify-content: space-between;
}


// =============================================
// Grid reverse
// =============================================

@mixin grid-reverse {
    flex-direction: row-reverse;
}

// =============================================
// Grid
// =============================================

@mixin grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    > * {
        width: 100%;

        > *:first-child {
            margin-bottom: 0;
        }
    }
}


// =============================================
// Grid gutter
// =============================================

@mixin grid-gutter($gap: $gutter) {
    $half-gutter: $gap / 2;
    margin-left: -$half-gutter;
    margin-right: -$half-gutter;

    > * {
        padding-left: $half-gutter;
        padding-right: $half-gutter;
    }
}


// =============================================
// Grid Col
// =============================================

@mixin grid-col($col: 100%) {
    @if length($col) > 1 {
        width: (nth($col, 1) / nth($col, 3)) * 100%;
    } @else {
        width: $col;
    }
}


// =============================================
// Grid Center
// =============================================

@mixin grid-center {
    justify-content: center;
}


// =============================================
// Grid Justify
// =============================================

@mixin grid-justify {
    justify-content: space-between;
}


// =============================================
// Grid reverse
// =============================================

@mixin grid-reverse {
    flex-direction: row-reverse;
}

Remove margin bottom on last child inside grid columns
Remove margin bottom on last child inside grid columns
