/* 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%;
            }
        }
    }
}
