.view-row
    make-row($grid-gutter-width)
    display: block

    &-flex
        display: flex
        flex-direction: row
        flex-wrap: wrap

        &:before,
        &:after
            display: flex

        /* flex layout justify */
        &-start
            justify-content: flex-start
        &-center
            justify-content: center
        &-end
            justify-content: flex-end
        &-space-between
            justify-content: space-between
        &-space-around
            justify-content: space-around

        /* flex layout align */
        &-top
            align-items: flex-start
        &-middle
            align-items: center
        &-bottom
            align-items: flex-end


.view-col
    position: relative
    display: block

make-grid('', $grid-columns)

// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.

make-grid(xs, $grid-columns);

// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.

@media (min-width: $screen-sm-min)
    make-grid(sm)


// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.

@media (min-width: $screen-md-min)
    make-grid(md, $grid-columns)


// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: $screen-lg-min)
    make-grid(lg, $grid-columns)