+///\r
+/// Editorial by HTML5 UP\r
+/// html5up.net | @ajlkn\r
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
+///\r
+\r
+/* Posts */\r
+\r
+ .posts {\r
+ $gutter: (_size(gutter) * 2);\r
+\r
+ @include vendor('display', 'flex');\r
+ @include vendor('flex-wrap', 'wrap');\r
+ margin: 0 0 _size(element-margin) ($gutter * -1);\r
+ width: calc(100% + #{$gutter});\r
+\r
+ article {\r
+ @include vendor('flex-grow', '0');\r
+ @include vendor('flex-shrink', '1');\r
+ margin: 0 0 $gutter $gutter;\r
+ position: relative;\r
+ width: calc(#{(100% / 3)} - #{$gutter});\r
+\r
+ &:before {\r
+ background: _palette(border);\r
+ content: '';\r
+ display: block;\r
+ height: calc(100% + #{$gutter});\r
+ left: ($gutter * -0.5);\r
+ position: absolute;\r
+ top: 0;\r
+ width: 1px;\r
+ }\r
+\r
+ &:after {\r
+ background: _palette(border);\r
+ bottom: ($gutter * -0.5);\r
+ content: '';\r
+ display: block;\r
+ height: 1px;\r
+ position: absolute;\r
+ right: 0;\r
+ width: calc(100% + #{$gutter});\r
+ }\r
+\r
+ > :last-child {\r
+ margin-bottom: 0;\r
+ }\r
+\r
+ .image {\r
+ display: block;\r
+ margin: 0 0 _size(element-margin) 0;\r
+\r
+ img {\r
+ display: block;\r
+ width: 100%;\r
+ }\r
+ }\r
+ }\r
+\r
+ @include breakpoint('xlarge-to-max') {\r
+ article {\r
+ &:nth-child(3n + 1) {\r
+ &:before {\r
+ display: none;\r
+ }\r
+\r
+ &:after {\r
+ width: 100%;\r
+ }\r
+ }\r
+\r
+ &:nth-last-child(1),\r
+ &:nth-last-child(2),\r
+ &:nth-last-child(3) {\r
+ margin-bottom: 0;\r
+\r
+ &:before {\r
+ height: 100%;\r
+ }\r
+\r
+ &:after {\r
+ display: none;\r
+ }\r
+ }\r
+ }\r
+ }\r
+\r
+ @include breakpoint('<=xlarge') {\r
+ article {\r
+ width: calc(50% - #{$gutter});\r
+\r
+ &:nth-last-child(3) {\r
+ margin-bottom: $gutter;\r
+ }\r
+ }\r
+ }\r
+\r
+ @include breakpoint('small-to-xlarge') {\r
+ article {\r
+ &:nth-child(2n + 1) {\r
+ &:before {\r
+ display: none;\r
+ }\r
+\r
+ &:after {\r
+ width: 100%;\r
+ }\r
+ }\r
+\r
+ &:nth-last-child(1),\r
+ &:nth-last-child(2) {\r
+ margin-bottom: 0;\r
+\r
+ &:before {\r
+ height: 100%;\r
+ }\r
+\r
+ &:after {\r
+ display: none;\r
+ }\r
+ }\r
+ }\r
+ }\r
+\r
+ @include breakpoint('<=small') {\r
+ $gutter: _size(gutter) * 1.5;\r
+\r
+ margin: 0 0 _size(element-margin) ($gutter * -1);\r
+ width: calc(100% + #{$gutter});\r
+\r
+ article {\r
+ margin: 0 0 $gutter $gutter;\r
+ width: calc(50% - #{$gutter});\r
+\r
+ &:before {\r
+ height: calc(100% + #{$gutter});\r
+ left: ($gutter * -0.5);\r
+ }\r
+\r
+ &:after {\r
+ bottom: ($gutter * -0.5);\r
+ width: calc(100% + #{$gutter});\r
+ }\r
+\r
+ &:nth-last-child(3) {\r
+ margin-bottom: $gutter;\r
+ }\r
+ }\r
+ }\r
+\r
+ @include breakpoint('<=xsmall') {\r
+ $gutter: _size(gutter) * 1.5;\r
+\r
+ margin: 0 0 _size(element-margin) 0;\r
+ width: 100%;\r
+\r
+ article {\r
+ margin: 0 0 $gutter 0;\r
+ width: 100%;\r
+\r
+ &:before {\r
+ display: none;\r
+ }\r
+\r
+ &:after {\r
+ width: 100%;\r
+ }\r
+\r
+ &:last-child {\r
+ margin-bottom: 0;\r
+\r
+ &:after {\r
+ display: none;\r
+ }\r
+ }\r
+ }\r
+ }\r
+ }
\ No newline at end of file