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