/* Posts */

.posts {

$gutter: (_size(gutter) * 2);
@include breakpoint('<=small') {
    $gutter: _size(gutter) * 1.5;
    margin: 0 0 _size(element-margin) ($gutter * -1);
    width: calc(100% + #{$gutter});
    article {
        margin: 0 0 $gutter $gutter;
        width: calc(50% - #{$gutter});
        &:before {
            height: calc(100% + #{$gutter});
            left: ($gutter * -0.5);
        }
        &:after {
            bottom: ($gutter * -0.5);
            width: calc(100% + #{$gutter});
        }
        &:nth-last-child(3) {
            margin-bottom: $gutter;
        }
    }
}
@include breakpoint('<=xsmall') {
    $gutter: _size(gutter) * 1.5;
    margin: 0 0 _size(element-margin) 0;
    width: 100%;
    article {
        margin: 0 0 $gutter 0;
        width: 100%;
        &:before {
            display: none;
        }
        &:after {
            width: 100%;
        }
        &:last-child {
            margin-bottom: 0;
            &:after {
                display: none;
            }
        }
    }
}

}