├── calis.bat ├── .gitignore ├── kur.bat ├── docs ├── 18.htm ├── 13.htm ├── 12.htm ├── 11.htm ├── 05.htm ├── 03.htm ├── 02.htm ├── 01.htm ├── 04.htm ├── 06.htm ├── 16.htm ├── index.php ├── 07.htm ├── 14.htm ├── 10.htm ├── 15.htm ├── 09.htm ├── 08.htm ├── css │ ├── example.css │ └── grid.min.css ├── 17.htm └── index.html ├── gulpfile.js ├── src └── style │ ├── grid.scss │ ├── _set.scss │ └── _mix.scss ├── README.md └── dist └── grid.min.css /calis.bat: -------------------------------------------------------------------------------- 1 | cd.. 2 | gulp 3 | 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .sass-cache 3 | components 4 | .tmp 5 | .DS_Store 6 | .log 7 | npm-debug.* 8 | coverage/ -------------------------------------------------------------------------------- /kur.bat: -------------------------------------------------------------------------------- 1 | @echo 2 | npm link gulp gulp-ruby-sass gulp-cssmin gulp-autoprefixer gulp-jshint gulp-uglify gulp-concat gulp-rename gulp-notify 3 | -------------------------------------------------------------------------------- /docs/18.htm: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |

Eşit Yükseklik

5 |

6 |
7 | 8 |
9 | 10 |
11 |
A
12 |
B
13 |
14 | 15 |
16 |
'; 17 | echo htmlentities('code'); 18 | echo '' ?> 19 |
20 |
21 | -------------------------------------------------------------------------------- /docs/13.htm: -------------------------------------------------------------------------------- 1 |
2 |
13
3 |
4 |

Center Dağılım

5 |

sütunlar merkezde kalacak şekilde ortalanır

6 |
7 | 8 |
9 | 10 |
11 |
A
12 |
B
13 |
C
14 |
15 | 16 |
17 |
'; 18 | echo htmlentities('
19 |
20 |
21 |
22 |
'); 23 | echo '' ?> 24 |
25 |
26 | -------------------------------------------------------------------------------- /docs/12.htm: -------------------------------------------------------------------------------- 1 |
2 |
12
3 |
4 |

Around Dağılımı

5 |

sütunlar merkezde toplanarak birbirlerinde ortanlı olarak ayrılır

6 |
7 | 8 |
9 | 10 |
11 |
A
12 |
B
13 |
C
14 |
15 | 16 |
17 |
'; 18 | echo htmlentities('
19 |
20 |
21 |
22 |
'); 23 | echo '' ?> 24 |
25 |
26 | -------------------------------------------------------------------------------- /docs/11.htm: -------------------------------------------------------------------------------- 1 |
2 |
11
3 |
4 |

Between Dağılımı

5 |

sütunlar birbirlerinde ortanlı olarak ayrılarak tüm kasaya yayılı

6 |
7 | 8 |
9 | 10 |
11 |
A
12 |
A
13 |
A
14 |
A
15 |
16 | 17 |
18 |
'; 19 | echo htmlentities('
20 |
21 |
22 |
23 |
24 |
'); 25 | echo '' ?> 26 |
27 |
28 | -------------------------------------------------------------------------------- /docs/05.htm: -------------------------------------------------------------------------------- 1 |
2 |
05
3 |
4 |

Safları Sıklaştırın

5 |

no-space/ns etikiyle sutunlarımızın saf aralıklarını kapayabiliriz

6 |
7 | 8 |
9 | 10 |
11 |
A
12 |
B
13 |
C
14 |
D
15 |
E
16 |
17 | 18 |
19 |
'; 20 | echo htmlentities('
21 |
22 |
23 |
24 |
25 |
26 |
'); 27 | echo '' ?> 28 |
29 |
30 | -------------------------------------------------------------------------------- /docs/03.htm: -------------------------------------------------------------------------------- 1 |
2 |
03
3 |
4 |

Satırdan Ekran Şartı

5 |

satırdan (row) sütun (col) sıralamaları ekrana göre değiştirilebilir

6 |
7 | 8 |
9 | 10 |
11 |
A
12 |
B
13 |
C
14 |
D
15 |
E
16 |
17 | 18 |
19 |
'; 20 | echo htmlentities('
21 |
22 |
23 |
24 |
25 |
26 |
'); 27 | echo '' ?> 28 |
29 | 30 |
31 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require( 'gulp' ), 2 | sass = require( 'gulp-ruby-sass' ), 3 | //autoprefixer = require( 'gulp-autoprefixer' ), 4 | cssmin = require( 'gulp-cssmin' ), 5 | rename = require( 'gulp-rename' ); 6 | //notify = require( 'gulp-notify' ); 7 | 8 | gulp.task( 'styles', function() { 9 | 10 | return sass( 'src/style/**/*.scss' ).on( 'error', sass.logError ) 11 | //.pipe( autoprefixer( 'last 2 version' ) ) 12 | .pipe( gulp.dest( 'dist' ) ) 13 | .pipe( gulp.dest( 'docs/css' ) ) 14 | .pipe( rename( { suffix: '.min' } ) ) 15 | .pipe( cssmin( { processImport : false } ) ) 16 | .pipe( gulp.dest( 'dist' ) ) 17 | .pipe( gulp.dest( 'docs/css' ) ) 18 | //.pipe( notify({ message: 'sass files compiled'}) ); 19 | 20 | } ); 21 | 22 | gulp.task( 'watch', function() { 23 | 24 | // gulp.watch( 'src/style/**/*.scss', [ 'styles' ] ); 25 | gulp.watch('src/style/**/*.scss', gulp.series('styles')); 26 | 27 | }); 28 | 29 | // gulp.task( 'default', [ 'styles', 'watch' ] ); 30 | gulp.task('default', gulp.series(gulp.parallel('styles','watch'), function () {})); -------------------------------------------------------------------------------- /docs/02.htm: -------------------------------------------------------------------------------- 1 |
2 |
02
3 |
4 |

Satırdan Sütun Böl

5 |

satırımızdaki row etiketine (-) ekler sütunlarımız bölmek istediğimiz 1 ile 12 arasındaki değer gireriz

6 |
7 | 8 |
9 | 10 |
11 |
A
12 |
B
13 |
C
14 |
D
15 |
E
16 |
F
17 |
G
18 |
E
19 |
20 | 21 |
22 | 23 |
'; 24 | echo htmlentities('
25 |
A
26 |
B
27 |
C
28 |
D
29 |
E
30 |
F
31 |
G
32 |
E
33 |
'); 34 | echo '' ?> 35 |
36 | 37 | 38 |
-------------------------------------------------------------------------------- /src/style/grid.scss: -------------------------------------------------------------------------------- 1 | /* 2 | @ Flexbox Grid Version 1.5.0 - https://github.com/thealico/flexboxgrid 3 | @ Front-end Developer by Ali Akman (alico) 4 | @ http://akman.me */ 5 | 6 | @import "set"; 7 | @import "mix"; 8 | 9 | #{$select-row} { --rg:#{$gut};--cg:#{$gut}; display: flex; flex-flow:row wrap; box-sizing: border-box; column-gap:var(--cg); row-gap:var(--rg) } 10 | #{$select-col} { flex: 1 1 0% ; box-sizing: border-box; } 11 | #{$select-col-} { flex: none } 12 | #{$select-colcol} { flex: 1 1 0% } 13 | #{$select-colrow} { margin-left:0; margin-right:0; padding-left:0; padding-right:0 } 14 | 15 | 16 | @include make-row-number(null); 17 | @include make-col-number(null); 18 | @include make-space(null); 19 | @include make-row-option(null); 20 | @include make-col-option(null); 21 | @include make-offset(null); 22 | @include make-order(null); 23 | 24 | 25 | @each $key, $value in $set-screen { 26 | @media #{$value}{ 27 | @include make-row-number(-#{$key}); 28 | @include make-col-number(-#{$key}); 29 | @include make-space(-#{$key}); 30 | @include make-row-option(-#{$key}); 31 | @include make-col-option(-#{$key}); 32 | @include make-offset(-#{$key}); 33 | @include make-order(-#{$key}); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /docs/01.htm: -------------------------------------------------------------------------------- 1 |
2 |
01
3 |
4 |

Eşit Sütunlar

5 |

herhangi bir kosul tanımlanmayan (.row) satırı altındaki (.col) sütunlarımız sütun sayısınca eşit bölünür

6 | 7 |
8 | 9 |
10 | 11 |
12 |
A
13 |
B
14 |
C
15 |
16 | 17 |
18 |
A
19 |
B
20 |
C
21 |
D
22 |
E
23 |
F
24 |
25 | 26 |
27 | 28 |
'; 29 | echo htmlentities('
30 |
31 |
32 |
33 |
'); 34 | echo '' ?> 35 |
36 | 37 |
-------------------------------------------------------------------------------- /docs/04.htm: -------------------------------------------------------------------------------- 1 |
2 |
05
3 |
4 |

Sütunun Tebiri Satırın Takdirini Bozar

5 |

satırın sütuna verdiği takdirin ömrü sütunun kendine verdiği hükme kadardır

6 |
7 | 8 |
9 | 10 |
11 |
A COL-6
12 |
B
13 |
C
14 |
15 | 16 |
17 |
'; 18 | echo htmlentities('
19 |
20 |
21 |
22 |
'); 23 | echo '' ?> 24 |
25 | 26 |
27 | 28 |
29 |
A / Auto
30 |
B
31 |
C
32 |
33 | 34 |
35 |
'; 36 | echo htmlentities('
37 |
38 |
39 |
40 |
'); 41 | echo '' ?> 42 |
43 |
44 | -------------------------------------------------------------------------------- /docs/06.htm: -------------------------------------------------------------------------------- 1 |
2 |
06
3 |
4 |

Matruşka Grid

5 |

sutunların içinde yeni satırlar onların içinden de yeni sütunlar doğurmak mı ? evet buda mümkün

6 |
7 | 8 |
9 | 10 |
11 |
A
12 |
B
13 |
14 | 15 |
C.1
16 |
C.2
17 | 18 |
C.3
19 |
C.4
20 |
C.5
21 | 22 |
23 |
24 | 25 |
26 |
'; 27 | echo htmlentities('
28 |
29 |
30 |
31 | 32 |
33 |
34 | 35 |
36 |
37 |
38 |
39 |
'); 40 | echo '' ?> 41 |
42 |
43 | -------------------------------------------------------------------------------- /docs/16.htm: -------------------------------------------------------------------------------- 1 |
2 |
16
3 |
4 |

Eşit Yükseklik

5 |

iki yol var birincisi c-eh ( Col Equal Height ) methodu. Bu etiket col altındaki ilk elemente height 100% verir ve blocklar eşitlenir.

6 |
7 | 8 |
9 |
10 |
A (180 PX)
11 |
B
12 |
13 |
14 |
'; 15 | echo htmlentities('
16 |
A
17 |
B
18 |
'); 19 | echo '' ?> 20 |
21 | 22 | 23 |
24 |
25 |

İkinci yol ise c-eh-2 methodudur. Bu etiket col'a ve altındaki ilk elemente flex özelliği sağlayarak eşitler

26 |
27 | 28 |
29 |
30 |
A (180 PX)
31 |
B
32 |
33 |
34 | 35 |
'; 36 | echo htmlentities('
37 |
A
38 |
B
39 |
'); 40 | echo '' ?> 41 |
42 | 43 |
44 | -------------------------------------------------------------------------------- /docs/index.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | FlexGrid Sistem 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |

FlexGrid

16 | SASS Download 17 |
18 |
19 |
20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /docs/07.htm: -------------------------------------------------------------------------------- 1 |
2 |
07
3 |
4 |

Yatay Hizalama

5 |

satır içindeki sutunları sağ sol ve merkez hizalamaları

6 |
7 | 8 |
9 | 10 |
11 |
A
12 |
13 |
14 |
B
15 |
16 |
17 |
C
18 |
19 | 20 |
21 | 22 |
'; 23 | echo htmlentities('
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
'); 32 | echo '' ?> 33 |
34 |
35 |
36 |

Ekran Aralığı Desteği Var

37 |
38 | 39 |
40 |
41 |
A
42 |
43 |
44 | 45 |
'; 46 | echo htmlentities('
47 |
48 |
'); 49 | echo '' ?> 50 |
51 | 52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /docs/14.htm: -------------------------------------------------------------------------------- 1 |
2 |
14
3 |
4 |

Offset Öteleme

5 |

left yada right yönünde sütunları öteleyebiliriz

6 |
7 | 8 |
9 | 10 | 11 |
12 |
A
13 |
B
14 |
C
15 |
16 | 17 | 18 |
19 |
'; 20 | echo htmlentities('
21 |
22 |
23 |
24 |
'); 25 | echo '' ?> 26 |
27 | 28 | 29 |
30 |
31 |

Farklı Örnekler

32 |
33 | 34 |
35 |
36 |
A
37 |
B
38 |
39 | 40 |
41 |
A
42 |
B
43 |
44 |
45 | 46 |
'; 47 | echo htmlentities('
48 |
49 |
50 |
51 | 52 |
53 |
/div> 54 |
55 |
'); 56 | echo '' ?> 57 |
58 | 59 |
60 |
61 |

Ekran Aralığı Desteği Var

62 |
63 | 64 |
65 |
66 |
A
67 |
B
68 |
69 |
70 | 71 |
'; 72 | echo htmlentities('
73 |
74 |
75 |
76 |
77 |
'); 78 | echo '' ?> 79 |
80 |
81 | -------------------------------------------------------------------------------- /docs/10.htm: -------------------------------------------------------------------------------- 1 |
2 |
10
3 |
4 |

Sütun Sıralama

5 |

firt ve last etiketleri değişim yapabilirsiniz

6 |
7 | 8 |
9 | 10 |
11 |
A
12 |
B
13 |
C
14 |
15 | 16 |
17 |
A
18 |
B
19 |
C
20 |
21 |
22 | 23 |
'; 24 | echo htmlentities('
25 |
A
26 |
B
27 |
C
28 |
29 | 30 |
31 |
A
32 |
B
33 |
C
34 |
'); 35 | echo '' ?> 36 |
37 | 38 |
39 |
40 |

Order ile Sıra Değiştir 10'a kadar destekler

41 |
42 | 43 |
44 | 45 |
46 |
A 01
47 |
B 02
48 |
C 03
49 |
D 04
50 |
51 | 52 |
53 | 54 |
'; 55 | echo htmlentities('
56 |
A 01
57 |
B 02
58 |
C 03
59 |
D 04
60 |
'); 61 | echo '' ?> 62 |
63 | 64 | 65 |
66 |
67 |

Ekrana göre formatlama destekler

68 |
69 | 70 |
71 | 72 |
73 |
A 01
74 |
B 02
75 |
C 03
76 |
D 04
77 |
78 | 79 |
80 | 81 |
'; 82 | echo htmlentities('
83 |
A 01
84 |
B 02
85 |
C 03
86 |
D 04
87 |
'); 88 | echo '' ?> 89 |
90 | 91 | 92 |
93 | -------------------------------------------------------------------------------- /docs/15.htm: -------------------------------------------------------------------------------- 1 |
2 |
15
3 |
4 |

Sütun Alt Boşluk Sıfırlama

5 |

c-nb( col no bottom ) etiketi ile row'un sütunlarının padding-bottom aralığını iptal eder

6 |
7 | 8 |
9 |
10 |
A
11 |
B
12 |
C
13 |
14 |
15 | 16 |
'; 17 | echo htmlentities('
18 |
19 |
20 |
21 |
'); 22 | echo '' ?> 23 |
24 | 25 | 26 |
27 |
28 |

c-ob (child on-bottom) etiketi ile istediğimiz grid modunda aktif edebilme desteği vardır

29 |
30 | 31 |
32 |
33 |
A
34 |
B
35 |
C
36 |
37 |
38 | 39 |
'; 40 | echo htmlentities('
41 |
42 |
43 |
44 |
'); 45 | echo '' ?> 46 |
47 | 48 | 49 | 50 |
51 |
52 |

tc-nb (this col no-bottom) etiketi ile istediğiniz col'un bottom gutter'ı kaldırır

53 |
54 | 55 |
56 |
57 |
A
58 |
B
59 |
C
60 |
61 |
62 | 63 |
'; 64 | echo htmlentities('
65 |
A
66 |
B
67 |
C
68 |
'); 69 | echo '' ?> 70 |
71 | 72 | 73 | 74 |
75 |
76 |

tc-ns (this col no-space) etiketi ile istediğimiz col'un tüm gutter boşluklarını kaldırır

