/*==============================================================================
banner object

Same as the media object but with vertical aligmnent

Markup:
<div class="b-banner {$modifiers}">
   <div class="b-banner__figure">
        <img src="http://placehold.it/150x150/bada55/000">
   </div>
   <div class="b-banner__body">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, quae, quidem, nam, suscipit assumenda voluptates laudantium nobis totam blanditiis iste laboriosam voluptas sapiente amet laborum debitis dolore consectetur enim ducimus.</p>
   </div>
</div>

#{$namespace}banner--rev - filps the image to the right
#{$namespace}banner--top - aligns text to top
#{$namespace}banner--bottom - aligns text to bottom
==============================================================================*/

#{$namespace}banner{
    display: table;
    width: 100%;
}



#{$namespace}banner__figure,
#{$namespace}banner__body{
    display: table-cell;
    vertical-align: middle;

    > :last-child,
    > :last-child > :last-child {
        margin-bottom: 0;
    }

    #{$namespace}banner--top &{
        vertical-align: top;
    }

    #{$namespace}banner--bottom &{
        vertical-align: bottom;
    }
}



#{$namespace}banner__figure{
    @include rem(padding-right, $grid-gutter);

    > img{
        display: block;
        max-width: none;
    }

    #{$namespace}banner--rev &{
        padding-right: 0;
        @include rem(padding-left, $grid-gutter);
    }
}



#{$namespace}banner__body{
    width: 100%;
}