@energie360/ui-library 0.1.43 → 0.1.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/components/accordion-item/u-accordion-item.vue +2 -1
  2. package/components/card-amount-illustrated/u-card-amount-illustrated.vue +4 -3
  3. package/components/card-footer/u-card-footer.vue +25 -8
  4. package/components/card-group/card-group.scss +22 -0
  5. package/components/card-group/u-card-group.vue +3 -3
  6. package/components/card-header/u-card-header.vue +4 -2
  7. package/components/collapsible/u-collapsible.vue +7 -2
  8. package/components/download-list-item/u-download-list-item.vue +1 -1
  9. package/components/file-upload/u-file-upload.vue +3 -3
  10. package/components/hint/hint.scss +5 -0
  11. package/components/hint/u-hint.vue +1 -1
  12. package/components/index.ts +78 -0
  13. package/components/inline-edit/u-inline-edit.vue +1 -1
  14. package/components/navigation-panel-tile/navigation-panel-tile.scss +7 -0
  15. package/components/portal-logo/u-portal-logo.vue +1 -1
  16. package/components/slider/u-slider.vue +4 -2
  17. package/components/slider-progress-animation/u-slider-progress-animation.vue +3 -3
  18. package/components/table/table-cell.mixins.scss +2 -2
  19. package/components/table/u-table-cell.vue +1 -3
  20. package/components/welcome/u-welcome.vue +1 -1
  21. package/dist/layout/form-grid.css +43 -145
  22. package/dist/layout/form-grid.css.map +1 -1
  23. package/dist/layout/grid.css +780 -2951
  24. package/dist/layout/grid.css.map +1 -1
  25. package/elements/icon/u-icon.vue +1 -1
  26. package/elements/index.ts +24 -0
  27. package/elements/radio-group/radio-group-composables.ts +4 -1
  28. package/elements/select/select.scss +8 -2
  29. package/elements/select/u-select.vue +6 -2
  30. package/elements/select-tile/select-tile.scss +5 -0
  31. package/elements/select-tile/u-select-tile.vue +16 -6
  32. package/elements/textarea/u-textarea.vue +4 -4
  33. package/layout/grid/grid.mixin.scss +69 -50
  34. package/main.ts +2 -0
  35. package/modules/content-title/content-title.scss +6 -0
  36. package/modules/content-title/u-content-title.vue +1 -1
  37. package/modules/navigation-toolbar-side/u-navigation-toolbar-side.vue +1 -1
  38. package/modules/navigation-toolbar-top/u-navigation-toolbar-top.vue +12 -4
  39. package/package.json +11 -3
  40. package/tsconfig.build.json +14 -0
  41. package/tsconfig.json +4 -1
  42. package/vite.config.js +32 -0
  43. package/wizard/wizard-intro/u-wizard-intro.vue +4 -6
package/dist/layout/grid.css CHANGED
@@ -13,3238 +13,1067 @@ $columns: Grid size (in columns). Default is set by global variable $grid-column
13
13
  .row {
14
14
  display: flex;
15
15
  flex-wrap: wrap;
16
- gap: 2.6315789474%;
17
- }
18
- @media (max-width: 1020px) {
19
- .row {
20
- gap: 2.5531914894%;
21
- }
22
- }
23
- @media (max-width: 740px) {
24
- .row {
25
- gap: 3.6363636364%;
26
- }
27
- }
28
- @media (max-width: 520px) {
29
- .row {
30
- gap: 4.1666666667%;
31
- }
16
+ gap: clamp(20px, 0px + 2.778vw, 40px);
32
17
  }
33
18
  .row.row--centered {
34
19
  justify-content: center;
35
20
  }
36
21
 
37
22
  .col-1 {
38
- flex: 0 0 5.9210526316%;
39
- max-width: 5.9210526316%;
40
- }
41
- @media (max-width: 1020px) {
42
- .col-1 {
43
- flex: 0 0 5.9929078014%;
44
- max-width: 5.9929078014%;
45
- }
46
- }
47
- @media (max-width: 740px) {
48
- .col-1 {
49
- flex: 0 0 5%;
50
- max-width: 5%;
51
- }
52
- }
53
- @media (max-width: 520px) {
54
- .col-1 {
55
- flex: 0 0 4.5138888889%;
56
- max-width: 4.5138888889%;
57
- }
23
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
24
+ --col-width: calc(
25
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 1 +
26
+ ((0) * var(--gutter))
27
+ );
28
+ flex: 0 0 var(--col-width);
29
+ max-width: var(--col-width);
58
30
  }
59
31
 
60
32
  .col-indent-1 {
61
- margin-left: 8.5526315789%;
62
- }
63
- @media (max-width: 1020px) {
64
- .col-indent-1 {
65
- margin-left: 8.5460992908%;
66
- }
67
- }
68
- @media (max-width: 740px) {
69
- .col-indent-1 {
70
- margin-left: 8.6363636364%;
71
- }
72
- }
73
- @media (max-width: 520px) {
74
- .col-indent-1 {
75
- margin-left: 8.6805555556%;
76
- }
33
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 1 + (0) * var(--gutter) + var(--gutter));
77
34
  }
78
35
 
79
36
  .col-2 {
80
- flex: 0 0 14.4736842105%;
81
- max-width: 14.4736842105%;
82
- }
83
- @media (max-width: 1020px) {
84
- .col-2 {
85
- flex: 0 0 14.5390070922%;
86
- max-width: 14.5390070922%;
87
- }
88
- }
89
- @media (max-width: 740px) {
90
- .col-2 {
91
- flex: 0 0 13.6363636364%;
92
- max-width: 13.6363636364%;
93
- }
94
- }
95
- @media (max-width: 520px) {
96
- .col-2 {
97
- flex: 0 0 13.1944444444%;
98
- max-width: 13.1944444444%;
99
- }
37
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
38
+ --col-width: calc(
39
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 2 +
40
+ ((1) * var(--gutter))
41
+ );
42
+ flex: 0 0 var(--col-width);
43
+ max-width: var(--col-width);
100
44
  }
101
45
 
102
46
  .col-indent-2 {
103
- margin-left: 17.1052631579%;
104
- }
105
- @media (max-width: 1020px) {
106
- .col-indent-2 {
107
- margin-left: 17.0921985816%;
108
- }
109
- }
110
- @media (max-width: 740px) {
111
- .col-indent-2 {
112
- margin-left: 17.2727272727%;
113
- }
114
- }
115
- @media (max-width: 520px) {
116
- .col-indent-2 {
117
- margin-left: 17.3611111111%;
118
- }
47
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 2 + (1) * var(--gutter) + var(--gutter));
119
48
  }
120
49
 
121
50
  .col-3 {
122
- flex: 0 0 23.0263157895%;
123
- max-width: 23.0263157895%;
124
- }
125
- @media (max-width: 1020px) {
126
- .col-3 {
127
- flex: 0 0 23.085106383%;
128
- max-width: 23.085106383%;
129
- }
130
- }
131
- @media (max-width: 740px) {
132
- .col-3 {
133
- flex: 0 0 22.2727272727%;
134
- max-width: 22.2727272727%;
135
- }
136
- }
137
- @media (max-width: 520px) {
138
- .col-3 {
139
- flex: 0 0 21.875%;
140
- max-width: 21.875%;
141
- }
51
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
52
+ --col-width: calc(
53
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 3 +
54
+ ((2) * var(--gutter))
55
+ );
56
+ flex: 0 0 var(--col-width);
57
+ max-width: var(--col-width);
142
58
  }
143
59
 
144
60
  .col-indent-3 {
145
- margin-left: 25.6578947368%;
146
- }
147
- @media (max-width: 1020px) {
148
- .col-indent-3 {
149
- margin-left: 25.6382978723%;
150
- }
151
- }
152
- @media (max-width: 740px) {
153
- .col-indent-3 {
154
- margin-left: 25.9090909091%;
155
- }
156
- }
157
- @media (max-width: 520px) {
158
- .col-indent-3 {
159
- margin-left: 26.0416666667%;
160
- }
61
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 3 + (2) * var(--gutter) + var(--gutter));
161
62
  }
162
63
 
163
64
  .col-4 {
164
- flex: 0 0 31.5789473684%;
165
- max-width: 31.5789473684%;
166
- }
167
- @media (max-width: 1020px) {
168
- .col-4 {
169
- flex: 0 0 31.6312056738%;
170
- max-width: 31.6312056738%;
171
- }
172
- }
173
- @media (max-width: 740px) {
174
- .col-4 {
175
- flex: 0 0 30.9090909091%;
176
- max-width: 30.9090909091%;
177
- }
178
- }
179
- @media (max-width: 520px) {
180
- .col-4 {
181
- flex: 0 0 30.5555555556%;
182
- max-width: 30.5555555556%;
183
- }
65
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
66
+ --col-width: calc(
67
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 4 +
68
+ ((3) * var(--gutter))
69
+ );
70
+ flex: 0 0 var(--col-width);
71
+ max-width: var(--col-width);
184
72
  }
185
73
 
186
74
  .col-indent-4 {
187
- margin-left: 34.2105263158%;
188
- }
189
- @media (max-width: 1020px) {
190
- .col-indent-4 {
191
- margin-left: 34.1843971631%;
192
- }
193
- }
194
- @media (max-width: 740px) {
195
- .col-indent-4 {
196
- margin-left: 34.5454545455%;
197
- }
198
- }
199
- @media (max-width: 520px) {
200
- .col-indent-4 {
201
- margin-left: 34.7222222222%;
202
- }
75
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 4 + (3) * var(--gutter) + var(--gutter));
203
76
  }
204
77
 
205
78
  .col-5 {
206
- flex: 0 0 40.1315789474%;
207
- max-width: 40.1315789474%;
208
- }
209
- @media (max-width: 1020px) {
210
- .col-5 {
211
- flex: 0 0 40.1773049645%;
212
- max-width: 40.1773049645%;
213
- }
214
- }
215
- @media (max-width: 740px) {
216
- .col-5 {
217
- flex: 0 0 39.5454545455%;
218
- max-width: 39.5454545455%;
219
- }
220
- }
221
- @media (max-width: 520px) {
222
- .col-5 {
223
- flex: 0 0 39.2361111111%;
224
- max-width: 39.2361111111%;
225
- }
79
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
80
+ --col-width: calc(
81
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 5 +
82
+ ((4) * var(--gutter))
83
+ );
84
+ flex: 0 0 var(--col-width);
85
+ max-width: var(--col-width);
226
86
  }
227
87
 
228
88
  .col-indent-5 {
229
- margin-left: 42.7631578947%;
230
- }
231
- @media (max-width: 1020px) {
232
- .col-indent-5 {
233
- margin-left: 42.7304964539%;
234
- }
235
- }
236
- @media (max-width: 740px) {
237
- .col-indent-5 {
238
- margin-left: 43.1818181818%;
239
- }
240
- }
241
- @media (max-width: 520px) {
242
- .col-indent-5 {
243
- margin-left: 43.4027777778%;
244
- }
89
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 5 + (4) * var(--gutter) + var(--gutter));
245
90
  }
246
91
 
247
92
  .col-6 {
248
- flex: 0 0 48.6842105263%;
249
- max-width: 48.6842105263%;
250
- }
251
- @media (max-width: 1020px) {
252
- .col-6 {
253
- flex: 0 0 48.7234042553%;
254
- max-width: 48.7234042553%;
255
- }
256
- }
257
- @media (max-width: 740px) {
258
- .col-6 {
259
- flex: 0 0 48.1818181818%;
260
- max-width: 48.1818181818%;
261
- }
262
- }
263
- @media (max-width: 520px) {
264
- .col-6 {
265
- flex: 0 0 47.9166666667%;
266
- max-width: 47.9166666667%;
267
- }
93
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
94
+ --col-width: calc(
95
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 6 +
96
+ ((5) * var(--gutter))
97
+ );
98
+ flex: 0 0 var(--col-width);
99
+ max-width: var(--col-width);
268
100
  }
269
101
 
270
102
  .col-indent-6 {
271
- margin-left: 51.3157894737%;
272
- }
273
- @media (max-width: 1020px) {
274
- .col-indent-6 {
275
- margin-left: 51.2765957447%;
276
- }
277
- }
278
- @media (max-width: 740px) {
279
- .col-indent-6 {
280
- margin-left: 51.8181818182%;
281
- }
282
- }
283
- @media (max-width: 520px) {
284
- .col-indent-6 {
285
- margin-left: 52.0833333333%;
286
- }
103
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 6 + (5) * var(--gutter) + var(--gutter));
287
104
  }
288
105
 
289
106
  .col-7 {
290
- flex: 0 0 57.2368421053%;
291
- max-width: 57.2368421053%;
292
- }
293
- @media (max-width: 1020px) {
294
- .col-7 {
295
- flex: 0 0 57.2695035461%;
296
- max-width: 57.2695035461%;
297
- }
298
- }
299
- @media (max-width: 740px) {
300
- .col-7 {
301
- flex: 0 0 56.8181818182%;
302
- max-width: 56.8181818182%;
303
- }
304
- }
305
- @media (max-width: 520px) {
306
- .col-7 {
307
- flex: 0 0 56.5972222222%;
308
- max-width: 56.5972222222%;
309
- }
107
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
108
+ --col-width: calc(
109
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 7 +
110
+ ((6) * var(--gutter))
111
+ );
112
+ flex: 0 0 var(--col-width);
113
+ max-width: var(--col-width);
310
114
  }
311
115
 
312
116
  .col-indent-7 {
313
- margin-left: 59.8684210526%;
314
- }
315
- @media (max-width: 1020px) {
316
- .col-indent-7 {
317
- margin-left: 59.8226950355%;
318
- }
319
- }
320
- @media (max-width: 740px) {
321
- .col-indent-7 {
322
- margin-left: 60.4545454545%;
323
- }
324
- }
325
- @media (max-width: 520px) {
326
- .col-indent-7 {
327
- margin-left: 60.7638888889%;
328
- }
117
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 7 + (6) * var(--gutter) + var(--gutter));
329
118
  }
330
119
 
331
120
  .col-8 {
332
- flex: 0 0 65.7894736842%;
333
- max-width: 65.7894736842%;
334
- }
335
- @media (max-width: 1020px) {
336
- .col-8 {
337
- flex: 0 0 65.8156028369%;
338
- max-width: 65.8156028369%;
339
- }
340
- }
341
- @media (max-width: 740px) {
342
- .col-8 {
343
- flex: 0 0 65.4545454545%;
344
- max-width: 65.4545454545%;
345
- }
346
- }
347
- @media (max-width: 520px) {
348
- .col-8 {
349
- flex: 0 0 65.2777777778%;
350
- max-width: 65.2777777778%;
351
- }
121
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
122
+ --col-width: calc(
123
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 8 +
124
+ ((7) * var(--gutter))
125
+ );
126
+ flex: 0 0 var(--col-width);
127
+ max-width: var(--col-width);
352
128
  }
353
129
 
354
130
  .col-indent-8 {
355
- margin-left: 68.4210526316%;
356
- }
357
- @media (max-width: 1020px) {
358
- .col-indent-8 {
359
- margin-left: 68.3687943262%;
360
- }
361
- }
362
- @media (max-width: 740px) {
363
- .col-indent-8 {
364
- margin-left: 69.0909090909%;
365
- }
366
- }
367
- @media (max-width: 520px) {
368
- .col-indent-8 {
369
- margin-left: 69.4444444444%;
370
- }
131
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 8 + (7) * var(--gutter) + var(--gutter));
371
132
  }
372
133
 
373
134
  .col-9 {
374
- flex: 0 0 74.3421052632%;
375
- max-width: 74.3421052632%;
376
- }
377
- @media (max-width: 1020px) {
378
- .col-9 {
379
- flex: 0 0 74.3617021277%;
380
- max-width: 74.3617021277%;
381
- }
382
- }
383
- @media (max-width: 740px) {
384
- .col-9 {
385
- flex: 0 0 74.0909090909%;
386
- max-width: 74.0909090909%;
387
- }
388
- }
389
- @media (max-width: 520px) {
390
- .col-9 {
391
- flex: 0 0 73.9583333333%;
392
- max-width: 73.9583333333%;
393
- }
135
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
136
+ --col-width: calc(
137
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 9 +
138
+ ((8) * var(--gutter))
139
+ );
140
+ flex: 0 0 var(--col-width);
141
+ max-width: var(--col-width);
394
142
  }
395
143
 
396
144
  .col-indent-9 {
397
- margin-left: 76.9736842105%;
398
- }
399
- @media (max-width: 1020px) {
400
- .col-indent-9 {
401
- margin-left: 76.914893617%;
402
- }
403
- }
404
- @media (max-width: 740px) {
405
- .col-indent-9 {
406
- margin-left: 77.7272727273%;
407
- }
408
- }
409
- @media (max-width: 520px) {
410
- .col-indent-9 {
411
- margin-left: 78.125%;
412
- }
145
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 9 + (8) * var(--gutter) + var(--gutter));
413
146
  }
414
147
 
415
148
  .col-10 {
416
- flex: 0 0 82.8947368421%;
417
- max-width: 82.8947368421%;
418
- }
419
- @media (max-width: 1020px) {
420
- .col-10 {
421
- flex: 0 0 82.9078014184%;
422
- max-width: 82.9078014184%;
423
- }
424
- }
425
- @media (max-width: 740px) {
426
- .col-10 {
427
- flex: 0 0 82.7272727273%;
428
- max-width: 82.7272727273%;
429
- }
430
- }
431
- @media (max-width: 520px) {
432
- .col-10 {
433
- flex: 0 0 82.6388888889%;
434
- max-width: 82.6388888889%;
435
- }
149
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
150
+ --col-width: calc(
151
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 10 +
152
+ ((9) * var(--gutter))
153
+ );
154
+ flex: 0 0 var(--col-width);
155
+ max-width: var(--col-width);
436
156
  }
