2 /// Editorial by HTML5 UP
3 /// html5up.net | @ajlkn
4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
10 $gutter: (_size(gutter) * 2);
12 @include vendor('display', 'flex');
13 @include vendor('flex-wrap', 'wrap');
14 margin: 0 0 _size(element-margin) ($gutter * -1);
15 width: calc(100% + #{$gutter});
18 @include vendor('flex-grow', '0');
19 @include vendor('flex-shrink', '1');
20 margin: 0 0 $gutter $gutter;
22 width: calc(#{(100% / 3)} - #{$gutter});
25 background: _palette(border);
28 height: calc(100% + #{$gutter});
29 left: ($gutter * -0.5);
36 background: _palette(border);
37 bottom: ($gutter * -0.5);
43 width: calc(100% + #{$gutter});
52 margin: 0 0 _size(element-margin) 0;
61 @include breakpoint('xlarge-to-max') {
89 @include breakpoint('<=xlarge') {
91 width: calc(50% - #{$gutter});
94 margin-bottom: $gutter;
99 @include breakpoint('small-to-xlarge') {
101 &:nth-child(2n + 1) {
112 &:nth-last-child(2) {
126 @include breakpoint('<=small') {
127 $gutter: _size(gutter) * 1.5;
129 margin: 0 0 _size(element-margin) ($gutter * -1);
130 width: calc(100% + #{$gutter});
133 margin: 0 0 $gutter $gutter;
134 width: calc(50% - #{$gutter});
137 height: calc(100% + #{$gutter});
138 left: ($gutter * -0.5);
142 bottom: ($gutter * -0.5);
143 width: calc(100% + #{$gutter});
146 &:nth-last-child(3) {
147 margin-bottom: $gutter;
152 @include breakpoint('<=xsmall') {
153 $gutter: _size(gutter) * 1.5;
155 margin: 0 0 _size(element-margin) 0;
159 margin: 0 0 $gutter 0;