77 |
78 | 79 |
80 |
81 |
A
82 |
B
83 |
C
84 |
85 |
86 | 87 |
'; 88 | echo htmlentities('
89 |
A
90 |
B
91 |
C
92 |
'); 93 | echo '' ?> 94 |
95 | 96 | 97 |
98 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Bu grid varsayılan olarak 12 sütun üzerine flexbox tekniği ile inşa edilmiştir. Css üreticisi olarak Sass, görev yöneticisi olarak Gulp tercih edilmiştir. Grid’in sütün sayısı (column), sütün aralıkları (gutter), ekran aralıkları (media), media kural yönü tercihi (min / max) , özellik opsiyonları ve seçici kurallar [set.scss](https://github.com/thealico/FlexGrid/blob/master/src/style/_set.scss) üzerinden özelleştirebilirsiniz. 2 | 3 | ### Row 4 | Satırın refrans aldığı değerler aşağıdaki gibidir, örnekler için linklere bakınız. 5 | 6 | * [center](https://thealico.github.io/FlexGrid/#07) - Sütunları yatayada ortalar 7 | * [start](https://thealico.github.io/FlexGrid/#07) - Sütünları sola yaslı sıralar 8 | * [between](https://thealico.github.io/FlexGrid/#11) - Sütünları sol ve sağa doğru sonlandırarak sıralar 9 | * [around](https://thealico.github.io/FlexGrid/#12) - Sütunları merkezden ortalayarak sağa ve sola doğru sıralar 10 | * [end](https://thealico.github.io/FlexGrid/#07) - Sütunları sağa doğru yaslıyarak sıralar 11 | * [middle](https://thealico.github.io/FlexGrid/#08) - Sütünları dikeyde ortalar 12 | * [bottom](https://thealico.github.io/FlexGrid/#08) - Sütunları alta yaslar 13 | * top 14 | * stretch 15 | * baseline 16 | * [direct-x](https://thealico.github.io/FlexGrid/#09) - Sütunları yatay sıralar 17 | * [direct-xr](https://thealico.github.io/FlexGrid/#09) - Yatay sırayı ters çevirir 18 | * [direct-y](https://thealico.github.io/FlexGrid/#09.1) - Sütunları dikey sıralar 19 | * [direct-yr](https://thealico.github.io/FlexGrid/#09.2) - Dikey sırayı ters çevirir 20 | * [ns](https://thealico.github.io/FlexGrid/#05) - Gutter boşluklar kaldırır 21 | * [c-nb](https://thealico.github.io/FlexGrid/#15) - (col no bottom) Alt gutter boşluğu iptal eder 22 | * [c-ob](https://thealico.github.io/FlexGrid/#15.1) - (col no bottom) Alt gutter boşluğu aktif yapar 23 | * c-nf - Child No Flex - Row özelliği verilmiş sütunun flex özelliğini kaldrır 24 | * [c-eh](https://thealico.github.io/FlexGrid/#16) - ( col equal height ) Sütunları yüksekliği eşler 25 | * [c-eh-1](https://thealico.github.io/FlexGrid/#16) - ( col equal height ) Sütunları yüksekliği flex methodu ile eşler 26 | 27 | ### Col 28 | Bunlarda sütunun refrans aldığı değerlerdir. Bir col aynı zamanda row etiketi özelliği alabiliyor col ve row'un aynı etiketlerinin çakışmaması için this col kısaltması olarak **tc-** eki kullanıldı. 29 | 30 | * [tc-top](https://thealico.github.io/FlexGrid/#08.4) Üste yaslar 31 | * [tc-middle](https://thealico.github.io/FlexGrid/#08.3) Dikeyde ortalar 32 | * [tc-bottom ](https://thealico.github.io/FlexGrid/#08.1) Alta yaslar 33 | * [tc-ns] - Gutter boşluğunu (padding) alır 34 | * [tc-nb] - Alt gutter boşluğunu (padding) alır 35 | * [tc-ob] - Alt gutter boşluğunu (padding) aktif eder 36 | * [tc-first](https://thealico.github.io/FlexGrid/#10) 37 | * [tc-last](https://thealico.github.io/FlexGrid/#10) 38 | * [order-](https://thealico.github.io/FlexGrid/#10.1) Sütunun sırasını değişir 39 | * [left-](https://thealico.github.io/FlexGrid/#14) left offset öteleme 40 | * [right-](https://thealico.github.io/FlexGrid/#14) Right offset 41 | -------------------------------------------------------------------------------- /src/style/_set.scss: -------------------------------------------------------------------------------- 1 | // @ Flexbox Grid Version 1.5.0 - https://github.com/thealico/flexboxgrid 2 | // @ Front-end Developer by Ali Akman (alico) 3 | // @ http://alico.me */ 4 | 5 | $set : ( 6 | 7 | 'columns' : 12, 8 | 'gut' : ( 9 | 'd' : 1rem, 10 | 's' : (.6rem,.3rem), 11 | 'b' : (1.5rem,2.5rem) 12 | ), 13 | 'screen' : ( 14 | 'lg' : 80em, 15 | 'md' : 64em, 16 | 'sm' : 48em, 17 | 'xs' : 35.5em, 18 | 'ms' : 23.5em 19 | ), 20 | 'options' : ( 21 | 'offset' : true, 22 | 'space' : true, 23 | 'order' : true, 24 | ), 25 | 'screen-rule' : 'max', 26 | 'select' : ( 27 | 'row' : '[class*="row"]', 28 | 'col' : '[class*="row"] > [class*="col"]', 29 | 'col-' : '[class*="row"] > [class*="col-"]', 30 | 'colcol' : '[class*="row"] > .col', 31 | 'colrow' : '[class*="row"][class*="col"]', 32 | 'colone' : '[class*="col"]' 33 | ) 34 | ); 35 | 36 | 37 | // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 38 | 39 | @function map($map, $keys...) { 40 | @each $key in $keys { 41 | $test : map-get($map, $key); 42 | @if $test == null { 43 | @return 'key error'; 44 | } 45 | $map: map-get($map, $key); 46 | } 47 | @return $map; 48 | } 49 | 50 | // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 51 | 52 | $select-colone : map($set,'select','colone'); 53 | $select-colrow : map($set,'select','colrow'); 54 | $select-colcol : map($set,'select','colcol'); 55 | $select-col- : map($set,'select','col-'); 56 | $select-row : map($set,'select','row'); 57 | $select-col : map($set,'select','col'); 58 | 59 | $set-column : map($set,'columns'); 60 | $set-screen-rule : map($set,'screen-rule'); 61 | 62 | $gut-s : map($set,'gut','s'); 63 | $gut-b : map($set,'gut','b'); 64 | $gut : map($set,'gut','d'); 65 | 66 | 67 | // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 68 | 69 | $set-screen : (); 70 | 71 | @each $key, $value in map($set,'screen') { 72 | $set-screen : map-merge($set-screen, (#{$key} : 'screen and (#{$set-screen-rule}-width: #{$value})')); 73 | } 74 | 75 | // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 76 | 77 | $set-col : ''; 78 | 79 | @for $i from 0 to $set-column { 80 | $i : $i+1; 81 | 82 | @if ($i!=1 and $i!=$set-column) { $set-col : append($set-col,(nth($set-col,1)*$i)) } 83 | @if ($i==$set-column) { $set-col : append($set-col,(100%)) } 84 | @if ($i==1) { $set-col : (100%/$set-column) } 85 | 86 | } 87 | 88 | 89 | // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 90 | 91 | $set-row : ''; 92 | 93 | @for $i from 0 to $set-column { 94 | $i : $i+1; 95 | @if ($i >1) { $set-row : append($set-row ,(100%/$i)) } 96 | @if ($i==1) { $set-row : (100%/$i) } 97 | } 98 | -------------------------------------------------------------------------------- /docs/09.htm: -------------------------------------------------------------------------------- 1 |
2 | 3 |
09
4 | 5 |
6 |

Sıralama Yönleri

7 |

sütunlarımızın sıralamasını terse çevirmek için reserve etiketi atıyoruz

8 |
9 | 10 |
11 |
12 |
13 |
14 |
A
15 |
B
16 |
C
17 |
18 |
'; 19 | echo htmlentities('
20 |
A
21 |
B
22 |
C
23 |
'); 24 | echo '' ?> 25 |
26 |
27 |
28 |
29 |
A
30 |
B
31 |
C
32 |
33 |
'; 34 | echo htmlentities('
35 |
A
36 |
B
37 |
C
38 |
'); 39 | echo '' ?> 40 |
41 |
42 | 43 |
44 | 45 |
46 | 47 | 48 | 49 | 50 |
51 |
52 |
53 |
54 |
A
55 |
B
56 |
C
57 |
58 |
'; 59 | echo htmlentities('
60 |
A
61 |
B
62 |
C
63 |
'); 64 | echo '' ?> 65 |
66 |
67 |
68 |
69 |
A
70 |
B
71 |
C
72 |
73 |
'; 74 | echo htmlentities('
75 |
A
76 |
B
77 |
C
78 |
'); 79 | echo '' ?> 80 |
81 |
82 | 83 |
84 | 85 |
86 | 87 | 88 |
89 |
90 |

Ekran Aralığı Desteği Var

91 |
92 | 93 |
94 | 95 |
96 |
A
97 |
B
98 |
C
99 |
100 | 101 |
102 | 103 |
'; 104 | echo htmlentities('
105 |
106 |
107 |
108 |
'); 109 | echo '' ?> 110 |
111 | 112 |
113 | -------------------------------------------------------------------------------- /docs/08.htm: -------------------------------------------------------------------------------- 1 |
2 |
08
3 |
4 |

Dikey Hizalama

5 |

satır içindeki sutunları üst orta ve alt hizalamaları varsayılan (top) değeri üstten başlar

6 |
7 | 8 |
9 |
10 |
A
11 |
B
12 |
C
13 |
14 |
15 | 16 | 17 |
'; 18 | echo htmlentities('
19 |
20 |
21 |
22 |
'); 23 | echo '' ?> 24 |
25 | 26 | 27 |
28 |
29 |

Alta Yaslı Sütunlar

30 |
31 | 32 |
33 |
34 |
A
35 |
B
36 |
C
37 |
38 |
39 | 40 |
'; 41 | echo htmlentities('
42 |
43 |
44 |
45 |
'); 46 | echo '' ?> 47 |
48 | 49 |
50 |
51 |

Satır Kasası Yükseliğine Görede Çalışır

52 |
53 | 54 |
55 | 56 |
57 |
A
58 |
B
59 |
C
60 |
61 | 62 |
63 | 64 |
65 |
66 |

Ekran Aralığı Desteği Var

67 |
68 | 69 |
70 | 71 |
72 |
A
73 |
B
74 |
C
75 |
76 | 77 |
78 | 79 |
'; 80 | echo htmlentities('
81 |
82 |
83 |
84 |
'); 85 | echo '' ?> 86 |
87 | 88 |
89 |
90 |

Sutunlar Bağımsız Olarak Pozisyonlarını Değişebilir

91 |
92 | 93 |
94 | 95 |
96 |
A (top)
97 |
B
98 |
C
99 |
D (bottom)
100 |
101 | 102 |
103 | 104 |
'; 105 | echo htmlentities('
106 |
A
107 |
B
108 |
C
109 |
D
110 |
'); 111 | echo '' ?> 112 |
113 | 114 | 115 | 116 | 117 |
118 | -------------------------------------------------------------------------------- /docs/css/example.css: -------------------------------------------------------------------------------- 1 | /* 2 | @ Front-end Developer & UI Designer by alico 3 | @ http://alico.me */ 4 | 5 | 6 | @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&subset=latin-ext'); 7 | 8 | * { position: relative; margin: 0; padding: 0 } 9 | 10 | body { background: #eee ; font:400 14px 'Roboto'; text-size-adjust: 100%;} 11 | header { background: white; height: 250px; text-align: center; } 12 | header .con { display:flex; height:100%; align-items:center; justify-content:center } 13 | header h1 { font-weight: 600; margin-bottom:5px; font-size: 50px} 14 | header h1 span { font-weight: 300} 15 | header a { font-weight: 300; color:#56afed; font-size:17px; text-decoration:none;} 16 | header a:hover { color:#ff4106} 17 | 18 | .con { width: 90%; max-width: 1170px; margin: 0 auto } 19 | 20 | .doc { padding: 50px 0 } 21 | .doc section { margin-bottom: 80px} 22 | .doc .cod { background: white; margin-top: 30px; padding: 20px 20px 16px 20px; color:#666; } 23 | .doc .cod pre { overflow: auto; } 24 | .doc code { line-height: 20px;-webkit-text-stroke:.5px rgba(0,0,0,.3); } 25 | .doc .sam { margin:20px 0 20px 0 } 26 | .doc .dsc h4 { font:700 24px 'Roboto'; color:#333; } 27 | .doc .dsc p { font-size: 15px; letter-spacing:.1px; line-height:20px; } 28 | .doc .dsc { text-align: center; margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 30px } 29 | 30 | .doc .dsc.ara { border-bottom: 0 } 31 | .doc .dsc.ara hr { background: #ddd; height: 1px ; width: 100%; border: 0; position: absolute; width: 100%;z-index: 0; top:10px } 32 | .doc .dsc.ara { margin-top: 23px; padding-bottom: 23px; } 33 | .doc .dsc.ara p span { background: #eee; padding:0 10px;z-index: 1 } 34 | 35 | .doc .sam span { display: block; padding: 10px; box-sizing:border-box; background: #EFC25F; text-align: center; color:white; } 36 | 37 | .doc .sam .kesme{ text-align: center; margin-bottom: 15px} 38 | .doc .sam .kesme b s{ position: absolute; top: 8px; height:1px; background: #ddd; width: 50px; } 39 | .doc .sam .kesme b { font-weight: 400; font-size: 16px } 40 | .doc .sam .kesme b s{ position: absolute; top: 11px ;height:1px; background: #C5C5C5; width: 30px; } 41 | .doc .sam .kesme b s.sol{ left: -40px } 42 | .doc .sam .kesme b s.sag{ right: -40px } 43 | 44 | .doc section h5.no { text-align: center; font-size: 25px; font-weight: 300; padding-top: 15px; margin-bottom: 35px } 45 | .doc section h5.no s { position: absolute; top: 18px ;height:1px; background: #C5C5C5; width: 30px; } 46 | .doc section h5.no s.sol { left: -40px } 47 | .doc section h5.no s.sag { right: -40px } 48 | 49 | .row.color > *:nth-child(2) span { background: #c270d6 } 50 | .row.color > *:nth-child(3) span { background: #817ee6 } 51 | .row.color > *:nth-child(4) span { background: #f16868 } 52 | .row.color > *:nth-child(5) span { background: #4ec177 } 53 | .row.color > *:nth-child(6) span { background: #e86159 } 54 | .row > .color-a span { background: #c270d6 } 55 | .row > .color-b span { background: #e86159 } 56 | 57 | .doc .cod > i { width: 0; 58 | height: 0; 59 | border-style: solid; 60 | border-width: 0 8px 10px 8px; 61 | border-color: transparent transparent #ffffff transparent; 62 | position: absolute; 63 | left: 50%; 64 | margin-left:-10px; 65 | top: -9px 66 | } 67 | 68 | .mb-1 { margin-bottom: 1rem } 69 | 70 | 71 | .s_05 .row > .col:nth-child(2n+1) span { background-color:#8387C1 } 72 | 73 | .s_08 .row { height: 100px; background: #F7D997} 74 | .s_08 .row span { background: white; color:#222;} 75 | 76 | .s_08_1 .a span { padding: 20px 10px} 77 | .s_08_1 .b span { padding: 40px 10px} 78 | .s_08_1 .c span { padding: 10px 10px} 79 | 80 | .s_15 .row { background: #6588D2} 81 | .s_15 .row { background: #6588D2} 82 | 83 | 84 | .s_16_1 .col span.a { height:180px;} 85 | .s_16_2 .col span.a { height:180px;} 86 | 87 | .s_17_1 .w .in { background: white; padding: 10px; } 88 | 89 | @media (max-width: 640px) { 90 | 91 | .doc code{ font-size: 12px; letter-spacing: -.2px } 92 | 93 | } -------------------------------------------------------------------------------- /docs/17.htm: -------------------------------------------------------------------------------- 1 |
2 |
17
3 |
4 |

Aralık Ölçüleri

5 |

Sayfa içinde spesifik bir yerde gutter boşluğunu genel yada belirli media boyunda geniş veya dar olmasını istersek -gut-, gut- etiketlerini kullanabiliriz. Varsayılanda iki boy vardır, set.scss dosyasından daha fazla üretebilirsiniz

6 |
7 | 8 |
9 |
10 |
11 |
12 |
13 |
A
14 |
B
15 |
C
16 |
D
17 |
18 |
19 |
'; 20 | echo htmlentities('
21 |
A
22 |
B
23 |
C
24 |
D
25 |
'); 26 | echo '' ?> 27 |
28 |
29 |
30 |
31 |
32 |
A
33 |
B
34 |
C
35 |
D
36 |
37 |
38 |
'; 39 | echo htmlentities('
40 |
A
41 |
B
42 |
C
43 |
D
44 |
'); 45 | echo '' ?> 46 |
47 |
48 | 49 |
50 |
51 |
52 |
A
53 |
B
54 |
C
55 |
D
56 |
57 |
58 |
'; 59 | echo htmlentities('
60 |
A
61 |
B
62 |
C
63 |
D
64 |
'); 65 | echo '' ?> 66 |
67 |
68 | 69 | 70 |
71 | 72 |
73 | 74 | 75 | 76 |
77 |
78 |

Büyük Gutter Boşluğu

79 |
80 | 81 |
82 |
83 |
84 |
85 |
86 |
A
87 |
B
88 |
C
89 |
D
90 |
91 |
92 |
'; 93 | echo htmlentities('
94 |
A
95 |
B
96 |
C
97 |
D
98 |
'); 99 | echo '' ?> 100 |
101 |
102 |
103 |
104 |
105 |
A
106 |
B
107 |
C
108 |
D
109 |
110 |
111 |
'; 112 | echo htmlentities('
113 |
A
114 |
B
115 |
C
116 |
D
117 |
'); 118 | echo '' ?> 119 |
120 |
121 | 122 |
123 |
124 |
125 |
A
126 |
B
127 |
C
128 |
D
129 |
130 |
131 |
'; 132 | echo htmlentities('
133 |
A
134 |
B
135 |
C
136 |
D
137 |
'); 138 | echo '' ?> 139 |
140 |
141 | 142 | 143 |
144 | 145 |
146 | 147 |
148 |
149 |

Ekran Aralığı Desteği Var

150 |
151 | 152 |
153 |
154 | 155 |
156 |
157 |
A
158 |
B
159 |
160 |
161 | 162 |
163 |
164 | 165 |
'; 166 | echo htmlentities('
167 |
168 |
169 |
'); 170 | echo '' ?> 171 |
172 | 173 |
174 | -------------------------------------------------------------------------------- /src/style/_mix.scss: -------------------------------------------------------------------------------- 1 | // @ Flexbox Grid Version 1.5.0 - https://github.com/thealico/flexboxgrid 2 | // @ Front-end Developer by Ali Akman (alico) 3 | // @ http://akman.me */ 4 | 5 | @mixin make-row-number($n:false) 6 | { 7 | @for $i from 0 to $set-column { 8 | 9 | .row#{$n}-#{$i+1} > #{$select-colone} { flex-basis: calc( #{nth($set-row, $i+1)} - ( var(--cg) * #{$i} / #{$i+1} ) ); max-width: calc( #{nth($set-row, $i+1)} - ( var(--cg) * #{$i} / #{$i+1} ) ) } 10 | 11 | } 12 | } 13 | 14 | @mixin make-col-number($n:false) 15 | { 16 | @for $i from 0 to $set-column { 17 | 18 | #{$select-row } > .col#{$n}-#{$i+1} { flex-basis: calc( #{nth($set-col, $i+1)} - ( var(--cg) * #{$i} / #{$i+1} ) ); max-width: calc( #{nth($set-col, $i+1)} - ( var(--cg) * #{$i} / #{$i+1} ) ) } 19 | 20 | } 21 | } 22 | 23 | 24 | 25 | @mixin make-row-option($n:false) 26 | { 27 | 28 | #{$select-row} { 29 | 30 | &.center#{$n} { justify-content: center} 31 | &.end#{$n} { justify-content: flex-end } 32 | &.start#{$n} { justify-content: flex-start } 33 | &.between#{$n} { justify-content: space-between } 34 | &.around#{$n} { justify-content: space-around } 35 | &.top#{$n} { align-items: flex-start } 36 | &.middle#{$n} { align-items: center } 37 | &.bottom#{$n} { align-items: flex-end } 38 | &.stretch#{$n} { align-items: stretch } 39 | &.baseline#{$n} { align-items: baseline } 40 | &.direct-x#{$n} { flex-direction: row } 41 | &.direct-xr#{$n} { flex-direction: row-reverse } 42 | &.direct-yr#{$n} { flex-direction: column-reverse } 43 | &.direct-y#{$n} { flex-direction: column } 44 | &.direct-yr#{$n},&.direct-y#{$n} { > #{$select-colone} { flex-basis: auto; width:100% } } 45 | 46 | //&.c-op#{$n} > * { padding-left:$gut/2; padding-right:$gut/2 } // left, right gutter on 47 | 48 | &.c-op#{$n} { column-gap: var(--cg) } // left, right gutter on 49 | 50 | 51 | 52 | &.c-nb#{$n} { row-gap: 0 } // bottom gutter on 53 | &.c-ob#{$n} { row-gap: var(--cg) } // bottom gutter of 54 | 55 | &.c-nf#{$n} > * { flex: none } 56 | 57 | &.ns#{$n},&.nsc#{$n} { --rg:0; --cg:0 } 58 | 59 | @if not $n { 60 | 61 | &.nsc { margin-left:auto; margin-right:auto } 62 | // &.ns,&.nsc { --rg:0; --cg:0 } 63 | 64 | &.c-eh > * { 65 | > * { height: 100%; width: 100%; display: block } 66 | } 67 | 68 | &.c-eh-2 > * { display:flex; 69 | > * { flex: 1 0 100% } 70 | } 71 | } 72 | } 73 | } 74 | 75 | @mixin make-col-option($n:false) 76 | { 77 | 78 | #{$select-row} { 79 | 80 | .tc#{$n}-top { align-self: flex-start } 81 | .tc#{$n}-middle { align-self: center } 82 | .tc#{$n}-bottom { align-self: flex-end } 83 | .tc#{$n}-first { order: -1 } 84 | .tc#{$n}-last { order: 1 } 85 | //.tc#{$n}-ns { padding-left:0; padding-right: 0; padding-bottom: 0 } 86 | .tc#{$n}-ns { padding-left:0; padding-right: 0; padding-bottom: 0 } 87 | .tc#{$n}-ob { padding-bottom:$gut } 88 | .tc#{$n}-nb { padding-bottom:0!important } 89 | } 90 | } 91 | 92 | 93 | @mixin make-offset($n:false) 94 | { 95 | 96 | @if (map($set,'options','offset')){ 97 | 98 | #{$select-row} { 99 | 100 | > *.left#{$n}-0 { margin-left:0 } 101 | > *.right#{$n}-0 { margin-right:0 } 102 | 103 | @for $i from 0 to ($set-column - 1) { 104 | 105 | > *.left#{$n}-#{$i+1} { margin-left:nth($set-col, $i+1) } 106 | } 107 | 108 | @for $i from 0 to ($set-column - 1) { 109 | 110 | > *.right#{$n}-#{$i+1} { margin-right:nth($set-col, $i+1) } 111 | } 112 | } 113 | } 114 | } 115 | 116 | @mixin make-order( $n:false ) 117 | { 118 | @if (map($set,'options','order')){ 119 | @for $i from 1 through 20 { 120 | #{$select-row} > .order#{$n}-#{$i} { order:#{$i} } 121 | } 122 | } 123 | } 124 | 125 | @mixin make-space($n:false) 126 | { 127 | @if (map($set,'options','space')) { 128 | 129 | @for $i from 0 to length($gut-b ) { 130 | 131 | $v :nth($gut-b , $i+1); 132 | 133 | #{$select-row} { 134 | 135 | &.gut-#{$i+1}#{$n} { 136 | 137 | --cg:#{$v}; 138 | --rg:#{$v}; 139 | 140 | &.c-op { --cg:#{$v};} 141 | 142 | @if $n { 143 | 144 | &.c-ob { --rg:#{$v} } 145 | 146 | @each $key, $value in $set-screen{ 147 | 148 | &.c-ob-#{$key} { --rg:#{$v} } 149 | } 150 | } 151 | 152 | .tc#{$n}-ob { padding-bottom:#{$v} } 153 | 154 | } 155 | 156 | } 157 | } 158 | 159 | @for $i from 0 to length($gut-s ) { 160 | 161 | $v :nth($gut-s , $i+1); 162 | 163 | #{$select-row} { 164 | 165 | &.-gut-#{$i+1}#{$n} { 166 | 167 | --cg:#{$v}; 168 | --rg:#{$v}; 169 | 170 | &.c-op { --cg:#{$v}; } 171 | 172 | @if $n { 173 | 174 | &.c-ob { --rg:#{$v} } 175 | 176 | @each $key, $value in $set-screen{ 177 | 178 | &.c-ob-#{$key} { --rg:#{$v} } 179 | } 180 | } 181 | 182 | .tc#{$n}-ob { padding-bottom:#{$v} } 183 | } 184 | } 185 | } 186 | 187 | $v : $gut; 188 | 189 | #{$select-row} { 190 | 191 | &.gut-0#{$n} { 192 | 193 | --cg:#{$v}; 194 | --rg:#{$v}; 195 | 196 | &.c-op { --cg:#{$v}; } 197 | 198 | @if $n { 199 | 200 | &.c-ob { --rg:#{$v} } 201 | 202 | @each $key, $value in $set-screen{ 203 | &.c-ob-#{$key} { --rg:#{$v} } 204 | } 205 | } 206 | 207 | .tc#{$n}-ob { padding-bottom:#{$v} } 208 | 209 | } 210 | } 211 | } 212 | } -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | FlexGrid System 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |

FlexGrid

23 | GitHub

24 | Star 25 | 26 | 27 | 28 | 29 |
30 |
31 |
32 |
33 | 34 |
35 |
01
36 |
37 |

Eşit Sütunlar

38 |

herhangi bir kosul tanımlanmayan (.row) satırı altındaki (.col) sütunlarımız sütun sayısınca eşit bölünür

39 | 40 |
41 | 42 |
43 | 44 |
45 |
A
46 |
B
47 |
C
48 |
49 | 50 |
51 |
A
52 |
B
53 |
C
54 |
D
55 |
E
56 |
F
57 |
58 | 59 |
60 | 61 | 
<div class="row">
 62 |     <div class="col"></div>
 63 |     <div class="col"></div>
 64 |     <div class="col"></div>
 65 |  </div>
66 | 67 |
68 |
02
69 |
70 |

Satırdan Sütun Böl

71 |

satırımızdaki row etiketine (-) ekler sütunlarımız bölmek istediğimiz 1 ile 12 arasındaki değer gireriz

72 |
73 | 74 |
75 | 76 |
77 |
A
78 |
B
79 |
C
80 |
D
81 |
E
82 |
F
83 |
G
84 |
E
85 |
86 | 87 |
88 | 89 | 
<div class="row-4">
 90 |     <div class="col">A</div>
 91 |     <div class="col">B</div>
 92 |     <div class="col">C</div>
 93 |     <div class="col">D</div>
 94 |     <div class="col">E</div>
 95 |     <div class="col">F</div>
 96 |     <div class="col">G</div>
 97 |     <div class="col">E</div>
 98 | </div>
99 | 100 | 101 |
102 |
03
103 |
104 |

Satırdan Ekran Şartı

105 |

satırdan (row) sütun (col) sıralamaları ekrana göre değiştirilebilir

106 |
107 | 108 |
109 | 110 |
111 |
A
112 |
B
113 |
C
114 |
D
115 |
E
116 |
117 | 118 |
119 | 
<div class="row-3 row-sm-2 row-xs-1">
120 |     <div class="col"></div>
121 |     <div class="col"></div>
122 |     <div class="col"></div>
123 |     <div class="col"></div>
124 |     <div class="col"></div>
125 | </div>
126 | 127 |
128 |
129 |
05
130 |
131 |

Sütunun Tebiri Satırın Takdirini Bozar

132 |

satırın sütuna verdiği takdirin ömrü sütunun kendine verdiği hükme kadardır

133 |
134 | 135 |
136 | 137 |
138 |
A COL-6
139 |
B
140 |
C
141 |
142 | 143 |
144 | 
<div class="row-4">
145 |     <div class="col-6"></div>
146 |     <div class="col"></div>
147 |     <div class="col"></div>
148 | </div>
149 | 150 |
151 | 152 |
153 |
A / Auto
154 |
B
155 |
C
156 |
157 | 158 |
159 | 
<div class="row">
160 |     <div class="col"></div>
161 |     <div class="col-2"></div>
162 |     <div class="col-6"></div>
163 | </div>
164 |
165 |
166 |
05
167 |
168 |

Safları Sıklaştırın

169 |

no-space/ns etikiyle sutunlarımızın saf aralıklarını kapayabiliriz

170 |
171 | 172 |
173 | 174 |
175 |
A
176 |
B
177 |
C
178 |
D
179 |
E
180 |
181 | 182 |
183 | 
<div class="row ns">
184 |     <div class="col"></div>
185 |     <div class="col"></div>
186 |     <div class="col"></div>
187 |     <div class="col"></div>
188 |     <div class="col"></div>
189 | </div>
190 |
191 |
192 |
06
193 |
194 |

Matruşka Grid

195 |

sutunların içinde yeni satırlar onların içinden de yeni sütunlar doğurmak mı ? evet buda mümkün

196 |
197 | 198 |
199 | 200 |
201 |
A
202 |
B
203 |
204 | 205 |
C.1
206 |
C.2
207 | 208 |
C.3
209 |
C.4
210 |
C.5
211 | 212 |
213 |
214 | 215 |
216 | 
<div class="row">
217 |     <div class="col-4"></div>
218 |     <div class="col-2 col-xs-8"></div>
219 |     <div class="col-6 col-xs-12 row">
220 |         
221 |         <div class="col-6"></div>
222 |         <div class="col-6"></div>
223 |         
224 |         <div class="col-4"></div>
225 |         <div class="col-4"></div>
226 |         <div class="col-4"></div>
227 |     </div>
228 | </div>
229 |
230 |
231 |
07
232 |
233 |

Yatay Hizalama

234 |

satır içindeki sutunları sağ sol ve merkez hizalamaları

235 |
236 | 237 |
238 | 239 |
240 |
A
241 |
242 |
243 |
B
244 |
245 |
246 |
C
247 |
248 | 249 |
250 | 251 | 
<div class="row">
252 |     <div class="col col-2"></div>
253 | </div>
254 | <div class="row center">
255 |     <div class="col col-2"></div>
256 | </div>
257 | <div class="row end">
258 |     <div class="col col-2"></div>
259 | </div>
260 |
261 |
262 |

Ekran Aralığı Desteği Var

263 |
264 | 265 |
266 |
267 |
A
268 |
269 |
270 | 271 | 
 <div class="row center end-sm center-xs">
272 |     <div class="col col-5"></div>
273 | </div>
274 | 275 |
276 | 277 | 278 |
279 |
08
280 |
281 |

Dikey Hizalama

282 |

satır içindeki sutunları üst orta ve alt hizalamaları varsayılan (top) değeri üstten başlar

283 |
284 | 285 |
286 |
287 |
A
288 |
B
289 |
C
290 |
291 |
292 | 293 | 294 | 
<div class="row middle">
295 |     <div class="col"></div>
296 |     <div class="col"></div>
297 |     <div class="col"></div>
298 | </div>
299 | 300 | 301 |
302 |
303 |

Alta Yaslı Sütunlar

304 |
305 | 306 |
307 |
308 |
A
309 |
B
310 |
C
311 |
312 |
313 | 314 | 
<div class="row bottom">
315 |     <div class="col"></div>
316 |     <div class="col"></div>
317 |     <div class="col"></div>
318 | </div>
319 | 320 |
321 |
322 |

Satır Kasası Yükseliğine Görede Çalışır

323 |
324 | 325 |
326 | 327 |
328 |
A
329 |
B
330 |
C
331 |
332 | 333 |
334 | 335 |
336 |
337 |

Ekran Aralığı Desteği Var

338 |
339 | 340 |
341 | 342 |
343 |
A
344 |
B
345 |
C
346 |
347 | 348 |
349 | 350 | 
<div class="row middle bottom-xs">
351 |     <div class="col"></div>
352 |     <div class="col"></div>
353 |     <div class="col"></div>
354 | </div>
355 | 356 |
357 |
358 |

Sutunlar Bağımsız Olarak Pozisyonlarını Değişebilir

359 |
360 | 361 |
362 | 363 |
364 |
A (top)
365 |
B
366 |
C
367 |
D (bottom)
368 |
369 | 370 |
371 | 372 | 
<div class="row middle">
373 |     <div class="col tc-top ">A</div>
374 |     <div class="col">B</div>
375 |     <div class="col">C</div>
376 |     <div class="col tc-bottom">D</div>
377 | </div>
378 | 379 | 380 | 381 | 382 |
383 |
384 | 385 |
09
386 | 387 |
388 |

Sıralama Yönleri

389 |

sütunlarımızın sıralamasını terse çevirmek için reserve etiketi atıyoruz

390 |
391 | 392 |
393 |
394 |
395 |
396 |
A
397 |
B
398 |
C
399 |
400 | 
<div class="row">
401 |     <div class="col">A</div>
402 |     <div class="col">B</div>
403 |     <div class="col">C</div>
404 | </div>
405 |
406 |
407 |
408 |
A
409 |
B
410 |
C
411 |
412 | 
<div class="row direct-xr">
413 |     <div class="col">A</div>
414 |     <div class="col">B</div>
415 |     <div class="col">C</div>
416 | </div>
417 |
418 | 419 |
420 | 421 |
422 | 423 | 424 | 425 | 426 |
427 |
428 |
429 |
430 |
A
431 |
B
432 |
C
433 |
434 | 
<div class="row direct-y">
435 |     <div class="col">A</div>
436 |     <div class="col">B</div>
437 |     <div class="col">C</div>
438 | </div>
439 |
440 |
441 |
442 |
A
443 |
B
444 |
C
445 |
446 | 
<div class="row direct-yr">
447 |     <div class="col">A</div>
448 |     <div class="col">B</div>
449 |     <div class="col">C</div>
450 | </div>
451 |
452 | 453 |
454 | 455 |
456 | 457 | 458 |
459 |
460 |

Ekran Aralığı Desteği Var

461 |
462 | 463 |
464 | 465 |
466 |
A
467 |
B
468 |
C
469 |
470 | 471 |
472 | 473 | 
<div class="row direct-y-xs">
474 |     <div class="col"></div>
475 |     <div class="col"></div>
476 |     <div class="col"></div>
477 | </div>
478 | 479 |
480 |
481 |
10
482 |
483 |

Sütun Sıralama

484 |

firt ve last etiketleri değişim yapabilirsiniz

485 |
486 | 487 |
488 | 489 |
490 |
A
491 |
B
492 |
C
493 |
494 | 495 |
496 |
A
497 |
B
498 |
C
499 |
500 |
501 | 502 | 
<div class="row">
503 |     <div class="col">A</div>
504 |     <div class="col">B</div>
505 |     <div class="col tc-first">C</div>
506 | </div>
507 |  
508 | <div class="row">
509 |     <div class="col">A</div>
510 |     <div class="col  tc-last">B</div>
511 |     <div class="col">C</div>
512 | </div>
513 | 514 |
515 |
516 |

Order ile Sıra Değiştir 10'a kadar destekler

517 |
518 | 519 |
520 | 521 |
522 |
A 01
523 |
B 02
524 |
C 03
525 |
D 04
526 |
527 | 528 |
529 | 530 | 
<div class="row">
531 |     <div class="col order-4"> A 01 </div>
532 |     <div class="col order-3"> B 02 </div>
533 |     <div class="col order-1"> C 03 </div>
534 |     <div class="col order-2"> D 04 </div>
535 | </div>
536 | 537 | 538 |
539 |
540 |

Ekrana göre formatlama destekler

541 |
542 | 543 |
544 | 545 |
546 |
A 01
547 |
B 02
548 |
C 03
549 |
D 04
550 |
551 | 552 |
553 | 554 | 
<div class="row">
555 |     <div class="col order-4 order-xs-1"> A 01 </div>
556 |     <div class="col order-3"> B 02 </div>
557 |     <div class="col order-1 order-xs-4"> C 03 </div>
558 |     <div class="col order-2"> D 04 </div>
559 | </div>
560 | 561 | 562 |
563 |
564 |
11
565 |
566 |

Between Dağılımı

567 |

sütunlar birbirlerinde ortanlı olarak ayrılarak tüm kasaya yayılı

568 |
569 | 570 |
571 | 572 |
573 |
A
574 |
A
575 |
A
576 |
A
577 |
578 | 579 |
580 | 
<div class="row between">
581 |     <div class="col-2"></div>
582 |     <div class="col-2"></div>
583 |     <div class="col-2"></div>
584 |     <div class="col-2"></div>
585 | </div>
586 |
587 |
588 |
12
589 |
590 |

Around Dağılımı

591 |

sütunlar merkezde toplanarak birbirlerinde ortanlı olarak ayrılır

592 |
593 | 594 |
595 | 596 |
597 |
A
598 |
B
599 |
C
600 |
601 | 602 |
603 | 
<div class="row around">
604 |     <div class="col-3"></div>
605 |     <div class="col-3"></div>
606 |     <div class="col-3"></div>
607 | </div>
608 |
609 |
610 |
13
611 |
612 |

Center Dağılım

613 |

sütunlar merkezde kalacak şekilde ortalanır

614 |
615 | 616 |
617 | 618 |
619 |
A
620 |
B
621 |
C
622 |
623 | 624 |
625 | 
<div class="row center">
626 | 	<div class="col-2"></div>
627 | 	<div class="col-2"></div>
628 | 	<div class="col-2"></div>
629 | </div>
630 |
631 |
632 |
14
633 |
634 |

Offset Öteleme

635 |

left yada right yönünde sütunları öteleyebiliriz

636 |
637 | 638 |
639 | 640 | 641 |
642 |
A
643 |
B
644 |
C
645 |
646 | 647 | 648 |
649 | 
<div class="row center">
650 |     <div class="col-1 left-5 right-5"></div>
651 |     <div class="col-2 left-5 right-5"></div>
652 |     <div class="col-3 left-4 right-4"></div>
653 | </div>
654 | 655 | 656 |
657 |
658 |

Farklı Örnekler

659 |
660 | 661 |
662 |
663 |
A
664 |
B
665 |
666 | 667 |
668 |
A
669 |
B
670 |
671 |
672 | 673 | 
<div class="row">
674 |     <div class="col-2 right-10"></div>
675 |     <div class="col-4 right-8"></div>
676 | </div>
677 | 
678 | <div class="row">
679 |     <div class="col-2 left-10">/div>
680 |     <div class="col-4 left-8"></div>
681 | </div>
682 | 683 |
684 |
685 |

Ekran Aralığı Desteği Var

686 |
687 | 688 |
689 |
690 |
A
691 |
B
692 |
693 |
694 | 695 | 
<div class="sam">
696 | 	<div class="row">
697 | 	    <div class="col-2 right-5 right-xs-7"></div>
698 | 	    <div class="col-4 col-sm-6 left-3 left-sm-5"></div>
699 | 	</div>
700 | </div>
701 |
702 |
703 |
15
704 |
705 |

Sütun Alt Boşluk Sıfırlama

706 |

c-nb( col no bottom ) etiketi ile row'un sütunlarının padding-bottom aralığını iptal eder

707 |
708 | 709 |
710 |
711 |
A
712 |
B
713 |
C
714 |
715 |
716 | 717 | 
<div class="row c-nb">
718 |     <div class="col"></div>
719 |     <div class="col"></div>
720 |     <div class="col"></div>
721 | </div>
722 | 723 | 724 |
725 |
726 |

c-ob (child on-bottom) etiketi ile istediğimiz grid modunda aktif edebilme desteği vardır

727 |
728 | 729 |
730 |
731 |
A
732 |
B
733 |
C
734 |
735 |
736 | 737 | 
<div class="row c-nb c-ob-sm direct-y-sm">
738 |     <div class="col"></div>
739 |     <div class="col"></div>
740 |     <div class="col"></div>
741 | </div>
742 | 743 | 744 | 745 |
746 |
747 |

tc-nb (this col no-bottom) etiketi ile istediğiniz col'un bottom gutter'ı kaldırır

748 |
749 | 750 |
751 |
752 |
A
753 |
B
754 |
C
755 |
756 |
757 | 758 | 
<div class="row bottom">
759 |     <div class="col"><span>A</span></div>
760 |     <div class="col tc-nb"><span>B</span></div>
761 |     <div class="col"><span>C</span></div>
762 | </div>
763 | 764 | 765 | 766 |
767 |
768 |

tc-ns (this col no-space) etiketi ile istediğimiz col'un tüm gutter boşluklarını kaldırır

769 |
770 | 771 |
772 |
773 |
A
774 |
B
775 |
C
776 |
777 |
778 | 779 | 
<div class="row bottom">
780 |     <div class="col"><span>A</span></div>
781 |     <div class="col tc-ns"><span>B</span></div>
782 |     <div class="col"><span>C</span></div>
783 | </div>
784 | 785 | 786 |
787 |
788 |
16
789 |
790 |

Eşit Yükseklik

791 |

iki yol var birincisi c-eh ( Col Equal Height ) methodu. Bu etiket col altındaki ilk elemente height 100% verir ve blocklar eşitlenir.

792 |
793 | 794 |
795 |
796 |
A (180 PX)
797 |
B
798 |
799 |
800 | 
<div class="row">
801 | <div class="col"><span>A</span></div>
802 | <div class="col"><span>B</span></div>
803 | </div>
804 | 805 | 806 |
807 |
808 |

İkinci yol ise c-eh-2 methodudur. Bu etiket col'a ve altındaki ilk elemente flex özelliği sağlayarak eşitler

809 |
810 | 811 |
812 |
813 |
A (180 PX)
814 |
B
815 |
816 |
817 | 818 | 
<div class="row c-eh-2">
819 |     <div class="col"><span>A</span></div>
820 |     <div class="col"><span>B</span></div>
821 | </div>
822 | 823 |
824 |
825 |
17
826 |
827 |

Aralık Ölçüleri

828 |

Sayfa içinde spesifik bir yerde gutter boşluğunu genel yada belirli media boyunda geniş veya dar olmasını istersek -gut-, gut- etiketlerini kullanabiliriz. Varsayılanda iki boy vardır, set.scss dosyasından daha fazla üretebilirsiniz

829 |
830 | 831 |
832 |
833 |
834 |
835 |
836 |
A
837 |
B
838 |
C
839 |
D
840 |
841 |
842 | 
<div class="row">
843 |     <div class="col">A</div>
844 |     <div class="col">B</div>
845 |     <div class="col">C</div>
846 |     <div class="col">D</div>
847 | </div>
848 |
849 |
850 |
851 |
852 |
A
853 |
B
854 |
C
855 |
D
856 |
857 |
858 | 
<div class="row -gut-1 ">
859 |     <div class="col">A</div>
860 |     <div class="col">B</div>
861 |     <div class="col">C</div>
862 |     <div class="col">D</div>
863 | </div>
864 |
865 | 866 |
867 |
868 |
869 |
A
870 |
B
871 |
C
872 |
D
873 |
874 |
875 | 
<div class="row -gut-2">
876 |     <div class="col">A</div>
877 |     <div class="col">B</div>
878 |     <div class="col">C</div>
879 |     <div class="col">D</div>
880 | </div>
881 |
882 | 883 | 884 |
885 | 886 |
887 | 888 | 889 | 890 |
891 |
892 |

Büyük Gutter Boşluğu

893 |
894 | 895 |
896 |
897 |
898 |
899 |
900 |
A
901 |
B
902 |
C
903 |
D
904 |
905 |
906 | 
<div class="row">
907 |     <div class="col">A</div>
908 |     <div class="col">B</div>
909 |     <div class="col">C</div>
910 |     <div class="col">D</div>
911 | </div>
912 |
913 |
914 |
915 |
916 |
A
917 |
B
918 |
C
919 |
D
920 |
921 |
922 | 
<div class="row gut-1">
923 |     <div class="col">A</div>
924 |     <div class="col">B</div>
925 |     <div class="col">C</div>
926 |     <div class="col">D</div>
927 | </div>
928 |
929 | 930 |
931 |
932 |
933 |
A
934 |
B
935 |
C
936 |
D
937 |
938 |
939 | 
<div class="row gut-2">
940 |     <div class="col">A</div>
941 |     <div class="col">B</div>
942 |     <div class="col">C</div>
943 |     <div class="col">D</div>
944 | </div>
945 |
946 | 947 | 948 |
949 | 950 |
951 | 952 |
953 |
954 |

Ekran Aralığı Desteği Var

955 |
956 | 957 |
958 |
959 | 960 |
961 |
962 |
A
963 |
B
964 |
965 |
966 | 967 |
968 |
969 | 970 | 
 <div class="row gut-2 -gut-1-xs">
971 |     <div class="col"></div>
972 |     <div class="col"></div>
973 | </div>
974 | 975 |
976 | 977 | 978 |
979 | 980 | 981 | 982 | 983 | 984 | -------------------------------------------------------------------------------- /dist/grid.min.css: -------------------------------------------------------------------------------- 1 | [class*=row]{--rg:1rem;--cg:1rem;display:flex;flex-flow:row wrap;box-sizing:border-box;column-gap:var(--cg);row-gap:var(--rg)}[class*=row]>[class*=col]{flex:1 1 0%;box-sizing:border-box}[class*=row]>[class*=col-]{flex:none}[class*=row]>.col{flex:1 1 0%}[class*=row][class*=col]{margin-left:0;margin-right:0;padding-left:0;padding-right:0}.row-1>[class*=col]{flex-basis:calc(100% - (var(--cg) * 0 / 1));max-width:calc(100% - (var(--cg) * 0 / 1))}.row-2>[class*=col]{flex-basis:calc(50% - (var(--cg) * 1 / 2));max-width:calc(50% - (var(--cg) * 1 / 2))}.row-3>[class*=col]{flex-basis:calc(33.3333333333% - (var(--cg) * 2 / 3));max-width:calc(33.3333333333% - (var(--cg) * 2 / 3))}.row-4>[class*=col]{flex-basis:calc(25% - (var(--cg) * 3 / 4));max-width:calc(25% - (var(--cg) * 3 / 4))}.row-5>[class*=col]{flex-basis:calc(20% - (var(--cg) * 4 / 5));max-width:calc(20% - (var(--cg) * 4 / 5))}.row-6>[class*=col]{flex-basis:calc(16.6666666667% - (var(--cg) * 5 / 6));max-width:calc(16.6666666667% - (var(--cg) * 5 / 6))}.row-7>[class*=col]{flex-basis:calc(14.2857142857% - (var(--cg) * 6 / 7));max-width:calc(14.2857142857% - (var(--cg) * 6 / 7))}.row-8>[class*=col]{flex-basis:calc(12.5% - (var(--cg) * 7 / 8));max-width:calc(12.5% - (var(--cg) * 7 / 8))}.row-9>[class*=col]{flex-basis:calc(11.1111111111% - (var(--cg) * 8 / 9));max-width:calc(11.1111111111% - (var(--cg) * 8 / 9))}.row-10>[class*=col]{flex-basis:calc(10% - (var(--cg) * 9 / 10));max-width:calc(10% - (var(--cg) * 9 / 10))}.row-11>[class*=col]{flex-basis:calc(9.0909090909% - (var(--cg) * 10 / 11));max-width:calc(9.0909090909% - (var(--cg) * 10 / 11))}.row-12>[class*=col]{flex-basis:calc(8.3333333333% - (var(--cg) * 11 / 12));max-width:calc(8.3333333333% - (var(--cg) * 11 / 12))}[class*=row]>.col-1{flex-basis:calc(8.3333333333% - (var(--cg) * 0 / 1));max-width:calc(8.3333333333% - (var(--cg) * 0 / 1))}[class*=row]>.col-2{flex-basis:calc(16.6666666667% - (var(--cg) * 1 / 2));max-width:calc(16.6666666667% - (var(--cg) * 1 / 2))}[class*=row]>.col-3{flex-basis:calc(25% - (var(--cg) * 2 / 3));max-width:calc(25% - (var(--cg) * 2 / 3))}[class*=row]>.col-4{flex-basis:calc(33.3333333333% - (var(--cg) * 3 / 4));max-width:calc(33.3333333333% - (var(--cg) * 3 / 4))}[class*=row]>.col-5{flex-basis:calc(41.6666666667% - (var(--cg) * 4 / 5));max-width:calc(41.6666666667% - (var(--cg) * 4 / 5))}[class*=row]>.col-6{flex-basis:calc(50% - (var(--cg) * 5 / 6));max-width:calc(50% - (var(--cg) * 5 / 6))}[class*=row]>.col-7{flex-basis:calc(58.3333333333% - (var(--cg) * 6 / 7));max-width:calc(58.3333333333% - (var(--cg) * 6 / 7))}[class*=row]>.col-8{flex-basis:calc(66.6666666667% - (var(--cg) * 7 / 8));max-width:calc(66.6666666667% - (var(--cg) * 7 / 8))}[class*=row]>.col-9{flex-basis:calc(75% - (var(--cg) * 8 / 9));max-width:calc(75% - (var(--cg) * 8 / 9))}[class*=row]>.col-10{flex-basis:calc(83.3333333333% - (var(--cg) * 9 / 10));max-width:calc(83.3333333333% - (var(--cg) * 9 / 10))}[class*=row]>.col-11{flex-basis:calc(91.6666666667% - (var(--cg) * 10 / 11));max-width:calc(91.6666666667% - (var(--cg) * 10 / 11))}[class*=row]>.col-12{flex-basis:calc(100% - (var(--cg) * 11 / 12));max-width:calc(100% - (var(--cg) * 11 / 12))}[class*=row].gut-1{--cg:1.5rem;--rg:1.5rem}[class*=row].gut-1.c-op{--cg:1.5rem}[class*=row].gut-1 .tc-ob{padding-bottom:1.5rem}[class*=row].gut-2{--cg:2.5rem;--rg:2.5rem}[class*=row].gut-2.c-op{--cg:2.5rem}[class*=row].gut-2 .tc-ob{padding-bottom:2.5rem}[class*=row].-gut-1{--cg:0.6rem;--rg:0.6rem}[class*=row].-gut-1.c-op{--cg:0.6rem}[class*=row].-gut-1 .tc-ob{padding-bottom:.6rem}[class*=row].-gut-2{--cg:0.3rem;--rg:0.3rem}[class*=row].-gut-2.c-op{--cg:0.3rem}[class*=row].-gut-2 .tc-ob{padding-bottom:.3rem}[class*=row].gut-0{--cg:1rem;--rg:1rem}[class*=row].gut-0.c-op{--cg:1rem}[class*=row].gut-0 .tc-ob{padding-bottom:1rem}[class*=row].center{justify-content:center}[class*=row].end{justify-content:flex-end}[class*=row].start{justify-content:flex-start}[class*=row].between{justify-content:space-between}[class*=row].around{justify-content:space-around}[class*=row].top{align-items:flex-start}[class*=row].middle{align-items:center}[class*=row].bottom{align-items:flex-end}[class*=row].stretch{align-items:stretch}[class*=row].baseline{align-items:baseline}[class*=row].direct-x{flex-direction:row}[class*=row].direct-xr{flex-direction:row-reverse}[class*=row].direct-yr{flex-direction:column-reverse}[class*=row].direct-y{flex-direction:column}[class*=row].direct-y>[class*=col],[class*=row].direct-yr>[class*=col]{flex-basis:auto;width:100%}[class*=row].c-op{column-gap:var(--cg)}[class*=row].c-nb{row-gap:0}[class*=row].c-ob{row-gap:var(--cg)}[class*=row].c-nf>*{flex:none}[class*=row].ns,[class*=row].nsc{--rg:0;--cg:0}[class*=row].nsc{margin-left:auto;margin-right:auto}[class*=row].c-eh>*>*{height:100%;width:100%;display:block}[class*=row].c-eh-2>*{display:flex}[class*=row].c-eh-2>*>*{flex:1 0 100%}[class*=row] .tc-top{align-self:flex-start}[class*=row] .tc-middle{align-self:center}[class*=row] .tc-bottom{align-self:flex-end}[class*=row] .tc-first{order:-1}[class*=row] .tc-last,[class*=row]>.order-1{order:1}[class*=row] .tc-ns{padding-left:0;padding-right:0;padding-bottom:0}[class*=row] .tc-ob{padding-bottom:1rem}[class*=row] .tc-nb{padding-bottom:0!important}[class*=row]>.left-0{margin-left:0}[class*=row]>.right-0{margin-right:0}[class*=row]>.left-1{margin-left:8.3333333333%}[class*=row]>.left-2{margin-left:16.6666666667%}[class*=row]>.left-3{margin-left:25%}[class*=row]>.left-4{margin-left:33.3333333333%}[class*=row]>.left-5{margin-left:41.6666666667%}[class*=row]>.left-6{margin-left:50%}[class*=row]>.left-7{margin-left:58.3333333333%}[class*=row]>.left-8{margin-left:66.6666666667%}[class*=row]>.left-9{margin-left:75%}[class*=row]>.left-10{margin-left:83.3333333333%}[class*=row]>.left-11{margin-left:91.6666666667%}[class*=row]>.right-1{margin-right:8.3333333333%}[class*=row]>.right-2{margin-right:16.6666666667%}[class*=row]>.right-3{margin-right:25%}[class*=row]>.right-4{margin-right:33.3333333333%}[class*=row]>.right-5{margin-right:41.6666666667%}[class*=row]>.right-6{margin-right:50%}[class*=row]>.right-7{margin-right:58.3333333333%}[class*=row]>.right-8{margin-right:66.6666666667%}[class*=row]>.right-9{margin-right:75%}[class*=row]>.right-10{margin-right:83.3333333333%}[class*=row]>.right-11{margin-right:91.6666666667%}[class*=row]>.order-2{order:2}[class*=row]>.order-3{order:3}[class*=row]>.order-4{order:4}[class*=row]>.order-5{order:5}[class*=row]>.order-6{order:6}[class*=row]>.order-7{order:7}[class*=row]>.order-8{order:8}[class*=row]>.order-9{order:9}[class*=row]>.order-10{order:10}[class*=row]>.order-11{order:11}[class*=row]>.order-12{order:12}[class*=row]>.order-13{order:13}[class*=row]>.order-14{order:14}[class*=row]>.order-15{order:15}[class*=row]>.order-16{order:16}[class*=row]>.order-17{order:17}[class*=row]>.order-18{order:18}[class*=row]>.order-19{order:19}[class*=row]>.order-20{order:20}@media screen and (max-width:80em){.row-lg-1>[class*=col]{flex-basis:calc(100% - (var(--cg) * 0 / 1));max-width:calc(100% - (var(--cg) * 0 / 1))}.row-lg-2>[class*=col]{flex-basis:calc(50% - (var(--cg) * 1 / 2));max-width:calc(50% - (var(--cg) * 1 / 2))}.row-lg-3>[class*=col]{flex-basis:calc(33.3333333333% - (var(--cg) * 2 / 3));max-width:calc(33.3333333333% - (var(--cg) * 2 / 3))}.row-lg-4>[class*=col]{flex-basis:calc(25% - (var(--cg) * 3 / 4));max-width:calc(25% - (var(--cg) * 3 / 4))}.row-lg-5>[class*=col]{flex-basis:calc(20% - (var(--cg) * 4 / 5));max-width:calc(20% - (var(--cg) * 4 / 5))}.row-lg-6>[class*=col]{flex-basis:calc(16.6666666667% - (var(--cg) * 5 / 6));max-width:calc(16.6666666667% - (var(--cg) * 5 / 6))}.row-lg-7>[class*=col]{flex-basis:calc(14.2857142857% - (var(--cg) * 6 / 7));max-width:calc(14.2857142857% - (var(--cg) * 6 / 7))}.row-lg-8>[class*=col]{flex-basis:calc(12.5% - (var(--cg) * 7 / 8));max-width:calc(12.5% - (var(--cg) * 7 / 8))}.row-lg-9>[class*=col]{flex-basis:calc(11.1111111111% - (var(--cg) * 8 / 9));max-width:calc(11.1111111111% - (var(--cg) * 8 / 9))}.row-lg-10>[class*=col]{flex-basis:calc(10% - (var(--cg) * 9 / 10));max-width:calc(10% - (var(--cg) * 9 / 10))}.row-lg-11>[class*=col]{flex-basis:calc(9.0909090909% - (var(--cg) * 10 / 11));max-width:calc(9.0909090909% - (var(--cg) * 10 / 11))}.row-lg-12>[class*=col]{flex-basis:calc(8.3333333333% - (var(--cg) * 11 / 12));max-width:calc(8.3333333333% - (var(--cg) * 11 / 12))}[class*=row]>.col-lg-1{flex-basis:calc(8.3333333333% - (var(--cg) * 0 / 1));max-width:calc(8.3333333333% - (var(--cg) * 0 / 1))}[class*=row]>.col-lg-2{flex-basis:calc(16.6666666667% - (var(--cg) * 1 / 2));max-width:calc(16.6666666667% - (var(--cg) * 1 / 2))}[class*=row]>.col-lg-3{flex-basis:calc(25% - (var(--cg) * 2 / 3));max-width:calc(25% - (var(--cg) * 2 / 3))}[class*=row]>.col-lg-4{flex-basis:calc(33.3333333333% - (var(--cg) * 3 / 4));max-width:calc(33.3333333333% - (var(--cg) * 3 / 4))}[class*=row]>.col-lg-5{flex-basis:calc(41.6666666667% - (var(--cg) * 4 / 5));max-width:calc(41.6666666667% - (var(--cg) * 4 / 5))}[class*=row]>.col-lg-6{flex-basis:calc(50% - (var(--cg) * 5 / 6));max-width:calc(50% - (var(--cg) * 5 / 6))}[class*=row]>.col-lg-7{flex-basis:calc(58.3333333333% - (var(--cg) * 6 / 7));max-width:calc(58.3333333333% - (var(--cg) * 6 / 7))}[class*=row]>.col-lg-8{flex-basis:calc(66.6666666667% - (var(--cg) * 7 / 8));max-width:calc(66.6666666667% - (var(--cg) * 7 / 8))}[class*=row]>.col-lg-9{flex-basis:calc(75% - (var(--cg) * 8 / 9));max-width:calc(75% - (var(--cg) * 8 / 9))}[class*=row]>.col-lg-10{flex-basis:calc(83.3333333333% - (var(--cg) * 9 / 10));max-width:calc(83.3333333333% - (var(--cg) * 9 / 10))}[class*=row]>.col-lg-11{flex-basis:calc(91.6666666667% - (var(--cg) * 10 / 11));max-width:calc(91.6666666667% - (var(--cg) * 10 / 11))}[class*=row]>.col-lg-12{flex-basis:calc(100% - (var(--cg) * 11 / 12));max-width:calc(100% - (var(--cg) * 11 / 12))}[class*=row].gut-1-lg{--cg:1.5rem;--rg:1.5rem}[class*=row].gut-1-lg.c-op{--cg:1.5rem}[class*=row].gut-1-lg.c-ob,[class*=row].gut-1-lg.c-ob-lg,[class*=row].gut-1-lg.c-ob-md,[class*=row].gut-1-lg.c-ob-ms,[class*=row].gut-1-lg.c-ob-sm,[class*=row].gut-1-lg.c-ob-xs{--rg:1.5rem}[class*=row].gut-1-lg .tc-lg-ob{padding-bottom:1.5rem}[class*=row].gut-2-lg{--cg:2.5rem;--rg:2.5rem}[class*=row].gut-2-lg.c-op{--cg:2.5rem}[class*=row].gut-2-lg.c-ob,[class*=row].gut-2-lg.c-ob-lg,[class*=row].gut-2-lg.c-ob-md,[class*=row].gut-2-lg.c-ob-ms,[class*=row].gut-2-lg.c-ob-sm,[class*=row].gut-2-lg.c-ob-xs{--rg:2.5rem}[class*=row].gut-2-lg .tc-lg-ob{padding-bottom:2.5rem}[class*=row].-gut-1-lg{--cg:0.6rem;--rg:0.6rem}[class*=row].-gut-1-lg.c-op{--cg:0.6rem}[class*=row].-gut-1-lg.c-ob,[class*=row].-gut-1-lg.c-ob-lg,[class*=row].-gut-1-lg.c-ob-md,[class*=row].-gut-1-lg.c-ob-ms,[class*=row].-gut-1-lg.c-ob-sm,[class*=row].-gut-1-lg.c-ob-xs{--rg:0.6rem}[class*=row].-gut-1-lg .tc-lg-ob{padding-bottom:.6rem}[class*=row].-gut-2-lg{--cg:0.3rem;--rg:0.3rem}[class*=row].-gut-2-lg.c-op{--cg:0.3rem}[class*=row].-gut-2-lg.c-ob,[class*=row].-gut-2-lg.c-ob-lg,[class*=row].-gut-2-lg.c-ob-md,[class*=row].-gut-2-lg.c-ob-ms,[class*=row].-gut-2-lg.c-ob-sm,[class*=row].-gut-2-lg.c-ob-xs{--rg:0.3rem}[class*=row].-gut-2-lg .tc-lg-ob{padding-bottom:.3rem}[class*=row].gut-0-lg{--cg:1rem;--rg:1rem}[class*=row].gut-0-lg.c-op{--cg:1rem}[class*=row].gut-0-lg.c-ob,[class*=row].gut-0-lg.c-ob-lg,[class*=row].gut-0-lg.c-ob-md,[class*=row].gut-0-lg.c-ob-ms,[class*=row].gut-0-lg.c-ob-sm,[class*=row].gut-0-lg.c-ob-xs{--rg:1rem}[class*=row].gut-0-lg .tc-lg-ob{padding-bottom:1rem}[class*=row].center-lg{justify-content:center}[class*=row].end-lg{justify-content:flex-end}[class*=row].start-lg{justify-content:flex-start}[class*=row].between-lg{justify-content:space-between}[class*=row].around-lg{justify-content:space-around}[class*=row].top-lg{align-items:flex-start}[class*=row].middle-lg{align-items:center}[class*=row].bottom-lg{align-items:flex-end}[class*=row].stretch-lg{align-items:stretch}[class*=row].baseline-lg{align-items:baseline}[class*=row].direct-x-lg{flex-direction:row}[class*=row].direct-xr-lg{flex-direction:row-reverse}[class*=row].direct-yr-lg{flex-direction:column-reverse}[class*=row].direct-y-lg{flex-direction:column}[class*=row].direct-y-lg>[class*=col],[class*=row].direct-yr-lg>[class*=col]{flex-basis:auto;width:100%}[class*=row].c-op-lg{column-gap:var(--cg)}[class*=row].c-nb-lg{row-gap:0}[class*=row].c-ob-lg{row-gap:var(--cg)}[class*=row].c-nf-lg>*{flex:none}[class*=row].ns-lg,[class*=row].nsc-lg{--rg:0;--cg:0}[class*=row] .tc-lg-top{align-self:flex-start}[class*=row] .tc-lg-middle{align-self:center}[class*=row] .tc-lg-bottom{align-self:flex-end}[class*=row] .tc-lg-first{order:-1}[class*=row] .tc-lg-last,[class*=row]>.order-lg-1{order:1}[class*=row] .tc-lg-ns{padding-left:0;padding-right:0;padding-bottom:0}[class*=row] .tc-lg-ob{padding-bottom:1rem}[class*=row] .tc-lg-nb{padding-bottom:0!important}[class*=row]>.left-lg-0{margin-left:0}[class*=row]>.right-lg-0{margin-right:0}[class*=row]>.left-lg-1{margin-left:8.3333333333%}[class*=row]>.left-lg-2{margin-left:16.6666666667%}[class*=row]>.left-lg-3{margin-left:25%}[class*=row]>.left-lg-4{margin-left:33.3333333333%}[class*=row]>.left-lg-5{margin-left:41.6666666667%}[class*=row]>.left-lg-6{margin-left:50%}[class*=row]>.left-lg-7{margin-left:58.3333333333%}[class*=row]>.left-lg-8{margin-left:66.6666666667%}[class*=row]>.left-lg-9{margin-left:75%}[class*=row]>.left-lg-10{margin-left:83.3333333333%}[class*=row]>.left-lg-11{margin-left:91.6666666667%}[class*=row]>.right-lg-1{margin-right:8.3333333333%}[class*=row]>.right-lg-2{margin-right:16.6666666667%}[class*=row]>.right-lg-3{margin-right:25%}[class*=row]>.right-lg-4{margin-right:33.3333333333%}[class*=row]>.right-lg-5{margin-right:41.6666666667%}[class*=row]>.right-lg-6{margin-right:50%}[class*=row]>.right-lg-7{margin-right:58.3333333333%}[class*=row]>.right-lg-8{margin-right:66.6666666667%}[class*=row]>.right-lg-9{margin-right:75%}[class*=row]>.right-lg-10{margin-right:83.3333333333%}[class*=row]>.right-lg-11{margin-right:91.6666666667%}[class*=row]>.order-lg-2{order:2}[class*=row]>.order-lg-3{order:3}[class*=row]>.order-lg-4{order:4}[class*=row]>.order-lg-5{order:5}[class*=row]>.order-lg-6{order:6}[class*=row]>.order-lg-7{order:7}[class*=row]>.order-lg-8{order:8}[class*=row]>.order-lg-9{order:9}[class*=row]>.order-lg-10{order:10}[class*=row]>.order-lg-11{order:11}[class*=row]>.order-lg-12{order:12}[class*=row]>.order-lg-13{order:13}[class*=row]>.order-lg-14{order:14}[class*=row]>.order-lg-15{order:15}[class*=row]>.order-lg-16{order:16}[class*=row]>.order-lg-17{order:17}[class*=row]>.order-lg-18{order:18}[class*=row]>.order-lg-19{order:19}[class*=row]>.order-lg-20{order:20}}@media screen and (max-width:64em){.row-md-1>[class*=col]{flex-basis:calc(100% - (var(--cg) * 0 / 1));max-width:calc(100% - (var(--cg) * 0 / 1))}.row-md-2>[class*=col]{flex-basis:calc(50% - (var(--cg) * 1 / 2));max-width:calc(50% - (var(--cg) * 1 / 2))}.row-md-3>[class*=col]{flex-basis:calc(33.3333333333% - (var(--cg) * 2 / 3));max-width:calc(33.3333333333% - (var(--cg) * 2 / 3))}.row-md-4>[class*=col]{flex-basis:calc(25% - (var(--cg) * 3 / 4));max-width:calc(25% - (var(--cg) * 3 / 4))}.row-md-5>[class*=col]{flex-basis:calc(20% - (var(--cg) * 4 / 5));max-width:calc(20% - (var(--cg) * 4 / 5))}.row-md-6>[class*=col]{flex-basis:calc(16.6666666667% - (var(--cg) * 5 / 6));max-width:calc(16.6666666667% - (var(--cg) * 5 / 6))}.row-md-7>[class*=col]{flex-basis:calc(14.2857142857% - (var(--cg) * 6 / 7));max-width:calc(14.2857142857% - (var(--cg) * 6 / 7))}.row-md-8>[class*=col]{flex-basis:calc(12.5% - (var(--cg) * 7 / 8));max-width:calc(12.5% - (var(--cg) * 7 / 8))}.row-md-9>[class*=col]{flex-basis:calc(11.1111111111% - (var(--cg) * 8 / 9));max-width:calc(11.1111111111% - (var(--cg) * 8 / 9))}.row-md-10>[class*=col]{flex-basis:calc(10% - (var(--cg) * 9 / 10));max-width:calc(10% - (var(--cg) * 9 / 10))}.row-md-11>[class*=col]{flex-basis:calc(9.0909090909% - (var(--cg) * 10 / 11));max-width:calc(9.0909090909% - (var(--cg) * 10 / 11))}.row-md-12>[class*=col]{flex-basis:calc(8.3333333333% - (var(--cg) * 11 / 12));max-width:calc(8.3333333333% - (var(--cg) * 11 / 12))}[class*=row]>.col-md-1{flex-basis:calc(8.3333333333% - (var(--cg) * 0 / 1));max-width:calc(8.3333333333% - (var(--cg) * 0 / 1))}[class*=row]>.col-md-2{flex-basis:calc(16.6666666667% - (var(--cg) * 1 / 2));max-width:calc(16.6666666667% - (var(--cg) * 1 / 2))}[class*=row]>.col-md-3{flex-basis:calc(25% - (var(--cg) * 2 / 3));max-width:calc(25% - (var(--cg) * 2 / 3))}[class*=row]>.col-md-4{flex-basis:calc(33.3333333333% - (var(--cg) * 3 / 4));max-width:calc(33.3333333333% - (var(--cg) * 3 / 4))}[class*=row]>.col-md-5{flex-basis:calc(41.6666666667% - (var(--cg) * 4 / 5));max-width:calc(41.6666666667% - (var(--cg) * 4 / 5))}[class*=row]>.col-md-6{flex-basis:calc(50% - (var(--cg) * 5 / 6));max-width:calc(50% - (var(--cg) * 5 / 6))}[class*=row]>.col-md-7{flex-basis:calc(58.3333333333% - (var(--cg) * 6 / 7));max-width:calc(58.3333333333% - (var(--cg) * 6 / 7))}[class*=row]>.col-md-8{flex-basis:calc(66.6666666667% - (var(--cg) * 7 / 8));max-width:calc(66.6666666667% - (var(--cg) * 7 / 8))}[class*=row]>.col-md-9{flex-basis:calc(75% - (var(--cg) * 8 / 9));max-width:calc(75% - (var(--cg) * 8 / 9))}[class*=row]>.col-md-10{flex-basis:calc(83.3333333333% - (var(--cg) * 9 / 10));max-width:calc(83.3333333333% - (var(--cg) * 9 / 10))}[class*=row]>.col-md-11{flex-basis:calc(91.6666666667% - (var(--cg) * 10 / 11));max-width:calc(91.6666666667% - (var(--cg) * 10 / 11))}[class*=row]>.col-md-12{flex-basis:calc(100% - (var(--cg) * 11 / 12));max-width:calc(100% - (var(--cg) * 11 / 12))}[class*=row].gut-1-md{--cg:1.5rem;--rg:1.5rem}[class*=row].gut-1-md.c-op{--cg:1.5rem}[class*=row].gut-1-md.c-ob,[class*=row].gut-1-md.c-ob-lg,[class*=row].gut-1-md.c-ob-md,[class*=row].gut-1-md.c-ob-ms,[class*=row].gut-1-md.c-ob-sm,[class*=row].gut-1-md.c-ob-xs{--rg:1.5rem}[class*=row].gut-1-md .tc-md-ob{padding-bottom:1.5rem}[class*=row].gut-2-md{--cg:2.5rem;--rg:2.5rem}[class*=row].gut-2-md.c-op{--cg:2.5rem}[class*=row].gut-2-md.c-ob,[class*=row].gut-2-md.c-ob-lg,[class*=row].gut-2-md.c-ob-md,[class*=row].gut-2-md.c-ob-ms,[class*=row].gut-2-md.c-ob-sm,[class*=row].gut-2-md.c-ob-xs{--rg:2.5rem}[class*=row].gut-2-md .tc-md-ob{padding-bottom:2.5rem}[class*=row].-gut-1-md{--cg:0.6rem;--rg:0.6rem}[class*=row].-gut-1-md.c-op{--cg:0.6rem}[class*=row].-gut-1-md.c-ob,[class*=row].-gut-1-md.c-ob-lg,[class*=row].-gut-1-md.c-ob-md,[class*=row].-gut-1-md.c-ob-ms,[class*=row].-gut-1-md.c-ob-sm,[class*=row].-gut-1-md.c-ob-xs{--rg:0.6rem}[class*=row].-gut-1-md .tc-md-ob{padding-bottom:.6rem}[class*=row].-gut-2-md{--cg:0.3rem;--rg:0.3rem}[class*=row].-gut-2-md.c-op{--cg:0.3rem}[class*=row].-gut-2-md.c-ob,[class*=row].-gut-2-md.c-ob-lg,[class*=row].-gut-2-md.c-ob-md,[class*=row].-gut-2-md.c-ob-ms,[class*=row].-gut-2-md.c-ob-sm,[class*=row].-gut-2-md.c-ob-xs{--rg:0.3rem}[class*=row].-gut-2-md .tc-md-ob{padding-bottom:.3rem}[class*=row].gut-0-md{--cg:1rem;--rg:1rem}[class*=row].gut-0-md.c-op{--cg:1rem}[class*=row].gut-0-md.c-ob,[class*=row].gut-0-md.c-ob-lg,[class*=row].gut-0-md.c-ob-md,[class*=row].gut-0-md.c-ob-ms,[class*=row].gut-0-md.c-ob-sm,[class*=row].gut-0-md.c-ob-xs{--rg:1rem}[class*=row].gut-0-md .tc-md-ob{padding-bottom:1rem}[class*=row].center-md{justify-content:center}[class*=row].end-md{justify-content:flex-end}[class*=row].start-md{justify-content:flex-start}[class*=row].between-md{justify-content:space-between}[class*=row].around-md{justify-content:space-around}[class*=row].top-md{align-items:flex-start}[class*=row].middle-md{align-items:center}[class*=row].bottom-md{align-items:flex-end}[class*=row].stretch-md{align-items:stretch}[class*=row].baseline-md{align-items:baseline}[class*=row].direct-x-md{flex-direction:row}[class*=row].direct-xr-md{flex-direction:row-reverse}[class*=row].direct-yr-md{flex-direction:column-reverse}[class*=row].direct-y-md{flex-direction:column}[class*=row].direct-y-md>[class*=col],[class*=row].direct-yr-md>[class*=col]{flex-basis:auto;width:100%}[class*=row].c-op-md{column-gap:var(--cg)}[class*=row].c-nb-md{row-gap:0}[class*=row].c-ob-md{row-gap:var(--cg)}[class*=row].c-nf-md>*{flex:none}[class*=row].ns-md,[class*=row].nsc-md{--rg:0;--cg:0}[class*=row] .tc-md-top{align-self:flex-start}[class*=row] .tc-md-middle{align-self:center}[class*=row] .tc-md-bottom{align-self:flex-end}[class*=row] .tc-md-first{order:-1}[class*=row] .tc-md-last,[class*=row]>.order-md-1{order:1}[class*=row] .tc-md-ns{padding-left:0;padding-right:0;padding-bottom:0}[class*=row] .tc-md-ob{padding-bottom:1rem}[class*=row] .tc-md-nb{padding-bottom:0!important}[class*=row]>.left-md-0{margin-left:0}[class*=row]>.right-md-0{margin-right:0}[class*=row]>.left-md-1{margin-left:8.3333333333%}[class*=row]>.left-md-2{margin-left:16.6666666667%}[class*=row]>.left-md-3{margin-left:25%}[class*=row]>.left-md-4{margin-left:33.3333333333%}[class*=row]>.left-md-5{margin-left:41.6666666667%}[class*=row]>.left-md-6{margin-left:50%}[class*=row]>.left-md-7{margin-left:58.3333333333%}[class*=row]>.left-md-8{margin-left:66.6666666667%}[class*=row]>.left-md-9{margin-left:75%}[class*=row]>.left-md-10{margin-left:83.3333333333%}[class*=row]>.left-md-11{margin-left:91.6666666667%}[class*=row]>.right-md-1{margin-right:8.3333333333%}[class*=row]>.right-md-2{margin-right:16.6666666667%}[class*=row]>.right-md-3{margin-right:25%}[class*=row]>.right-md-4{margin-right:33.3333333333%}[class*=row]>.right-md-5{margin-right:41.6666666667%}[class*=row]>.right-md-6{margin-right:50%}[class*=row]>.right-md-7{margin-right:58.3333333333%}[class*=row]>.right-md-8{margin-right:66.6666666667%}[class*=row]>.right-md-9{margin-right:75%}[class*=row]>.right-md-10{margin-right:83.3333333333%}[class*=row]>.right-md-11{margin-right:91.6666666667%}[class*=row]>.order-md-2{order:2}[class*=row]>.order-md-3{order:3}[class*=row]>.order-md-4{order:4}[class*=row]>.order-md-5{order:5}[class*=row]>.order-md-6{order:6}[class*=row]>.order-md-7{order:7}[class*=row]>.order-md-8{order:8}[class*=row]>.order-md-9{order:9}[class*=row]>.order-md-10{order:10}[class*=row]>.order-md-11{order:11}[class*=row]>.order-md-12{order:12}[class*=row]>.order-md-13{order:13}[class*=row]>.order-md-14{order:14}[class*=row]>.order-md-15{order:15}[class*=row]>.order-md-16{order:16}[class*=row]>.order-md-17{order:17}[class*=row]>.order-md-18{order:18}[class*=row]>.order-md-19{order:19}[class*=row]>.order-md-20{order:20}}@media screen and (max-width:48em){.row-sm-1>[class*=col]{flex-basis:calc(100% - (var(--cg) * 0 / 1));max-width:calc(100% - (var(--cg) * 0 / 1))}.row-sm-2>[class*=col]{flex-basis:calc(50% - (var(--cg) * 1 / 2));max-width:calc(50% - (var(--cg) * 1 / 2))}.row-sm-3>[class*=col]{flex-basis:calc(33.3333333333% - (var(--cg) * 2 / 3));max-width:calc(33.3333333333% - (var(--cg) * 2 / 3))}.row-sm-4>[class*=col]{flex-basis:calc(25% - (var(--cg) * 3 / 4));max-width:calc(25% - (var(--cg) * 3 / 4))}.row-sm-5>[class*=col]{flex-basis:calc(20% - (var(--cg) * 4 / 5));max-width:calc(20% - (var(--cg) * 4 / 5))}.row-sm-6>[class*=col]{flex-basis:calc(16.6666666667% - (var(--cg) * 5 / 6));max-width:calc(16.6666666667% - (var(--cg) * 5 / 6))}.row-sm-7>[class*=col]{flex-basis:calc(14.2857142857% - (var(--cg) * 6 / 7));max-width:calc(14.2857142857% - (var(--cg) * 6 / 7))}.row-sm-8>[class*=col]{flex-basis:calc(12.5% - (var(--cg) * 7 / 8));max-width:calc(12.5% - (var(--cg) * 7 / 8))}.row-sm-9>[class*=col]{flex-basis:calc(11.1111111111% - (var(--cg) * 8 / 9));max-width:calc(11.1111111111% - (var(--cg) * 8 / 9))}.row-sm-10>[class*=col]{flex-basis:calc(10% - (var(--cg) * 9 / 10));max-width:calc(10% - (var(--cg) * 9 / 10))}.row-sm-11>[class*=col]{flex-basis:calc(9.0909090909% - (var(--cg) * 10 / 11));max-width:calc(9.0909090909% - (var(--cg) * 10 / 11))}.row-sm-12>[class*=col]{flex-basis:calc(8.3333333333% - (var(--cg) * 11 / 12));max-width:calc(8.3333333333% - (var(--cg) * 11 / 12))}[class*=row]>.col-sm-1{flex-basis:calc(8.3333333333% - (var(--cg) * 0 / 1));max-width:calc(8.3333333333% - (var(--cg) * 0 / 1))}[class*=row]>.col-sm-2{flex-basis:calc(16.6666666667% - (var(--cg) * 1 / 2));max-width:calc(16.6666666667% - (var(--cg) * 1 / 2))}[class*=row]>.col-sm-3{flex-basis:calc(25% - (var(--cg) * 2 / 3));max-width:calc(25% - (var(--cg) * 2 / 3))}[class*=row]>.col-sm-4{flex-basis:calc(33.3333333333% - (var(--cg) * 3 / 4));max-width:calc(33.3333333333% - (var(--cg) * 3 / 4))}[class*=row]>.col-sm-5{flex-basis:calc(41.6666666667% - (var(--cg) * 4 / 5));max-width:calc(41.6666666667% - (var(--cg) * 4 / 5))}[class*=row]>.col-sm-6{flex-basis:calc(50% - (var(--cg) * 5 / 6));max-width:calc(50% - (var(--cg) * 5 / 6))}[class*=row]>.col-sm-7{flex-basis:calc(58.3333333333% - (var(--cg) * 6 / 7));max-width:calc(58.3333333333% - (var(--cg) * 6 / 7))}[class*=row]>.col-sm-8{flex-basis:calc(66.6666666667% - (var(--cg) * 7 / 8));max-width:calc(66.6666666667% - (var(--cg) * 7 / 8))}[class*=row]>.col-sm-9{flex-basis:calc(75% - (var(--cg) * 8 / 9));max-width:calc(75% - (var(--cg) * 8 / 9))}[class*=row]>.col-sm-10{flex-basis:calc(83.3333333333% - (var(--cg) * 9 / 10));max-width:calc(83.3333333333% - (var(--cg) * 9 / 10))}[class*=row]>.col-sm-11{flex-basis:calc(91.6666666667% - (var(--cg) * 10 / 11));max-width:calc(91.6666666667% - (var(--cg) * 10 / 11))}[class*=row]>.col-sm-12{flex-basis:calc(100% - (var(--cg) * 11 / 12));max-width:calc(100% - (var(--cg) * 11 / 12))}[class*=row].gut-1-sm{--cg:1.5rem;--rg:1.5rem}[class*=row].gut-1-sm.c-op{--cg:1.5rem}[class*=row].gut-1-sm.c-ob,[class*=row].gut-1-sm.c-ob-lg,[class*=row].gut-1-sm.c-ob-md,[class*=row].gut-1-sm.c-ob-ms,[class*=row].gut-1-sm.c-ob-sm,[class*=row].gut-1-sm.c-ob-xs{--rg:1.5rem}[class*=row].gut-1-sm .tc-sm-ob{padding-bottom:1.5rem}[class*=row].gut-2-sm{--cg:2.5rem;--rg:2.5rem}[class*=row].gut-2-sm.c-op{--cg:2.5rem}[class*=row].gut-2-sm.c-ob,[class*=row].gut-2-sm.c-ob-lg,[class*=row].gut-2-sm.c-ob-md,[class*=row].gut-2-sm.c-ob-ms,[class*=row].gut-2-sm.c-ob-sm,[class*=row].gut-2-sm.c-ob-xs{--rg:2.5rem}[class*=row].gut-2-sm .tc-sm-ob{padding-bottom:2.5rem}[class*=row].-gut-1-sm{--cg:0.6rem;--rg:0.6rem}[class*=row].-gut-1-sm.c-op{--cg:0.6rem}[class*=row].-gut-1-sm.c-ob,[class*=row].-gut-1-sm.c-ob-lg,[class*=row].-gut-1-sm.c-ob-md,[class*=row].-gut-1-sm.c-ob-ms,[class*=row].-gut-1-sm.c-ob-sm,[class*=row].-gut-1-sm.c-ob-xs{--rg:0.6rem}[class*=row].-gut-1-sm .tc-sm-ob{padding-bottom:.6rem}[class*=row].-gut-2-sm{--cg:0.3rem;--rg:0.3rem}[class*=row].-gut-2-sm.c-op{--cg:0.3rem}[class*=row].-gut-2-sm.c-ob,[class*=row].-gut-2-sm.c-ob-lg,[class*=row].-gut-2-sm.c-ob-md,[class*=row].-gut-2-sm.c-ob-ms,[class*=row].-gut-2-sm.c-ob-sm,[class*=row].-gut-2-sm.c-ob-xs{--rg:0.3rem}[class*=row].-gut-2-sm .tc-sm-ob{padding-bottom:.3rem}[class*=row].gut-0-sm{--cg:1rem;--rg:1rem}[class*=row].gut-0-sm.c-op{--cg:1rem}[class*=row].gut-0-sm.c-ob,[class*=row].gut-0-sm.c-ob-lg,[class*=row].gut-0-sm.c-ob-md,[class*=row].gut-0-sm.c-ob-ms,[class*=row].gut-0-sm.c-ob-sm,[class*=row].gut-0-sm.c-ob-xs{--rg:1rem}[class*=row].gut-0-sm .tc-sm-ob{padding-bottom:1rem}[class*=row].center-sm{justify-content:center}[class*=row].end-sm{justify-content:flex-end}[class*=row].start-sm{justify-content:flex-start}[class*=row].between-sm{justify-content:space-between}[class*=row].around-sm{justify-content:space-around}[class*=row].top-sm{align-items:flex-start}[class*=row].middle-sm{align-items:center}[class*=row].bottom-sm{align-items:flex-end}[class*=row].stretch-sm{align-items:stretch}[class*=row].baseline-sm{align-items:baseline}[class*=row].direct-x-sm{flex-direction:row}[class*=row].direct-xr-sm{flex-direction:row-reverse}[class*=row].direct-yr-sm{flex-direction:column-reverse}[class*=row].direct-y-sm{flex-direction:column}[class*=row].direct-y-sm>[class*=col],[class*=row].direct-yr-sm>[class*=col]{flex-basis:auto;width:100%}[class*=row].c-op-sm{column-gap:var(--cg)}[class*=row].c-nb-sm{row-gap:0}[class*=row].c-ob-sm{row-gap:var(--cg)}[class*=row].c-nf-sm>*{flex:none}[class*=row].ns-sm,[class*=row].nsc-sm{--rg:0;--cg:0}[class*=row] .tc-sm-top{align-self:flex-start}[class*=row] .tc-sm-middle{align-self:center}[class*=row] .tc-sm-bottom{align-self:flex-end}[class*=row] .tc-sm-first{order:-1}[class*=row] .tc-sm-last,[class*=row]>.order-sm-1{order:1}[class*=row] .tc-sm-ns{padding-left:0;padding-right:0;padding-bottom:0}[class*=row] .tc-sm-ob{padding-bottom:1rem}[class*=row] .tc-sm-nb{padding-bottom:0!important}[class*=row]>.left-sm-0{margin-left:0}[class*=row]>.right-sm-0{margin-right:0}[class*=row]>.left-sm-1{margin-left:8.3333333333%}[class*=row]>.left-sm-2{margin-left:16.6666666667%}[class*=row]>.left-sm-3{margin-left:25%}[class*=row]>.left-sm-4{margin-left:33.3333333333%}[class*=row]>.left-sm-5{margin-left:41.6666666667%}[class*=row]>.left-sm-6{margin-left:50%}[class*=row]>.left-sm-7{margin-left:58.3333333333%}[class*=row]>.left-sm-8{margin-left:66.6666666667%}[class*=row]>.left-sm-9{margin-left:75%}[class*=row]>.left-sm-10{margin-left:83.3333333333%}[class*=row]>.left-sm-11{margin-left:91.6666666667%}[class*=row]>.right-sm-1{margin-right:8.3333333333%}[class*=row]>.right-sm-2{margin-right:16.6666666667%}[class*=row]>.right-sm-3{margin-right:25%}[class*=row]>.right-sm-4{margin-right:33.3333333333%}[class*=row]>.right-sm-5{margin-right:41.6666666667%}[class*=row]>.right-sm-6{margin-right:50%}[class*=row]>.right-sm-7{margin-right:58.3333333333%}[class*=row]>.right-sm-8{margin-right:66.6666666667%}[class*=row]>.right-sm-9{margin-right:75%}[class*=row]>.right-sm-10{margin-right:83.3333333333%}[class*=row]>.right-sm-11{margin-right:91.6666666667%}[class*=row]>.order-sm-2{order:2}[class*=row]>.order-sm-3{order:3}[class*=row]>.order-sm-4{order:4}[class*=row]>.order-sm-5{order:5}[class*=row]>.order-sm-6{order:6}[class*=row]>.order-sm-7{order:7}[class*=row]>.order-sm-8{order:8}[class*=row]>.order-sm-9{order:9}[class*=row]>.order-sm-10{order:10}[class*=row]>.order-sm-11{order:11}[class*=row]>.order-sm-12{order:12}[class*=row]>.order-sm-13{order:13}[class*=row]>.order-sm-14{order:14}[class*=row]>.order-sm-15{order:15}[class*=row]>.order-sm-16{order:16}[class*=row]>.order-sm-17{order:17}[class*=row]>.order-sm-18{order:18}[class*=row]>.order-sm-19{order:19}[class*=row]>.order-sm-20{order:20}}@media screen and (max-width:35.5em){.row-xs-1>[class*=col]{flex-basis:calc(100% - (var(--cg) * 0 / 1));max-width:calc(100% - (var(--cg) * 0 / 1))}.row-xs-2>[class*=col]{flex-basis:calc(50% - (var(--cg) * 1 / 2));max-width:calc(50% - (var(--cg) * 1 / 2))}.row-xs-3>[class*=col]{flex-basis:calc(33.3333333333% - (var(--cg) * 2 / 3));max-width:calc(33.3333333333% - (var(--cg) * 2 / 3))}.row-xs-4>[class*=col]{flex-basis:calc(25% - (var(--cg) * 3 / 4));max-width:calc(25% - (var(--cg) * 3 / 4))}.row-xs-5>[class*=col]{flex-basis:calc(20% - (var(--cg) * 4 / 5));max-width:calc(20% - (var(--cg) * 4 / 5))}.row-xs-6>[class*=col]{flex-basis:calc(16.6666666667% - (var(--cg) * 5 / 6));max-width:calc(16.6666666667% - (var(--cg) * 5 / 6))}.row-xs-7>[class*=col]{flex-basis:calc(14.2857142857% - (var(--cg) * 6 / 7));max-width:calc(14.2857142857% - (var(--cg) * 6 / 7))}.row-xs-8>[class*=col]{flex-basis:calc(12.5% - (var(--cg) * 7 / 8));max-width:calc(12.5% - (var(--cg) * 7 / 8))}.row-xs-9>[class*=col]{flex-basis:calc(11.1111111111% - (var(--cg) * 8 / 9));max-width:calc(11.1111111111% - (var(--cg) * 8 / 9))}.row-xs-10>[class*=col]{flex-basis:calc(10% - (var(--cg) * 9 / 10));max-width:calc(10% - (var(--cg) * 9 / 10))}.row-xs-11>[class*=col]{flex-basis:calc(9.0909090909% - (var(--cg) * 10 / 11));max-width:calc(9.0909090909% - (var(--cg) * 10 / 11))}.row-xs-12>[class*=col]{flex-basis:calc(8.3333333333% - (var(--cg) * 11 / 12));max-width:calc(8.3333333333% - (var(--cg) * 11 / 12))}[class*=row]>.col-xs-1{flex-basis:calc(8.3333333333% - (var(--cg) * 0 / 1));max-width:calc(8.3333333333% - (var(--cg) * 0 / 1))}[class*=row]>.col-xs-2{flex-basis:calc(16.6666666667% - (var(--cg) * 1 / 2));max-width:calc(16.6666666667% - (var(--cg) * 1 / 2))}[class*=row]>.col-xs-3{flex-basis:calc(25% - (var(--cg) * 2 / 3));max-width:calc(25% - (var(--cg) * 2 / 3))}[class*=row]>.col-xs-4{flex-basis:calc(33.3333333333% - (var(--cg) * 3 / 4));max-width:calc(33.3333333333% - (var(--cg) * 3 / 4))}[class*=row]>.col-xs-5{flex-basis:calc(41.6666666667% - (var(--cg) * 4 / 5));max-width:calc(41.6666666667% - (var(--cg) * 4 / 5))}[class*=row]>.col-xs-6{flex-basis:calc(50% - (var(--cg) * 5 / 6));max-width:calc(50% - (var(--cg) * 5 / 6))}[class*=row]>.col-xs-7{flex-basis:calc(58.3333333333% - (var(--cg) * 6 / 7));max-width:calc(58.3333333333% - (var(--cg) * 6 / 7))}[class*=row]>.col-xs-8{flex-basis:calc(66.6666666667% - (var(--cg) * 7 / 8));max-width:calc(66.6666666667% - (var(--cg) * 7 / 8))}[class*=row]>.col-xs-9{flex-basis:calc(75% - (var(--cg) * 8 / 9));max-width:calc(75% - (var(--cg) * 8 / 9))}[class*=row]>.col-xs-10{flex-basis:calc(83.3333333333% - (var(--cg) * 9 / 10));max-width:calc(83.3333333333% - (var(--cg) * 9 / 10))}[class*=row]>.col-xs-11{flex-basis:calc(91.6666666667% - (var(--cg) * 10 / 11));max-width:calc(91.6666666667% - (var(--cg) * 10 / 11))}[class*=row]>.col-xs-12{flex-basis:calc(100% - (var(--cg) * 11 / 12));max-width:calc(100% - (var(--cg) * 11 / 12))}[class*=row].gut-1-xs{--cg:1.5rem;--rg:1.5rem}[class*=row].gut-1-xs.c-op{--cg:1.5rem}[class*=row].gut-1-xs.c-ob,[class*=row].gut-1-xs.c-ob-lg,[class*=row].gut-1-xs.c-ob-md,[class*=row].gut-1-xs.c-ob-ms,[class*=row].gut-1-xs.c-ob-sm,[class*=row].gut-1-xs.c-ob-xs{--rg:1.5rem}[class*=row].gut-1-xs .tc-xs-ob{padding-bottom:1.5rem}[class*=row].gut-2-xs{--cg:2.5rem;--rg:2.5rem}[class*=row].gut-2-xs.c-op{--cg:2.5rem}[class*=row].gut-2-xs.c-ob,[class*=row].gut-2-xs.c-ob-lg,[class*=row].gut-2-xs.c-ob-md,[class*=row].gut-2-xs.c-ob-ms,[class*=row].gut-2-xs.c-ob-sm,[class*=row].gut-2-xs.c-ob-xs{--rg:2.5rem}[class*=row].gut-2-xs .tc-xs-ob{padding-bottom:2.5rem}[class*=row].-gut-1-xs{--cg:0.6rem;--rg:0.6rem}[class*=row].-gut-1-xs.c-op{--cg:0.6rem}[class*=row].-gut-1-xs.c-ob,[class*=row].-gut-1-xs.c-ob-lg,[class*=row].-gut-1-xs.c-ob-md,[class*=row].-gut-1-xs.c-ob-ms,[class*=row].-gut-1-xs.c-ob-sm,[class*=row].-gut-1-xs.c-ob-xs{--rg:0.6rem}[class*=row].-gut-1-xs .tc-xs-ob{padding-bottom:.6rem}[class*=row].-gut-2-xs{--cg:0.3rem;--rg:0.3rem}[class*=row].-gut-2-xs.c-op{--cg:0.3rem}[class*=row].-gut-2-xs.c-ob,[class*=row].-gut-2-xs.c-ob-lg,[class*=row].-gut-2-xs.c-ob-md,[class*=row].-gut-2-xs.c-ob-ms,[class*=row].-gut-2-xs.c-ob-sm,[class*=row].-gut-2-xs.c-ob-xs{--rg:0.3rem}[class*=row].-gut-2-xs .tc-xs-ob{padding-bottom:.3rem}[class*=row].gut-0-xs{--cg:1rem;--rg:1rem}[class*=row].gut-0-xs.c-op{--cg:1rem}[class*=row].gut-0-xs.c-ob,[class*=row].gut-0-xs.c-ob-lg,[class*=row].gut-0-xs.c-ob-md,[class*=row].gut-0-xs.c-ob-ms,[class*=row].gut-0-xs.c-ob-sm,[class*=row].gut-0-xs.c-ob-xs{--rg:1rem}[class*=row].gut-0-xs .tc-xs-ob{padding-bottom:1rem}[class*=row].center-xs{justify-content:center}[class*=row].end-xs{justify-content:flex-end}[class*=row].start-xs{justify-content:flex-start}[class*=row].between-xs{justify-content:space-between}[class*=row].around-xs{justify-content:space-around}[class*=row].top-xs{align-items:flex-start}[class*=row].middle-xs{align-items:center}[class*=row].bottom-xs{align-items:flex-end}[class*=row].stretch-xs{align-items:stretch}[class*=row].baseline-xs{align-items:baseline}[class*=row].direct-x-xs{flex-direction:row}[class*=row].direct-xr-xs{flex-direction:row-reverse}[class*=row].direct-yr-xs{flex-direction:column-reverse}[class*=row].direct-y-xs{flex-direction:column}[class*=row].direct-y-xs>[class*=col],[class*=row].direct-yr-xs>[class*=col]{flex-basis:auto;width:100%}[class*=row].c-op-xs{column-gap:var(--cg)}[class*=row].c-nb-xs{row-gap:0}[class*=row].c-ob-xs{row-gap:var(--cg)}[class*=row].c-nf-xs>*{flex:none}[class*=row].ns-xs,[class*=row].nsc-xs{--rg:0;--cg:0}[class*=row] .tc-xs-top{align-self:flex-start}[class*=row] .tc-xs-middle{align-self:center}[class*=row] .tc-xs-bottom{align-self:flex-end}[class*=row] .tc-xs-first{order:-1}[class*=row] .tc-xs-last,[class*=row]>.order-xs-1{order:1}[class*=row] .tc-xs-ns{padding-left:0;padding-right:0;padding-bottom:0}[class*=row] .tc-xs-ob{padding-bottom:1rem}[class*=row] .tc-xs-nb{padding-bottom:0!important}[class*=row]>.left-xs-0{margin-left:0}[class*=row]>.right-xs-0{margin-right:0}[class*=row]>.left-xs-1{margin-left:8.3333333333%}[class*=row]>.left-xs-2{margin-left:16.6666666667%}[class*=row]>.left-xs-3{margin-left:25%}[class*=row]>.left-xs-4{margin-left:33.3333333333%}[class*=row]>.left-xs-5{margin-left:41.6666666667%}[class*=row]>.left-xs-6{margin-left:50%}[class*=row]>.left-xs-7{margin-left:58.3333333333%}[class*=row]>.left-xs-8{margin-left:66.6666666667%}[class*=row]>.left-xs-9{margin-left:75%}[class*=row]>.left-xs-10{margin-left:83.3333333333%}[class*=row]>.left-xs-11{margin-left:91.6666666667%}[class*=row]>.right-xs-1{margin-right:8.3333333333%}[class*=row]>.right-xs-2{margin-right:16.6666666667%}[class*=row]>.right-xs-3{margin-right:25%}[class*=row]>.right-xs-4{margin-right:33.3333333333%}[class*=row]>.right-xs-5{margin-right:41.6666666667%}[class*=row]>.right-xs-6{margin-right:50%}[class*=row]>.right-xs-7{margin-right:58.3333333333%}[class*=row]>.right-xs-8{margin-right:66.6666666667%}[class*=row]>.right-xs-9{margin-right:75%}[class*=row]>.right-xs-10{margin-right:83.3333333333%}[class*=row]>.right-xs-11{margin-right:91.6666666667%}[class*=row]>.order-xs-2{order:2}[class*=row]>.order-xs-3{order:3}[class*=row]>.order-xs-4{order:4}[class*=row]>.order-xs-5{order:5}[class*=row]>.order-xs-6{order:6}[class*=row]>.order-xs-7{order:7}[class*=row]>.order-xs-8{order:8}[class*=row]>.order-xs-9{order:9}[class*=row]>.order-xs-10{order:10}[class*=row]>.order-xs-11{order:11}[class*=row]>.order-xs-12{order:12}[class*=row]>.order-xs-13{order:13}[class*=row]>.order-xs-14{order:14}[class*=row]>.order-xs-15{order:15}[class*=row]>.order-xs-16{order:16}[class*=row]>.order-xs-17{order:17}[class*=row]>.order-xs-18{order:18}[class*=row]>.order-xs-19{order:19}[class*=row]>.order-xs-20{order:20}}@media screen and (max-width:23.5em){.row-ms-1>[class*=col]{flex-basis:calc(100% - (var(--cg) * 0 / 1));max-width:calc(100% - (var(--cg) * 0 / 1))}.row-ms-2>[class*=col]{flex-basis:calc(50% - (var(--cg) * 1 / 2));max-width:calc(50% - (var(--cg) * 1 / 2))}.row-ms-3>[class*=col]{flex-basis:calc(33.3333333333% - (var(--cg) * 2 / 3));max-width:calc(33.3333333333% - (var(--cg) * 2 / 3))}.row-ms-4>[class*=col]{flex-basis:calc(25% - (var(--cg) * 3 / 4));max-width:calc(25% - (var(--cg) * 3 / 4))}.row-ms-5>[class*=col]{flex-basis:calc(20% - (var(--cg) * 4 / 5));max-width:calc(20% - (var(--cg) * 4 / 5))}.row-ms-6>[class*=col]{flex-basis:calc(16.6666666667% - (var(--cg) * 5 / 6));max-width:calc(16.6666666667% - (var(--cg) * 5 / 6))}.row-ms-7>[class*=col]{flex-basis:calc(14.2857142857% - (var(--cg) * 6 / 7));max-width:calc(14.2857142857% - (var(--cg) * 6 / 7))}.row-ms-8>[class*=col]{flex-basis:calc(12.5% - (var(--cg) * 7 / 8));max-width:calc(12.5% - (var(--cg) * 7 / 8))}.row-ms-9>[class*=col]{flex-basis:calc(11.1111111111% - (var(--cg) * 8 / 9));max-width:calc(11.1111111111% - (var(--cg) * 8 / 9))}.row-ms-10>[class*=col]{flex-basis:calc(10% - (var(--cg) * 9 / 10));max-width:calc(10% - (var(--cg) * 9 / 10))}.row-ms-11>[class*=col]{flex-basis:calc(9.0909090909% - (var(--cg) * 10 / 11));max-width:calc(9.0909090909% - (var(--cg) * 10 / 11))}.row-ms-12>[class*=col]{flex-basis:calc(8.3333333333% - (var(--cg) * 11 / 12));max-width:calc(8.3333333333% - (var(--cg) * 11 / 12))}[class*=row]>.col-ms-1{flex-basis:calc(8.3333333333% - (var(--cg) * 0 / 1));max-width:calc(8.3333333333% - (var(--cg) * 0 / 1))}[class*=row]>.col-ms-2{flex-basis:calc(16.6666666667% - (var(--cg) * 1 / 2));max-width:calc(16.6666666667% - (var(--cg) * 1 / 2))}[class*=row]>.col-ms-3{flex-basis:calc(25% - (var(--cg) * 2 / 3));max-width:calc(25% - (var(--cg) * 2 / 3))}[class*=row]>.col-ms-4{flex-basis:calc(33.3333333333% - (var(--cg) * 3 / 4));max-width:calc(33.3333333333% - (var(--cg) * 3 / 4))}[class*=row]>.col-ms-5{flex-basis:calc(41.6666666667% - (var(--cg) * 4 / 5));max-width:calc(41.6666666667% - (var(--cg) * 4 / 5))}[class*=row]>.col-ms-6{flex-basis:calc(50% - (var(--cg) * 5 / 6));max-width:calc(50% - (var(--cg) * 5 / 6))}[class*=row]>.col-ms-7{flex-basis:calc(58.3333333333% - (var(--cg) * 6 / 7));max-width:calc(58.3333333333% - (var(--cg) * 6 / 7))}[class*=row]>.col-ms-8{flex-basis:calc(66.6666666667% - (var(--cg) * 7 / 8));max-width:calc(66.6666666667% - (var(--cg) * 7 / 8))}[class*=row]>.col-ms-9{flex-basis:calc(75% - (var(--cg) * 8 / 9));max-width:calc(75% - (var(--cg) * 8 / 9))}[class*=row]>.col-ms-10{flex-basis:calc(83.3333333333% - (var(--cg) * 9 / 10));max-width:calc(83.3333333333% - (var(--cg) * 9 / 10))}[class*=row]>.col-ms-11{flex-basis:calc(91.6666666667% - (var(--cg) * 10 / 11));max-width:calc(91.6666666667% - (var(--cg) * 10 / 11))}[class*=row]>.col-ms-12{flex-basis:calc(100% - (var(--cg) * 11 / 12));max-width:calc(100% - (var(--cg) * 11 / 12))}[class*=row].gut-1-ms{--cg:1.5rem;--rg:1.5rem}[class*=row].gut-1-ms.c-op{--cg:1.5rem}[class*=row].gut-1-ms.c-ob,[class*=row].gut-1-ms.c-ob-lg,[class*=row].gut-1-ms.c-ob-md,[class*=row].gut-1-ms.c-ob-ms,[class*=row].gut-1-ms.c-ob-sm,[class*=row].gut-1-ms.c-ob-xs{--rg:1.5rem}[class*=row].gut-1-ms .tc-ms-ob{padding-bottom:1.5rem}[class*=row].gut-2-ms{--cg:2.5rem;--rg:2.5rem}[class*=row].gut-2-ms.c-op{--cg:2.5rem}[class*=row].gut-2-ms.c-ob,[class*=row].gut-2-ms.c-ob-lg,[class*=row].gut-2-ms.c-ob-md,[class*=row].gut-2-ms.c-ob-ms,[class*=row].gut-2-ms.c-ob-sm,[class*=row].gut-2-ms.c-ob-xs{--rg:2.5rem}[class*=row].gut-2-ms .tc-ms-ob{padding-bottom:2.5rem}[class*=row].-gut-1-ms{--cg:0.6rem;--rg:0.6rem}[class*=row].-gut-1-ms.c-op{--cg:0.6rem}[class*=row].-gut-1-ms.c-ob,[class*=row].-gut-1-ms.c-ob-lg,[class*=row].-gut-1-ms.c-ob-md,[class*=row].-gut-1-ms.c-ob-ms,[class*=row].-gut-1-ms.c-ob-sm,[class*=row].-gut-1-ms.c-ob-xs{--rg:0.6rem}[class*=row].-gut-1-ms .tc-ms-ob{padding-bottom:.6rem}[class*=row].-gut-2-ms{--cg:0.3rem;--rg:0.3rem}[class*=row].-gut-2-ms.c-op{--cg:0.3rem}[class*=row].-gut-2-ms.c-ob,[class*=row].-gut-2-ms.c-ob-lg,[class*=row].-gut-2-ms.c-ob-md,[class*=row].-gut-2-ms.c-ob-ms,[class*=row].-gut-2-ms.c-ob-sm,[class*=row].-gut-2-ms.c-ob-xs{--rg:0.3rem}[class*=row].-gut-2-ms .tc-ms-ob{padding-bottom:.3rem}[class*=row].gut-0-ms{--cg:1rem;--rg:1rem}[class*=row].gut-0-ms.c-op{--cg:1rem}[class*=row].gut-0-ms.c-ob,[class*=row].gut-0-ms.c-ob-lg,[class*=row].gut-0-ms.c-ob-md,[class*=row].gut-0-ms.c-ob-ms,[class*=row].gut-0-ms.c-ob-sm,[class*=row].gut-0-ms.c-ob-xs{--rg:1rem}[class*=row].gut-0-ms .tc-ms-ob{padding-bottom:1rem}[class*=row].center-ms{justify-content:center}[class*=row].end-ms{justify-content:flex-end}[class*=row].start-ms{justify-content:flex-start}[class*=row].between-ms{justify-content:space-between}[class*=row].around-ms{justify-content:space-around}[class*=row].top-ms{align-items:flex-start}[class*=row].middle-ms{align-items:center}[class*=row].bottom-ms{align-items:flex-end}[class*=row].stretch-ms{align-items:stretch}[class*=row].baseline-ms{align-items:baseline}[class*=row].direct-x-ms{flex-direction:row}[class*=row].direct-xr-ms{flex-direction:row-reverse}[class*=row].direct-yr-ms{flex-direction:column-reverse}[class*=row].direct-y-ms{flex-direction:column}[class*=row].direct-y-ms>[class*=col],[class*=row].direct-yr-ms>[class*=col]{flex-basis:auto;width:100%}[class*=row].c-op-ms{column-gap:var(--cg)}[class*=row].c-nb-ms{row-gap:0}[class*=row].c-ob-ms{row-gap:var(--cg)}[class*=row].c-nf-ms>*{flex:none}[class*=row].ns-ms,[class*=row].nsc-ms{--rg:0;--cg:0}[class*=row] .tc-ms-top{align-self:flex-start}[class*=row] .tc-ms-middle{align-self:center}[class*=row] .tc-ms-bottom{align-self:flex-end}[class*=row] .tc-ms-first{order:-1}[class*=row] .tc-ms-last{order:1}[class*=row] .tc-ms-ns{padding-left:0;padding-right:0;padding-bottom:0}[class*=row] .tc-ms-ob{padding-bottom:1rem}[class*=row] .tc-ms-nb{padding-bottom:0!important}[class*=row]>.left-ms-0{margin-left:0}[class*=row]>.right-ms-0{margin-right:0}[class*=row]>.left-ms-1{margin-left:8.3333333333%}[class*=row]>.left-ms-2{margin-left:16.6666666667%}[class*=row]>.left-ms-3{margin-left:25%}[class*=row]>.left-ms-4{margin-left:33.3333333333%}[class*=row]>.left-ms-5{margin-left:41.6666666667%}[class*=row]>.left-ms-6{margin-left:50%}[class*=row]>.left-ms-7{margin-left:58.3333333333%}[class*=row]>.left-ms-8{margin-left:66.6666666667%}[class*=row]>.left-ms-9{margin-left:75%}[class*=row]>.left-ms-10{margin-left:83.3333333333%}[class*=row]>.left-ms-11{margin-left:91.6666666667%}[class*=row]>.right-ms-1{margin-right:8.3333333333%}[class*=row]>.right-ms-2{margin-right:16.6666666667%}[class*=row]>.right-ms-3{margin-right:25%}[class*=row]>.right-ms-4{margin-right:33.3333333333%}[class*=row]>.right-ms-5{margin-right:41.6666666667%}[class*=row]>.right-ms-6{margin-right:50%}[class*=row]>.right-ms-7{margin-right:58.3333333333%}[class*=row]>.right-ms-8{margin-right:66.6666666667%}[class*=row]>.right-ms-9{margin-right:75%}[class*=row]>.right-ms-10{margin-right:83.3333333333%}[class*=row]>.right-ms-11{margin-right:91.6666666667%}[class*=row]>.order-ms-1{order:1}[class*=row]>.order-ms-2{order:2}[class*=row]>.order-ms-3{order:3}[class*=row]>.order-ms-4{order:4}[class*=row]>.order-ms-5{order:5}[class*=row]>.order-ms-6{order:6}[class*=row]>.order-ms-7{order:7}[class*=row]>.order-ms-8{order:8}[class*=row]>.order-ms-9{order:9}[class*=row]>.order-ms-10{order:10}[class*=row]>.order-ms-11{order:11}[class*=row]>.order-ms-12{order:12}[class*=row]>.order-ms-13{order:13}[class*=row]>.order-ms-14{order:14}[class*=row]>.order-ms-15{order:15}[class*=row]>.order-ms-16{order:16}[class*=row]>.order-ms-17{order:17}[class*=row]>.order-ms-18{order:18}[class*=row]>.order-ms-19{order:19}[class*=row]>.order-ms-20{order:20}} -------------------------------------------------------------------------------- /docs/css/grid.min.css: -------------------------------------------------------------------------------- 1 | [class*=row]{--rg:1rem;--cg:1rem;display:flex;flex-flow:row wrap;box-sizing:border-box;column-gap:var(--cg);row-gap:var(--rg)}[class*=row]>[class*=col]{flex:1 1 0%;box-sizing:border-box}[class*=row]>[class*=col-]{flex:none}[class*=row]>.col{flex:1 1 0%}[class*=row][class*=col]{margin-left:0;margin-right:0;padding-left:0;padding-right:0}.row-1>[class*=col]{flex-basis:calc(100% - (var(--cg) * 0 / 1));max-width:calc(100% - (var(--cg) * 0 / 1))}.row-2>[class*=col]{flex-basis:calc(50% - (var(--cg) * 1 / 2));max-width:calc(50% - (var(--cg) * 1 / 2))}.row-3>[class*=col]{flex-basis:calc(33.3333333333% - (var(--cg) * 2 / 3));max-width:calc(33.3333333333% - (var(--cg) * 2 / 3))}.row-4>[class*=col]{flex-basis:calc(25% - (var(--cg) * 3 / 4));max-width:calc(25% - (var(--cg) * 3 / 4))}.row-5>[class*=col]{flex-basis:calc(20% - (var(--cg) * 4 / 5));max-width:calc(20% - (var(--cg) * 4 / 5))}.row-6>[class*=col]{flex-basis:calc(16.6666666667% - (var(--cg) * 5 / 6));max-width:calc(16.6666666667% - (var(--cg) * 5 / 6))}.row-7>[class*=col]{flex-basis:calc(14.2857142857% - (var(--cg) * 6 / 7));max-width:calc(14.2857142857% - (var(--cg) * 6 / 7))}.row-8>[class*=col]{flex-basis:calc(12.5% - (var(--cg) * 7 / 8));max-width:calc(12.5% - (var(--cg) * 7 / 8))}.row-9>[class*=col]{flex-basis:calc(11.1111111111% - (var(--cg) * 8 / 9));max-width:calc(11.1111111111% - (var(--cg) * 8 / 9))}.row-10>[class*=col]{flex-basis:calc(10% - (var(--cg) * 9 / 10));max-width:calc(10% - (var(--cg) * 9 / 10))}.row-11>[class*=col]{flex-basis:calc(9.0909090909% - (var(--cg) * 10 / 11));max-width:calc(9.0909090909% - (var(--cg) * 10 / 11))}.row-12>[class*=col]{flex-basis:calc(8.3333333333% - (var(--cg) * 11 / 12));max-width:calc(8.3333333333% - (var(--cg) * 11 / 12))}[class*=row]>.col-1{flex-basis:calc(8.3333333333% - (var(--cg) * 0 / 1));max-width:calc(8.3333333333% - (var(--cg) * 0 / 1))}[class*=row]>.col-2{flex-basis:calc(16.6666666667% - (var(--cg) * 1 / 2));max-width:calc(16.6666666667% - (var(--cg) * 1 / 2))}[class*=row]>.col-3{flex-basis:calc(25% - (var(--cg) * 2 / 3));max-width:calc(25% - (var(--cg) * 2 / 3))}[class*=row]>.col-4{flex-basis:calc(33.3333333333% - (var(--cg) * 3 / 4));max-width:calc(33.3333333333% - (var(--cg) * 3 / 4))}[class*=row]>.col-5{flex-basis:calc(41.6666666667% - (var(--cg) * 4 / 5));max-width:calc(41.6666666667% - (var(--cg) * 4 / 5))}[class*=row]>.col-6{flex-basis:calc(50% - (var(--cg) * 5 / 6));max-width:calc(50% - (var(--cg) * 5 / 6))}[class*=row]>.col-7{flex-basis:calc(58.3333333333% - (var(--cg) * 6 / 7));max-width:calc(58.3333333333% - (var(--cg) * 6 / 7))}[class*=row]>.col-8{flex-basis:calc(66.6666666667% - (var(--cg) * 7 / 8));max-width:calc(66.6666666667% - (var(--cg) * 7 / 8))}[class*=row]>.col-9{flex-basis:calc(75% - (var(--cg) * 8 / 9));max-width:calc(75% - (var(--cg) * 8 / 9))}[class*=row]>.col-10{flex-basis:calc(83.3333333333% - (var(--cg) * 9 / 10));max-width:calc(83.3333333333% - (var(--cg) * 9 / 10))}[class*=row]>.col-11{flex-basis:calc(91.6666666667% - (var(--cg) * 10 / 11));max-width:calc(91.6666666667% - (var(--cg) * 10 / 11))}[class*=row]>.col-12{flex-basis:calc(100% - (var(--cg) * 11 / 12));max-width:calc(100% - (var(--cg) * 11 / 12))}[class*=row].gut-1{--cg:1.5rem;--rg:1.5rem}[class*=row].gut-1.c-op{--cg:1.5rem}[class*=row].gut-1 .tc-ob{padding-bottom:1.5rem}[class*=row].gut-2{--cg:2.5rem;--rg:2.5rem}[class*=row].gut-2.c-op{--cg:2.5rem}[class*=row].gut-2 .tc-ob{padding-bottom:2.5rem}[class*=row].-gut-1{--cg:0.6rem;--rg:0.6rem}[class*=row].-gut-1.c-op{--cg:0.6rem}[class*=row].-gut-1 .tc-ob{padding-bottom:.6rem}[class*=row].-gut-2{--cg:0.3rem;--rg:0.3rem}[class*=row].-gut-2.c-op{--cg:0.3rem}[class*=row].-gut-2 .tc-ob{padding-bottom:.3rem}[class*=row].gut-0{--cg:1rem;--rg:1rem}[class*=row].gut-0.c-op{--cg:1rem}[class*=row].gut-0 .tc-ob{padding-bottom:1rem}[class*=row].center{justify-content:center}[class*=row].end{justify-content:flex-end}[class*=row].start{justify-content:flex-start}[class*=row].between{justify-content:space-between}[class*=row].around{justify-content:space-around}[class*=row].top{align-items:flex-start}[class*=row].middle{align-items:center}[class*=row].bottom{align-items:flex-end}[class*=row].stretch{align-items:stretch}[class*=row].baseline{align-items:baseline}[class*=row].direct-x{flex-direction:row}[class*=row].direct-xr{flex-direction:row-reverse}[class*=row].direct-yr{flex-direction:column-reverse}[class*=row].direct-y{flex-direction:column}[class*=row].direct-y>[class*=col],[class*=row].direct-yr>[class*=col]{flex-basis:auto;width:100%}[class*=row].c-op{column-gap:var(--cg)}[class*=row].c-nb{row-gap:0}[class*=row].c-ob{row-gap:var(--cg)}[class*=row].c-nf>*{flex:none}[class*=row].ns,[class*=row].nsc{--rg:0;--cg:0}[class*=row].nsc{margin-left:auto;margin-right:auto}[class*=row].c-eh>*>*{height:100%;width:100%;display:block}[class*=row].c-eh-2>*{display:flex}[class*=row].c-eh-2>*>*{flex:1 0 100%}[class*=row] .tc-top{align-self:flex-start}[class*=row] .tc-middle{align-self:center}[class*=row] .tc-bottom{align-self:flex-end}[class*=row] .tc-first{order:-1}[class*=row] .tc-last,[class*=row]>.order-1{order:1}[class*=row] .tc-ns{padding-left:0;padding-right:0;padding-bottom:0}[class*=row] .tc-ob{padding-bottom:1rem}[class*=row] .tc-nb{padding-bottom:0!important}[class*=row]>.left-0{margin-left:0}[class*=row]>.right-0{margin-right:0}[class*=row]>.left-1{margin-left:8.3333333333%}[class*=row]>.left-2{margin-left:16.6666666667%}[class*=row]>.left-3{margin-left:25%}[class*=row]>.left-4{margin-left:33.3333333333%}[class*=row]>.left-5{margin-left:41.6666666667%}[class*=row]>.left-6{margin-left:50%}[class*=row]>.left-7{margin-left:58.3333333333%}[class*=row]>.left-8{margin-left:66.6666666667%}[class*=row]>.left-9{margin-left:75%}[class*=row]>.left-10{margin-left:83.3333333333%}[class*=row]>.left-11{margin-left:91.6666666667%}[class*=row]>.right-1{margin-right:8.3333333333%}[class*=row]>.right-2{margin-right:16.6666666667%}[class*=row]>.right-3{margin-right:25%}[class*=row]>.right-4{margin-right:33.3333333333%}[class*=row]>.right-5{margin-right:41.6666666667%}[class*=row]>.right-6{margin-right:50%}[class*=row]>.right-7{margin-right:58.3333333333%}[class*=row]>.right-8{margin-right:66.6666666667%}[class*=row]>.right-9{margin-right:75%}[class*=row]>.right-10{margin-right:83.3333333333%}[class*=row]>.right-11{margin-right:91.6666666667%}[class*=row]>.order-2{order:2}[class*=row]>.order-3{order:3}[class*=row]>.order-4{order:4}[class*=row]>.order-5{order:5}[class*=row]>.order-6{order:6}[class*=row]>.order-7{order:7}[class*=row]>.order-8{order:8}[class*=row]>.order-9{order:9}[class*=row]>.order-10{order:10}[class*=row]>.order-11{order:11}[class*=row]>.order-12{order:12}[class*=row]>.order-13{order:13}[class*=row]>.order-14{order:14}[class*=row]>.order-15{order:15}[class*=row]>.order-16{order:16}[class*=row]>.order-17{order:17}[class*=row]>.order-18{order:18}[class*=row]>.order-19{order:19}[class*=row]>.order-20{order:20}@media screen and (max-width:80em){.row-lg-1>[class*=col]{flex-basis:calc(100% - (var(--cg) * 0 / 1));max-width:calc(100% - (var(--cg) * 0 / 1))}.row-lg-2>[class*=col]{flex-basis:calc(50% - (var(--cg) * 1 / 2));max-width:calc(50% - (var(--cg) * 1 / 2))}.row-lg-3>[class*=col]{flex-basis:calc(33.3333333333% - (var(--cg) * 2 / 3));max-width:calc(33.3333333333% - (var(--cg) * 2 / 3))}.row-lg-4>[class*=col]{flex-basis:calc(25% - (var(--cg) * 3 / 4));max-width:calc(25% - (var(--cg) * 3 / 4))}.row-lg-5>[class*=col]{flex-basis:calc(20% - (var(--cg) * 4 / 5));max-width:calc(20% - (var(--cg) * 4 / 5))}.row-lg-6>[class*=col]{flex-basis:calc(16.6666666667% - (var(--cg) * 5 / 6));max-width:calc(16.6666666667% - (var(--cg) * 5 / 6))}.row-lg-7>[class*=col]{flex-basis:calc(14.2857142857% - (var(--cg) * 6 / 7));max-width:calc(14.2857142857% - (var(--cg) * 6 / 7))}.row-lg-8>[class*=col]{flex-basis:calc(12.5% - (var(--cg) * 7 / 8));max-width:calc(12.5% - (var(--cg) * 7 / 8))}.row-lg-9>[class*=col]{flex-basis:calc(11.1111111111% - (var(--cg) * 8 / 9));max-width:calc(11.1111111111% - (var(--cg) * 8 / 9))}.row-lg-10>[class*=col]{flex-basis:calc(10% - (var(--cg) * 9 / 10));max-width:calc(10% - (var(--cg) * 9 / 10))}.row-lg-11>[class*=col]{flex-basis:calc(9.0909090909% - (var(--cg) * 10 / 11));max-width:calc(9.0909090909% - (var(--cg) * 10 / 11))}.row-lg-12>[class*=col]{flex-basis:calc(8.3333333333% - (var(--cg) * 11 / 12));max-width:calc(8.3333333333% - (var(--cg) * 11 / 12))}[class*=row]>.col-lg-1{flex-basis:calc(8.3333333333% - (var(--cg) * 0 / 1));max-width:calc(8.3333333333% - (var(--cg) * 0 / 1))}[class*=row]>.col-lg-2{flex-basis:calc(16.6666666667% - (var(--cg) * 1 / 2));max-width:calc(16.6666666667% - (var(--cg) * 1 / 2))}[class*=row]>.col-lg-3{flex-basis:calc(25% - (var(--cg) * 2 / 3));max-width:calc(25% - (var(--cg) * 2 / 3))}[class*=row]>.col-lg-4{flex-basis:calc(33.3333333333% - (var(--cg) * 3 / 4));max-width:calc(33.3333333333% - (var(--cg) * 3 / 4))}[class*=row]>.col-lg-5{flex-basis:calc(41.6666666667% - (var(--cg) * 4 / 5));max-width:calc(41.6666666667% - (var(--cg) * 4 / 5))}[class*=row]>.col-lg-6{flex-basis:calc(50% - (var(--cg) * 5 / 6));max-width:calc(50% - (var(--cg) * 5 / 6))}[class*=row]>.col-lg-7{flex-basis:calc(58.3333333333% - (var(--cg) * 6 / 7));max-width:calc(58.3333333333% - (var(--cg) * 6 / 7))}[class*=row]>.col-lg-8{flex-basis:calc(66.6666666667% - (var(--cg) * 7 / 8));max-width:calc(66.6666666667% - (var(--cg) * 7 / 8))}[class*=row]>.col-lg-9{flex-basis:calc(75% - (var(--cg) * 8 / 9));max-width:calc(75% - (var(--cg) * 8 / 9))}[class*=row]>.col-lg-10{flex-basis:calc(83.3333333333% - (var(--cg) * 9 / 10));max-width:calc(83.3333333333% - (var(--cg) * 9 / 10))}[class*=row]>.col-lg-11{flex-basis:calc(91.6666666667% - (var(--cg) * 10 / 11));max-width:calc(91.6666666667% - (var(--cg) * 10 / 11))}[class*=row]>.col-lg-12{flex-basis:calc(100% - (var(--cg) * 11 / 12));max-width:calc(100% - (var(--cg) * 11 / 12))}[class*=row].gut-1-lg{--cg:1.5rem;--rg:1.5rem}[class*=row].gut-1-lg.c-op{--cg:1.5rem}[class*=row].gut-1-lg.c-ob,[class*=row].gut-1-lg.c-ob-lg,[class*=row].gut-1-lg.c-ob-md,[class*=row].gut-1-lg.c-ob-ms,[class*=row].gut-1-lg.c-ob-sm,[class*=row].gut-1-lg.c-ob-xs{--rg:1.5rem}[class*=row].gut-1-lg .tc-lg-ob{padding-bottom:1.5rem}[class*=row].gut-2-lg{--cg:2.5rem;--rg:2.5rem}[class*=row].gut-2-lg.c-op{--cg:2.5rem}[class*=row].gut-2-lg.c-ob,[class*=row].gut-2-lg.c-ob-lg,[class*=row].gut-2-lg.c-ob-md,[class*=row].gut-2-lg.c-ob-ms,[class*=row].gut-2-lg.c-ob-sm,[class*=row].gut-2-lg.c-ob-xs{--rg:2.5rem}[class*=row].gut-2-lg .tc-lg-ob{padding-bottom:2.5rem}[class*=row].-gut-1-lg{--cg:0.6rem;--rg:0.6rem}[class*=row].-gut-1-lg.c-op{--cg:0.6rem}[class*=row].-gut-1-lg.c-ob,[class*=row].-gut-1-lg.c-ob-lg,[class*=row].-gut-1-lg.c-ob-md,[class*=row].-gut-1-lg.c-ob-ms,[class*=row].-gut-1-lg.c-ob-sm,[class*=row].-gut-1-lg.c-ob-xs{--rg:0.6rem}[class*=row].-gut-1-lg .tc-lg-ob{padding-bottom:.6rem}[class*=row].-gut-2-lg{--cg:0.3rem;--rg:0.3rem}[class*=row].-gut-2-lg.c-op{--cg:0.3rem}[class*=row].-gut-2-lg.c-ob,[class*=row].-gut-2-lg.c-ob-lg,[class*=row].-gut-2-lg.c-ob-md,[class*=row].-gut-2-lg.c-ob-ms,[class*=row].-gut-2-lg.c-ob-sm,[class*=row].-gut-2-lg.c-ob-xs{--rg:0.3rem}[class*=row].-gut-2-lg .tc-lg-ob{padding-bottom:.3rem}[class*=row].gut-0-lg{--cg:1rem;--rg:1rem}[class*=row].gut-0-lg.c-op{--cg:1rem}[class*=row].gut-0-lg.c-ob,[class*=row].gut-0-lg.c-ob-lg,[class*=row].gut-0-lg.c-ob-md,[class*=row].gut-0-lg.c-ob-ms,[class*=row].gut-0-lg.c-ob-sm,[class*=row].gut-0-lg.c-ob-xs{--rg:1rem}[class*=row].gut-0-lg .tc-lg-ob{padding-bottom:1rem}[class*=row].center-lg{justify-content:center}[class*=row].end-lg{justify-content:flex-end}[class*=row].start-lg{justify-content:flex-start}[class*=row].between-lg{justify-content:space-between}[class*=row].around-lg{justify-content:space-around}[class*=row].top-lg{align-items:flex-start}[class*=row].middle-lg{align-items:center}[class*=row].bottom-lg{align-items:flex-end}[class*=row].stretch-lg{align-items:stretch}[class*=row].baseline-lg{align-items:baseline}[class*=row].direct-x-lg{flex-direction:row}[class*=row].direct-xr-lg{flex-direction:row-reverse}[class*=row].direct-yr-lg{flex-direction:column-reverse}[class*=row].direct-y-lg{flex-direction:column}[class*=row].direct-y-lg>[class*=col],[class*=row].direct-yr-lg>[class*=col]{flex-basis:auto;width:100%}[class*=row].c-op-lg{column-gap:var(--cg)}[class*=row].c-nb-lg{row-gap:0}[class*=row].c-ob-lg{row-gap:var(--cg)}[class*=row].c-nf-lg>*{flex:none}[class*=row].ns-lg,[class*=row].nsc-lg{--rg:0;--cg:0}[class*=row] .tc-lg-top{align-self:flex-start}[class*=row] .tc-lg-middle{align-self:center}[class*=row] .tc-lg-bottom{align-self:flex-end}[class*=row] .tc-lg-first{order:-1}[class*=row] .tc-lg-last,[class*=row]>.order-lg-1{order:1}[class*=row] .tc-lg-ns{padding-left:0;padding-right:0;padding-bottom:0}[class*=row] .tc-lg-ob{padding-bottom:1rem}[class*=row] .tc-lg-nb{padding-bottom:0!important}[class*=row]>.left-lg-0{margin-left:0}[class*=row]>.right-lg-0{margin-right:0}[class*=row]>.left-lg-1{margin-left:8.3333333333%}[class*=row]>.left-lg-2{margin-left:16.6666666667%}[class*=row]>.left-lg-3{margin-left:25%}[class*=row]>.left-lg-4{margin-left:33.3333333333%}[class*=row]>.left-lg-5{margin-left:41.6666666667%}[class*=row]>.left-lg-6{margin-left:50%}[class*=row]>.left-lg-7{margin-left:58.3333333333%}[class*=row]>.left-lg-8{margin-left:66.6666666667%}[class*=row]>.left-lg-9{margin-left:75%}[class*=row]>.left-lg-10{margin-left:83.3333333333%}[class*=row]>.left-lg-11{margin-left:91.6666666667%}[class*=row]>.right-lg-1{margin-right:8.3333333333%}[class*=row]>.right-lg-2{margin-right:16.6666666667%}[class*=row]>.right-lg-3{margin-right:25%}[class*=row]>.right-lg-4{margin-right:33.3333333333%}[class*=row]>.right-lg-5{margin-right:41.6666666667%}[class*=row]>.right-lg-6{margin-right:50%}[class*=row]>.right-lg-7{margin-right:58.3333333333%}[class*=row]>.right-lg-8{margin-right:66.6666666667%}[class*=row]>.right-lg-9{margin-right:75%}[class*=row]>.right-lg-10{margin-right:83.3333333333%}[class*=row]>.right-lg-11{margin-right:91.6666666667%}[class*=row]>.order-lg-2{order:2}[class*=row]>.order-lg-3{order:3}[class*=row]>.order-lg-4{order:4}[class*=row]>.order-lg-5{order:5}[class*=row]>.order-lg-6{order:6}[class*=row]>.order-lg-7{order:7}[class*=row]>.order-lg-8{order:8}[class*=row]>.order-lg-9{order:9}[class*=row]>.order-lg-10{order:10}[class*=row]>.order-lg-11{order:11}[class*=row]>.order-lg-12{order:12}[class*=row]>.order-lg-13{order:13}[class*=row]>.order-lg-14{order:14}[class*=row]>.order-lg-15{order:15}[class*=row]>.order-lg-16{order:16}[class*=row]>.order-lg-17{order:17}[class*=row]>.order-lg-18{order:18}[class*=row]>.order-lg-19{order:19}[class*=row]>.order-lg-20{order:20}}@media screen and (max-width:64em){.row-md-1>[class*=col]{flex-basis:calc(100% - (var(--cg) * 0 / 1));max-width:calc(100% - (var(--cg) * 0 / 1))}.row-md-2>[class*=col]{flex-basis:calc(50% - (var(--cg) * 1 / 2));max-width:calc(50% - (var(--cg) * 1 / 2))}.row-md-3>[class*=col]{flex-basis:calc(33.3333333333% - (var(--cg) * 2 / 3));max-width:calc(33.3333333333% - (var(--cg) * 2 / 3))}.row-md-4>[class*=col]{flex-basis:calc(25% - (var(--cg) * 3 / 4));max-width:calc(25% - (var(--cg) * 3 / 4))}.row-md-5>[class*=col]{flex-basis:calc(20% - (var(--cg) * 4 / 5));max-width:calc(20% - (var(--cg) * 4 / 5))}.row-md-6>[class*=col]{flex-basis:calc(16.6666666667% - (var(--cg) * 5 / 6));max-width:calc(16.6666666667% - (var(--cg) * 5 / 6))}.row-md-7>[class*=col]{flex-basis:calc(14.2857142857% - (var(--cg) * 6 / 7));max-width:calc(14.2857142857% - (var(--cg) * 6 / 7))}.row-md-8>[class*=col]{flex-basis:calc(12.5% - (var(--cg) * 7 / 8));max-width:calc(12.5% - (var(--cg) * 7 / 8))}.row-md-9>[class*=col]{flex-basis:calc(11.1111111111% - (var(--cg) * 8 / 9));max-width:calc(11.1111111111% - (var(--cg) * 8 / 9))}.row-md-10>[class*=col]{flex-basis:calc(10% - (var(--cg) * 9 / 10));max-width:calc(10% - (var(--cg) * 9 / 10))}.row-md-11>[class*=col]{flex-basis:calc(9.0909090909% - (var(--cg) * 10 / 11));max-width:calc(9.0909090909% - (var(--cg) * 10 / 11))}.row-md-12>[class*=col]{flex-basis:calc(8.3333333333% - (var(--cg) * 11 / 12));max-width:calc(8.3333333333% - (var(--cg) * 11 / 12))}[class*=row]>.col-md-1{flex-basis:calc(8.3333333333% - (var(--cg) * 0 / 1));max-width:calc(8.3333333333% - (var(--cg) * 0 / 1))}[class*=row]>.col-md-2{flex-basis:calc(16.6666666667% - (var(--cg) * 1 / 2));max-width:calc(16.6666666667% - (var(--cg) * 1 / 2))}[class*=row]>.col-md-3{flex-basis:calc(25% - (var(--cg) * 2 / 3));max-width:calc(25% - (var(--cg) * 2 / 3))}[class*=row]>.col-md-4{flex-basis:calc(33.3333333333% - (var(--cg) * 3 / 4));max-width:calc(33.3333333333% - (var(--cg) * 3 / 4))}[class*=row]>.col-md-5{flex-basis:calc(41.6666666667% - (var(--cg) * 4 / 5));max-width:calc(41.6666666667% - (var(--cg) * 4 / 5))}[class*=row]>.col-md-6{flex-basis:calc(50% - (var(--cg) * 5 / 6));max-width:calc(50% - (var(--cg) * 5 / 6))}[class*=row]>.col-md-7{flex-basis:calc(58.3333333333% - (var(--cg) * 6 / 7));max-width:calc(58.3333333333% - (var(--cg) * 6 / 7))}[class*=row]>.col-md-8{flex-basis:calc(66.6666666667% - (var(--cg) * 7 / 8));max-width:calc(66.6666666667% - (var(--cg) * 7 / 8))}[class*=row]>.col-md-9{flex-basis:calc(75% - (var(--cg) * 8 / 9));max-width:calc(75% - (var(--cg) * 8 / 9))}[class*=row]>.col-md-10{flex-basis:calc(83.3333333333% - (var(--cg) * 9 / 10));max-width:calc(83.3333333333% - (var(--cg) * 9 / 10))}[class*=row]>.col-md-11{flex-basis:calc(91.6666666667% - (var(--cg) * 10 / 11));max-width:calc(91.6666666667% - (var(--cg) * 10 / 11))}[class*=row]>.col-md-12{flex-basis:calc(100% - (var(--cg) * 11 / 12));max-width:calc(100% - (var(--cg) * 11 / 12))}[class*=row].gut-1-md{--cg:1.5rem;--rg:1.5rem}[class*=row].gut-1-md.c-op{--cg:1.5rem}[class*=row].gut-1-md.c-ob,[class*=row].gut-1-md.c-ob-lg,[class*=row].gut-1-md.c-ob-md,[class*=row].gut-1-md.c-ob-ms,[class*=row].gut-1-md.c-ob-sm,[class*=row].gut-1-md.c-ob-xs{--rg:1.5rem}[class*=row].gut-1-md .tc-md-ob{padding-bottom:1.5rem}[class*=row].gut-2-md{--cg:2.5rem;--rg:2.5rem}[class*=row].gut-2-md.c-op{--cg:2.5rem}[class*=row].gut-2-md.c-ob,[class*=row].gut-2-md.c-ob-lg,[class*=row].gut-2-md.c-ob-md,[class*=row].gut-2-md.c-ob-ms,[class*=row].gut-2-md.c-ob-sm,[class*=row].gut-2-md.c-ob-xs{--rg:2.5rem}[class*=row].gut-2-md .tc-md-ob{padding-bottom:2.5rem}[class*=row].-gut-1-md{--cg:0.6rem;--rg:0.6rem}[class*=row].-gut-1-md.c-op{--cg:0.6rem}[class*=row].-gut-1-md.c-ob,[class*=row].-gut-1-md.c-ob-lg,[class*=row].-gut-1-md.c-ob-md,[class*=row].-gut-1-md.c-ob-ms,[class*=row].-gut-1-md.c-ob-sm,[class*=row].-gut-1-md.c-ob-xs{--rg:0.6rem}[class*=row].-gut-1-md .tc-md-ob{padding-bottom:.6rem}[class*=row].-gut-2-md{--cg:0.3rem;--rg:0.3rem}[class*=row].-gut-2-md.c-op{--cg:0.3rem}[class*=row].-gut-2-md.c-ob,[class*=row].-gut-2-md.c-ob-lg,[class*=row].-gut-2-md.c-ob-md,[class*=row].-gut-2-md.c-ob-ms,[class*=row].-gut-2-md.c-ob-sm,[class*=row].-gut-2-md.c-ob-xs{--rg:0.3rem}[class*=row].-gut-2-md .tc-md-ob{padding-bottom:.3rem}[class*=row].gut-0-md{--cg:1rem;--rg:1rem}[class*=row].gut-0-md.c-op{--cg:1rem}[class*=row].gut-0-md.c-ob,[class*=row].gut-0-md.c-ob-lg,[class*=row].gut-0-md.c-ob-md,[class*=row].gut-0-md.c-ob-ms,[class*=row].gut-0-md.c-ob-sm,[class*=row].gut-0-md.c-ob-xs{--rg:1rem}[class*=row].gut-0-md .tc-md-ob{padding-bottom:1rem}[class*=row].center-md{justify-content:center}[class*=row].end-md{justify-content:flex-end}[class*=row].start-md{justify-content:flex-start}[class*=row].between-md{justify-content:space-between}[class*=row].around-md{justify-content:space-around}[class*=row].top-md{align-items:flex-start}[class*=row].middle-md{align-items:center}[class*=row].bottom-md{align-items:flex-end}[class*=row].stretch-md{align-items:stretch}[class*=row].baseline-md{align-items:baseline}[class*=row].direct-x-md{flex-direction:row}[class*=row].direct-xr-md{flex-direction:row-reverse}[class*=row].direct-yr-md{flex-direction:column-reverse}[class*=row].direct-y-md{flex-direction:column}[class*=row].direct-y-md>[class*=col],[class*=row].direct-yr-md>[class*=col]{flex-basis:auto;width:100%}[class*=row].c-op-md{column-gap:var(--cg)}[class*=row].c-nb-md{row-gap:0}[class*=row].c-ob-md{row-gap:var(--cg)}[class*=row].c-nf-md>*{flex:none}[class*=row].ns-md,[class*=row].nsc-md{--rg:0;--cg:0}[class*=row] .tc-md-top{align-self:flex-start}[class*=row] .tc-md-middle{align-self:center}[class*=row] .tc-md-bottom{align-self:flex-end}[class*=row] .tc-md-first{order:-1}[class*=row] .tc-md-last,[class*=row]>.order-md-1{order:1}[class*=row] .tc-md-ns{padding-left:0;padding-right:0;padding-bottom:0}[class*=row] .tc-md-ob{padding-bottom:1rem}[class*=row] .tc-md-nb{padding-bottom:0!important}[class*=row]>.left-md-0{margin-left:0}[class*=row]>.right-md-0{margin-right:0}[class*=row]>.left-md-1{margin-left:8.3333333333%}[class*=row]>.left-md-2{margin-left:16.6666666667%}[class*=row]>.left-md-3{margin-left:25%}[class*=row]>.left-md-4{margin-left:33.3333333333%}[class*=row]>.left-md-5{margin-left:41.6666666667%}[class*=row]>.left-md-6{margin-left:50%}[class*=row]>.left-md-7{margin-left:58.3333333333%}[class*=row]>.left-md-8{margin-left:66.6666666667%}[class*=row]>.left-md-9{margin-left:75%}[class*=row]>.left-md-10{margin-left:83.3333333333%}[class*=row]>.left-md-11{margin-left:91.6666666667%}[class*=row]>.right-md-1{margin-right:8.3333333333%}[class*=row]>.right-md-2{margin-right:16.6666666667%}[class*=row]>.right-md-3{margin-right:25%}[class*=row]>.right-md-4{margin-right:33.3333333333%}[class*=row]>.right-md-5{margin-right:41.6666666667%}[class*=row]>.right-md-6{margin-right:50%}[class*=row]>.right-md-7{margin-right:58.3333333333%}[class*=row]>.right-md-8{margin-right:66.6666666667%}[class*=row]>.right-md-9{margin-right:75%}[class*=row]>.right-md-10{margin-right:83.3333333333%}[class*=row]>.right-md-11{margin-right:91.6666666667%}[class*=row]>.order-md-2{order:2}[class*=row]>.order-md-3{order:3}[class*=row]>.order-md-4{order:4}[class*=row]>.order-md-5{order:5}[class*=row]>.order-md-6{order:6}[class*=row]>.order-md-7{order:7}[class*=row]>.order-md-8{order:8}[class*=row]>.order-md-9{order:9}[class*=row]>.order-md-10{order:10}[class*=row]>.order-md-11{order:11}[class*=row]>.order-md-12{order:12}[class*=row]>.order-md-13{order:13}[class*=row]>.order-md-14{order:14}[class*=row]>.order-md-15{order:15}[class*=row]>.order-md-16{order:16}[class*=row]>.order-md-17{order:17}[class*=row]>.order-md-18{order:18}[class*=row]>.order-md-19{order:19}[class*=row]>.order-md-20{order:20}}@media screen and (max-width:48em){.row-sm-1>[class*=col]{flex-basis:calc(100% - (var(--cg) * 0 / 1));max-width:calc(100% - (var(--cg) * 0 / 1))}.row-sm-2>[class*=col]{flex-basis:calc(50% - (var(--cg) * 1 / 2));max-width:calc(50% - (var(--cg) * 1 / 2))}.row-sm-3>[class*=col]{flex-basis:calc(33.3333333333% - (var(--cg) * 2 / 3));max-width:calc(33.3333333333% - (var(--cg) * 2 / 3))}.row-sm-4>[class*=col]{flex-basis:calc(25% - (var(--cg) * 3 / 4));max-width:calc(25% - (var(--cg) * 3 / 4))}.row-sm-5>[class*=col]{flex-basis:calc(20% - (var(--cg) * 4 / 5));max-width:calc(20% - (var(--cg) * 4 / 5))}.row-sm-6>[class*=col]{flex-basis:calc(16.6666666667% - (var(--cg) * 5 / 6));max-width:calc(16.6666666667% - (var(--cg) * 5 / 6))}.row-sm-7>[class*=col]{flex-basis:calc(14.2857142857% - (var(--cg) * 6 / 7));max-width:calc(14.2857142857% - (var(--cg) * 6 / 7))}.row-sm-8>[class*=col]{flex-basis:calc(12.5% - (var(--cg) * 7 / 8));max-width:calc(12.5% - (var(--cg) * 7 / 8))}.row-sm-9>[class*=col]{flex-basis:calc(11.1111111111% - (var(--cg) * 8 / 9));max-width:calc(11.1111111111% - (var(--cg) * 8 / 9))}.row-sm-10>[class*=col]{flex-basis:calc(10% - (var(--cg) * 9 / 10));max-width:calc(10% - (var(--cg) * 9 / 10))}.row-sm-11>[class*=col]{flex-basis:calc(9.0909090909% - (var(--cg) * 10 / 11));max-width:calc(9.0909090909% - (var(--cg) * 10 / 11))}.row-sm-12>[class*=col]{flex-basis:calc(8.3333333333% - (var(--cg) * 11 / 12));max-width:calc(8.3333333333% - (var(--cg) * 11 / 12))}[class*=row]>.col-sm-1{flex-basis:calc(8.3333333333% - (var(--cg) * 0 / 1));max-width:calc(8.3333333333% - (var(--cg) * 0 / 1))}[class*=row]>.col-sm-2{flex-basis:calc(16.6666666667% - (var(--cg) * 1 / 2));max-width:calc(16.6666666667% - (var(--cg) * 1 / 2))}[class*=row]>.col-sm-3{flex-basis:calc(25% - (var(--cg) * 2 / 3));max-width:calc(25% - (var(--cg) * 2 / 3))}[class*=row]>.col-sm-4{flex-basis:calc(33.3333333333% - (var(--cg) * 3 / 4));max-width:calc(33.3333333333% - (var(--cg) * 3 / 4))}[class*=row]>.col-sm-5{flex-basis:calc(41.6666666667% - (var(--cg) * 4 / 5));max-width:calc(41.6666666667% - (var(--cg) * 4 / 5))}[class*=row]>.col-sm-6{flex-basis:calc(50% - (var(--cg) * 5 / 6));max-width:calc(50% - (var(--cg) * 5 / 6))}[class*=row]>.col-sm-7{flex-basis:calc(58.3333333333% - (var(--cg) * 6 / 7));max-width:calc(58.3333333333% - (var(--cg) * 6 / 7))}[class*=row]>.col-sm-8{flex-basis:calc(66.6666666667% - (var(--cg) * 7 / 8));max-width:calc(66.6666666667% - (var(--cg) * 7 / 8))}[class*=row]>.col-sm-9{flex-basis:calc(75% - (var(--cg) * 8 / 9));max-width:calc(75% - (var(--cg) * 8 / 9))}[class*=row]>.col-sm-10{flex-basis:calc(83.3333333333% - (var(--cg) * 9 / 10));max-width:calc(83.3333333333% - (var(--cg) * 9 / 10))}[class*=row]>.col-sm-11{flex-basis:calc(91.6666666667% - (var(--cg) * 10 / 11));max-width:calc(91.6666666667% - (var(--cg) * 10 / 11))}[class*=row]>.col-sm-12{flex-basis:calc(100% - (var(--cg) * 11 / 12));max-width:calc(100% - (var(--cg) * 11 / 12))}[class*=row].gut-1-sm{--cg:1.5rem;--rg:1.5rem}[class*=row].gut-1-sm.c-op{--cg:1.5rem}[class*=row].gut-1-sm.c-ob,[class*=row].gut-1-sm.c-ob-lg,[class*=row].gut-1-sm.c-ob-md,[class*=row].gut-1-sm.c-ob-ms,[class*=row].gut-1-sm.c-ob-sm,[class*=row].gut-1-sm.c-ob-xs{--rg:1.5rem}[class*=row].gut-1-sm .tc-sm-ob{padding-bottom:1.5rem}[class*=row].gut-2-sm{--cg:2.5rem;--rg:2.5rem}[class*=row].gut-2-sm.c-op{--cg:2.5rem}[class*=row].gut-2-sm.c-ob,[class*=row].gut-2-sm.c-ob-lg,[class*=row].gut-2-sm.c-ob-md,[class*=row].gut-2-sm.c-ob-ms,[class*=row].gut-2-sm.c-ob-sm,[class*=row].gut-2-sm.c-ob-xs{--rg:2.5rem}[class*=row].gut-2-sm .tc-sm-ob{padding-bottom:2.5rem}[class*=row].-gut-1-sm{--cg:0.6rem;--rg:0.6rem}[class*=row].-gut-1-sm.c-op{--cg:0.6rem}[class*=row].-gut-1-sm.c-ob,[class*=row].-gut-1-sm.c-ob-lg,[class*=row].-gut-1-sm.c-ob-md,[class*=row].-gut-1-sm.c-ob-ms,[class*=row].-gut-1-sm.c-ob-sm,[class*=row].-gut-1-sm.c-ob-xs{--rg:0.6rem}[class*=row].-gut-1-sm .tc-sm-ob{padding-bottom:.6rem}[class*=row].-gut-2-sm{--cg:0.3rem;--rg:0.3rem}[class*=row].-gut-2-sm.c-op{--cg:0.3rem}[class*=row].-gut-2-sm.c-ob,[class*=row].-gut-2-sm.c-ob-lg,[class*=row].-gut-2-sm.c-ob-md,[class*=row].-gut-2-sm.c-ob-ms,[class*=row].-gut-2-sm.c-ob-sm,[class*=row].-gut-2-sm.c-ob-xs{--rg:0.3rem}[class*=row].-gut-2-sm .tc-sm-ob{padding-bottom:.3rem}[class*=row].gut-0-sm{--cg:1rem;--rg:1rem}[class*=row].gut-0-sm.c-op{--cg:1rem}[class*=row].gut-0-sm.c-ob,[class*=row].gut-0-sm.c-ob-lg,[class*=row].gut-0-sm.c-ob-md,[class*=row].gut-0-sm.c-ob-ms,[class*=row].gut-0-sm.c-ob-sm,[class*=row].gut-0-sm.c-ob-xs{--rg:1rem}[class*=row].gut-0-sm .tc-sm-ob{padding-bottom:1rem}[class*=row].center-sm{justify-content:center}[class*=row].end-sm{justify-content:flex-end}[class*=row].start-sm{justify-content:flex-start}[class*=row].between-sm{justify-content:space-between}[class*=row].around-sm{justify-content:space-around}[class*=row].top-sm{align-items:flex-start}[class*=row].middle-sm{align-items:center}[class*=row].bottom-sm{align-items:flex-end}[class*=row].stretch-sm{align-items:stretch}[class*=row].baseline-sm{align-items:baseline}[class*=row].direct-x-sm{flex-direction:row}[class*=row].direct-xr-sm{flex-direction:row-reverse}[class*=row].direct-yr-sm{flex-direction:column-reverse}[class*=row].direct-y-sm{flex-direction:column}[class*=row].direct-y-sm>[class*=col],[class*=row].direct-yr-sm>[class*=col]{flex-basis:auto;width:100%}[class*=row].c-op-sm{column-gap:var(--cg)}[class*=row].c-nb-sm{row-gap:0}[class*=row].c-ob-sm{row-gap:var(--cg)}[class*=row].c-nf-sm>*{flex:none}[class*=row].ns-sm,[class*=row].nsc-sm{--rg:0;--cg:0}[class*=row] .tc-sm-top{align-self:flex-start}[class*=row] .tc-sm-middle{align-self:center}[class*=row] .tc-sm-bottom{align-self:flex-end}[class*=row] .tc-sm-first{order:-1}[class*=row] .tc-sm-last,[class*=row]>.order-sm-1{order:1}[class*=row] .tc-sm-ns{padding-left:0;padding-right:0;padding-bottom:0}[class*=row] .tc-sm-ob{padding-bottom:1rem}[class*=row] .tc-sm-nb{padding-bottom:0!important}[class*=row]>.left-sm-0{margin-left:0}[class*=row]>.right-sm-0{margin-right:0}[class*=row]>.left-sm-1{margin-left:8.3333333333%}[class*=row]>.left-sm-2{margin-left:16.6666666667%}[class*=row]>.left-sm-3{margin-left:25%}[class*=row]>.left-sm-4{margin-left:33.3333333333%}[class*=row]>.left-sm-5{margin-left:41.6666666667%}[class*=row]>.left-sm-6{margin-left:50%}[class*=row]>.left-sm-7{margin-left:58.3333333333%}[class*=row]>.left-sm-8{margin-left:66.6666666667%}[class*=row]>.left-sm-9{margin-left:75%}[class*=row]>.left-sm-10{margin-left:83.3333333333%}[class*=row]>.left-sm-11{margin-left:91.6666666667%}[class*=row]>.right-sm-1{margin-right:8.3333333333%}[class*=row]>.right-sm-2{margin-right:16.6666666667%}[class*=row]>.right-sm-3{margin-right:25%}[class*=row]>.right-sm-4{margin-right:33.3333333333%}[class*=row]>.right-sm-5{margin-right:41.6666666667%}[class*=row]>.right-sm-6{margin-right:50%}[class*=row]>.right-sm-7{margin-right:58.3333333333%}[class*=row]>.right-sm-8{margin-right:66.6666666667%}[class*=row]>.right-sm-9{margin-right:75%}[class*=row]>.right-sm-10{margin-right:83.3333333333%}[class*=row]>.right-sm-11{margin-right:91.6666666667%}[class*=row]>.order-sm-2{order:2}[class*=row]>.order-sm-3{order:3}[class*=row]>.order-sm-4{order:4}[class*=row]>.order-sm-5{order:5}[class*=row]>.order-sm-6{order:6}[class*=row]>.order-sm-7{order:7}[class*=row]>.order-sm-8{order:8}[class*=row]>.order-sm-9{order:9}[class*=row]>.order-sm-10{order:10}[class*=row]>.order-sm-11{order:11}[class*=row]>.order-sm-12{order:12}[class*=row]>.order-sm-13{order:13}[class*=row]>.order-sm-14{order:14}[class*=row]>.order-sm-15{order:15}[class*=row]>.order-sm-16{order:16}[class*=row]>.order-sm-17{order:17}[class*=row]>.order-sm-18{order:18}[class*=row]>.order-sm-19{order:19}[class*=row]>.order-sm-20{order:20}}@media screen and (max-width:35.5em){.row-xs-1>[class*=col]{flex-basis:calc(100% - (var(--cg) * 0 / 1));max-width:calc(100% - (var(--cg) * 0 / 1))}.row-xs-2>[class*=col]{flex-basis:calc(50% - (var(--cg) * 1 / 2));max-width:calc(50% - (var(--cg) * 1 / 2))}.row-xs-3>[class*=col]{flex-basis:calc(33.3333333333% - (var(--cg) * 2 / 3));max-width:calc(33.3333333333% - (var(--cg) * 2 / 3))}.row-xs-4>[class*=col]{flex-basis:calc(25% - (var(--cg) * 3 / 4));max-width:calc(25% - (var(--cg) * 3 / 4))}.row-xs-5>[class*=col]{flex-basis:calc(20% - (var(--cg) * 4 / 5));max-width:calc(20% - (var(--cg) * 4 / 5))}.row-xs-6>[class*=col]{flex-basis:calc(16.6666666667% - (var(--cg) * 5 / 6));max-width:calc(16.6666666667% - (var(--cg) * 5 / 6))}.row-xs-7>[class*=col]{flex-basis:calc(14.2857142857% - (var(--cg) * 6 / 7));max-width:calc(14.2857142857% - (var(--cg) * 6 / 7))}.row-xs-8>[class*=col]{flex-basis:calc(12.5% - (var(--cg) * 7 / 8));max-width:calc(12.5% - (var(--cg) * 7 / 8))}.row-xs-9>[class*=col]{flex-basis:calc(11.1111111111% - (var(--cg) * 8 / 9));max-width:calc(11.1111111111% - (var(--cg) * 8 / 9))}.row-xs-10>[class*=col]{flex-basis:calc(10% - (var(--cg) * 9 / 10));max-width:calc(10% - (var(--cg) * 9 / 10))}.row-xs-11>[class*=col]{flex-basis:calc(9.0909090909% - (var(--cg) * 10 / 11));max-width:calc(9.0909090909% - (var(--cg) * 10 / 11))}.row-xs-12>[class*=col]{flex-basis:calc(8.3333333333% - (var(--cg) * 11 / 12));max-width:calc(8.3333333333% - (var(--cg) * 11 / 12))}[class*=row]>.col-xs-1{flex-basis:calc(8.3333333333% - (var(--cg) * 0 / 1));max-width:calc(8.3333333333% - (var(--cg) * 0 / 1))}[class*=row]>.col-xs-2{flex-basis:calc(16.6666666667% - (var(--cg) * 1 / 2));max-width:calc(16.6666666667% - (var(--cg) * 1 / 2))}[class*=row]>.col-xs-3{flex-basis:calc(25% - (var(--cg) * 2 / 3));max-width:calc(25% - (var(--cg) * 2 / 3))}[class*=row]>.col-xs-4{flex-basis:calc(33.3333333333% - (var(--cg) * 3 / 4));max-width:calc(33.3333333333% - (var(--cg) * 3 / 4))}[class*=row]>.col-xs-5{flex-basis:calc(41.6666666667% - (var(--cg) * 4 / 5));max-width:calc(41.6666666667% - (var(--cg) * 4 / 5))}[class*=row]>.col-xs-6{flex-basis:calc(50% - (var(--cg) * 5 / 6));max-width:calc(50% - (var(--cg) * 5 / 6))}[class*=row]>.col-xs-7{flex-basis:calc(58.3333333333% - (var(--cg) * 6 / 7));max-width:calc(58.3333333333% - (var(--cg) * 6 / 7))}[class*=row]>.col-xs-8{flex-basis:calc(66.6666666667% - (var(--cg) * 7 / 8));max-width:calc(66.6666666667% - (var(--cg) * 7 / 8))}[class*=row]>.col-xs-9{flex-basis:calc(75% - (var(--cg) * 8 / 9));max-width:calc(75% - (var(--cg) * 8 / 9))}[class*=row]>.col-xs-10{flex-basis:calc(83.3333333333% - (var(--cg) * 9 / 10));max-width:calc(83.3333333333% - (var(--cg) * 9 / 10))}[class*=row]>.col-xs-11{flex-basis:calc(91.6666666667% - (var(--cg) * 10 / 11));max-width:calc(91.6666666667% - (var(--cg) * 10 / 11))}[class*=row]>.col-xs-12{flex-basis:calc(100% - (var(--cg) * 11 / 12));max-width:calc(100% - (var(--cg) * 11 / 12))}[class*=row].gut-1-xs{--cg:1.5rem;--rg:1.5rem}[class*=row].gut-1-xs.c-op{--cg:1.5rem}[class*=row].gut-1-xs.c-ob,[class*=row].gut-1-xs.c-ob-lg,[class*=row].gut-1-xs.c-ob-md,[class*=row].gut-1-xs.c-ob-ms,[class*=row].gut-1-xs.c-ob-sm,[class*=row].gut-1-xs.c-ob-xs{--rg:1.5rem}[class*=row].gut-1-xs .tc-xs-ob{padding-bottom:1.5rem}[class*=row].gut-2-xs{--cg:2.5rem;--rg:2.5rem}[class*=row].gut-2-xs.c-op{--cg:2.5rem}[class*=row].gut-2-xs.c-ob,[class*=row].gut-2-xs.c-ob-lg,[class*=row].gut-2-xs.c-ob-md,[class*=row].gut-2-xs.c-ob-ms,[class*=row].gut-2-xs.c-ob-sm,[class*=row].gut-2-xs.c-ob-xs{--rg:2.5rem}[class*=row].gut-2-xs .tc-xs-ob{padding-bottom:2.5rem}[class*=row].-gut-1-xs{--cg:0.6rem;--rg:0.6rem}[class*=row].-gut-1-xs.c-op{--cg:0.6rem}[class*=row].-gut-1-xs.c-ob,[class*=row].-gut-1-xs.c-ob-lg,[class*=row].-gut-1-xs.c-ob-md,[class*=row].-gut-1-xs.c-ob-ms,[class*=row].-gut-1-xs.c-ob-sm,[class*=row].-gut-1-xs.c-ob-xs{--rg:0.6rem}[class*=row].-gut-1-xs .tc-xs-ob{padding-bottom:.6rem}[class*=row].-gut-2-xs{--cg:0.3rem;--rg:0.3rem}[class*=row].-gut-2-xs.c-op{--cg:0.3rem}[class*=row].-gut-2-xs.c-ob,[class*=row].-gut-2-xs.c-ob-lg,[class*=row].-gut-2-xs.c-ob-md,[class*=row].-gut-2-xs.c-ob-ms,[class*=row].-gut-2-xs.c-ob-sm,[class*=row].-gut-2-xs.c-ob-xs{--rg:0.3rem}[class*=row].-gut-2-xs .tc-xs-ob{padding-bottom:.3rem}[class*=row].gut-0-xs{--cg:1rem;--rg:1rem}[class*=row].gut-0-xs.c-op{--cg:1rem}[class*=row].gut-0-xs.c-ob,[class*=row].gut-0-xs.c-ob-lg,[class*=row].gut-0-xs.c-ob-md,[class*=row].gut-0-xs.c-ob-ms,[class*=row].gut-0-xs.c-ob-sm,[class*=row].gut-0-xs.c-ob-xs{--rg:1rem}[class*=row].gut-0-xs .tc-xs-ob{padding-bottom:1rem}[class*=row].center-xs{justify-content:center}[class*=row].end-xs{justify-content:flex-end}[class*=row].start-xs{justify-content:flex-start}[class*=row].between-xs{justify-content:space-between}[class*=row].around-xs{justify-content:space-around}[class*=row].top-xs{align-items:flex-start}[class*=row].middle-xs{align-items:center}[class*=row].bottom-xs{align-items:flex-end}[class*=row].stretch-xs{align-items:stretch}[class*=row].baseline-xs{align-items:baseline}[class*=row].direct-x-xs{flex-direction:row}[class*=row].direct-xr-xs{flex-direction:row-reverse}[class*=row].direct-yr-xs{flex-direction:column-reverse}[class*=row].direct-y-xs{flex-direction:column}[class*=row].direct-y-xs>[class*=col],[class*=row].direct-yr-xs>[class*=col]{flex-basis:auto;width:100%}[class*=row].c-op-xs{column-gap:var(--cg)}[class*=row].c-nb-xs{row-gap:0}[class*=row].c-ob-xs{row-gap:var(--cg)}[class*=row].c-nf-xs>*{flex:none}[class*=row].ns-xs,[class*=row].nsc-xs{--rg:0;--cg:0}[class*=row] .tc-xs-top{align-self:flex-start}[class*=row] .tc-xs-middle{align-self:center}[class*=row] .tc-xs-bottom{align-self:flex-end}[class*=row] .tc-xs-first{order:-1}[class*=row] .tc-xs-last,[class*=row]>.order-xs-1{order:1}[class*=row] .tc-xs-ns{padding-left:0;padding-right:0;padding-bottom:0}[class*=row] .tc-xs-ob{padding-bottom:1rem}[class*=row] .tc-xs-nb{padding-bottom:0!important}[class*=row]>.left-xs-0{margin-left:0}[class*=row]>.right-xs-0{margin-right:0}[class*=row]>.left-xs-1{margin-left:8.3333333333%}[class*=row]>.left-xs-2{margin-left:16.6666666667%}[class*=row]>.left-xs-3{margin-left:25%}[class*=row]>.left-xs-4{margin-left:33.3333333333%}[class*=row]>.left-xs-5{margin-left:41.6666666667%}[class*=row]>.left-xs-6{margin-left:50%}[class*=row]>.left-xs-7{margin-left:58.3333333333%}[class*=row]>.left-xs-8{margin-left:66.6666666667%}[class*=row]>.left-xs-9{margin-left:75%}[class*=row]>.left-xs-10{margin-left:83.3333333333%}[class*=row]>.left-xs-11{margin-left:91.6666666667%}[class*=row]>.right-xs-1{margin-right:8.3333333333%}[class*=row]>.right-xs-2{margin-right:16.6666666667%}[class*=row]>.right-xs-3{margin-right:25%}[class*=row]>.right-xs-4{margin-right:33.3333333333%}[class*=row]>.right-xs-5{margin-right:41.6666666667%}[class*=row]>.right-xs-6{margin-right:50%}[class*=row]>.right-xs-7{margin-right:58.3333333333%}[class*=row]>.right-xs-8{margin-right:66.6666666667%}[class*=row]>.right-xs-9{margin-right:75%}[class*=row]>.right-xs-10{margin-right:83.3333333333%}[class*=row]>.right-xs-11{margin-right:91.6666666667%}[class*=row]>.order-xs-2{order:2}[class*=row]>.order-xs-3{order:3}[class*=row]>.order-xs-4{order:4}[class*=row]>.order-xs-5{order:5}[class*=row]>.order-xs-6{order:6}[class*=row]>.order-xs-7{order:7}[class*=row]>.order-xs-8{order:8}[class*=row]>.order-xs-9{order:9}[class*=row]>.order-xs-10{order:10}[class*=row]>.order-xs-11{order:11}[class*=row]>.order-xs-12{order:12}[class*=row]>.order-xs-13{order:13}[class*=row]>.order-xs-14{order:14}[class*=row]>.order-xs-15{order:15}[class*=row]>.order-xs-16{order:16}[class*=row]>.order-xs-17{order:17}[class*=row]>.order-xs-18{order:18}[class*=row]>.order-xs-19{order:19}[class*=row]>.order-xs-20{order:20}}@media screen and (max-width:23.5em){.row-ms-1>[class*=col]{flex-basis:calc(100% - (var(--cg) * 0 / 1));max-width:calc(100% - (var(--cg) * 0 / 1))}.row-ms-2>[class*=col]{flex-basis:calc(50% - (var(--cg) * 1 / 2));max-width:calc(50% - (var(--cg) * 1 / 2))}.row-ms-3>[class*=col]{flex-basis:calc(33.3333333333% - (var(--cg) * 2 / 3));max-width:calc(33.3333333333% - (var(--cg) * 2 / 3))}.row-ms-4>[class*=col]{flex-basis:calc(25% - (var(--cg) * 3 / 4));max-width:calc(25% - (var(--cg) * 3 / 4))}.row-ms-5>[class*=col]{flex-basis:calc(20% - (var(--cg) * 4 / 5));max-width:calc(20% - (var(--cg) * 4 / 5))}.row-ms-6>[class*=col]{flex-basis:calc(16.6666666667% - (var(--cg) * 5 / 6));max-width:calc(16.6666666667% - (var(--cg) * 5 / 6))}.row-ms-7>[class*=col]{flex-basis:calc(14.2857142857% - (var(--cg) * 6 / 7));max-width:calc(14.2857142857% - (var(--cg) * 6 / 7))}.row-ms-8>[class*=col]{flex-basis:calc(12.5% - (var(--cg) * 7 / 8));max-width:calc(12.5% - (var(--cg) * 7 / 8))}.row-ms-9>[class*=col]{flex-basis:calc(11.1111111111% - (var(--cg) * 8 / 9));max-width:calc(11.1111111111% - (var(--cg) * 8 / 9))}.row-ms-10>[class*=col]{flex-basis:calc(10% - (var(--cg) * 9 / 10));max-width:calc(10% - (var(--cg) * 9 / 10))}.row-ms-11>[class*=col]{flex-basis:calc(9.0909090909% - (var(--cg) * 10 / 11));max-width:calc(9.0909090909% - (var(--cg) * 10 / 11))}.row-ms-12>[class*=col]{flex-basis:calc(8.3333333333% - (var(--cg) * 11 / 12));max-width:calc(8.3333333333% - (var(--cg) * 11 / 12))}[class*=row]>.col-ms-1{flex-basis:calc(8.3333333333% - (var(--cg) * 0 / 1));max-width:calc(8.3333333333% - (var(--cg) * 0 / 1))}[class*=row]>.col-ms-2{flex-basis:calc(16.6666666667% - (var(--cg) * 1 / 2));max-width:calc(16.6666666667% - (var(--cg) * 1 / 2))}[class*=row]>.col-ms-3{flex-basis:calc(25% - (var(--cg) * 2 / 3));max-width:calc(25% - (var(--cg) * 2 / 3))}[class*=row]>.col-ms-4{flex-basis:calc(33.3333333333% - (var(--cg) * 3 / 4));max-width:calc(33.3333333333% - (var(--cg) * 3 / 4))}[class*=row]>.col-ms-5{flex-basis:calc(41.6666666667% - (var(--cg) * 4 / 5));max-width:calc(41.6666666667% - (var(--cg) * 4 / 5))}[class*=row]>.col-ms-6{flex-basis:calc(50% - (var(--cg) * 5 / 6));max-width:calc(50% - (var(--cg) * 5 / 6))}[class*=row]>.col-ms-7{flex-basis:calc(58.3333333333% - (var(--cg) * 6 / 7));max-width:calc(58.3333333333% - (var(--cg) * 6 / 7))}[class*=row]>.col-ms-8{flex-basis:calc(66.6666666667% - (var(--cg) * 7 / 8));max-width:calc(66.6666666667% - (var(--cg) * 7 / 8))}[class*=row]>.col-ms-9{flex-basis:calc(75% - (var(--cg) * 8 / 9));max-width:calc(75% - (var(--cg) * 8 / 9))}[class*=row]>.col-ms-10{flex-basis:calc(83.3333333333% - (var(--cg) * 9 / 10));max-width:calc(83.3333333333% - (var(--cg) * 9 / 10))}[class*=row]>.col-ms-11{flex-basis:calc(91.6666666667% - (var(--cg) * 10 / 11));max-width:calc(91.6666666667% - (var(--cg) * 10 / 11))}[class*=row]>.col-ms-12{flex-basis:calc(100% - (var(--cg) * 11 / 12));max-width:calc(100% - (var(--cg) * 11 / 12))}[class*=row].gut-1-ms{--cg:1.5rem;--rg:1.5rem}[class*=row].gut-1-ms.c-op{--cg:1.5rem}[class*=row].gut-1-ms.c-ob,[class*=row].gut-1-ms.c-ob-lg,[class*=row].gut-1-ms.c-ob-md,[class*=row].gut-1-ms.c-ob-ms,[class*=row].gut-1-ms.c-ob-sm,[class*=row].gut-1-ms.c-ob-xs{--rg:1.5rem}[class*=row].gut-1-ms .tc-ms-ob{padding-bottom:1.5rem}[class*=row].gut-2-ms{--cg:2.5rem;--rg:2.5rem}[class*=row].gut-2-ms.c-op{--cg:2.5rem}[class*=row].gut-2-ms.c-ob,[class*=row].gut-2-ms.c-ob-lg,[class*=row].gut-2-ms.c-ob-md,[class*=row].gut-2-ms.c-ob-ms,[class*=row].gut-2-ms.c-ob-sm,[class*=row].gut-2-ms.c-ob-xs{--rg:2.5rem}[class*=row].gut-2-ms .tc-ms-ob{padding-bottom:2.5rem}[class*=row].-gut-1-ms{--cg:0.6rem;--rg:0.6rem}[class*=row].-gut-1-ms.c-op{--cg:0.6rem}[class*=row].-gut-1-ms.c-ob,[class*=row].-gut-1-ms.c-ob-lg,[class*=row].-gut-1-ms.c-ob-md,[class*=row].-gut-1-ms.c-ob-ms,[class*=row].-gut-1-ms.c-ob-sm,[class*=row].-gut-1-ms.c-ob-xs{--rg:0.6rem}[class*=row].-gut-1-ms .tc-ms-ob{padding-bottom:.6rem}[class*=row].-gut-2-ms{--cg:0.3rem;--rg:0.3rem}[class*=row].-gut-2-ms.c-op{--cg:0.3rem}[class*=row].-gut-2-ms.c-ob,[class*=row].-gut-2-ms.c-ob-lg,[class*=row].-gut-2-ms.c-ob-md,[class*=row].-gut-2-ms.c-ob-ms,[class*=row].-gut-2-ms.c-ob-sm,[class*=row].-gut-2-ms.c-ob-xs{--rg:0.3rem}[class*=row].-gut-2-ms .tc-ms-ob{padding-bottom:.3rem}[class*=row].gut-0-ms{--cg:1rem;--rg:1rem}[class*=row].gut-0-ms.c-op{--cg:1rem}[class*=row].gut-0-ms.c-ob,[class*=row].gut-0-ms.c-ob-lg,[class*=row].gut-0-ms.c-ob-md,[class*=row].gut-0-ms.c-ob-ms,[class*=row].gut-0-ms.c-ob-sm,[class*=row].gut-0-ms.c-ob-xs{--rg:1rem}[class*=row].gut-0-ms .tc-ms-ob{padding-bottom:1rem}[class*=row].center-ms{justify-content:center}[class*=row].end-ms{justify-content:flex-end}[class*=row].start-ms{justify-content:flex-start}[class*=row].between-ms{justify-content:space-between}[class*=row].around-ms{justify-content:space-around}[class*=row].top-ms{align-items:flex-start}[class*=row].middle-ms{align-items:center}[class*=row].bottom-ms{align-items:flex-end}[class*=row].stretch-ms{align-items:stretch}[class*=row].baseline-ms{align-items:baseline}[class*=row].direct-x-ms{flex-direction:row}[class*=row].direct-xr-ms{flex-direction:row-reverse}[class*=row].direct-yr-ms{flex-direction:column-reverse}[class*=row].direct-y-ms{flex-direction:column}[class*=row].direct-y-ms>[class*=col],[class*=row].direct-yr-ms>[class*=col]{flex-basis:auto;width:100%}[class*=row].c-op-ms{column-gap:var(--cg)}[class*=row].c-nb-ms{row-gap:0}[class*=row].c-ob-ms{row-gap:var(--cg)}[class*=row].c-nf-ms>*{flex:none}[class*=row].ns-ms,[class*=row].nsc-ms{--rg:0;--cg:0}[class*=row] .tc-ms-top{align-self:flex-start}[class*=row] .tc-ms-middle{align-self:center}[class*=row] .tc-ms-bottom{align-self:flex-end}[class*=row] .tc-ms-first{order:-1}[class*=row] .tc-ms-last{order:1}[class*=row] .tc-ms-ns{padding-left:0;padding-right:0;padding-bottom:0}[class*=row] .tc-ms-ob{padding-bottom:1rem}[class*=row] .tc-ms-nb{padding-bottom:0!important}[class*=row]>.left-ms-0{margin-left:0}[class*=row]>.right-ms-0{margin-right:0}[class*=row]>.left-ms-1{margin-left:8.3333333333%}[class*=row]>.left-ms-2{margin-left:16.6666666667%}[class*=row]>.left-ms-3{margin-left:25%}[class*=row]>.left-ms-4{margin-left:33.3333333333%}[class*=row]>.left-ms-5{margin-left:41.6666666667%}[class*=row]>.left-ms-6{margin-left:50%}[class*=row]>.left-ms-7{margin-left:58.3333333333%}[class*=row]>.left-ms-8{margin-left:66.6666666667%}[class*=row]>.left-ms-9{margin-left:75%}[class*=row]>.left-ms-10{margin-left:83.3333333333%}[class*=row]>.left-ms-11{margin-left:91.6666666667%}[class*=row]>.right-ms-1{margin-right:8.3333333333%}[class*=row]>.right-ms-2{margin-right:16.6666666667%}[class*=row]>.right-ms-3{margin-right:25%}[class*=row]>.right-ms-4{margin-right:33.3333333333%}[class*=row]>.right-ms-5{margin-right:41.6666666667%}[class*=row]>.right-ms-6{margin-right:50%}[class*=row]>.right-ms-7{margin-right:58.3333333333%}[class*=row]>.right-ms-8{margin-right:66.6666666667%}[class*=row]>.right-ms-9{margin-right:75%}[class*=row]>.right-ms-10{margin-right:83.3333333333%}[class*=row]>.right-ms-11{margin-right:91.6666666667%}[class*=row]>.order-ms-1{order:1}[class*=row]>.order-ms-2{order:2}[class*=row]>.order-ms-3{order:3}[class*=row]>.order-ms-4{order:4}[class*=row]>.order-ms-5{order:5}[class*=row]>.order-ms-6{order:6}[class*=row]>.order-ms-7{order:7}[class*=row]>.order-ms-8{order:8}[class*=row]>.order-ms-9{order:9}[class*=row]>.order-ms-10{order:10}[class*=row]>.order-ms-11{order:11}[class*=row]>.order-ms-12{order:12}[class*=row]>.order-ms-13{order:13}[class*=row]>.order-ms-14{order:14}[class*=row]>.order-ms-15{order:15}[class*=row]>.order-ms-16{order:16}[class*=row]>.order-ms-17{order:17}[class*=row]>.order-ms-18{order:18}[class*=row]>.order-ms-19{order:19}[class*=row]>.order-ms-20{order:20}} --------------------------------------------------------------------------------