/* Posts */

.posts {

$gutter: (_size(gutter) * 2);
@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
margin: 0 0 _size(element-margin) ($gutter * -1);
width: calc(100% + #{$gutter});
article {
    @include vendor('flex-grow', '0');
    @include vendor('flex-shrink', '1');
    margin: 0 0 $gutter $gutter;
    position: relative;
    width: calc(#{(100% / 3)} - #{$gutter});
    &:before {
        background: _palette(border);
        content: '';
        display: block;
        height: calc(100% + #{$gutter});
        left: ($gutter * -0.5);
        position: absolute;
        top: 0;
        width: 1px;
    }
    &:after {
        background: _palette(border);
        bottom: ($gutter * -0.5);
        content: '';
        display: block;
        height: 1px;
        position: absolute;
        right: 0;
        width: calc(100% + #{$gutter});
    }
    > :last-child {
        margin-bottom: 0;
    }
    .image {
        display: block;
        margin: 0 0 _size(element-margin) 0;
        img {
            display: block;
            width: 100%;
        }
    }
}

}