437
157
 
438
158
  .col-indent-10 {
439
- margin-left: 85.5263157895%;
440
- }
441
- @media (max-width: 1020px) {
442
- .col-indent-10 {
443
- margin-left: 85.4609929078%;
444
- }
445
- }
446
- @media (max-width: 740px) {
447
- .col-indent-10 {
448
- margin-left: 86.3636363636%;
449
- }
450
- }
451
- @media (max-width: 520px) {
452
- .col-indent-10 {
453
- margin-left: 86.8055555556%;
454
- }
159
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 10 + (9) * var(--gutter) + var(--gutter));
455
160
  }
456
161
 
457
162
  .col-11 {
458
- flex: 0 0 91.4473684211%;
459
- max-width: 91.4473684211%;
460
- }
461
- @media (max-width: 1020px) {
462
- .col-11 {
463
- flex: 0 0 91.4539007092%;
464
- max-width: 91.4539007092%;
465
- }
466
- }
467
- @media (max-width: 740px) {
468
- .col-11 {
469
- flex: 0 0 91.3636363636%;
470
- max-width: 91.3636363636%;
471
- }
472
- }
473
- @media (max-width: 520px) {
474
- .col-11 {
475
- flex: 0 0 91.3194444444%;
476
- max-width: 91.3194444444%;
477
- }
163
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
164
+ --col-width: calc(
165
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 11 +
166
+ ((10) * var(--gutter))
167
+ );
168
+ flex: 0 0 var(--col-width);
169
+ max-width: var(--col-width);
478
170
  }
479
171
 
480
172
  .col-indent-11 {
481
- margin-left: 94.0789473684%;
482
- }
483
- @media (max-width: 1020px) {
484
- .col-indent-11 {
485
- margin-left: 94.0070921986%;
486
- }
487
- }
488
- @media (max-width: 740px) {
489
- .col-indent-11 {
490
- margin-left: 95%;
491
- }
492
- }
493
- @media (max-width: 520px) {
494
- .col-indent-11 {
495
- margin-left: 95.4861111111%;
496
- }
173
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 11 + (10) * var(--gutter) + var(--gutter));
497
174
  }
498
175
 
499
176
  .col-12 {
500
- flex: 0 0 100%;
501
- max-width: 100%;
502
- }
503
- @media (max-width: 1020px) {
504
- .col-12 {
505
- flex: 0 0 100%;
506
- max-width: 100%;
507
- }
508
- }
509
- @media (max-width: 740px) {
510
- .col-12 {
511
- flex: 0 0 100%;
512
- max-width: 100%;
513
- }
514
- }
515
- @media (max-width: 520px) {
516
- .col-12 {
517
- flex: 0 0 100%;
518
- max-width: 100%;
519
- }
177
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
178
+ --col-width: calc(
179
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 12 +
180
+ ((11) * var(--gutter))
181
+ );
182
+ flex: 0 0 var(--col-width);
183
+ max-width: var(--col-width);
520
184
  }
521
185
 
