/*==============================================================================
 Grid

 Fully fluid 12 columns Grid. `#{$namespace}grid` for padded grid add `#{$namespace}grid--pad`

 Markup:
 <div class="b-grid">
     <div class="b-unit s-1-12--s s-1-12--m s-12-12--l">
         <div> contnet </div>
     </div>
     <div class="b-unit s-1-12--s s-1-12--m s-12-12--l">
         <div> contnet </div>
     </div>
     <div class="b-unit s-1-12--s s-1-12--m s-12-12--l">
         <div> contnet </div>
     </div>
     <div class="b-unit s-1-12--s s-1-12--m s-12-12--l">
         <div> contnet </div>
     </div>
 </div>
==============================================================================*/

$gutter: 20px; // Percentage gutter

#{$namespace}grid{
    list-style: none;
    font-size: 0;
    text-align: left;
}


#{$namespace}grid--rev{
    text-align: right;
}



#{$namespace}grid--center{
    text-align: center;
}



#{$namespace}grid--pad{
    margin:0 -1 * $gutter/2;
    > #{$namespace}unit{
        padding: 0 $gutter/2;
    }
}



#{$namespace}grid--middle{
    > #{$namespace}unit{
        vertical-align: middle;
    }
}



#{$namespace}grid--bottom{
    > #{$namespace}unit{
        vertical-align: bottom;
    }
}



#{$namespace}grid--matrix {
    text-align: justify;

    &:after{
        content: "";
        display: inline-block;
        width: 100%;
    }
}