1 $column-gap: 0.75rem !default
9 .columns.is-mobile > &.is-narrow
11 .columns.is-mobile > &.is-full
14 .columns.is-mobile > &.is-three-quarters
17 .columns.is-mobile > &.is-two-thirds
20 .columns.is-mobile > &.is-half
23 .columns.is-mobile > &.is-one-third
26 .columns.is-mobile > &.is-one-quarter
29 .columns.is-mobile > &.is-one-fifth
32 .columns.is-mobile > &.is-two-fifths
35 .columns.is-mobile > &.is-three-fifths
38 .columns.is-mobile > &.is-four-fifths
41 .columns.is-mobile > &.is-offset-three-quarters
43 .columns.is-mobile > &.is-offset-two-thirds
45 .columns.is-mobile > &.is-offset-half
47 .columns.is-mobile > &.is-offset-one-third
49 .columns.is-mobile > &.is-offset-one-quarter
51 .columns.is-mobile > &.is-offset-one-fifth
53 .columns.is-mobile > &.is-offset-two-fifths
55 .columns.is-mobile > &.is-offset-three-fifths
57 .columns.is-mobile > &.is-offset-four-fifths
59 @for $i from 0 through 12
60 .columns.is-mobile > &.is-#{$i}
62 width: percentage($i / 12)
63 .columns.is-mobile > &.is-offset-#{$i}
64 margin-left: percentage($i / 12)
71 &.is-three-quarters-mobile
74 &.is-two-thirds-mobile
83 &.is-one-quarter-mobile
89 &.is-two-fifths-mobile
92 &.is-three-fifths-mobile
95 &.is-four-fifths-mobile
98 &.is-offset-three-quarters-mobile
100 &.is-offset-two-thirds-mobile
101 margin-left: 66.6666%
102 &.is-offset-half-mobile
104 &.is-offset-one-third-mobile
105 margin-left: 33.3333%
106 &.is-offset-one-quarter-mobile
108 &.is-offset-one-fifth-mobile
110 &.is-offset-two-fifths-mobile
112 &.is-offset-three-fifths-mobile
114 &.is-offset-four-fifths-mobile
116 @for $i from 0 through 12
119 width: percentage($i / 12)
120 &.is-offset-#{$i}-mobile
121 margin-left: percentage($i / 12)
131 &.is-three-quarters-tablet
135 &.is-two-thirds-tablet
143 &.is-one-third-tablet
147 &.is-one-quarter-tablet
151 &.is-one-fifth-tablet
155 &.is-two-fifths-tablet
159 &.is-three-fifths-tablet
163 &.is-four-fifths-tablet
166 &.is-offset-three-quarters,
167 &.is-offset-three-quarters-tablet
169 &.is-offset-two-thirds,
170 &.is-offset-two-thirds-tablet
171 margin-left: 66.6666%
173 &.is-offset-half-tablet
175 &.is-offset-one-third,
176 &.is-offset-one-third-tablet
177 margin-left: 33.3333%
178 &.is-offset-one-quarter,
179 &.is-offset-one-quarter-tablet
181 &.is-offset-one-fifth,
182 &.is-offset-one-fifth-tablet
184 &.is-offset-two-fifths,
185 &.is-offset-two-fifths-tablet
187 &.is-offset-three-fifths,
188 &.is-offset-three-fifths-tablet
190 &.is-offset-four-fifths,
191 &.is-offset-four-fifths-tablet
193 @for $i from 0 through 12
197 width: percentage($i / 12)
199 &.is-offset-#{$i}-tablet
200 margin-left: percentage($i / 12)
207 &.is-three-quarters-touch
210 &.is-two-thirds-touch
219 &.is-one-quarter-touch
225 &.is-two-fifths-touch
228 &.is-three-fifths-touch
231 &.is-four-fifths-touch
234 &.is-offset-three-quarters-touch
236 &.is-offset-two-thirds-touch
237 margin-left: 66.6666%
238 &.is-offset-half-touch
240 &.is-offset-one-third-touch
241 margin-left: 33.3333%
242 &.is-offset-one-quarter-touch
244 &.is-offset-one-fifth-touch
246 &.is-offset-two-fifths-touch
248 &.is-offset-three-fifths-touch
250 &.is-offset-four-fifths-touch
252 @for $i from 0 through 12
255 width: percentage($i / 12)
256 &.is-offset-#{$i}-touch
257 margin-left: percentage($i / 12)
264 &.is-three-quarters-desktop
267 &.is-two-thirds-desktop
273 &.is-one-third-desktop
276 &.is-one-quarter-desktop
279 &.is-one-fifth-desktop
282 &.is-two-fifths-desktop
285 &.is-three-fifths-desktop
288 &.is-four-fifths-desktop
291 &.is-offset-three-quarters-desktop
293 &.is-offset-two-thirds-desktop
294 margin-left: 66.6666%
295 &.is-offset-half-desktop
297 &.is-offset-one-third-desktop
298 margin-left: 33.3333%
299 &.is-offset-one-quarter-desktop
301 &.is-offset-one-fifth-desktop
303 &.is-offset-two-fifths-desktop
305 &.is-offset-three-fifths-desktop
307 &.is-offset-four-fifths-desktop
309 @for $i from 0 through 12
312 width: percentage($i / 12)
313 &.is-offset-#{$i}-desktop
314 margin-left: percentage($i / 12)
316 &.is-narrow-widescreen
321 &.is-three-quarters-widescreen
324 &.is-two-thirds-widescreen
330 &.is-one-third-widescreen
333 &.is-one-quarter-widescreen
336 &.is-one-fifth-widescreen
339 &.is-two-fifths-widescreen
342 &.is-three-fifths-widescreen
345 &.is-four-fifths-widescreen
348 &.is-offset-three-quarters-widescreen
350 &.is-offset-two-thirds-widescreen
351 margin-left: 66.6666%
352 &.is-offset-half-widescreen
354 &.is-offset-one-third-widescreen
355 margin-left: 33.3333%
356 &.is-offset-one-quarter-widescreen
358 &.is-offset-one-fifth-widescreen
360 &.is-offset-two-fifths-widescreen
362 &.is-offset-three-fifths-widescreen
364 &.is-offset-four-fifths-widescreen
366 @for $i from 0 through 12
367 &.is-#{$i}-widescreen
369 width: percentage($i / 12)
370 &.is-offset-#{$i}-widescreen
371 margin-left: percentage($i / 12)
378 &.is-three-quarters-fullhd
381 &.is-two-thirds-fullhd
387 &.is-one-third-fullhd
390 &.is-one-quarter-fullhd
393 &.is-one-fifth-fullhd
396 &.is-two-fifths-fullhd
399 &.is-three-fifths-fullhd
402 &.is-four-fifths-fullhd
405 &.is-offset-three-quarters-fullhd
407 &.is-offset-two-thirds-fullhd
408 margin-left: 66.6666%
409 &.is-offset-half-fullhd
411 &.is-offset-one-third-fullhd
412 margin-left: 33.3333%
413 &.is-offset-one-quarter-fullhd
415 &.is-offset-one-fifth-fullhd
417 &.is-offset-two-fifths-fullhd
419 &.is-offset-three-fifths-fullhd
421 &.is-offset-four-fifths-fullhd
423 @for $i from 0 through 12
426 width: percentage($i / 12)
427 &.is-offset-#{$i}-fullhd
428 margin-left: percentage($i / 12)
431 margin-left: (-$column-gap)
432 margin-right: (-$column-gap)
433 margin-top: (-$column-gap)
435 margin-bottom: (-$column-gap)
437 margin-bottom: calc(1.5rem - #{$column-gap})
440 justify-content: center
447 padding: 0 !important
449 margin-bottom: 1.5rem
467 @if $variable-columns
470 margin-left: calc(-1 * var(--columnGap))
471 margin-right: calc(-1 * var(--columnGap))
473 padding-left: var(--columnGap)
474 padding-right: var(--columnGap)
475 @for $i from 0 through 8
477 --columnGap: #{$i * 0.25rem}
480 --columnGap: #{$i * 0.25rem}
483 --columnGap: #{$i * 0.25rem}
485 &.is-#{$i}-tablet-only
486 --columnGap: #{$i * 0.25rem}
489 --columnGap: #{$i * 0.25rem}
492 --columnGap: #{$i * 0.25rem}
494 &.is-#{$i}-desktop-only
495 --columnGap: #{$i * 0.25rem}
497 &.is-#{$i}-widescreen
498 --columnGap: #{$i * 0.25rem}
500 &.is-#{$i}-widescreen-only
501 --columnGap: #{$i * 0.25rem}
504 --columnGap: #{$i * 0.25rem}