522
186
  @media (max-width: 1520px) {
523
187
  .col-2xl-1 {
524
- flex: 0 0 5.9210526316%;
525
- max-width: 5.9210526316%;
188
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
189
+ --col-width: calc(
190
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 1 +
191
+ ((0) * var(--gutter))
192
+ );
193
+ flex: 0 0 var(--col-width);
194
+ max-width: var(--col-width);
526
195
  }
527
- }
528
- @media (max-width: 1520px) and (max-width: 1020px) {
529
- .col-2xl-1 {
530
- flex: 0 0 5.9929078014%;
531
- max-width: 5.9929078014%;
196
+ .col-indent-2xl-1 {
197
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 1 + (0) * var(--gutter) + var(--gutter));
532
198
  }
533
- }
534
- @media (max-width: 1520px) and (max-width: 740px) {
535
- .col-2xl-1 {
536
- flex: 0 0 5%;
537
- max-width: 5%;
199
+ .col-indent-2xl-0 {
200
+ margin-left: 0;
538
201
  }
539
- }
540
- @media (max-width: 1520px) and (max-width: 520px) {
541
- .col-2xl-1 {
542
- flex: 0 0 4.5138888889%;
543
- max-width: 4.5138888889%;
202
+ .col-2xl-2 {
203
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
204
+ --col-width: calc(
205
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 2 +
206
+ ((1) * var(--gutter))
207
+ );
208
+ flex: 0 0 var(--col-width);
209
+ max-width: var(--col-width);
544
210
  }
545
- }
546
- @media (max-width: 1520px) {
547
- .col-indent-2xl-1 {
548
- margin-left: 8.5526315789%;
211
+ .col-indent-2xl-2 {
212
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 2 + (1) * var(--gutter) + var(--gutter));
549
213
  }
550
- }
551
- @media (max-width: 1520px) and (max-width: 1020px) {
552
- .col-indent-2xl-1 {
553
- margin-left: 8.5460992908%;
214
+ .col-indent-2xl-0 {
215
+ margin-left: 0;
554
216
  }
555
- }
556
- @media (max-width: 1520px) and (max-width: 740px) {
557
- .col-indent-2xl-1 {
558
- margin-left: 8.6363636364%;
217
+ .col-2xl-3 {
218
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
219
+ --col-width: calc(
220
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 3 +
221
+ ((2) * var(--gutter))
222
+ );
223
+ flex: 0 0 var(--col-width);
224
+ max-width: var(--col-width);
559
225
  }
560
- }
561
- @media (max-width: 1520px) and (max-width: 520px) {
562
- .col-indent-2xl-1 {
563
- margin-left: 8.6805555556%;
226
+ .col-indent-2xl-3 {
227
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 3 + (2) * var(--gutter) + var(--gutter));
564
228
  }
565
- }
566
- @media (max-width: 1520px) {
567
229
  .col-indent-2xl-0 {
568
230
  margin-left: 0;
569
231
  }
570
- .col-2xl-2 {
571
- flex: 0 0 14.4736842105%;
572
- max-width: 14.4736842105%;
232
+ .col-2xl-4 {
233
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
234
+ --col-width: calc(
235
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 4 +
236
+ ((3) * var(--gutter))
237
+ );
238
+ flex: 0 0 var(--col-width);
239
+ max-width: var(--col-width);
573
240
  }
574
- }
575
- @media (max-width: 1520px) and (max-width: 1020px) {
576
- .col-2xl-2 {
577
- flex: 0 0 14.5390070922%;
578
- max-width: 14.5390070922%;
241
+ .col-indent-2xl-4 {
242
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 4 + (3) * var(--gutter) + var(--gutter));
579
243
  }
580
- }
581
- @media (max-width: 1520px) and (max-width: 740px) {
582
- .col-2xl-2 {
583
- flex: 0 0 13.6363636364%;
584
- max-width: 13.6363636364%;
244
+ .col-indent-2xl-0 {
245
+ margin-left: 0;
585
246
  }
586
- }
587
- @media (max-width: 1520px) and (max-width: 520px) {
588
- .col-2xl-2 {
589
- flex: 0 0 13.1944444444%;
590
- max-width: 13.1944444444%;
247
+ .col-2xl-5 {
248
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
249
+ --col-width: calc(
250
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 5 +
251
+ ((4) * var(--gutter))
252
+ );
253
+ flex: 0 0 var(--col-width);
254
+ max-width: var(--col-width);
591
255
  }
592
- }
593
- @media (max-width: 1520px) {
594
- .col-indent-2xl-2 {
595
- margin-left: 17.1052631579%;
596
- }
597
- }
598
- @media (max-width: 1520px) and (max-width: 1020px) {
599
- .col-indent-2xl-2 {
600
- margin-left: 17.0921985816%;
601
- }
602
- }
603
- @media (max-width: 1520px) and (max-width: 740px) {
604
- .col-indent-2xl-2 {
605
- margin-left: 17.2727272727%;
606
- }
607
- }
608
- @media (max-width: 1520px) and (max-width: 520px) {
609
- .col-indent-2xl-2 {
610
- margin-left: 17.3611111111%;
256
+ .col-indent-2xl-5 {
257
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 5 + (4) * var(--gutter) + var(--gutter));
611
258
  }
612
- }
613
- @media (max-width: 1520px) {
614
259
  .col-indent-2xl-0 {
615
260
  margin-left: 0;
616
261
  }
617
- .col-2xl-3 {
618
- flex: 0 0 23.0263157895%;
619
- max-width: 23.0263157895%;
262
+ .col-2xl-6 {
263
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
264
+ --col-width: calc(
265
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 6 +
266
+ ((5) * var(--gutter))
267
+ );
268
+ flex: 0 0 var(--col-width);
269
+ max-width: var(--col-width);
620
270
  }
621
- }
622
- @media (max-width: 1520px) and (max-width: 1020px) {
623
- .col-2xl-3 {
624
- flex: 0 0 23.085106383%;
625
- max-width: 23.085106383%;
271
+ .col-indent-2xl-6 {
272
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 6 + (5) * var(--gutter) + var(--gutter));
626
273
  }
627
- }
628
- @media (max-width: 1520px) and (max-width: 740px) {
629
- .col-2xl-3 {
630
- flex: 0 0 22.2727272727%;
631
- max-width: 22.2727272727%;
274
+ .col-indent-2xl-0 {
275
+ margin-left: 0;
632
276
  }
633
- }
634
- @media (max-width: 1520px) and (max-width: 520px) {
635
- .col-2xl-3 {
636
- flex: 0 0 21.875%;
637
- max-width: 21.875%;
277
+ .col-2xl-7 {
278
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
279
+ --col-width: calc(
280
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 7 +
281
+ ((6) * var(--gutter))
282
+ );
283
+ flex: 0 0 var(--col-width);
284
+ max-width: var(--col-width);
638
285
  }
639
- }
640
- @media (max-width: 1520px) {
641
- .col-indent-2xl-3 {
642
- margin-left: 25.6578947368%;
286
+ .col-indent-2xl-7 {
287
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 7 + (6) * var(--gutter) + var(--gutter));
643
288
  }
644
- }
645
- @media (max-width: 1520px) and (max-width: 1020px) {
646
- .col-indent-2xl-3 {
647
- margin-left: 25.6382978723%;
289
+ .col-indent-2xl-0 {
290
+ margin-left: 0;
648
291
  }
649
- }
650
- @media (max-width: 1520px) and (max-width: 740px) {
651
- .col-indent-2xl-3 {
652
- margin-left: 25.9090909091%;
292
+ .col-2xl-8 {
293
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
294
+ --col-width: calc(
295
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 8 +
296
+ ((7) * var(--gutter))
297
+ );
298
+ flex: 0 0 var(--col-width);
299
+ max-width: var(--col-width);
653
300
  }
654
- }
655
- @media (max-width: 1520px) and (max-width: 520px) {
656
- .col-indent-2xl-3 {
657
- margin-left: 26.0416666667%;
301
+ .col-indent-2xl-8 {
302
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 8 + (7) * var(--gutter) + var(--gutter));
658
303
  }
659
- }
660
- @media (max-width: 1520px) {
661
304
  .col-indent-2xl-0 {
662
305
  margin-left: 0;
663
306
  }
664
- .col-2xl-4 {
665
- flex: 0 0 31.5789473684%;
666
- max-width: 31.5789473684%;
307
+ .col-2xl-9 {
308
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
309
+ --col-width: calc(
310
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 9 +
311
+ ((8) * var(--gutter))
312
+ );
313
+ flex: 0 0 var(--col-width);
314
+ max-width: var(--col-width);
667
315
  }
668
- }
669
- @media (max-width: 1520px) and (max-width: 1020px) {
670
- .col-2xl-4 {
671
- flex: 0 0 31.6312056738%;
672
- max-width: 31.6312056738%;
316
+ .col-indent-2xl-9 {
317
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 9 + (8) * var(--gutter) + var(--gutter));
673
318
  }
674
- }
675
- @media (max-width: 1520px) and (max-width: 740px) {
676
- .col-2xl-4 {
677
- flex: 0 0 30.9090909091%;
678
- max-width: 30.9090909091%;
319
+ .col-indent-2xl-0 {
320
+ margin-left: 0;
679
321
  }
680
- }
681
- @media (max-width: 1520px) and (max-width: 520px) {
682
- .col-2xl-4 {
683
- flex: 0 0 30.5555555556%;
684
- max-width: 30.5555555556%;
322
+ .col-2xl-10 {
323
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
324
+ --col-width: calc(
325
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 10 +
326
+ ((9) * var(--gutter))
327
+ );
328
+ flex: 0 0 var(--col-width);
329
+ max-width: var(--col-width);
685
330
  }
686
- }
687
- @media (max-width: 1520px) {
688
- .col-indent-2xl-4 {
689
- margin-left: 34.2105263158%;
331
+ .col-indent-2xl-10 {
332
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 10 + (9) * var(--gutter) + var(--gutter));
690
333
  }
691
- }
692
- @media (max-width: 1520px) and (max-width: 1020px) {
693
- .col-indent-2xl-4 {
694
- margin-left: 34.1843971631%;
334
+ .col-indent-2xl-0 {
335
+ margin-left: 0;
695
336
  }
696
- }
697
- @media (max-width: 1520px) and (max-width: 740px) {
698
- .col-indent-2xl-4 {
699
- margin-left: 34.5454545455%;
337
+ .col-2xl-11 {
338
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
339
+ --col-width: calc(
340
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 11 +
341
+ ((10) * var(--gutter))
342
+ );
343
+ flex: 0 0 var(--col-width);
344
+ max-width: var(--col-width);
700
345
  }
701
- }
702
- @media (max-width: 1520px) and (max-width: 520px) {
703
- .col-indent-2xl-4 {
704
- margin-left: 34.7222222222%;
346
+ .col-indent-2xl-11 {
347
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 11 + (10) * var(--gutter) + var(--gutter));
705
348
  }
706
- }
707
- @media (max-width: 1520px) {
708
349
  .col-indent-2xl-0 {
709
350
  margin-left: 0;
710
351
  }
711
- .col-2xl-5 {
712
- flex: 0 0 40.1315789474%;
713
- max-width: 40.1315789474%;
714
- }
715
- }
716
- @media (max-width: 1520px) and (max-width: 1020px) {
717
- .col-2xl-5 {
718
- flex: 0 0 40.1773049645%;
719
- max-width: 40.1773049645%;
352
+ .col-2xl-12 {
353
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
354
+ --col-width: calc(
355
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 12 +
356
+ ((11) * var(--gutter))
357
+ );
358
+ flex: 0 0 var(--col-width);
359
+ max-width: var(--col-width);
720
360
  }
721
- }
722
- @media (max-width: 1520px) and (max-width: 740px) {
723
- .col-2xl-5 {
724
- flex: 0 0 39.5454545455%;
725
- max-width: 39.5454545455%;
361
+ .col-indent-2xl-0 {
362
+ margin-left: 0;
726
363
  }
727
364
  }
728
- @media (max-width: 1520px) and (max-width: 520px) {
729
- .col-2xl-5 {
730
- flex: 0 0 39.2361111111%;
731
- max-width: 39.2361111111%;
365
+ @media (max-width: 1240px) {
366
+ .col-xl-1 {
367
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
368
+ --col-width: calc(
369
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 1 +
370
+ ((0) * var(--gutter))
371
+ );
372
+ flex: 0 0 var(--col-width);
373
+ max-width: var(--col-width);
732
374
  }
733
- }
734
- @media (max-width: 1520px) {
735
- .col-indent-2xl-5 {
736
- margin-left: 42.7631578947%;
375
+ .col-indent-xl-1 {
376
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 1 + (0) * var(--gutter) + var(--gutter));
737
377
  }
738
- }
739
- @media (max-width: 1520px) and (max-width: 1020px) {
740
- .col-indent-2xl-5 {
741
- margin-left: 42.7304964539%;
378
+ .col-indent-xl-0 {
379
+ margin-left: 0;
742
380
  }
743
- }
744
- @media (max-width: 1520px) and (max-width: 740px) {
745
- .col-indent-2xl-5 {
746
- margin-left: 43.1818181818%;
381
+ .col-xl-2 {
382
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
383
+ --col-width: calc(
384
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 2 +
385
+ ((1) * var(--gutter))
386
+ );
387
+ flex: 0 0 var(--col-width);
388
+ max-width: var(--col-width);
747
389
  }
748
- }
749
- @media (max-width: 1520px) and (max-width: 520px) {
750
- .col-indent-2xl-5 {
751
- margin-left: 43.4027777778%;
390
+ .col-indent-xl-2 {
391
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 2 + (1) * var(--gutter) + var(--gutter));
752
392
  }
753
- }
754
- @media (max-width: 1520px) {
755
- .col-indent-2xl-0 {
393
+ .col-indent-xl-0 {
756
394
  margin-left: 0;
757
395
  }
758
- .col-2xl-6 {
759
- flex: 0 0 48.6842105263%;
760
- max-width: 48.6842105263%;
396
+ .col-xl-3 {
397
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
398
+ --col-width: calc(
399
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 3 +
400
+ ((2) * var(--gutter))
401
+ );
402
+ flex: 0 0 var(--col-width);
403
+ max-width: var(--col-width);
761
404
  }
762
- }
763
- @media (max-width: 1520px) and (max-width: 1020px) {
764
- .col-2xl-6 {
765
- flex: 0 0 48.7234042553%;
766
- max-width: 48.7234042553%;
405
+ .col-indent-xl-3 {
406
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 3 + (2) * var(--gutter) + var(--gutter));
767
407
  }
768
- }
769
- @media (max-width: 1520px) and (max-width: 740px) {
770
- .col-2xl-6 {
771
- flex: 0 0 48.1818181818%;
772
- max-width: 48.1818181818%;
408
+ .col-indent-xl-0 {
409
+ margin-left: 0;
773
410
  }
774
- }
775
- @media (max-width: 1520px) and (max-width: 520px) {
776
- .col-2xl-6 {
777
- flex: 0 0 47.9166666667%;
778
- max-width: 47.9166666667%;
411
+ .col-xl-4 {
412
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
413
+ --col-width: calc(
414
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 4 +
415
+ ((3) * var(--gutter))
416
+ );
417
+ flex: 0 0 var(--col-width);
418
+ max-width: var(--col-width);
779
419
  }
780
- }
781
- @media (max-width: 1520px) {
782
- .col-indent-2xl-6 {
783
- margin-left: 51.3157894737%;
420
+ .col-indent-xl-4 {
421
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 4 + (3) * var(--gutter) + var(--gutter));
784
422
  }
785
- }
786
- @media (max-width: 1520px) and (max-width: 1020px) {
787
- .col-indent-2xl-6 {
788
- margin-left: 51.2765957447%;
423
+ .col-indent-xl-0 {
424
+ margin-left: 0;
789
425
  }
790
- }
791
- @media (max-width: 1520px) and (max-width: 740px) {
792
- .col-indent-2xl-6 {
793
- margin-left: 51.8181818182%;
426
+ .col-xl-5 {
427
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
428
+ --col-width: calc(
429
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 5 +
430
+ ((4) * var(--gutter))
431
+ );
432
+ flex: 0 0 var(--col-width);
433
+ max-width: var(--col-width);
794
434
  }
795
- }
796
- @media (max-width: 1520px) and (max-width: 520px) {
797
- .col-indent-2xl-6 {
798
- margin-left: 52.0833333333%;
435
+ .col-indent-xl-5 {
436
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 5 + (4) * var(--gutter) + var(--gutter));
799
437
  }
800
- }
801
- @media (max-width: 1520px) {
802
- .col-indent-2xl-0 {
438
+ .col-indent-xl-0 {
803
439
  margin-left: 0;
804
440
  }
805
- .col-2xl-7 {
806
- flex: 0 0 57.2368421053%;
807
- max-width: 57.2368421053%;
441
+ .col-xl-6 {
442
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
443
+ --col-width: calc(
444
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 6 +
445
+ ((5) * var(--gutter))
446
+ );
447
+ flex: 0 0 var(--col-width);
448
+ max-width: var(--col-width);
808
449
  }
809
- }
810
- @media (max-width: 1520px) and (max-width: 1020px) {
811
- .col-2xl-7 {
812
- flex: 0 0 57.2695035461%;
813
- max-width: 57.2695035461%;
450
+ .col-indent-xl-6 {
451
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 6 + (5) * var(--gutter) + var(--gutter));
814
452
  }
815
- }
816
- @media (max-width: 1520px) and (max-width: 740px) {
817
- .col-2xl-7 {
818
- flex: 0 0 56.8181818182%;
819
- max-width: 56.8181818182%;
453
+ .col-indent-xl-0 {
454
+ margin-left: 0;
820
455
  }
821
- }
822
- @media (max-width: 1520px) and (max-width: 520px) {
823
- .col-2xl-7 {
824
- flex: 0 0 56.5972222222%;
825
- max-width: 56.5972222222%;
456
+ .col-xl-7 {
457
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
458
+ --col-width: calc(
459
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 7 +
460
+ ((6) * var(--gutter))
461
+ );
462
+ flex: 0 0 var(--col-width);
463
+ max-width: var(--col-width);
826
464
  }
827
- }
828
- @media (max-width: 1520px) {
829
- .col-indent-2xl-7 {
830
- margin-left: 59.8684210526%;
465
+ .col-indent-xl-7 {
466
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 7 + (6) * var(--gutter) + var(--gutter));
831
467
  }
832
- }
833
- @media (max-width: 1520px) and (max-width: 1020px) {
834
- .col-indent-2xl-7 {
835
- margin-left: 59.8226950355%;
468
+ .col-indent-xl-0 {
469
+ margin-left: 0;
836
470
  }
837
- }
838
- @media (max-width: 1520px) and (max-width: 740px) {
839
- .col-indent-2xl-7 {
840
- margin-left: 60.4545454545%;
471
+ .col-xl-8 {
472
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
473
+ --col-width: calc(
474
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 8 +
475
+ ((7) * var(--gutter))
476
+ );
477
+ flex: 0 0 var(--col-width);
478
+ max-width: var(--col-width);
841
479
  }
842
- }
843
- @media (max-width: 1520px) and (max-width: 520px) {
844
- .col-indent-2xl-7 {
845
- margin-left: 60.7638888889%;
480
+ .col-indent-xl-8 {
481
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 8 + (7) * var(--gutter) + var(--gutter));
846
482
  }
847
- }
848
- @media (max-width: 1520px) {
849
- .col-indent-2xl-0 {
483
+ .col-indent-xl-0 {
850
484
  margin-left: 0;
851
485
  }
852
- .col-2xl-8 {
853
- flex: 0 0 65.7894736842%;
854
- max-width: 65.7894736842%;
486
+ .col-xl-9 {
487
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
488
+ --col-width: calc(
489
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 9 +
490
+ ((8) * var(--gutter))
491
+ );
492
+ flex: 0 0 var(--col-width);
493
+ max-width: var(--col-width);
855
494
  }
856
- }
857
- @media (max-width: 1520px) and (max-width: 1020px) {
858
- .col-2xl-8 {
859
- flex: 0 0 65.8156028369%;
860
- max-width: 65.8156028369%;
495
+ .col-indent-xl-9 {
496
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 9 + (8) * var(--gutter) + var(--gutter));
861
497
  }
862
- }
863
- @media (max-width: 1520px) and (max-width: 740px) {
864
- .col-2xl-8 {
865
- flex: 0 0 65.4545454545%;
866
- max-width: 65.4545454545%;
498
+ .col-indent-xl-0 {
499
+ margin-left: 0;
867
500
  }
868
- }
869
- @media (max-width: 1520px) and (max-width: 520px) {
870
- .col-2xl-8 {
871
- flex: 0 0 65.2777777778%;
872
- max-width: 65.2777777778%;
501
+ .col-xl-10 {
502
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
503
+ --col-width: calc(
504
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 10 +
505
+ ((9) * var(--gutter))
506
+ );
507
+ flex: 0 0 var(--col-width);
508
+ max-width: var(--col-width);
873
509
  }
874
- }
875
- @media (max-width: 1520px) {
876
- .col-indent-2xl-8 {
877
- margin-left: 68.4210526316%;
510
+ .col-indent-xl-10 {
511
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 10 + (9) * var(--gutter) + var(--gutter));
878
512
  }
879
- }
880
- @media (max-width: 1520px) and (max-width: 1020px) {
881
- .col-indent-2xl-8 {
882
- margin-left: 68.3687943262%;
513
+ .col-indent-xl-0 {
514
+ margin-left: 0;
883
515
  }
884
- }
885
- @media (max-width: 1520px) and (max-width: 740px) {
886
- .col-indent-2xl-8 {
887
- margin-left: 69.0909090909%;
516
+ .col-xl-11 {
517
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
518
+ --col-width: calc(
519
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 11 +
520
+ ((10) * var(--gutter))
521
+ );
522
+ flex: 0 0 var(--col-width);
523
+ max-width: var(--col-width);
888
524
  }
889
- }
890
- @media (max-width: 1520px) and (max-width: 520px) {
891
- .col-indent-2xl-8 {
892
- margin-left: 69.4444444444%;
525
+ .col-indent-xl-11 {
526
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 11 + (10) * var(--gutter) + var(--gutter));
893
527
  }
894
- }
895
- @media (max-width: 1520px) {
896
- .col-indent-2xl-0 {
528
+ .col-indent-xl-0 {
897
529
  margin-left: 0;
898
530
  }
899
- .col-2xl-9 {
900
- flex: 0 0 74.3421052632%;
901
- max-width: 74.3421052632%;
902
- }
903
- }
904
- @media (max-width: 1520px) and (max-width: 1020px) {
905
- .col-2xl-9 {
906
- flex: 0 0 74.3617021277%;
907
- max-width: 74.3617021277%;
531
+ .col-xl-12 {
532
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
533
+ --col-width: calc(
534
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 12 +
535
+ ((11) * var(--gutter))
536
+ );
537
+ flex: 0 0 var(--col-width);
538
+ max-width: var(--col-width);
908
539
  }
909
- }
910
- @media (max-width: 1520px) and (max-width: 740px) {
911
- .col-2xl-9 {
912
- flex: 0 0 74.0909090909%;
913
- max-width: 74.0909090909%;
540
+ .col-indent-xl-0 {
541
+ margin-left: 0;
914
542
  }
915
543
  }
916
- @media (max-width: 1520px) and (max-width: 520px) {
917
- .col-2xl-9 {
918
- flex: 0 0 73.9583333333%;
919
- max-width: 73.9583333333%;
544
+ @media (max-width: 1020px) {
545
+ .col-lg-1 {
546
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
547
+ --col-width: calc(
548
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 1 +
549
+ ((0) * var(--gutter))
550
+ );
551
+ flex: 0 0 var(--col-width);
552
+ max-width: var(--col-width);
920
553
  }
921
- }
922
- @media (max-width: 1520px) {
923
- .col-indent-2xl-9 {
924
- margin-left: 76.9736842105%;
554
+ .col-indent-lg-1 {
555
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 1 + (0) * var(--gutter) + var(--gutter));
925
556
  }
926
- }
927
- @media (max-width: 1520px) and (max-width: 1020px) {
928
- .col-indent-2xl-9 {
929
- margin-left: 76.914893617%;
557
+ .col-indent-lg-0 {
558
+ margin-left: 0;
930
559
  }
931
- }
932
- @media (max-width: 1520px) and (max-width: 740px) {
933
- .col-indent-2xl-9 {
934
- margin-left: 77.7272727273%;
560
+ .col-lg-2 {
561
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
562
+ --col-width: calc(
563
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 2 +
564
+ ((1) * var(--gutter))
565
+ );
566
+ flex: 0 0 var(--col-width);
567
+ max-width: var(--col-width);
935
568
  }
936
- }
937
- @media (max-width: 1520px) and (max-width: 520px) {
938
- .col-indent-2xl-9 {
939
- margin-left: 78.125%;
569
+ .col-indent-lg-2 {
570
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 2 + (1) * var(--gutter) + var(--gutter));
940
571
  }
941
- }
942
- @media (max-width: 1520px) {
943
- .col-indent-2xl-0 {
572
+ .col-indent-lg-0 {
944
573
  margin-left: 0;
945
574
  }
946
- .col-2xl-10 {
947
- flex: 0 0 82.8947368421%;
948
- max-width: 82.8947368421%;
575
+ .col-lg-3 {
576
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
577
+ --col-width: calc(
578
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 3 +
579
+ ((2) * var(--gutter))
580
+ );
581
+ flex: 0 0 var(--col-width);
582
+ max-width: var(--col-width);
949
583
  }
950
- }
951
- @media (max-width: 1520px) and (max-width: 1020px) {
952
- .col-2xl-10 {
953
- flex: 0 0 82.9078014184%;
954
- max-width: 82.9078014184%;
584
+ .col-indent-lg-3 {
585
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 3 + (2) * var(--gutter) + var(--gutter));
955
586
  }
956
- }
957
- @media (max-width: 1520px) and (max-width: 740px) {
958
- .col-2xl-10 {
959
- flex: 0 0 82.7272727273%;
960
- max-width: 82.7272727273%;
587
+ .col-indent-lg-0 {
588
+ margin-left: 0;
961
589
  }
962
- }
963
- @media (max-width: 1520px) and (max-width: 520px) {
964
- .col-2xl-10 {
965
- flex: 0 0 82.6388888889%;
966
- max-width: 82.6388888889%;
590
+ .col-lg-4 {
591
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
592
+ --col-width: calc(
593
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 4 +
594
+ ((3) * var(--gutter))
595
+ );
596
+ flex: 0 0 var(--col-width);
597
+ max-width: var(--col-width);
967
598
  }
968
- }
969
- @media (max-width: 1520px) {
970
- .col-indent-2xl-10 {
971
- margin-left: 85.5263157895%;
599
+ .col-indent-lg-4 {
600
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 4 + (3) * var(--gutter) + var(--gutter));
972
601
  }
973
- }
974
- @media (max-width: 1520px) and (max-width: 1020px) {
975
- .col-indent-2xl-10 {
976
- margin-left: 85.4609929078%;
602
+ .col-indent-lg-0 {
603
+ margin-left: 0;
977
604
  }
978
- }
979
- @media (max-width: 1520px) and (max-width: 740px) {
980
- .col-indent-2xl-10 {
981
- margin-left: 86.3636363636%;
605
+ .col-lg-5 {
606
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
607
+ --col-width: calc(
608
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 5 +
609
+ ((4) * var(--gutter))
610
+ );
611
+ flex: 0 0 var(--col-width);
612
+ max-width: var(--col-width);
982
613
  }
983
- }
984
- @media (max-width: 1520px) and (max-width: 520px) {
985
- .col-indent-2xl-10 {
986
- margin-left: 86.8055555556%;
614
+ .col-indent-lg-5 {
615
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 5 + (4) * var(--gutter) + var(--gutter));
987
616
  }
988
- }
989
- @media (max-width: 1520px) {
990
- .col-indent-2xl-0 {
617
+ .col-indent-lg-0 {
991
618
  margin-left: 0;
992
619
  }
993
- .col-2xl-11 {
994
- flex: 0 0 91.4473684211%;
995
- max-width: 91.4473684211%;
620
+ .col-lg-6 {
621
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
622
+ --col-width: calc(
623
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 6 +
624
+ ((5) * var(--gutter))
625
+ );
626
+ flex: 0 0 var(--col-width);
627
+ max-width: var(--col-width);
996
628
  }
997
- }
998
- @media (max-width: 1520px) and (max-width: 1020px) {
999
- .col-2xl-11 {
1000
- flex: 0 0 91.4539007092%;
1001
- max-width: 91.4539007092%;
629
+ .col-indent-lg-6 {
630
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 6 + (5) * var(--gutter) + var(--gutter));
1002
631
  }
1003
- }
1004
- @media (max-width: 1520px) and (max-width: 740px) {
1005
- .col-2xl-11 {
1006
- flex: 0 0 91.3636363636%;
1007
- max-width: 91.3636363636%;
1008
- }
1009
- }
1010
- @media (max-width: 1520px) and (max-width: 520px) {
1011
- .col-2xl-11 {
1012
- flex: 0 0 91.3194444444%;
1013
- max-width: 91.3194444444%;
1014
- }
1015
- }
1016
- @media (max-width: 1520px) {
1017
- .col-indent-2xl-11 {
1018
- margin-left: 94.0789473684%;
1019
- }
1020
- }
1021
- @media (max-width: 1520px) and (max-width: 1020px) {
1022
- .col-indent-2xl-11 {
1023
- margin-left: 94.0070921986%;
1024
- }
1025
- }
1026
- @media (max-width: 1520px) and (max-width: 740px) {
1027
- .col-indent-2xl-11 {
1028
- margin-left: 95%;
1029
- }
1030
- }
1031
- @media (max-width: 1520px) and (max-width: 520px) {
1032
- .col-indent-2xl-11 {
1033
- margin-left: 95.4861111111%;
1034
- }
1035
- }
1036
- @media (max-width: 1520px) {
1037
- .col-indent-2xl-0 {
1038
- margin-left: 0;
1039
- }
1040
- .col-2xl-12 {
1041
- flex: 0 0 100%;
1042
- max-width: 100%;
1043
- }
1044
- }
1045
- @media (max-width: 1520px) and (max-width: 1020px) {
1046
- .col-2xl-12 {
1047
- flex: 0 0 100%;
1048
- max-width: 100%;
1049
- }
1050
- }
1051
- @media (max-width: 1520px) and (max-width: 740px) {
1052
- .col-2xl-12 {
1053
- flex: 0 0 100%;
1054
- max-width: 100%;
1055
- }
1056
- }
1057
- @media (max-width: 1520px) and (max-width: 520px) {
1058
- .col-2xl-12 {
1059
- flex: 0 0 100%;
1060
- max-width: 100%;
1061
- }
1062
- }
1063
- @media (max-width: 1520px) {
1064
- .col-indent-2xl-0 {
1065
- margin-left: 0;
1066
- }
1067
- }
1068
- @media (max-width: 1240px) {
1069
- .col-xl-1 {
1070
- flex: 0 0 5.9210526316%;
1071
- max-width: 5.9210526316%;
1072
- }
1073
- }
1074
- @media (max-width: 1240px) and (max-width: 1020px) {
1075
- .col-xl-1 {
1076
- flex: 0 0 5.9929078014%;
1077
- max-width: 5.9929078014%;
1078
- }
1079
- }
1080
- @media (max-width: 1240px) and (max-width: 740px) {
1081
- .col-xl-1 {
1082
- flex: 0 0 5%;
1083
- max-width: 5%;
1084
- }
1085
- }
1086
- @media (max-width: 1240px) and (max-width: 520px) {
1087
- .col-xl-1 {
1088
- flex: 0 0 4.5138888889%;
1089
- max-width: 4.5138888889%;
1090
- }
1091
- }
1092
- @media (max-width: 1240px) {
1093
- .col-indent-xl-1 {
1094
- margin-left: 8.5526315789%;
1095
- }
1096
- }
1097
- @media (max-width: 1240px) and (max-width: 1020px) {
1098
- .col-indent-xl-1 {
1099
- margin-left: 8.5460992908%;
1100
- }
1101
- }
1102
- @media (max-width: 1240px) and (max-width: 740px) {
1103
- .col-indent-xl-1 {
1104
- margin-left: 8.6363636364%;
1105
- }
1106
- }
1107
- @media (max-width: 1240px) and (max-width: 520px) {
1108
- .col-indent-xl-1 {
1109
- margin-left: 8.6805555556%;
1110
- }
1111
- }
1112
- @media (max-width: 1240px) {
1113
- .col-indent-xl-0 {
1114
- margin-left: 0;
1115
- }
1116
- .col-xl-2 {
1117
- flex: 0 0 14.4736842105%;
1118
- max-width: 14.4736842105%;
1119
- }
1120
- }
1121
- @media (max-width: 1240px) and (max-width: 1020px) {
1122
- .col-xl-2 {
1123
- flex: 0 0 14.5390070922%;
1124
- max-width: 14.5390070922%;
1125
- }
1126
- }
1127
- @media (max-width: 1240px) and (max-width: 740px) {
1128
- .col-xl-2 {
1129
- flex: 0 0 13.6363636364%;
1130
- max-width: 13.6363636364%;
1131
- }
1132
- }
1133
- @media (max-width: 1240px) and (max-width: 520px) {
1134
- .col-xl-2 {
1135
- flex: 0 0 13.1944444444%;
1136
- max-width: 13.1944444444%;
1137
- }
1138
- }
1139
- @media (max-width: 1240px) {
1140
- .col-indent-xl-2 {
1141
- margin-left: 17.1052631579%;
1142
- }
1143
- }
1144
- @media (max-width: 1240px) and (max-width: 1020px) {
1145
- .col-indent-xl-2 {
1146
- margin-left: 17.0921985816%;
1147
- }
1148
- }
1149
- @media (max-width: 1240px) and (max-width: 740px) {
1150
- .col-indent-xl-2 {
1151
- margin-left: 17.2727272727%;
1152
- }
1153
- }
1154
- @media (max-width: 1240px) and (max-width: 520px) {
1155
- .col-indent-xl-2 {
1156
- margin-left: 17.3611111111%;
1157
- }
1158
- }
1159
- @media (max-width: 1240px) {
1160
- .col-indent-xl-0 {
1161
- margin-left: 0;
1162
- }
1163
- .col-xl-3 {
1164
- flex: 0 0 23.0263157895%;
1165
- max-width: 23.0263157895%;
1166
- }
1167
- }
1168
- @media (max-width: 1240px) and (max-width: 1020px) {
1169
- .col-xl-3 {
1170
- flex: 0 0 23.085106383%;
1171
- max-width: 23.085106383%;
1172
- }
1173
- }
1174
- @media (max-width: 1240px) and (max-width: 740px) {
1175
- .col-xl-3 {
1176
- flex: 0 0 22.2727272727%;
1177
- max-width: 22.2727272727%;
1178
- }
1179
- }
1180
- @media (max-width: 1240px) and (max-width: 520px) {
1181
- .col-xl-3 {
1182
- flex: 0 0 21.875%;
1183
- max-width: 21.875%;
1184
- }
1185
- }
1186
- @media (max-width: 1240px) {
1187
- .col-indent-xl-3 {
1188
- margin-left: 25.6578947368%;
1189
- }
1190
- }
1191
- @media (max-width: 1240px) and (max-width: 1020px) {
1192
- .col-indent-xl-3 {
1193
- margin-left: 25.6382978723%;
1194
- }
1195
- }
1196
- @media (max-width: 1240px) and (max-width: 740px) {
1197
- .col-indent-xl-3 {
1198
- margin-left: 25.9090909091%;
1199
- }
1200
- }
1201
- @media (max-width: 1240px) and (max-width: 520px) {
1202
- .col-indent-xl-3 {
1203
- margin-left: 26.0416666667%;
1204
- }
1205
- }
1206
- @media (max-width: 1240px) {
1207
- .col-indent-xl-0 {
1208
- margin-left: 0;
1209
- }
1210
- .col-xl-4 {
1211
- flex: 0 0 31.5789473684%;
1212
- max-width: 31.5789473684%;
1213
- }
1214
- }
1215
- @media (max-width: 1240px) and (max-width: 1020px) {
1216
- .col-xl-4 {
1217
- flex: 0 0 31.6312056738%;
1218
- max-width: 31.6312056738%;
1219
- }
1220
- }
1221
- @media (max-width: 1240px) and (max-width: 740px) {
1222
- .col-xl-4 {
1223
- flex: 0 0 30.9090909091%;
1224
- max-width: 30.9090909091%;
1225
- }
1226
- }
1227
- @media (max-width: 1240px) and (max-width: 520px) {
1228
- .col-xl-4 {
1229
- flex: 0 0 30.5555555556%;
1230
- max-width: 30.5555555556%;
1231
- }
1232
- }
1233
- @media (max-width: 1240px) {
1234
- .col-indent-xl-4 {
1235
- margin-left: 34.2105263158%;
1236
- }
1237
- }
1238
- @media (max-width: 1240px) and (max-width: 1020px) {
1239
- .col-indent-xl-4 {
1240
- margin-left: 34.1843971631%;
1241
- }
1242
- }
1243
- @media (max-width: 1240px) and (max-width: 740px) {
1244
- .col-indent-xl-4 {
1245
- margin-left: 34.5454545455%;
1246
- }
1247
- }
1248
- @media (max-width: 1240px) and (max-width: 520px) {
1249
- .col-indent-xl-4 {
1250
- margin-left: 34.7222222222%;
1251
- }
1252
- }
1253
- @media (max-width: 1240px) {
1254
- .col-indent-xl-0 {
1255
- margin-left: 0;
1256
- }
1257
- .col-xl-5 {
1258
- flex: 0 0 40.1315789474%;
1259
- max-width: 40.1315789474%;
1260
- }
1261
- }
1262
- @media (max-width: 1240px) and (max-width: 1020px) {
1263
- .col-xl-5 {
1264
- flex: 0 0 40.1773049645%;
1265
- max-width: 40.1773049645%;
1266
- }
1267
- }
1268
- @media (max-width: 1240px) and (max-width: 740px) {
1269
- .col-xl-5 {
1270
- flex: 0 0 39.5454545455%;
1271
- max-width: 39.5454545455%;
1272
- }
1273
- }
1274
- @media (max-width: 1240px) and (max-width: 520px) {
1275
- .col-xl-5 {
1276
- flex: 0 0 39.2361111111%;
1277
- max-width: 39.2361111111%;
1278
- }
1279
- }
1280
- @media (max-width: 1240px) {
1281
- .col-indent-xl-5 {
1282
- margin-left: 42.7631578947%;
1283
- }
1284
- }
1285
- @media (max-width: 1240px) and (max-width: 1020px) {
1286
- .col-indent-xl-5 {
1287
- margin-left: 42.7304964539%;
1288
- }
1289
- }
1290
- @media (max-width: 1240px) and (max-width: 740px) {
1291
- .col-indent-xl-5 {
1292
- margin-left: 43.1818181818%;
1293
- }
1294
- }
1295
- @media (max-width: 1240px) and (max-width: 520px) {
1296
- .col-indent-xl-5 {
1297
- margin-left: 43.4027777778%;
1298
- }
1299
- }
1300
- @media (max-width: 1240px) {
1301
- .col-indent-xl-0 {
1302
- margin-left: 0;
1303
- }
1304
- .col-xl-6 {
1305
- flex: 0 0 48.6842105263%;
1306
- max-width: 48.6842105263%;
1307
- }
1308
- }
1309
- @media (max-width: 1240px) and (max-width: 1020px) {
1310
- .col-xl-6 {
1311
- flex: 0 0 48.7234042553%;
1312
- max-width: 48.7234042553%;
1313
- }
1314
- }
1315
- @media (max-width: 1240px) and (max-width: 740px) {
1316
- .col-xl-6 {
1317
- flex: 0 0 48.1818181818%;
1318
- max-width: 48.1818181818%;
1319
- }
1320
- }
1321
- @media (max-width: 1240px) and (max-width: 520px) {
1322
- .col-xl-6 {
1323
- flex: 0 0 47.9166666667%;
1324
- max-width: 47.9166666667%;
1325
- }
1326
- }
1327
- @media (max-width: 1240px) {
1328
- .col-indent-xl-6 {
1329
- margin-left: 51.3157894737%;
1330
- }
1331
- }
1332
- @media (max-width: 1240px) and (max-width: 1020px) {
1333
- .col-indent-xl-6 {
1334
- margin-left: 51.2765957447%;
1335
- }
1336
- }
1337
- @media (max-width: 1240px) and (max-width: 740px) {
1338
- .col-indent-xl-6 {
1339
- margin-left: 51.8181818182%;
1340
- }
1341
- }
1342
- @media (max-width: 1240px) and (max-width: 520px) {
1343
- .col-indent-xl-6 {
1344
- margin-left: 52.0833333333%;
1345
- }
1346
- }
1347
- @media (max-width: 1240px) {
1348
- .col-indent-xl-0 {
1349
- margin-left: 0;
1350
- }
1351
- .col-xl-7 {
1352
- flex: 0 0 57.2368421053%;
1353
- max-width: 57.2368421053%;
1354
- }
1355
- }
1356
- @media (max-width: 1240px) and (max-width: 1020px) {
1357
- .col-xl-7 {
1358
- flex: 0 0 57.2695035461%;
1359
- max-width: 57.2695035461%;
1360
- }
1361
- }
1362
- @media (max-width: 1240px) and (max-width: 740px) {
1363
- .col-xl-7 {
1364
- flex: 0 0 56.8181818182%;
1365
- max-width: 56.8181818182%;
1366
- }
1367
- }
1368
- @media (max-width: 1240px) and (max-width: 520px) {
1369
- .col-xl-7 {
1370
- flex: 0 0 56.5972222222%;
1371
- max-width: 56.5972222222%;
1372
- }
1373
- }
1374
- @media (max-width: 1240px) {
1375
- .col-indent-xl-7 {
1376
- margin-left: 59.8684210526%;
1377
- }
1378
- }
1379
- @media (max-width: 1240px) and (max-width: 1020px) {
1380
- .col-indent-xl-7 {
1381
- margin-left: 59.8226950355%;
1382
- }
1383
- }
1384
- @media (max-width: 1240px) and (max-width: 740px) {
1385
- .col-indent-xl-7 {
1386
- margin-left: 60.4545454545%;
1387
- }
1388
- }
1389
- @media (max-width: 1240px) and (max-width: 520px) {
1390
- .col-indent-xl-7 {
1391
- margin-left: 60.7638888889%;
1392
- }
1393
- }
1394
- @media (max-width: 1240px) {
1395
- .col-indent-xl-0 {
1396
- margin-left: 0;
1397
- }
1398
- .col-xl-8 {
1399
- flex: 0 0 65.7894736842%;
1400
- max-width: 65.7894736842%;
1401
- }
1402
- }
1403
- @media (max-width: 1240px) and (max-width: 1020px) {
1404
- .col-xl-8 {
1405
- flex: 0 0 65.8156028369%;
1406
- max-width: 65.8156028369%;
1407
- }
1408
- }
1409
- @media (max-width: 1240px) and (max-width: 740px) {
1410
- .col-xl-8 {
1411
- flex: 0 0 65.4545454545%;
1412
- max-width: 65.4545454545%;
1413
- }
1414
- }
1415
- @media (max-width: 1240px) and (max-width: 520px) {
1416
- .col-xl-8 {
1417
- flex: 0 0 65.2777777778%;
1418
- max-width: 65.2777777778%;
1419
- }
1420
- }
1421
- @media (max-width: 1240px) {
1422
- .col-indent-xl-8 {
1423
- margin-left: 68.4210526316%;
1424
- }
1425
- }
1426
- @media (max-width: 1240px) and (max-width: 1020px) {
1427
- .col-indent-xl-8 {
1428
- margin-left: 68.3687943262%;
1429
- }
1430
- }
1431
- @media (max-width: 1240px) and (max-width: 740px) {
1432
- .col-indent-xl-8 {
1433
- margin-left: 69.0909090909%;
1434
- }
1435
- }
1436
- @media (max-width: 1240px) and (max-width: 520px) {
1437
- .col-indent-xl-8 {
1438
- margin-left: 69.4444444444%;
1439
- }
1440
- }
1441
- @media (max-width: 1240px) {
1442
- .col-indent-xl-0 {
1443
- margin-left: 0;
1444
- }
1445
- .col-xl-9 {
1446
- flex: 0 0 74.3421052632%;
1447
- max-width: 74.3421052632%;
1448
- }
1449
- }
1450
- @media (max-width: 1240px) and (max-width: 1020px) {
1451
- .col-xl-9 {
1452
- flex: 0 0 74.3617021277%;
1453
- max-width: 74.3617021277%;
1454
- }
1455
- }
1456
- @media (max-width: 1240px) and (max-width: 740px) {
1457
- .col-xl-9 {
1458
- flex: 0 0 74.0909090909%;
1459
- max-width: 74.0909090909%;
1460
- }
1461
- }
1462
- @media (max-width: 1240px) and (max-width: 520px) {
1463
- .col-xl-9 {
1464
- flex: 0 0 73.9583333333%;
1465
- max-width: 73.9583333333%;
1466
- }
1467
- }
1468
- @media (max-width: 1240px) {
1469
- .col-indent-xl-9 {
1470
- margin-left: 76.9736842105%;
1471
- }
1472
- }
1473
- @media (max-width: 1240px) and (max-width: 1020px) {
1474
- .col-indent-xl-9 {
1475
- margin-left: 76.914893617%;
1476
- }
1477
- }
1478
- @media (max-width: 1240px) and (max-width: 740px) {
1479
- .col-indent-xl-9 {
1480
- margin-left: 77.7272727273%;
1481
- }
1482
- }
1483
- @media (max-width: 1240px) and (max-width: 520px) {
1484
- .col-indent-xl-9 {
1485
- margin-left: 78.125%;
1486
- }
1487
- }
1488
- @media (max-width: 1240px) {
1489
- .col-indent-xl-0 {
1490
- margin-left: 0;
1491
- }
1492
- .col-xl-10 {
1493
- flex: 0 0 82.8947368421%;
1494
- max-width: 82.8947368421%;
1495
- }
1496
- }
1497
- @media (max-width: 1240px) and (max-width: 1020px) {
1498
- .col-xl-10 {
1499
- flex: 0 0 82.9078014184%;
1500
- max-width: 82.9078014184%;
1501
- }
1502
- }
1503
- @media (max-width: 1240px) and (max-width: 740px) {
1504
- .col-xl-10 {
1505
- flex: 0 0 82.7272727273%;
1506
- max-width: 82.7272727273%;
1507
- }
1508
- }
1509
- @media (max-width: 1240px) and (max-width: 520px) {
1510
- .col-xl-10 {
1511
- flex: 0 0 82.6388888889%;
1512
- max-width: 82.6388888889%;
1513
- }
1514
- }
1515
- @media (max-width: 1240px) {
1516
- .col-indent-xl-10 {
1517
- margin-left: 85.5263157895%;
1518
- }
1519
- }
1520
- @media (max-width: 1240px) and (max-width: 1020px) {
1521
- .col-indent-xl-10 {
1522
- margin-left: 85.4609929078%;
1523
- }
1524
- }
1525
- @media (max-width: 1240px) and (max-width: 740px) {
1526
- .col-indent-xl-10 {
1527
- margin-left: 86.3636363636%;
1528
- }
1529
- }
1530
- @media (max-width: 1240px) and (max-width: 520px) {
1531
- .col-indent-xl-10 {
1532
- margin-left: 86.8055555556%;
1533
- }
1534
- }
1535
- @media (max-width: 1240px) {
1536
- .col-indent-xl-0 {
1537
- margin-left: 0;
1538
- }
1539
- .col-xl-11 {
1540
- flex: 0 0 91.4473684211%;
1541
- max-width: 91.4473684211%;
1542
- }
1543
- }
1544
- @media (max-width: 1240px) and (max-width: 1020px) {
1545
- .col-xl-11 {
1546
- flex: 0 0 91.4539007092%;
1547
- max-width: 91.4539007092%;
1548
- }
1549
- }
1550
- @media (max-width: 1240px) and (max-width: 740px) {
1551
- .col-xl-11 {
1552
- flex: 0 0 91.3636363636%;
1553
- max-width: 91.3636363636%;
1554
- }
1555
- }
1556
- @media (max-width: 1240px) and (max-width: 520px) {
1557
- .col-xl-11 {
1558
- flex: 0 0 91.3194444444%;
1559
- max-width: 91.3194444444%;
1560
- }
1561
- }
1562
- @media (max-width: 1240px) {
1563
- .col-indent-xl-11 {
1564
- margin-left: 94.0789473684%;
1565
- }
1566
- }
1567
- @media (max-width: 1240px) and (max-width: 1020px) {
1568
- .col-indent-xl-11 {
1569
- margin-left: 94.0070921986%;
1570
- }
1571
- }
1572
- @media (max-width: 1240px) and (max-width: 740px) {
1573
- .col-indent-xl-11 {
1574
- margin-left: 95%;
1575
- }
1576
- }
1577
- @media (max-width: 1240px) and (max-width: 520px) {
1578
- .col-indent-xl-11 {
1579
- margin-left: 95.4861111111%;
1580
- }
1581
- }
1582
- @media (max-width: 1240px) {
1583
- .col-indent-xl-0 {
1584
- margin-left: 0;
1585
- }
1586
- .col-xl-12 {
1587
- flex: 0 0 100%;
1588
- max-width: 100%;
1589
- }
1590
- }
1591
- @media (max-width: 1240px) and (max-width: 1020px) {
1592
- .col-xl-12 {
1593
- flex: 0 0 100%;
1594
- max-width: 100%;
1595
- }
1596
- }
1597
- @media (max-width: 1240px) and (max-width: 740px) {
1598
- .col-xl-12 {
1599
- flex: 0 0 100%;
1600
- max-width: 100%;
1601
- }
1602
- }
1603
- @media (max-width: 1240px) and (max-width: 520px) {
1604
- .col-xl-12 {
1605
- flex: 0 0 100%;
1606
- max-width: 100%;
1607
- }
1608
- }
1609
- @media (max-width: 1240px) {
1610
- .col-indent-xl-0 {
1611
- margin-left: 0;
1612
- }
1613
- }
1614
- @media (max-width: 1020px) {
1615
- .col-lg-1 {
1616
- flex: 0 0 5.9210526316%;
1617
- max-width: 5.9210526316%;
1618
- }
1619
- }
1620
- @media (max-width: 1020px) and (max-width: 1020px) {
1621
- .col-lg-1 {
1622
- flex: 0 0 5.9929078014%;
1623
- max-width: 5.9929078014%;
1624
- }
1625
- }
1626
- @media (max-width: 1020px) and (max-width: 740px) {
1627
- .col-lg-1 {
1628
- flex: 0 0 5%;
1629
- max-width: 5%;
1630
- }
1631
- }
1632
- @media (max-width: 1020px) and (max-width: 520px) {
1633
- .col-lg-1 {
1634
- flex: 0 0 4.5138888889%;
1635
- max-width: 4.5138888889%;
1636
- }
1637
- }
1638
- @media (max-width: 1020px) {
1639
- .col-indent-lg-1 {
1640
- margin-left: 8.5526315789%;
1641
- }
1642
- }
1643
- @media (max-width: 1020px) and (max-width: 1020px) {
1644
- .col-indent-lg-1 {
1645
- margin-left: 8.5460992908%;
1646
- }
1647
- }
1648
- @media (max-width: 1020px) and (max-width: 740px) {
1649
- .col-indent-lg-1 {
1650
- margin-left: 8.6363636364%;
1651
- }
1652
- }
1653
- @media (max-width: 1020px) and (max-width: 520px) {
1654
- .col-indent-lg-1 {
1655
- margin-left: 8.6805555556%;
1656
- }
1657
- }
1658
- @media (max-width: 1020px) {
1659
- .col-indent-lg-0 {
1660
- margin-left: 0;
1661
- }
1662
- .col-lg-2 {
1663
- flex: 0 0 14.4736842105%;
1664
- max-width: 14.4736842105%;
1665
- }
1666
- }
1667
- @media (max-width: 1020px) and (max-width: 1020px) {
1668
- .col-lg-2 {
1669
- flex: 0 0 14.5390070922%;
1670
- max-width: 14.5390070922%;
1671
- }
1672
- }
1673
- @media (max-width: 1020px) and (max-width: 740px) {
1674
- .col-lg-2 {
1675
- flex: 0 0 13.6363636364%;
1676
- max-width: 13.6363636364%;
1677
- }
1678
- }
1679
- @media (max-width: 1020px) and (max-width: 520px) {
1680
- .col-lg-2 {
1681
- flex: 0 0 13.1944444444%;
1682
- max-width: 13.1944444444%;
1683
- }
1684
- }
1685
- @media (max-width: 1020px) {
1686
- .col-indent-lg-2 {
1687
- margin-left: 17.1052631579%;
1688
- }
1689
- }
1690
- @media (max-width: 1020px) and (max-width: 1020px) {
1691
- .col-indent-lg-2 {
1692
- margin-left: 17.0921985816%;
1693
- }
1694
- }
1695
- @media (max-width: 1020px) and (max-width: 740px) {
1696
- .col-indent-lg-2 {
1697
- margin-left: 17.2727272727%;
1698
- }
1699
- }
1700
- @media (max-width: 1020px) and (max-width: 520px) {
1701
- .col-indent-lg-2 {
1702
- margin-left: 17.3611111111%;
1703
- }
1704
- }
1705
- @media (max-width: 1020px) {
1706
- .col-indent-lg-0 {
1707
- margin-left: 0;
1708
- }
1709
- .col-lg-3 {
1710
- flex: 0 0 23.0263157895%;
1711
- max-width: 23.0263157895%;
1712
- }
1713
- }
1714
- @media (max-width: 1020px) and (max-width: 1020px) {
1715
- .col-lg-3 {
1716
- flex: 0 0 23.085106383%;
1717
- max-width: 23.085106383%;
1718
- }
1719
- }
1720
- @media (max-width: 1020px) and (max-width: 740px) {
1721
- .col-lg-3 {
1722
- flex: 0 0 22.2727272727%;
1723
- max-width: 22.2727272727%;
1724
- }
1725
- }
1726
- @media (max-width: 1020px) and (max-width: 520px) {
1727
- .col-lg-3 {
1728
- flex: 0 0 21.875%;
1729
- max-width: 21.875%;
1730
- }
1731
- }
1732
- @media (max-width: 1020px) {
1733
- .col-indent-lg-3 {
1734
- margin-left: 25.6578947368%;
1735
- }
1736
- }
1737
- @media (max-width: 1020px) and (max-width: 1020px) {
1738
- .col-indent-lg-3 {
1739
- margin-left: 25.6382978723%;
1740
- }
1741
- }
1742
- @media (max-width: 1020px) and (max-width: 740px) {
1743
- .col-indent-lg-3 {
1744
- margin-left: 25.9090909091%;
1745
- }
1746
- }
1747
- @media (max-width: 1020px) and (max-width: 520px) {
1748
- .col-indent-lg-3 {
1749
- margin-left: 26.0416666667%;
1750
- }
1751
- }
1752
- @media (max-width: 1020px) {
1753
- .col-indent-lg-0 {
1754
- margin-left: 0;
1755
- }
1756
- .col-lg-4 {
1757
- flex: 0 0 31.5789473684%;
1758
- max-width: 31.5789473684%;
1759
- }
1760
- }
1761
- @media (max-width: 1020px) and (max-width: 1020px) {
1762
- .col-lg-4 {
1763
- flex: 0 0 31.6312056738%;
1764
- max-width: 31.6312056738%;
1765
- }
1766
- }
1767
- @media (max-width: 1020px) and (max-width: 740px) {
1768
- .col-lg-4 {
1769
- flex: 0 0 30.9090909091%;
1770
- max-width: 30.9090909091%;
1771
- }
1772
- }
1773
- @media (max-width: 1020px) and (max-width: 520px) {
1774
- .col-lg-4 {
1775
- flex: 0 0 30.5555555556%;
1776
- max-width: 30.5555555556%;
1777
- }
1778
- }
1779
- @media (max-width: 1020px) {
1780
- .col-indent-lg-4 {
1781
- margin-left: 34.2105263158%;
1782
- }
1783
- }
1784
- @media (max-width: 1020px) and (max-width: 1020px) {
1785
- .col-indent-lg-4 {
1786
- margin-left: 34.1843971631%;
1787
- }
1788
- }
1789
- @media (max-width: 1020px) and (max-width: 740px) {
1790
- .col-indent-lg-4 {
1791
- margin-left: 34.5454545455%;
1792
- }
1793
- }
1794
- @media (max-width: 1020px) and (max-width: 520px) {
1795
- .col-indent-lg-4 {
1796
- margin-left: 34.7222222222%;
1797
- }
1798
- }
1799
- @media (max-width: 1020px) {
1800
- .col-indent-lg-0 {
1801
- margin-left: 0;
1802
- }
1803
- .col-lg-5 {
1804
- flex: 0 0 40.1315789474%;
1805
- max-width: 40.1315789474%;
1806
- }
1807
- }
1808
- @media (max-width: 1020px) and (max-width: 1020px) {
1809
- .col-lg-5 {
1810
- flex: 0 0 40.1773049645%;
1811
- max-width: 40.1773049645%;
1812
- }
1813
- }
1814
- @media (max-width: 1020px) and (max-width: 740px) {
1815
- .col-lg-5 {
1816
- flex: 0 0 39.5454545455%;
1817
- max-width: 39.5454545455%;
1818
- }
1819
- }
1820
- @media (max-width: 1020px) and (max-width: 520px) {
1821
- .col-lg-5 {
1822
- flex: 0 0 39.2361111111%;
1823
- max-width: 39.2361111111%;
1824
- }
1825
- }
1826
- @media (max-width: 1020px) {
1827
- .col-indent-lg-5 {
1828
- margin-left: 42.7631578947%;
1829
- }
1830
- }
1831
- @media (max-width: 1020px) and (max-width: 1020px) {
1832
- .col-indent-lg-5 {
1833
- margin-left: 42.7304964539%;
1834
- }
1835
- }
1836
- @media (max-width: 1020px) and (max-width: 740px) {
1837
- .col-indent-lg-5 {
1838
- margin-left: 43.1818181818%;
1839
- }
1840
- }
1841
- @media (max-width: 1020px) and (max-width: 520px) {
1842
- .col-indent-lg-5 {
1843
- margin-left: 43.4027777778%;
1844
- }
1845
- }
1846
- @media (max-width: 1020px) {
1847
- .col-indent-lg-0 {
1848
- margin-left: 0;
1849
- }
1850
- .col-lg-6 {
1851
- flex: 0 0 48.6842105263%;
1852
- max-width: 48.6842105263%;
1853
- }
1854
- }
1855
- @media (max-width: 1020px) and (max-width: 1020px) {
1856
- .col-lg-6 {
1857
- flex: 0 0 48.7234042553%;
1858
- max-width: 48.7234042553%;
1859
- }
1860
- }
1861
- @media (max-width: 1020px) and (max-width: 740px) {
1862
- .col-lg-6 {
1863
- flex: 0 0 48.1818181818%;
1864
- max-width: 48.1818181818%;
1865
- }
1866
- }
1867
- @media (max-width: 1020px) and (max-width: 520px) {
1868
- .col-lg-6 {
1869
- flex: 0 0 47.9166666667%;
1870
- max-width: 47.9166666667%;
1871
- }
1872
- }
1873
- @media (max-width: 1020px) {
1874
- .col-indent-lg-6 {
1875
- margin-left: 51.3157894737%;
1876
- }
1877
- }
1878
- @media (max-width: 1020px) and (max-width: 1020px) {
1879
- .col-indent-lg-6 {
1880
- margin-left: 51.2765957447%;
1881
- }
1882
- }
1883
- @media (max-width: 1020px) and (max-width: 740px) {
1884
- .col-indent-lg-6 {
1885
- margin-left: 51.8181818182%;
1886
- }
1887
- }
1888
- @media (max-width: 1020px) and (max-width: 520px) {
1889
- .col-indent-lg-6 {
1890
- margin-left: 52.0833333333%;
1891
- }
1892
- }
1893
- @media (max-width: 1020px) {
1894
- .col-indent-lg-0 {
1895
- margin-left: 0;
1896
- }
1897
- .col-lg-7 {
1898
- flex: 0 0 57.2368421053%;
1899
- max-width: 57.2368421053%;
1900
- }
1901
- }
1902
- @media (max-width: 1020px) and (max-width: 1020px) {
1903
- .col-lg-7 {
1904
- flex: 0 0 57.2695035461%;
1905
- max-width: 57.2695035461%;
1906
- }
1907
- }
1908
- @media (max-width: 1020px) and (max-width: 740px) {
1909
- .col-lg-7 {
1910
- flex: 0 0 56.8181818182%;
1911
- max-width: 56.8181818182%;
1912
- }
1913
- }
1914
- @media (max-width: 1020px) and (max-width: 520px) {
1915
- .col-lg-7 {
1916
- flex: 0 0 56.5972222222%;
1917
- max-width: 56.5972222222%;
1918
- }
1919
- }
1920
- @media (max-width: 1020px) {
1921
- .col-indent-lg-7 {
1922
- margin-left: 59.8684210526%;
1923
- }
1924
- }
1925
- @media (max-width: 1020px) and (max-width: 1020px) {
1926
- .col-indent-lg-7 {
1927
- margin-left: 59.8226950355%;
1928
- }
1929
- }
1930
- @media (max-width: 1020px) and (max-width: 740px) {
1931
- .col-indent-lg-7 {
1932
- margin-left: 60.4545454545%;
1933
- }
1934
- }
1935
- @media (max-width: 1020px) and (max-width: 520px) {
1936
- .col-indent-lg-7 {
1937
- margin-left: 60.7638888889%;
1938
- }
1939
- }
1940
- @media (max-width: 1020px) {
1941
- .col-indent-lg-0 {
1942
- margin-left: 0;
1943
- }
1944
- .col-lg-8 {
1945
- flex: 0 0 65.7894736842%;
1946
- max-width: 65.7894736842%;
1947
- }
1948
- }
1949
- @media (max-width: 1020px) and (max-width: 1020px) {
1950
- .col-lg-8 {
1951
- flex: 0 0 65.8156028369%;
1952
- max-width: 65.8156028369%;
1953
- }
1954
- }
1955
- @media (max-width: 1020px) and (max-width: 740px) {
1956
- .col-lg-8 {
1957
- flex: 0 0 65.4545454545%;
1958
- max-width: 65.4545454545%;
1959
- }
1960
- }
1961
- @media (max-width: 1020px) and (max-width: 520px) {
1962
- .col-lg-8 {
1963
- flex: 0 0 65.2777777778%;
1964
- max-width: 65.2777777778%;
1965
- }
1966
- }
1967
- @media (max-width: 1020px) {
1968
- .col-indent-lg-8 {
1969
- margin-left: 68.4210526316%;
1970
- }
1971
- }
1972
- @media (max-width: 1020px) and (max-width: 1020px) {
1973
- .col-indent-lg-8 {
1974
- margin-left: 68.3687943262%;
1975
- }
1976
- }
1977
- @media (max-width: 1020px) and (max-width: 740px) {
1978
- .col-indent-lg-8 {
1979
- margin-left: 69.0909090909%;
1980
- }
1981
- }
1982
- @media (max-width: 1020px) and (max-width: 520px) {
1983
- .col-indent-lg-8 {
1984
- margin-left: 69.4444444444%;
1985
- }
1986
- }
1987
- @media (max-width: 1020px) {
1988
- .col-indent-lg-0 {
1989
- margin-left: 0;
1990
- }
1991
- .col-lg-9 {
1992
- flex: 0 0 74.3421052632%;
1993
- max-width: 74.3421052632%;
1994
- }
1995
- }
1996
- @media (max-width: 1020px) and (max-width: 1020px) {
1997
- .col-lg-9 {
1998
- flex: 0 0 74.3617021277%;
1999
- max-width: 74.3617021277%;
2000
- }
2001
- }
2002
- @media (max-width: 1020px) and (max-width: 740px) {
2003
- .col-lg-9 {
2004
- flex: 0 0 74.0909090909%;
2005
- max-width: 74.0909090909%;
2006
- }
2007
- }
2008
- @media (max-width: 1020px) and (max-width: 520px) {
2009
- .col-lg-9 {
2010
- flex: 0 0 73.9583333333%;
2011
- max-width: 73.9583333333%;
2012
- }
2013
- }
2014
- @media (max-width: 1020px) {
2015
- .col-indent-lg-9 {
2016
- margin-left: 76.9736842105%;
2017
- }
2018
- }
2019
- @media (max-width: 1020px) and (max-width: 1020px) {
2020
- .col-indent-lg-9 {
2021
- margin-left: 76.914893617%;
2022
- }
2023
- }
2024
- @media (max-width: 1020px) and (max-width: 740px) {
2025
- .col-indent-lg-9 {
2026
- margin-left: 77.7272727273%;
2027
- }
2028
- }
2029
- @media (max-width: 1020px) and (max-width: 520px) {
2030
- .col-indent-lg-9 {
2031
- margin-left: 78.125%;
2032
- }
2033
- }
2034
- @media (max-width: 1020px) {
2035
- .col-indent-lg-0 {
2036
- margin-left: 0;
2037
- }
2038
- .col-lg-10 {
2039
- flex: 0 0 82.8947368421%;
2040
- max-width: 82.8947368421%;
2041
- }
2042
- }
2043
- @media (max-width: 1020px) and (max-width: 1020px) {
2044
- .col-lg-10 {
2045
- flex: 0 0 82.9078014184%;
2046
- max-width: 82.9078014184%;
2047
- }
2048
- }
2049
- @media (max-width: 1020px) and (max-width: 740px) {
2050
- .col-lg-10 {
2051
- flex: 0 0 82.7272727273%;
2052
- max-width: 82.7272727273%;
2053
- }
2054
- }
2055
- @media (max-width: 1020px) and (max-width: 520px) {
2056
- .col-lg-10 {
2057
- flex: 0 0 82.6388888889%;
2058
- max-width: 82.6388888889%;
2059
- }
2060
- }
2061
- @media (max-width: 1020px) {
2062
- .col-indent-lg-10 {
2063
- margin-left: 85.5263157895%;
2064
- }
2065
- }
2066
- @media (max-width: 1020px) and (max-width: 1020px) {
2067
- .col-indent-lg-10 {
2068
- margin-left: 85.4609929078%;
2069
- }
2070
- }
2071
- @media (max-width: 1020px) and (max-width: 740px) {
2072
- .col-indent-lg-10 {
2073
- margin-left: 86.3636363636%;
2074
- }
2075
- }
2076
- @media (max-width: 1020px) and (max-width: 520px) {
2077
- .col-indent-lg-10 {
2078
- margin-left: 86.8055555556%;
2079
- }
2080
- }
2081
- @media (max-width: 1020px) {
2082
- .col-indent-lg-0 {
2083
- margin-left: 0;
2084
- }
2085
- .col-lg-11 {
2086
- flex: 0 0 91.4473684211%;
2087
- max-width: 91.4473684211%;
2088
- }
2089
- }
2090
- @media (max-width: 1020px) and (max-width: 1020px) {
2091
- .col-lg-11 {
2092
- flex: 0 0 91.4539007092%;
2093
- max-width: 91.4539007092%;
2094
- }
2095
- }
2096
- @media (max-width: 1020px) and (max-width: 740px) {
2097
- .col-lg-11 {
2098
- flex: 0 0 91.3636363636%;
2099
- max-width: 91.3636363636%;
2100
- }
2101
- }
2102
- @media (max-width: 1020px) and (max-width: 520px) {
2103
- .col-lg-11 {
2104
- flex: 0 0 91.3194444444%;
2105
- max-width: 91.3194444444%;
2106
- }
2107
- }
2108
- @media (max-width: 1020px) {
2109
- .col-indent-lg-11 {
2110
- margin-left: 94.0789473684%;
2111
- }
2112
- }
2113
- @media (max-width: 1020px) and (max-width: 1020px) {
2114
- .col-indent-lg-11 {
2115
- margin-left: 94.0070921986%;
2116
- }
2117
- }
2118
- @media (max-width: 1020px) and (max-width: 740px) {
2119
- .col-indent-lg-11 {
2120
- margin-left: 95%;
2121
- }
2122
- }
2123
- @media (max-width: 1020px) and (max-width: 520px) {
2124
- .col-indent-lg-11 {
2125
- margin-left: 95.4861111111%;
2126
- }
2127
- }
2128
- @media (max-width: 1020px) {
2129
- .col-indent-lg-0 {
2130
- margin-left: 0;
2131
- }
2132
- .col-lg-12 {
2133
- flex: 0 0 100%;
2134
- max-width: 100%;
2135
- }
2136
- }
2137
- @media (max-width: 1020px) and (max-width: 1020px) {
2138
- .col-lg-12 {
2139
- flex: 0 0 100%;
2140
- max-width: 100%;
2141
- }
2142
- }
2143
- @media (max-width: 1020px) and (max-width: 740px) {
2144
- .col-lg-12 {
2145
- flex: 0 0 100%;
2146
- max-width: 100%;
2147
- }
2148
- }
2149
- @media (max-width: 1020px) and (max-width: 520px) {
2150
- .col-lg-12 {
2151
- flex: 0 0 100%;
2152
- max-width: 100%;
2153
- }
2154
- }
2155
- @media (max-width: 1020px) {
2156
- .col-indent-lg-0 {
2157
- margin-left: 0;
2158
- }
2159
- }
2160
- @media (max-width: 740px) {
2161
- .col-m-1 {
2162
- flex: 0 0 5.9210526316%;
2163
- max-width: 5.9210526316%;
2164
- }
2165
- }
2166
- @media (max-width: 740px) and (max-width: 1020px) {
2167
- .col-m-1 {
2168
- flex: 0 0 5.9929078014%;
2169
- max-width: 5.9929078014%;
2170
- }
2171
- }
2172
- @media (max-width: 740px) and (max-width: 740px) {
2173
- .col-m-1 {
2174
- flex: 0 0 5%;
2175
- max-width: 5%;
2176
- }
2177
- }
2178
- @media (max-width: 740px) and (max-width: 520px) {
2179
- .col-m-1 {
2180
- flex: 0 0 4.5138888889%;
2181
- max-width: 4.5138888889%;
2182
- }
2183
- }
2184
- @media (max-width: 740px) {
2185
- .col-indent-m-1 {
2186
- margin-left: 8.5526315789%;
2187
- }
2188
- }
2189
- @media (max-width: 740px) and (max-width: 1020px) {
2190
- .col-indent-m-1 {
2191
- margin-left: 8.5460992908%;
2192
- }
2193
- }
2194
- @media (max-width: 740px) and (max-width: 740px) {
2195
- .col-indent-m-1 {
2196
- margin-left: 8.6363636364%;
2197
- }
2198
- }
2199
- @media (max-width: 740px) and (max-width: 520px) {
2200
- .col-indent-m-1 {
2201
- margin-left: 8.6805555556%;
2202
- }
2203
- }
2204
- @media (max-width: 740px) {
2205
- .col-indent-m-0 {
2206
- margin-left: 0;
2207
- }
2208
- .col-m-2 {
2209
- flex: 0 0 14.4736842105%;
2210
- max-width: 14.4736842105%;
2211
- }
2212
- }
2213
- @media (max-width: 740px) and (max-width: 1020px) {
2214
- .col-m-2 {
2215
- flex: 0 0 14.5390070922%;
2216
- max-width: 14.5390070922%;
2217
- }
2218
- }
2219
- @media (max-width: 740px) and (max-width: 740px) {
2220
- .col-m-2 {
2221
- flex: 0 0 13.6363636364%;
2222
- max-width: 13.6363636364%;
2223
- }
2224
- }
2225
- @media (max-width: 740px) and (max-width: 520px) {
2226
- .col-m-2 {
2227
- flex: 0 0 13.1944444444%;
2228
- max-width: 13.1944444444%;
2229
- }
2230
- }
2231
- @media (max-width: 740px) {
2232
- .col-indent-m-2 {
2233
- margin-left: 17.1052631579%;
2234
- }
2235
- }
2236
- @media (max-width: 740px) and (max-width: 1020px) {
2237
- .col-indent-m-2 {
2238
- margin-left: 17.0921985816%;
2239
- }
2240
- }
2241
- @media (max-width: 740px) and (max-width: 740px) {
2242
- .col-indent-m-2 {
2243
- margin-left: 17.2727272727%;
2244
- }
2245
- }
2246
- @media (max-width: 740px) and (max-width: 520px) {
2247
- .col-indent-m-2 {
2248
- margin-left: 17.3611111111%;
2249
- }
2250
- }
2251
- @media (max-width: 740px) {
2252
- .col-indent-m-0 {
2253
- margin-left: 0;
2254
- }
2255
- .col-m-3 {
2256
- flex: 0 0 23.0263157895%;
2257
- max-width: 23.0263157895%;
2258
- }
2259
- }
2260
- @media (max-width: 740px) and (max-width: 1020px) {
2261
- .col-m-3 {
2262
- flex: 0 0 23.085106383%;
2263
- max-width: 23.085106383%;
2264
- }
2265
- }
2266
- @media (max-width: 740px) and (max-width: 740px) {
2267
- .col-m-3 {
2268
- flex: 0 0 22.2727272727%;
2269
- max-width: 22.2727272727%;
2270
- }
2271
- }
2272
- @media (max-width: 740px) and (max-width: 520px) {
2273
- .col-m-3 {
2274
- flex: 0 0 21.875%;
2275
- max-width: 21.875%;
2276
- }
2277
- }
2278
- @media (max-width: 740px) {
2279
- .col-indent-m-3 {
2280
- margin-left: 25.6578947368%;
2281
- }
2282
- }
2283
- @media (max-width: 740px) and (max-width: 1020px) {
2284
- .col-indent-m-3 {
2285
- margin-left: 25.6382978723%;
2286
- }
2287
- }
2288
- @media (max-width: 740px) and (max-width: 740px) {
2289
- .col-indent-m-3 {
2290
- margin-left: 25.9090909091%;
2291
- }
2292
- }
2293
- @media (max-width: 740px) and (max-width: 520px) {
2294
- .col-indent-m-3 {
2295
- margin-left: 26.0416666667%;
2296
- }
2297
- }
2298
- @media (max-width: 740px) {
2299
- .col-indent-m-0 {
2300
- margin-left: 0;
2301
- }
2302
- .col-m-4 {
2303
- flex: 0 0 31.5789473684%;
2304
- max-width: 31.5789473684%;
2305
- }
2306
- }
2307
- @media (max-width: 740px) and (max-width: 1020px) {
2308
- .col-m-4 {
2309
- flex: 0 0 31.6312056738%;
2310
- max-width: 31.6312056738%;
2311
- }
2312
- }
2313
- @media (max-width: 740px) and (max-width: 740px) {
2314
- .col-m-4 {
2315
- flex: 0 0 30.9090909091%;
2316
- max-width: 30.9090909091%;
2317
- }
2318
- }
2319
- @media (max-width: 740px) and (max-width: 520px) {
2320
- .col-m-4 {
2321
- flex: 0 0 30.5555555556%;
2322
- max-width: 30.5555555556%;
2323
- }
2324
- }
2325
- @media (max-width: 740px) {
2326
- .col-indent-m-4 {
2327
- margin-left: 34.2105263158%;
2328
- }
2329
- }
2330
- @media (max-width: 740px) and (max-width: 1020px) {
2331
- .col-indent-m-4 {
2332
- margin-left: 34.1843971631%;
2333
- }
2334
- }
2335
- @media (max-width: 740px) and (max-width: 740px) {
2336
- .col-indent-m-4 {
2337
- margin-left: 34.5454545455%;
2338
- }
2339
- }
2340
- @media (max-width: 740px) and (max-width: 520px) {
2341
- .col-indent-m-4 {
2342
- margin-left: 34.7222222222%;
2343
- }
2344
- }
2345
- @media (max-width: 740px) {
2346
- .col-indent-m-0 {
2347
- margin-left: 0;
2348
- }
2349
- .col-m-5 {
2350
- flex: 0 0 40.1315789474%;
2351
- max-width: 40.1315789474%;
2352
- }
2353
- }
2354
- @media (max-width: 740px) and (max-width: 1020px) {
2355
- .col-m-5 {
2356
- flex: 0 0 40.1773049645%;
2357
- max-width: 40.1773049645%;
2358
- }
2359
- }
2360
- @media (max-width: 740px) and (max-width: 740px) {
2361
- .col-m-5 {
2362
- flex: 0 0 39.5454545455%;
2363
- max-width: 39.5454545455%;
2364
- }
2365
- }
2366
- @media (max-width: 740px) and (max-width: 520px) {
2367
- .col-m-5 {
2368
- flex: 0 0 39.2361111111%;
2369
- max-width: 39.2361111111%;
2370
- }
2371
- }
2372
- @media (max-width: 740px) {
2373
- .col-indent-m-5 {
2374
- margin-left: 42.7631578947%;
2375
- }
2376
- }
2377
- @media (max-width: 740px) and (max-width: 1020px) {
2378
- .col-indent-m-5 {
2379
- margin-left: 42.7304964539%;
2380
- }
2381
- }
2382
- @media (max-width: 740px) and (max-width: 740px) {
2383
- .col-indent-m-5 {
2384
- margin-left: 43.1818181818%;
2385
- }
2386
- }
2387
- @media (max-width: 740px) and (max-width: 520px) {
2388
- .col-indent-m-5 {
2389
- margin-left: 43.4027777778%;
2390
- }
2391
- }
2392
- @media (max-width: 740px) {
2393
- .col-indent-m-0 {
2394
- margin-left: 0;
2395
- }
2396
- .col-m-6 {
2397
- flex: 0 0 48.6842105263%;
2398
- max-width: 48.6842105263%;
2399
- }
2400
- }
2401
- @media (max-width: 740px) and (max-width: 1020px) {
2402
- .col-m-6 {
2403
- flex: 0 0 48.7234042553%;
2404
- max-width: 48.7234042553%;
2405
- }
2406
- }
2407
- @media (max-width: 740px) and (max-width: 740px) {
2408
- .col-m-6 {
2409
- flex: 0 0 48.1818181818%;
2410
- max-width: 48.1818181818%;
2411
- }
2412
- }
2413
- @media (max-width: 740px) and (max-width: 520px) {
2414
- .col-m-6 {
2415
- flex: 0 0 47.9166666667%;
2416
- max-width: 47.9166666667%;
2417
- }
2418
- }
2419
- @media (max-width: 740px) {
2420
- .col-indent-m-6 {
2421
- margin-left: 51.3157894737%;
2422
- }
2423
- }
2424
- @media (max-width: 740px) and (max-width: 1020px) {
2425
- .col-indent-m-6 {
2426
- margin-left: 51.2765957447%;
2427
- }
2428
- }
2429
- @media (max-width: 740px) and (max-width: 740px) {
2430
- .col-indent-m-6 {
2431
- margin-left: 51.8181818182%;
2432
- }
2433
- }
2434
- @media (max-width: 740px) and (max-width: 520px) {
2435
- .col-indent-m-6 {
2436
- margin-left: 52.0833333333%;
2437
- }
2438
- }
2439
- @media (max-width: 740px) {
2440
- .col-indent-m-0 {
2441
- margin-left: 0;
2442
- }
2443
- .col-m-7 {
2444
- flex: 0 0 57.2368421053%;
2445
- max-width: 57.2368421053%;
2446
- }
2447
- }
2448
- @media (max-width: 740px) and (max-width: 1020px) {
2449
- .col-m-7 {
2450
- flex: 0 0 57.2695035461%;
2451
- max-width: 57.2695035461%;
2452
- }
2453
- }
2454
- @media (max-width: 740px) and (max-width: 740px) {
2455
- .col-m-7 {
2456
- flex: 0 0 56.8181818182%;
2457
- max-width: 56.8181818182%;
2458
- }
2459
- }
2460
- @media (max-width: 740px) and (max-width: 520px) {
2461
- .col-m-7 {
2462
- flex: 0 0 56.5972222222%;
2463
- max-width: 56.5972222222%;
2464
- }
2465
- }
2466
- @media (max-width: 740px) {
2467
- .col-indent-m-7 {
2468
- margin-left: 59.8684210526%;
2469
- }
2470
- }
2471
- @media (max-width: 740px) and (max-width: 1020px) {
2472
- .col-indent-m-7 {
2473
- margin-left: 59.8226950355%;
2474
- }
2475
- }
2476
- @media (max-width: 740px) and (max-width: 740px) {
2477
- .col-indent-m-7 {
2478
- margin-left: 60.4545454545%;
2479
- }
2480
- }
2481
- @media (max-width: 740px) and (max-width: 520px) {
2482
- .col-indent-m-7 {
2483
- margin-left: 60.7638888889%;
2484
- }
2485
- }
2486
- @media (max-width: 740px) {
2487
- .col-indent-m-0 {
2488
- margin-left: 0;
2489
- }
2490
- .col-m-8 {
2491
- flex: 0 0 65.7894736842%;
2492
- max-width: 65.7894736842%;
2493
- }
2494
- }
2495
- @media (max-width: 740px) and (max-width: 1020px) {
2496
- .col-m-8 {
2497
- flex: 0 0 65.8156028369%;
2498
- max-width: 65.8156028369%;
2499
- }
2500
- }
2501
- @media (max-width: 740px) and (max-width: 740px) {
2502
- .col-m-8 {
2503
- flex: 0 0 65.4545454545%;
2504
- max-width: 65.4545454545%;
2505
- }
2506
- }
2507
- @media (max-width: 740px) and (max-width: 520px) {
2508
- .col-m-8 {
2509
- flex: 0 0 65.2777777778%;
2510
- max-width: 65.2777777778%;
2511
- }
2512
- }
2513
- @media (max-width: 740px) {
2514
- .col-indent-m-8 {
2515
- margin-left: 68.4210526316%;
2516
- }
2517
- }
2518
- @media (max-width: 740px) and (max-width: 1020px) {
2519
- .col-indent-m-8 {
2520
- margin-left: 68.3687943262%;
2521
- }
2522
- }
2523
- @media (max-width: 740px) and (max-width: 740px) {
2524
- .col-indent-m-8 {
2525
- margin-left: 69.0909090909%;
2526
- }
2527
- }
2528
- @media (max-width: 740px) and (max-width: 520px) {
2529
- .col-indent-m-8 {
2530
- margin-left: 69.4444444444%;
2531
- }
2532
- }
2533
- @media (max-width: 740px) {
2534
- .col-indent-m-0 {
2535
- margin-left: 0;
2536
- }
2537
- .col-m-9 {
2538
- flex: 0 0 74.3421052632%;
2539
- max-width: 74.3421052632%;
2540
- }
2541
- }
2542
- @media (max-width: 740px) and (max-width: 1020px) {
2543
- .col-m-9 {
2544
- flex: 0 0 74.3617021277%;
2545
- max-width: 74.3617021277%;
2546
- }
2547
- }
2548
- @media (max-width: 740px) and (max-width: 740px) {
2549
- .col-m-9 {
2550
- flex: 0 0 74.0909090909%;
2551
- max-width: 74.0909090909%;
2552
- }
2553
- }
2554
- @media (max-width: 740px) and (max-width: 520px) {
2555
- .col-m-9 {
2556
- flex: 0 0 73.9583333333%;
2557
- max-width: 73.9583333333%;
2558
- }
2559
- }
2560
- @media (max-width: 740px) {
2561
- .col-indent-m-9 {
2562
- margin-left: 76.9736842105%;
2563
- }
2564
- }
2565
- @media (max-width: 740px) and (max-width: 1020px) {
2566
- .col-indent-m-9 {
2567
- margin-left: 76.914893617%;
2568
- }
2569
- }
2570
- @media (max-width: 740px) and (max-width: 740px) {
2571
- .col-indent-m-9 {
2572
- margin-left: 77.7272727273%;
2573
- }
2574
- }
2575
- @media (max-width: 740px) and (max-width: 520px) {
2576
- .col-indent-m-9 {
2577
- margin-left: 78.125%;
2578
- }
2579
- }
2580
- @media (max-width: 740px) {
2581
- .col-indent-m-0 {
2582
- margin-left: 0;
2583
- }
2584
- .col-m-10 {
2585
- flex: 0 0 82.8947368421%;
2586
- max-width: 82.8947368421%;
2587
- }
2588
- }
2589
- @media (max-width: 740px) and (max-width: 1020px) {
2590
- .col-m-10 {
2591
- flex: 0 0 82.9078014184%;
2592
- max-width: 82.9078014184%;
2593
- }
2594
- }
2595
- @media (max-width: 740px) and (max-width: 740px) {
2596
- .col-m-10 {
2597
- flex: 0 0 82.7272727273%;
2598
- max-width: 82.7272727273%;
2599
- }
2600
- }
2601
- @media (max-width: 740px) and (max-width: 520px) {
2602
- .col-m-10 {
2603
- flex: 0 0 82.6388888889%;
2604
- max-width: 82.6388888889%;
2605
- }
2606
- }
2607
- @media (max-width: 740px) {
2608
- .col-indent-m-10 {
2609
- margin-left: 85.5263157895%;
2610
- }
2611
- }
2612
- @media (max-width: 740px) and (max-width: 1020px) {
2613
- .col-indent-m-10 {
2614
- margin-left: 85.4609929078%;
2615
- }
2616
- }
2617
- @media (max-width: 740px) and (max-width: 740px) {
2618
- .col-indent-m-10 {
2619
- margin-left: 86.3636363636%;
2620
- }
2621
- }
2622
- @media (max-width: 740px) and (max-width: 520px) {
2623
- .col-indent-m-10 {
2624
- margin-left: 86.8055555556%;
2625
- }
2626
- }
2627
- @media (max-width: 740px) {
2628
- .col-indent-m-0 {
2629
- margin-left: 0;
2630
- }
2631
- .col-m-11 {
2632
- flex: 0 0 91.4473684211%;
2633
- max-width: 91.4473684211%;
2634
- }
2635
- }
2636
- @media (max-width: 740px) and (max-width: 1020px) {
2637
- .col-m-11 {
2638
- flex: 0 0 91.4539007092%;
2639
- max-width: 91.4539007092%;
2640
- }
2641
- }
2642
- @media (max-width: 740px) and (max-width: 740px) {
2643
- .col-m-11 {
2644
- flex: 0 0 91.3636363636%;
2645
- max-width: 91.3636363636%;
2646
- }
2647
- }
2648
- @media (max-width: 740px) and (max-width: 520px) {
2649
- .col-m-11 {
2650
- flex: 0 0 91.3194444444%;
2651
- max-width: 91.3194444444%;
2652
- }
2653
- }
2654
- @media (max-width: 740px) {
2655
- .col-indent-m-11 {
2656
- margin-left: 94.0789473684%;
2657
- }
2658
- }
2659
- @media (max-width: 740px) and (max-width: 1020px) {
2660
- .col-indent-m-11 {
2661
- margin-left: 94.0070921986%;
2662
- }
2663
- }
2664
- @media (max-width: 740px) and (max-width: 740px) {
2665
- .col-indent-m-11 {
2666
- margin-left: 95%;
2667
- }
2668
- }
2669
- @media (max-width: 740px) and (max-width: 520px) {
2670
- .col-indent-m-11 {
2671
- margin-left: 95.4861111111%;
2672
- }
2673
- }
2674
- @media (max-width: 740px) {
2675
- .col-indent-m-0 {
2676
- margin-left: 0;
2677
- }
2678
- .col-m-12 {
2679
- flex: 0 0 100%;
2680
- max-width: 100%;
2681
- }
2682
- }
2683
- @media (max-width: 740px) and (max-width: 1020px) {
2684
- .col-m-12 {
2685
- flex: 0 0 100%;
2686
- max-width: 100%;
2687
- }
2688
- }
2689
- @media (max-width: 740px) and (max-width: 740px) {
2690
- .col-m-12 {
2691
- flex: 0 0 100%;
2692
- max-width: 100%;
2693
- }
2694
- }
2695
- @media (max-width: 740px) and (max-width: 520px) {
2696
- .col-m-12 {
2697
- flex: 0 0 100%;
2698
- max-width: 100%;
2699
- }
2700
- }
2701
- @media (max-width: 740px) {
2702
- .col-indent-m-0 {
2703
- margin-left: 0;
2704
- }
2705
- }
2706
- @media (max-width: 520px) {
2707
- .col-s-1 {
2708
- flex: 0 0 5.9210526316%;
2709
- max-width: 5.9210526316%;
2710
- }
2711
- }
2712
- @media (max-width: 520px) and (max-width: 1020px) {
2713
- .col-s-1 {
2714
- flex: 0 0 5.9929078014%;
2715
- max-width: 5.9929078014%;
2716
- }
2717
- }
2718
- @media (max-width: 520px) and (max-width: 740px) {
2719
- .col-s-1 {
2720
- flex: 0 0 5%;
2721
- max-width: 5%;
2722
- }
2723
- }
2724
- @media (max-width: 520px) and (max-width: 520px) {
2725
- .col-s-1 {
2726
- flex: 0 0 4.5138888889%;
2727
- max-width: 4.5138888889%;
2728
- }
2729
- }
2730
- @media (max-width: 520px) {
2731
- .col-indent-s-1 {
2732
- margin-left: 8.5526315789%;
2733
- }
2734
- }
2735
- @media (max-width: 520px) and (max-width: 1020px) {
2736
- .col-indent-s-1 {
2737
- margin-left: 8.5460992908%;
2738
- }
2739
- }
2740
- @media (max-width: 520px) and (max-width: 740px) {
2741
- .col-indent-s-1 {
2742
- margin-left: 8.6363636364%;
2743
- }
2744
- }
2745
- @media (max-width: 520px) and (max-width: 520px) {
2746
- .col-indent-s-1 {
2747
- margin-left: 8.6805555556%;
2748
- }
2749
- }
2750
- @media (max-width: 520px) {
2751
- .col-indent-s-0 {
632
+ .col-indent-lg-0 {
2752
633
  margin-left: 0;
2753
634
  }
2754
- .col-s-2 {
2755
- flex: 0 0 14.4736842105%;
2756
- max-width: 14.4736842105%;
2757
- }
2758
- }
2759
- @media (max-width: 520px) and (max-width: 1020px) {
2760
- .col-s-2 {
2761
- flex: 0 0 14.5390070922%;
2762
- max-width: 14.5390070922%;
2763
- }
2764
- }
2765
- @media (max-width: 520px) and (max-width: 740px) {
2766
- .col-s-2 {
2767
- flex: 0 0 13.6363636364%;
2768
- max-width: 13.6363636364%;
2769
- }
2770
- }
2771
- @media (max-width: 520px) and (max-width: 520px) {
2772
- .col-s-2 {
2773
- flex: 0 0 13.1944444444%;
2774
- max-width: 13.1944444444%;
2775
- }
2776
- }
2777
- @media (max-width: 520px) {
2778
- .col-indent-s-2 {
2779
- margin-left: 17.1052631579%;
2780
- }
2781
- }
2782
- @media (max-width: 520px) and (max-width: 1020px) {
2783
- .col-indent-s-2 {
2784
- margin-left: 17.0921985816%;
2785
- }
2786
- }
2787
- @media (max-width: 520px) and (max-width: 740px) {
2788
- .col-indent-s-2 {
2789
- margin-left: 17.2727272727%;
635
+ .col-lg-7 {
636
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
637
+ --col-width: calc(
638
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 7 +
639
+ ((6) * var(--gutter))
640
+ );
641
+ flex: 0 0 var(--col-width);
642
+ max-width: var(--col-width);
2790
643
  }
2791
- }
2792
- @media (max-width: 520px) and (max-width: 520px) {
2793
- .col-indent-s-2 {
2794
- margin-left: 17.3611111111%;
644
+ .col-indent-lg-7 {
645
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 7 + (6) * var(--gutter) + var(--gutter));
2795
646
  }
2796
- }
2797
- @media (max-width: 520px) {
2798
- .col-indent-s-0 {
647
+ .col-indent-lg-0 {
2799
648
  margin-left: 0;
2800
649
  }
2801
- .col-s-3 {
2802
- flex: 0 0 23.0263157895%;
2803
- max-width: 23.0263157895%;
2804
- }
2805
- }
2806
- @media (max-width: 520px) and (max-width: 1020px) {
2807
- .col-s-3 {
2808
- flex: 0 0 23.085106383%;
2809
- max-width: 23.085106383%;
2810
- }
2811
- }
2812
- @media (max-width: 520px) and (max-width: 740px) {
2813
- .col-s-3 {
2814
- flex: 0 0 22.2727272727%;
2815
- max-width: 22.2727272727%;
2816
- }
2817
- }
2818
- @media (max-width: 520px) and (max-width: 520px) {
2819
- .col-s-3 {
2820
- flex: 0 0 21.875%;
2821
- max-width: 21.875%;
2822
- }
2823
- }
2824
- @media (max-width: 520px) {
2825
- .col-indent-s-3 {
2826
- margin-left: 25.6578947368%;
2827
- }
2828
- }
2829
- @media (max-width: 520px) and (max-width: 1020px) {
2830
- .col-indent-s-3 {
2831
- margin-left: 25.6382978723%;
2832
- }
2833
- }
2834
- @media (max-width: 520px) and (max-width: 740px) {
2835
- .col-indent-s-3 {
2836
- margin-left: 25.9090909091%;
650
+ .col-lg-8 {
651
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
652
+ --col-width: calc(
653
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 8 +
654
+ ((7) * var(--gutter))
655
+ );
656
+ flex: 0 0 var(--col-width);
657
+ max-width: var(--col-width);
2837
658
  }
2838
- }
2839
- @media (max-width: 520px) and (max-width: 520px) {
2840
- .col-indent-s-3 {
2841
- margin-left: 26.0416666667%;
659
+ .col-indent-lg-8 {
660
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 8 + (7) * var(--gutter) + var(--gutter));
2842
661
  }
2843
- }
2844
- @media (max-width: 520px) {
2845
- .col-indent-s-0 {
662
+ .col-indent-lg-0 {
2846
663
  margin-left: 0;
2847
664
  }
2848
- .col-s-4 {
2849
- flex: 0 0 31.5789473684%;
2850
- max-width: 31.5789473684%;
665
+ .col-lg-9 {
666
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
667
+ --col-width: calc(
668
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 9 +
669
+ ((8) * var(--gutter))
670
+ );
671
+ flex: 0 0 var(--col-width);
672
+ max-width: var(--col-width);
2851
673
  }
2852
- }
2853
- @media (max-width: 520px) and (max-width: 1020px) {
2854
- .col-s-4 {
2855
- flex: 0 0 31.6312056738%;
2856
- max-width: 31.6312056738%;
674
+ .col-indent-lg-9 {
675
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 9 + (8) * var(--gutter) + var(--gutter));
2857
676
  }
2858
- }
2859
- @media (max-width: 520px) and (max-width: 740px) {
2860
- .col-s-4 {
2861
- flex: 0 0 30.9090909091%;
2862
- max-width: 30.9090909091%;
677
+ .col-indent-lg-0 {
678
+ margin-left: 0;
2863
679
  }
2864
- }
2865
- @media (max-width: 520px) and (max-width: 520px) {
2866
- .col-s-4 {
2867
- flex: 0 0 30.5555555556%;
2868
- max-width: 30.5555555556%;
680
+ .col-lg-10 {
681
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
682
+ --col-width: calc(
683
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 10 +
684
+ ((9) * var(--gutter))
685
+ );
686
+ flex: 0 0 var(--col-width);
687
+ max-width: var(--col-width);
2869
688
  }
2870
- }
2871
- @media (max-width: 520px) {
2872
- .col-indent-s-4 {
2873
- margin-left: 34.2105263158%;
689
+ .col-indent-lg-10 {
690
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 10 + (9) * var(--gutter) + var(--gutter));
2874
691
  }
2875
- }
2876
- @media (max-width: 520px) and (max-width: 1020px) {
2877
- .col-indent-s-4 {
2878
- margin-left: 34.1843971631%;
692
+ .col-indent-lg-0 {
693
+ margin-left: 0;
2879
694
  }
2880
- }
2881
- @media (max-width: 520px) and (max-width: 740px) {
2882
- .col-indent-s-4 {
2883
- margin-left: 34.5454545455%;
695
+ .col-lg-11 {
696
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
697
+ --col-width: calc(
698
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 11 +
699
+ ((10) * var(--gutter))
700
+ );
701
+ flex: 0 0 var(--col-width);
702
+ max-width: var(--col-width);
2884
703
  }
2885
- }
2886
- @media (max-width: 520px) and (max-width: 520px) {
2887
- .col-indent-s-4 {
2888
- margin-left: 34.7222222222%;
704
+ .col-indent-lg-11 {
705
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 11 + (10) * var(--gutter) + var(--gutter));
2889
706
  }
2890
- }
2891
- @media (max-width: 520px) {
2892
- .col-indent-s-0 {
707
+ .col-indent-lg-0 {
2893
708
  margin-left: 0;
2894
709
  }
2895
- .col-s-5 {
2896
- flex: 0 0 40.1315789474%;
2897
- max-width: 40.1315789474%;
710
+ .col-lg-12 {
711
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
712
+ --col-width: calc(
713
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 12 +
714
+ ((11) * var(--gutter))
715
+ );
716
+ flex: 0 0 var(--col-width);
717
+ max-width: var(--col-width);
2898
718
  }
2899
- }
2900
- @media (max-width: 520px) and (max-width: 1020px) {
2901
- .col-s-5 {
2902
- flex: 0 0 40.1773049645%;
2903
- max-width: 40.1773049645%;
719
+ .col-indent-lg-0 {
720
+ margin-left: 0;
2904
721
  }
2905
722
  }
2906
- @media (max-width: 520px) and (max-width: 740px) {
2907
- .col-s-5 {
2908
- flex: 0 0 39.5454545455%;
2909
- max-width: 39.5454545455%;
723
+ @media (max-width: 740px) {
724
+ .col-m-1 {
725
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
726
+ --col-width: calc(
727
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 1 +
728
+ ((0) * var(--gutter))
729
+ );
730
+ flex: 0 0 var(--col-width);
731
+ max-width: var(--col-width);
2910
732
  }
2911
- }
2912
- @media (max-width: 520px) and (max-width: 520px) {
2913
- .col-s-5 {
2914
- flex: 0 0 39.2361111111%;
2915
- max-width: 39.2361111111%;
733
+ .col-indent-m-1 {
734
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 1 + (0) * var(--gutter) + var(--gutter));
2916
735
  }
2917
- }
2918
- @media (max-width: 520px) {
2919
- .col-indent-s-5 {
2920
- margin-left: 42.7631578947%;
736
+ .col-indent-m-0 {
737
+ margin-left: 0;
2921
738
  }
2922
- }
2923
- @media (max-width: 520px) and (max-width: 1020px) {
2924
- .col-indent-s-5 {
2925
- margin-left: 42.7304964539%;
739
+ .col-m-2 {
740
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
741
+ --col-width: calc(
742
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 2 +
743
+ ((1) * var(--gutter))
744
+ );
745
+ flex: 0 0 var(--col-width);
746
+ max-width: var(--col-width);
2926
747
  }
2927
- }
2928
- @media (max-width: 520px) and (max-width: 740px) {
2929
- .col-indent-s-5 {
2930
- margin-left: 43.1818181818%;
748
+ .col-indent-m-2 {
749
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 2 + (1) * var(--gutter) + var(--gutter));
2931
750
  }
2932
- }
2933
- @media (max-width: 520px) and (max-width: 520px) {
2934
- .col-indent-s-5 {
2935
- margin-left: 43.4027777778%;
751
+ .col-indent-m-0 {
752
+ margin-left: 0;
2936
753
  }
2937
- }
2938
- @media (max-width: 520px) {
2939
- .col-indent-s-0 {
754
+ .col-m-3 {
755
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
756
+ --col-width: calc(
757
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 3 +
758
+ ((2) * var(--gutter))
759
+ );
760
+ flex: 0 0 var(--col-width);
761
+ max-width: var(--col-width);
762
+ }
763
+ .col-indent-m-3 {
764
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 3 + (2) * var(--gutter) + var(--gutter));
765
+ }
766
+ .col-indent-m-0 {
2940
767
  margin-left: 0;
2941
768
  }
2942
- .col-s-6 {
2943
- flex: 0 0 48.6842105263%;
2944
- max-width: 48.6842105263%;
769
+ .col-m-4 {
770
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
771
+ --col-width: calc(
772
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 4 +
773
+ ((3) * var(--gutter))
774
+ );
775
+ flex: 0 0 var(--col-width);
776
+ max-width: var(--col-width);
2945
777
  }
2946
- }
2947
- @media (max-width: 520px) and (max-width: 1020px) {
2948
- .col-s-6 {
2949
- flex: 0 0 48.7234042553%;
2950
- max-width: 48.7234042553%;
778
+ .col-indent-m-4 {
779
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 4 + (3) * var(--gutter) + var(--gutter));
2951
780
  }
2952
- }
2953
- @media (max-width: 520px) and (max-width: 740px) {
2954
- .col-s-6 {
2955
- flex: 0 0 48.1818181818%;
2956
- max-width: 48.1818181818%;
781
+ .col-indent-m-0 {
782
+ margin-left: 0;
2957
783
  }
2958
- }
2959
- @media (max-width: 520px) and (max-width: 520px) {
2960
- .col-s-6 {
2961
- flex: 0 0 47.9166666667%;
2962
- max-width: 47.9166666667%;
784
+ .col-m-5 {
785
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
786
+ --col-width: calc(
787
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 5 +
788
+ ((4) * var(--gutter))
789
+ );
790
+ flex: 0 0 var(--col-width);
791
+ max-width: var(--col-width);
2963
792
  }
2964
- }
2965
- @media (max-width: 520px) {
2966
- .col-indent-s-6 {
2967
- margin-left: 51.3157894737%;
793
+ .col-indent-m-5 {
794
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 5 + (4) * var(--gutter) + var(--gutter));
2968
795
  }
2969
- }
2970
- @media (max-width: 520px) and (max-width: 1020px) {
2971
- .col-indent-s-6 {
2972
- margin-left: 51.2765957447%;
796
+ .col-indent-m-0 {
797
+ margin-left: 0;
2973
798
  }
2974
- }
2975
- @media (max-width: 520px) and (max-width: 740px) {
2976
- .col-indent-s-6 {
2977
- margin-left: 51.8181818182%;
799
+ .col-m-6 {
800
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
801
+ --col-width: calc(
802
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 6 +
803
+ ((5) * var(--gutter))
804
+ );
805
+ flex: 0 0 var(--col-width);
806
+ max-width: var(--col-width);
2978
807
  }
2979
- }
2980
- @media (max-width: 520px) and (max-width: 520px) {
2981
- .col-indent-s-6 {
2982
- margin-left: 52.0833333333%;
808
+ .col-indent-m-6 {
809
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 6 + (5) * var(--gutter) + var(--gutter));
2983
810
  }
2984
- }
2985
- @media (max-width: 520px) {
2986
- .col-indent-s-0 {
811
+ .col-indent-m-0 {
2987
812
  margin-left: 0;
2988
813
  }
2989
- .col-s-7 {
2990
- flex: 0 0 57.2368421053%;
2991
- max-width: 57.2368421053%;
814
+ .col-m-7 {
815
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
816
+ --col-width: calc(
817
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 7 +
818
+ ((6) * var(--gutter))
819
+ );
820
+ flex: 0 0 var(--col-width);
821
+ max-width: var(--col-width);
2992
822
  }
2993
- }
2994
- @media (max-width: 520px) and (max-width: 1020px) {
2995
- .col-s-7 {
2996
- flex: 0 0 57.2695035461%;
2997
- max-width: 57.2695035461%;
823
+ .col-indent-m-7 {
824
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 7 + (6) * var(--gutter) + var(--gutter));
2998
825
  }
2999
- }
3000
- @media (max-width: 520px) and (max-width: 740px) {
3001
- .col-s-7 {
3002
- flex: 0 0 56.8181818182%;
3003
- max-width: 56.8181818182%;
826
+ .col-indent-m-0 {
827
+ margin-left: 0;
3004
828
  }
3005
- }
3006
- @media (max-width: 520px) and (max-width: 520px) {
3007
- .col-s-7 {
3008
- flex: 0 0 56.5972222222%;
3009
- max-width: 56.5972222222%;
829
+ .col-m-8 {
830
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
831
+ --col-width: calc(
832
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 8 +
833
+ ((7) * var(--gutter))
834
+ );
835
+ flex: 0 0 var(--col-width);
836
+ max-width: var(--col-width);
3010
837
  }
3011
- }
3012
- @media (max-width: 520px) {
3013
- .col-indent-s-7 {
3014
- margin-left: 59.8684210526%;
838
+ .col-indent-m-8 {
839
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 8 + (7) * var(--gutter) + var(--gutter));
3015
840
  }
3016
- }
3017
- @media (max-width: 520px) and (max-width: 1020px) {
3018
- .col-indent-s-7 {
3019
- margin-left: 59.8226950355%;
841
+ .col-indent-m-0 {
842
+ margin-left: 0;
3020
843
  }
3021
- }
3022
- @media (max-width: 520px) and (max-width: 740px) {
3023
- .col-indent-s-7 {
3024
- margin-left: 60.4545454545%;
844
+ .col-m-9 {
845
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
846
+ --col-width: calc(
847
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 9 +
848
+ ((8) * var(--gutter))
849
+ );
850
+ flex: 0 0 var(--col-width);
851
+ max-width: var(--col-width);
3025
852
  }
3026
- }
3027
- @media (max-width: 520px) and (max-width: 520px) {
3028
- .col-indent-s-7 {
3029
- margin-left: 60.7638888889%;
853
+ .col-indent-m-9 {
854
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 9 + (8) * var(--gutter) + var(--gutter));
3030
855
  }
3031
- }
3032
- @media (max-width: 520px) {
3033
- .col-indent-s-0 {
856
+ .col-indent-m-0 {
3034
857
  margin-left: 0;
3035
858
  }
3036
- .col-s-8 {
3037
- flex: 0 0 65.7894736842%;
3038
- max-width: 65.7894736842%;
859
+ .col-m-10 {
860
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
861
+ --col-width: calc(
862
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 10 +
863
+ ((9) * var(--gutter))
864
+ );
865
+ flex: 0 0 var(--col-width);
866
+ max-width: var(--col-width);
3039
867
  }
3040
- }
3041
- @media (max-width: 520px) and (max-width: 1020px) {
3042
- .col-s-8 {
3043
- flex: 0 0 65.8156028369%;
3044
- max-width: 65.8156028369%;
868
+ .col-indent-m-10 {
869
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 10 + (9) * var(--gutter) + var(--gutter));
3045
870
  }
3046
- }
3047
- @media (max-width: 520px) and (max-width: 740px) {
3048
- .col-s-8 {
3049
- flex: 0 0 65.4545454545%;
3050
- max-width: 65.4545454545%;
871
+ .col-indent-m-0 {
872
+ margin-left: 0;
3051
873
  }
3052
- }
3053
- @media (max-width: 520px) and (max-width: 520px) {
3054
- .col-s-8 {
3055
- flex: 0 0 65.2777777778%;
3056
- max-width: 65.2777777778%;
874
+ .col-m-11 {
875
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
876
+ --col-width: calc(
877
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 11 +
878
+ ((10) * var(--gutter))
879
+ );
880
+ flex: 0 0 var(--col-width);
881
+ max-width: var(--col-width);
3057
882
  }
3058
- }
3059
- @media (max-width: 520px) {
3060
- .col-indent-s-8 {
3061
- margin-left: 68.4210526316%;
883
+ .col-indent-m-11 {
884
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 11 + (10) * var(--gutter) + var(--gutter));
3062
885
  }
3063
- }
3064
- @media (max-width: 520px) and (max-width: 1020px) {
3065
- .col-indent-s-8 {
3066
- margin-left: 68.3687943262%;
886
+ .col-indent-m-0 {
887
+ margin-left: 0;
3067
888
  }
3068
- }
3069
- @media (max-width: 520px) and (max-width: 740px) {
3070
- .col-indent-s-8 {
3071
- margin-left: 69.0909090909%;
889
+ .col-m-12 {
890
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
891
+ --col-width: calc(
892
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 12 +
893
+ ((11) * var(--gutter))
894
+ );
895
+ flex: 0 0 var(--col-width);
896
+ max-width: var(--col-width);
3072
897
  }
3073
- }
3074
- @media (max-width: 520px) and (max-width: 520px) {
3075
- .col-indent-s-8 {
3076
- margin-left: 69.4444444444%;
898
+ .col-indent-m-0 {
899
+ margin-left: 0;
3077
900
  }
3078
901
  }
3079
902
  @media (max-width: 520px) {
903
+ .col-s-1 {
904
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
905
+ --col-width: calc(
906
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 1 +
907
+ ((0) * var(--gutter))
908
+ );
909
+ flex: 0 0 var(--col-width);
910
+ max-width: var(--col-width);
911
+ }
912
+ .col-indent-s-1 {
913
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 1 + (0) * var(--gutter) + var(--gutter));
914
+ }
3080
915
  .col-indent-s-0 {
3081
916
  margin-left: 0;
3082
917
  }
3083
- .col-s-9 {
3084
- flex: 0 0 74.3421052632%;
3085
- max-width: 74.3421052632%;
918
+ .col-s-2 {
919
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
920
+ --col-width: calc(
921
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 2 +
922
+ ((1) * var(--gutter))
923
+ );
924
+ flex: 0 0 var(--col-width);
925
+ max-width: var(--col-width);
3086
926
  }
3087
- }
3088
- @media (max-width: 520px) and (max-width: 1020px) {
3089
- .col-s-9 {
3090
- flex: 0 0 74.3617021277%;
3091
- max-width: 74.3617021277%;
927
+ .col-indent-s-2 {
928
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 2 + (1) * var(--gutter) + var(--gutter));
3092
929
  }
3093
- }
3094
- @media (max-width: 520px) and (max-width: 740px) {
3095
- .col-s-9 {
3096
- flex: 0 0 74.0909090909%;
3097
- max-width: 74.0909090909%;
930
+ .col-indent-s-0 {
931
+ margin-left: 0;
3098
932
  }
3099
- }
3100
- @media (max-width: 520px) and (max-width: 520px) {
3101
- .col-s-9 {
3102
- flex: 0 0 73.9583333333%;
3103
- max-width: 73.9583333333%;
933
+ .col-s-3 {
934
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
935
+ --col-width: calc(
936
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 3 +
937
+ ((2) * var(--gutter))
938
+ );
939
+ flex: 0 0 var(--col-width);
940
+ max-width: var(--col-width);
3104
941
  }
3105
- }
3106
- @media (max-width: 520px) {
3107
- .col-indent-s-9 {
3108
- margin-left: 76.9736842105%;
942
+ .col-indent-s-3 {
943
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 3 + (2) * var(--gutter) + var(--gutter));
3109
944
  }
3110
- }
3111
- @media (max-width: 520px) and (max-width: 1020px) {
3112
- .col-indent-s-9 {
3113
- margin-left: 76.914893617%;
945
+ .col-indent-s-0 {
946
+ margin-left: 0;
3114
947
  }
3115
- }
3116
- @media (max-width: 520px) and (max-width: 740px) {
3117
- .col-indent-s-9 {
3118
- margin-left: 77.7272727273%;
948
+ .col-s-4 {
949
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
950
+ --col-width: calc(
951
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 4 +
952
+ ((3) * var(--gutter))
953
+ );
954
+ flex: 0 0 var(--col-width);
955
+ max-width: var(--col-width);
3119
956
  }
3120
- }
3121
- @media (max-width: 520px) and (max-width: 520px) {
3122
- .col-indent-s-9 {
3123
- margin-left: 78.125%;
957
+ .col-indent-s-4 {
958
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 4 + (3) * var(--gutter) + var(--gutter));
3124
959
  }
3125
- }
3126
- @media (max-width: 520px) {
3127
960
  .col-indent-s-0 {
3128
961
  margin-left: 0;
3129
962
  }
3130
- .col-s-10 {
3131
- flex: 0 0 82.8947368421%;
3132
- max-width: 82.8947368421%;
963
+ .col-s-5 {
964
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
965
+ --col-width: calc(
966
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 5 +
967
+ ((4) * var(--gutter))
968
+ );
969
+ flex: 0 0 var(--col-width);
970
+ max-width: var(--col-width);
3133
971
  }
3134
- }
3135
- @media (max-width: 520px) and (max-width: 1020px) {
3136
- .col-s-10 {
3137
- flex: 0 0 82.9078014184%;
3138
- max-width: 82.9078014184%;
972
+ .col-indent-s-5 {
973
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 5 + (4) * var(--gutter) + var(--gutter));
3139
974
  }
3140
- }
3141
- @media (max-width: 520px) and (max-width: 740px) {
3142
- .col-s-10 {
3143
- flex: 0 0 82.7272727273%;
3144
- max-width: 82.7272727273%;
975
+ .col-indent-s-0 {
976
+ margin-left: 0;
3145
977
  }
3146
- }
3147
- @media (max-width: 520px) and (max-width: 520px) {
3148
- .col-s-10 {
3149
- flex: 0 0 82.6388888889%;
3150
- max-width: 82.6388888889%;
978
+ .col-s-6 {
979
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
980
+ --col-width: calc(
981
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 6 +
982
+ ((5) * var(--gutter))
983
+ );
984
+ flex: 0 0 var(--col-width);
985
+ max-width: var(--col-width);
3151
986
  }
3152
- }
3153
- @media (max-width: 520px) {
3154
- .col-indent-s-10 {
3155
- margin-left: 85.5263157895%;
987
+ .col-indent-s-6 {
988
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 6 + (5) * var(--gutter) + var(--gutter));
3156
989
  }
3157
- }
3158
- @media (max-width: 520px) and (max-width: 1020px) {
3159
- .col-indent-s-10 {
3160
- margin-left: 85.4609929078%;
990
+ .col-indent-s-0 {
991
+ margin-left: 0;
3161
992
  }
3162
- }
3163
- @media (max-width: 520px) and (max-width: 740px) {
3164
- .col-indent-s-10 {
3165
- margin-left: 86.3636363636%;
993
+ .col-s-7 {
994
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
995
+ --col-width: calc(
996
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 7 +
997
+ ((6) * var(--gutter))
998
+ );
999
+ flex: 0 0 var(--col-width);
1000
+ max-width: var(--col-width);
3166
1001
  }
3167
- }
3168
- @media (max-width: 520px) and (max-width: 520px) {
3169
- .col-indent-s-10 {
3170
- margin-left: 86.8055555556%;
1002
+ .col-indent-s-7 {
1003
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 7 + (6) * var(--gutter) + var(--gutter));
3171
1004
  }
3172
- }
3173
- @media (max-width: 520px) {
3174
1005
  .col-indent-s-0 {
3175
1006
  margin-left: 0;
3176
1007
  }
3177
- .col-s-11 {
3178
- flex: 0 0 91.4473684211%;
3179
- max-width: 91.4473684211%;
1008
+ .col-s-8 {
1009
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
1010
+ --col-width: calc(
1011
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 8 +
1012
+ ((7) * var(--gutter))
1013
+ );
1014
+ flex: 0 0 var(--col-width);
1015
+ max-width: var(--col-width);
3180
1016
  }
3181
- }
3182
- @media (max-width: 520px) and (max-width: 1020px) {
3183
- .col-s-11 {
3184
- flex: 0 0 91.4539007092%;
3185
- max-width: 91.4539007092%;
1017
+ .col-indent-s-8 {
1018
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 8 + (7) * var(--gutter) + var(--gutter));
3186
1019
  }
3187
- }
3188
- @media (max-width: 520px) and (max-width: 740px) {
3189
- .col-s-11 {
3190
- flex: 0 0 91.3636363636%;
3191
- max-width: 91.3636363636%;
1020
+ .col-indent-s-0 {
1021
+ margin-left: 0;
3192
1022
  }
3193
- }
3194
- @media (max-width: 520px) and (max-width: 520px) {
3195
- .col-s-11 {
3196
- flex: 0 0 91.3194444444%;
3197
- max-width: 91.3194444444%;
1023
+ .col-s-9 {
1024
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
1025
+ --col-width: calc(
1026
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 9 +
1027
+ ((8) * var(--gutter))
1028
+ );
1029
+ flex: 0 0 var(--col-width);
1030
+ max-width: var(--col-width);
3198
1031
  }
3199
- }
3200
- @media (max-width: 520px) {
3201
- .col-indent-s-11 {
3202
- margin-left: 94.0789473684%;
1032
+ .col-indent-s-9 {
1033
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 9 + (8) * var(--gutter) + var(--gutter));
3203
1034
  }
3204
- }
3205
- @media (max-width: 520px) and (max-width: 1020px) {
3206
- .col-indent-s-11 {
3207
- margin-left: 94.0070921986%;
1035
+ .col-indent-s-0 {
1036
+ margin-left: 0;
3208
1037
  }
3209
- }
3210
- @media (max-width: 520px) and (max-width: 740px) {
3211
- .col-indent-s-11 {
3212
- margin-left: 95%;
1038
+ .col-s-10 {
1039
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
1040
+ --col-width: calc(
1041
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 10 +
1042
+ ((9) * var(--gutter))
1043
+ );
1044
+ flex: 0 0 var(--col-width);
1045
+ max-width: var(--col-width);
3213
1046
  }
3214
- }
3215
- @media (max-width: 520px) and (max-width: 520px) {
3216
- .col-indent-s-11 {
3217
- margin-left: 95.4861111111%;
1047
+ .col-indent-s-10 {
1048
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 10 + (9) * var(--gutter) + var(--gutter));
3218
1049
  }
3219
- }
3220
- @media (max-width: 520px) {
3221
1050
  .col-indent-s-0 {
3222
1051
  margin-left: 0;
3223
1052
  }
3224
- .col-s-12 {
3225
- flex: 0 0 100%;
3226
- max-width: 100%;
1053
+ .col-s-11 {
1054
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
1055
+ --col-width: calc(
1056
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 11 +
1057
+ ((10) * var(--gutter))
1058
+ );
1059
+ flex: 0 0 var(--col-width);
1060
+ max-width: var(--col-width);
3227
1061
  }
3228
- }
3229
- @media (max-width: 520px) and (max-width: 1020px) {
3230
- .col-s-12 {
3231
- flex: 0 0 100%;
3232
- max-width: 100%;
1062
+ .col-indent-s-11 {
1063
+ margin-left: calc((100% - (12 - 1) * var(--gutter)) / 12 * 11 + (10) * var(--gutter) + var(--gutter));
3233
1064
  }
3234
- }
3235
- @media (max-width: 520px) and (max-width: 740px) {
3236
- .col-s-12 {
3237
- flex: 0 0 100%;
3238
- max-width: 100%;
1065
+ .col-indent-s-0 {
1066
+ margin-left: 0;
3239
1067
  }
3240
- }
3241
- @media (max-width: 520px) and (max-width: 520px) {
3242
1068
  .col-s-12 {
3243
- flex: 0 0 100%;
3244
- max-width: 100%;
1069
+ --gutter: clamp(20px, 0px + 2.778vw, 40px);
1070
+ --col-width: calc(
1071
+ ((100% - ((12 - 1) * var(--gutter))) / 12) * 12 +
1072
+ ((11) * var(--gutter))
1073
+ );
1074
+ flex: 0 0 var(--col-width);
1075
+ max-width: var(--col-width);
3245
1076
  }
3246
- }
3247
- @media (max-width: 520px) {
3248
1077
  .col-indent-s-0 {
3249
1078
  margin-left: 0;
3250
1079
  }