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