@jetbrains/kotlin-web-site-ui 4.0.0-alpha.0 → 4.0.0-alpha.1

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.
@@ -10,149 +10,7 @@
10
10
  --ktl-grid-col-size: calc(100% / var(--ktl-grid-elements));
11
11
  }
12
12
 
13
- :global .ktl-container {
14
- margin: 0 auto;
15
- padding: 0 var(--ktl-grid-gutter-mobile);
16
- max-width: var(--ktl-grid-container-width-mobile);
17
- }
18
-
19
- @media (min-width: 1200px) {
20
-
21
- :global .ktl-container {
22
- padding: 0 var(--ktl-grid-gutter);
23
- max-width: var(--ktl-grid-container-width-desktop)
24
- }
25
- }
26
-
27
- :global .ktl-container-fluid {
28
- max-width: none;
29
- }
30
-
31
- :global .ktl-row {
32
- display: flex;
33
- margin-left: calc(-1 * var(--ktl-grid-gutter-half));
34
- margin-right: calc(-1 * var(--ktl-grid-gutter-half));
35
- flex-wrap: wrap;
36
- flex-direction: row;
37
- }
38
-
39
- :global .ktl-row--reverse {
40
- flex-direction: row-reverse;
41
- }
42
-
43
- @media (max-width: 767px) {
44
-
45
- :global .ktl-row {
46
- margin-left: calc(-1 * var(--ktl-grid-gutter-mobile-half));
47
- margin-right: calc(-1 * var(--ktl-grid-gutter-mobile-half))
48
- }
49
- }
50
-
51
- :global .ktl-offset-top-xs {
52
- margin-top: 8px;
53
- }
54
-
55
- :global .ktl-offset-top-s {
56
- margin-top: 16px;
57
- }
58
-
59
- :global .ktl-offset-top-m {
60
- margin-top: 32px;
61
- }
62
-
63
- @media (max-width: 767px) {
64
-
65
- :global .ktl-offset-top-m {
66
- margin-top: 16px
67
- }
68
- }
69
-
70
- :global .ktl-offset-top-l {
71
- margin-top: 48px;
72
- }
73
-
74
- @media (max-width: 767px) {
75
-
76
- :global .ktl-offset-top-l {
77
- margin-top: 32px
78
- }
79
- }
80
-
81
- :global .ktl-offset-top-xl {
82
- margin-top: 64px;
83
- }
84
-
85
- @media (max-width: 767px) {
86
-
87
- :global .ktl-offset-top-xl {
88
- margin-top: 48px
89
- }
90
- }
91
-
92
- :global .ktl-offset-top-xxl {
93
- margin-top: 96px;
94
- }
95
-
96
- @media (max-width: 767px) {
97
-
98
- :global .ktl-offset-top-xxl {
99
- margin-top: 64px
100
- }
101
- }
102
-
103
- :global .ktl-offset-bottom-xs {
104
- margin-bottom: 8px;
105
- }
106
-
107
- :global .ktl-offset-bottom-s {
108
- margin-bottom: 16px;
109
- }
110
-
111
- :global .ktl-offset-bottom-m {
112
- margin-bottom: 32px;
113
- }
114
-
115
- @media (max-width: 767px) {
116
-
117
- :global .ktl-offset-bottom-m {
118
- margin-bottom: 16px
119
- }
120
- }
121
-
122
- :global .ktl-offset-bottom-l {
123
- margin-bottom: 48px;
124
- }
125
-
126
- @media (max-width: 767px) {
127
-
128
- :global .ktl-offset-bottom-l {
129
- margin-bottom: 32px
130
- }
131
- }
132
-
133
- :global .ktl-offset-bottom-xl {
134
- margin-bottom: 64px;
135
- }
136
-
137
- @media (max-width: 767px) {
138
-
139
- :global .ktl-offset-bottom-xl {
140
- margin-bottom: 48px
141
- }
142
- }
143
-
144
- :global .ktl-offset-bottom-xxl {
145
- margin-bottom: 96px;
146
- }
147
-
148
- @media (max-width: 767px) {
149
-
150
- :global .ktl-offset-bottom-xxl {
151
- margin-bottom: 64px
152
- }
153
- }
154
-
155
- :global .ktl-col {
13
+ .ktl-col {
156
14
  padding-right: var(--ktl-grid-gutter-half);
157
15
  padding-left: var(--ktl-grid-gutter-half);
158
16
  flex-grow: 1;
@@ -162,13 +20,13 @@
162
20
 
163
21
  @media (max-width: 767px) {
164
22
 
165
- :global .ktl-col {
23
+ .ktl-col {
166
24
  padding-right: var(--ktl-grid-gutter-mobile-half);
167
25
  padding-left: var(--ktl-grid-gutter-mobile-half)
168
26
  }
169
27
  }
170
28
 
171
- :global .ktl-col-1 {
29
+ .ktl-col-1 {
172
30
  box-sizing: border-box;
173
31
  flex: 0 0 auto;
174
32
  padding-right: var(--ktl-grid-gutter-half);
@@ -179,17 +37,17 @@
179
37
 
180
38
  @media (max-width: 767px) {
181
39
 
182
- :global .ktl-col-1 {
40
+ .ktl-col-1 {
183
41
  padding-right: var(--ktl-grid-gutter-mobile-half);
184
42
  padding-left: var(--ktl-grid-gutter-mobile-half);
185
43
  }
186
44
  }
187
45
 
188
- :global .ktl-col-offset-1 {
46
+ .ktl-col-offset-1 {
189
47
  margin-left: calc(var(--ktl-grid-col-size) * 1);
190
48
  }
191
49
 
192
- :global .ktl-col-2 {
50
+ .ktl-col-2 {
193
51
  box-sizing: border-box;
194
52
  flex: 0 0 auto;
195
53
  padding-right: var(--ktl-grid-gutter-half);
@@ -200,17 +58,17 @@
200
58
 
201
59
  @media (max-width: 767px) {
202
60
 
203
- :global .ktl-col-2 {
61
+ .ktl-col-2 {
204
62
  padding-right: var(--ktl-grid-gutter-mobile-half);
205
63
  padding-left: var(--ktl-grid-gutter-mobile-half);
206
64
  }
207
65
  }
208
66
 
209
- :global .ktl-col-offset-2 {
67
+ .ktl-col-offset-2 {
210
68
  margin-left: calc(var(--ktl-grid-col-size) * 2);
211
69
  }
212
70
 
213
- :global .ktl-col-3 {
71
+ .ktl-col-3 {
214
72
  box-sizing: border-box;
215
73
  flex: 0 0 auto;
216
74
  padding-right: var(--ktl-grid-gutter-half);
@@ -221,17 +79,17 @@
221
79
 
222
80
  @media (max-width: 767px) {
223
81
 
224
- :global .ktl-col-3 {
82
+ .ktl-col-3 {
225
83
  padding-right: var(--ktl-grid-gutter-mobile-half);
226
84
  padding-left: var(--ktl-grid-gutter-mobile-half);
227
85
  }
228
86
  }
229
87
 
230
- :global .ktl-col-offset-3 {
88
+ .ktl-col-offset-3 {
231
89
  margin-left: calc(var(--ktl-grid-col-size) * 3);
232
90
  }
233
91
 
234
- :global .ktl-col-4 {
92
+ .ktl-col-4 {
235
93
  box-sizing: border-box;
236
94
  flex: 0 0 auto;
237
95
  padding-right: var(--ktl-grid-gutter-half);
@@ -242,17 +100,17 @@
242
100
 
243
101
  @media (max-width: 767px) {
244
102
 
245
- :global .ktl-col-4 {
103
+ .ktl-col-4 {
246
104
  padding-right: var(--ktl-grid-gutter-mobile-half);
247
105
  padding-left: var(--ktl-grid-gutter-mobile-half);
248
106
  }
249
107
  }
250
108
 
251
- :global .ktl-col-offset-4 {
109
+ .ktl-col-offset-4 {
252
110
  margin-left: calc(var(--ktl-grid-col-size) * 4);
253
111
  }
254
112
 
255
- :global .ktl-col-5 {
113
+ .ktl-col-5 {
256
114
  box-sizing: border-box;
257
115
  flex: 0 0 auto;
258
116
  padding-right: var(--ktl-grid-gutter-half);
@@ -263,17 +121,17 @@
263
121
 
264
122
  @media (max-width: 767px) {
265
123
 
266
- :global .ktl-col-5 {
124
+ .ktl-col-5 {
267
125
  padding-right: var(--ktl-grid-gutter-mobile-half);
268
126
  padding-left: var(--ktl-grid-gutter-mobile-half);
269
127
  }
270
128
  }
271
129
 
272
- :global .ktl-col-offset-5 {
130
+ .ktl-col-offset-5 {
273
131
  margin-left: calc(var(--ktl-grid-col-size) * 5);
274
132
  }
275
133
 
276
- :global .ktl-col-6 {
134
+ .ktl-col-6 {
277
135
  box-sizing: border-box;
278
136
  flex: 0 0 auto;
279
137
  padding-right: var(--ktl-grid-gutter-half);
@@ -284,17 +142,17 @@
284
142
 
285
143
  @media (max-width: 767px) {
286
144
 
287
- :global .ktl-col-6 {
145
+ .ktl-col-6 {
288
146
  padding-right: var(--ktl-grid-gutter-mobile-half);
289
147
  padding-left: var(--ktl-grid-gutter-mobile-half);
290
148
  }
291
149
  }
292
150
 
293
- :global .ktl-col-offset-6 {
151
+ .ktl-col-offset-6 {
294
152
  margin-left: calc(var(--ktl-grid-col-size) * 6);
295
153
  }
296
154
 
297
- :global .ktl-col-7 {
155
+ .ktl-col-7 {
298
156
  box-sizing: border-box;
299
157
  flex: 0 0 auto;
300
158
  padding-right: var(--ktl-grid-gutter-half);
@@ -305,17 +163,17 @@
305
163
 
306
164
  @media (max-width: 767px) {
307
165
 
308
- :global .ktl-col-7 {
166
+ .ktl-col-7 {
309
167
  padding-right: var(--ktl-grid-gutter-mobile-half);
310
168
  padding-left: var(--ktl-grid-gutter-mobile-half);
311
169
  }
312
170
  }
313
171
 
314
- :global .ktl-col-offset-7 {
172
+ .ktl-col-offset-7 {
315
173
  margin-left: calc(var(--ktl-grid-col-size) * 7);
316
174
  }
317
175
 
318
- :global .ktl-col-8 {
176
+ .ktl-col-8 {
319
177
  box-sizing: border-box;
320
178
  flex: 0 0 auto;
321
179
  padding-right: var(--ktl-grid-gutter-half);
@@ -326,17 +184,17 @@
326
184
 
327
185
  @media (max-width: 767px) {
328
186
 
329
- :global .ktl-col-8 {
187
+ .ktl-col-8 {
330
188
  padding-right: var(--ktl-grid-gutter-mobile-half);
331
189
  padding-left: var(--ktl-grid-gutter-mobile-half);
332
190
  }
333
191
  }
334
192
 
335
- :global .ktl-col-offset-8 {
193
+ .ktl-col-offset-8 {
336
194
  margin-left: calc(var(--ktl-grid-col-size) * 8);
337
195
  }
338
196
 
339
- :global .ktl-col-9 {
197
+ .ktl-col-9 {
340
198
  box-sizing: border-box;
341
199
  flex: 0 0 auto;
342
200
  padding-right: var(--ktl-grid-gutter-half);
@@ -347,17 +205,17 @@
347
205
 
348
206
  @media (max-width: 767px) {
349
207
 
350
- :global .ktl-col-9 {
208
+ .ktl-col-9 {
351
209
  padding-right: var(--ktl-grid-gutter-mobile-half);
352
210
  padding-left: var(--ktl-grid-gutter-mobile-half);
353
211
  }
354
212
  }
355
213
 
356
- :global .ktl-col-offset-9 {
214
+ .ktl-col-offset-9 {
357
215
  margin-left: calc(var(--ktl-grid-col-size) * 9);
358
216
  }
359
217
 
360
- :global .ktl-col-10 {
218
+ .ktl-col-10 {
361
219
  box-sizing: border-box;
362
220
  flex: 0 0 auto;
363
221
  padding-right: var(--ktl-grid-gutter-half);
@@ -368,17 +226,17 @@
368
226
 
369
227
  @media (max-width: 767px) {
370
228
 
371
- :global .ktl-col-10 {
229
+ .ktl-col-10 {
372
230
  padding-right: var(--ktl-grid-gutter-mobile-half);
373
231
  padding-left: var(--ktl-grid-gutter-mobile-half);
374
232
  }
375
233
  }
376
234
 
377
- :global .ktl-col-offset-10 {
235
+ .ktl-col-offset-10 {
378
236
  margin-left: calc(var(--ktl-grid-col-size) * 10);
379
237
  }
380
238
 
381
- :global .ktl-col-11 {
239
+ .ktl-col-11 {
382
240
  box-sizing: border-box;
383
241
  flex: 0 0 auto;
384
242
  padding-right: var(--ktl-grid-gutter-half);
@@ -389,17 +247,17 @@
389
247
 
390
248
  @media (max-width: 767px) {
391
249
 
392
- :global .ktl-col-11 {
250
+ .ktl-col-11 {
393
251
  padding-right: var(--ktl-grid-gutter-mobile-half);
394
252
  padding-left: var(--ktl-grid-gutter-mobile-half);
395
253
  }
396
254
  }
397
255
 
398
- :global .ktl-col-offset-11 {
256
+ .ktl-col-offset-11 {
399
257
  margin-left: calc(var(--ktl-grid-col-size) * 11);
400
258
  }
401
259
 
402
- :global .ktl-col-12 {
260
+ .ktl-col-12 {
403
261
  box-sizing: border-box;
404
262
  flex: 0 0 auto;
405
263
  padding-right: var(--ktl-grid-gutter-half);
@@ -410,18 +268,18 @@
410
268
 
411
269
  @media (max-width: 767px) {
412
270
 
413
- :global .ktl-col-12 {
271
+ .ktl-col-12 {
414
272
  padding-right: var(--ktl-grid-gutter-mobile-half);
415
273
  padding-left: var(--ktl-grid-gutter-mobile-half);
416
274
  }
417
275
  }
418
276
 
419
- :global .ktl-col-offset-12 {
277
+ .ktl-col-offset-12 {
420
278
  margin-left: calc(var(--ktl-grid-col-size) * 12);
421
279
  }
422
280
 
423
281
  @media (min-width: 768px) {
424
- :global .ktl-col-sm {
282
+ .ktl-col-sm {
425
283
  padding-right: var(--ktl-grid-gutter-half);
426
284
  padding-left: var(--ktl-grid-gutter-half);
427
285
  flex-grow: 1;
@@ -429,12 +287,12 @@
429
287
  max-width: 100%;
430
288
  }
431
289
  @media (max-width: 767px) {
432
- :global .ktl-col-sm {
290
+ .ktl-col-sm {
433
291
  padding-right: var(--ktl-grid-gutter-mobile-half);
434
292
  padding-left: var(--ktl-grid-gutter-mobile-half)
435
293
  }
436
294
  }
437
- :global .ktl-col-sm-1 {
295
+ .ktl-col-sm-1 {
438
296
  box-sizing: border-box;
439
297
  flex: 0 0 auto;
440
298
  padding-right: var(--ktl-grid-gutter-half);
@@ -443,15 +301,15 @@
443
301
  max-width: calc(var(--ktl-grid-col-size) * 1);
444
302
  }
445
303
  @media (max-width: 767px) {
446
- :global .ktl-col-sm-1 {
304
+ .ktl-col-sm-1 {
447
305
  padding-right: var(--ktl-grid-gutter-mobile-half);
448
306
  padding-left: var(--ktl-grid-gutter-mobile-half);
449
307
  }
450
308
  }
451
- :global .ktl-col-sm-offset-1 {
309
+ .ktl-col-sm-offset-1 {
452
310
  margin-left: calc(var(--ktl-grid-col-size) * 1);
453
311
  }
454
- :global .ktl-col-sm-2 {
312
+ .ktl-col-sm-2 {
455
313
  box-sizing: border-box;
456
314
  flex: 0 0 auto;
457
315
  padding-right: var(--ktl-grid-gutter-half);
@@ -460,15 +318,15 @@
460
318
  max-width: calc(var(--ktl-grid-col-size) * 2);
461
319
  }
462
320
  @media (max-width: 767px) {
463
- :global .ktl-col-sm-2 {
321
+ .ktl-col-sm-2 {
464
322
  padding-right: var(--ktl-grid-gutter-mobile-half);
465
323
  padding-left: var(--ktl-grid-gutter-mobile-half);
466
324
  }
467
325
  }
468
- :global .ktl-col-sm-offset-2 {
326
+ .ktl-col-sm-offset-2 {
469
327
  margin-left: calc(var(--ktl-grid-col-size) * 2);
470
328
  }
471
- :global .ktl-col-sm-3 {
329
+ .ktl-col-sm-3 {
472
330
  box-sizing: border-box;
473
331
  flex: 0 0 auto;
474
332
  padding-right: var(--ktl-grid-gutter-half);
@@ -477,15 +335,15 @@
477
335
  max-width: calc(var(--ktl-grid-col-size) * 3);
478
336
  }
479
337
  @media (max-width: 767px) {
480
- :global .ktl-col-sm-3 {
338
+ .ktl-col-sm-3 {
481
339
  padding-right: var(--ktl-grid-gutter-mobile-half);
482
340
  padding-left: var(--ktl-grid-gutter-mobile-half);
483
341
  }
484
342
  }
485
- :global .ktl-col-sm-offset-3 {
343
+ .ktl-col-sm-offset-3 {
486
344
  margin-left: calc(var(--ktl-grid-col-size) * 3);
487
345
  }
488
- :global .ktl-col-sm-4 {
346
+ .ktl-col-sm-4 {
489
347
  box-sizing: border-box;
490
348
  flex: 0 0 auto;
491
349
  padding-right: var(--ktl-grid-gutter-half);
@@ -494,15 +352,15 @@
494
352
  max-width: calc(var(--ktl-grid-col-size) * 4);
495
353
  }
496
354
  @media (max-width: 767px) {
497
- :global .ktl-col-sm-4 {
355
+ .ktl-col-sm-4 {
498
356
  padding-right: var(--ktl-grid-gutter-mobile-half);
499
357
  padding-left: var(--ktl-grid-gutter-mobile-half);
500
358
  }
501
359
  }
502
- :global .ktl-col-sm-offset-4 {
360
+ .ktl-col-sm-offset-4 {
503
361
  margin-left: calc(var(--ktl-grid-col-size) * 4);
504
362
  }
505
- :global .ktl-col-sm-5 {
363
+ .ktl-col-sm-5 {
506
364
  box-sizing: border-box;
507
365
  flex: 0 0 auto;
508
366
  padding-right: var(--ktl-grid-gutter-half);
@@ -511,15 +369,15 @@
511
369
  max-width: calc(var(--ktl-grid-col-size) * 5);
512
370
  }
513
371
  @media (max-width: 767px) {
514
- :global .ktl-col-sm-5 {
372
+ .ktl-col-sm-5 {
515
373
  padding-right: var(--ktl-grid-gutter-mobile-half);
516
374
  padding-left: var(--ktl-grid-gutter-mobile-half);
517
375
  }
518
376
  }
519
- :global .ktl-col-sm-offset-5 {
377
+ .ktl-col-sm-offset-5 {
520
378
  margin-left: calc(var(--ktl-grid-col-size) * 5);
521
379
  }
522
- :global .ktl-col-sm-6 {
380
+ .ktl-col-sm-6 {
523
381
  box-sizing: border-box;
524
382
  flex: 0 0 auto;
525
383
  padding-right: var(--ktl-grid-gutter-half);
@@ -528,15 +386,15 @@
528
386
  max-width: calc(var(--ktl-grid-col-size) * 6);
529
387
  }
530
388
  @media (max-width: 767px) {
531
- :global .ktl-col-sm-6 {
389
+ .ktl-col-sm-6 {
532
390
  padding-right: var(--ktl-grid-gutter-mobile-half);
533
391
  padding-left: var(--ktl-grid-gutter-mobile-half);
534
392
  }
535
393
  }
536
- :global .ktl-col-sm-offset-6 {
394
+ .ktl-col-sm-offset-6 {
537
395
  margin-left: calc(var(--ktl-grid-col-size) * 6);
538
396
  }
539
- :global .ktl-col-sm-7 {
397
+ .ktl-col-sm-7 {
540
398
  box-sizing: border-box;
541
399
  flex: 0 0 auto;
542
400
  padding-right: var(--ktl-grid-gutter-half);
@@ -545,15 +403,15 @@
545
403
  max-width: calc(var(--ktl-grid-col-size) * 7);
546
404
  }
547
405
  @media (max-width: 767px) {
548
- :global .ktl-col-sm-7 {
406
+ .ktl-col-sm-7 {
549
407
  padding-right: var(--ktl-grid-gutter-mobile-half);
550
408
  padding-left: var(--ktl-grid-gutter-mobile-half);
551
409
  }
552
410
  }
553
- :global .ktl-col-sm-offset-7 {
411
+ .ktl-col-sm-offset-7 {
554
412
  margin-left: calc(var(--ktl-grid-col-size) * 7);
555
413
  }
556
- :global .ktl-col-sm-8 {
414
+ .ktl-col-sm-8 {
557
415
  box-sizing: border-box;
558
416
  flex: 0 0 auto;
559
417
  padding-right: var(--ktl-grid-gutter-half);
@@ -562,15 +420,15 @@
562
420
  max-width: calc(var(--ktl-grid-col-size) * 8);
563
421
  }
564
422
  @media (max-width: 767px) {
565
- :global .ktl-col-sm-8 {
423
+ .ktl-col-sm-8 {
566
424
  padding-right: var(--ktl-grid-gutter-mobile-half);
567
425
  padding-left: var(--ktl-grid-gutter-mobile-half);
568
426
  }
569
427
  }
570
- :global .ktl-col-sm-offset-8 {
428
+ .ktl-col-sm-offset-8 {
571
429
  margin-left: calc(var(--ktl-grid-col-size) * 8);
572
430
  }
573
- :global .ktl-col-sm-9 {
431
+ .ktl-col-sm-9 {
574
432
  box-sizing: border-box;
575
433
  flex: 0 0 auto;
576
434
  padding-right: var(--ktl-grid-gutter-half);
@@ -579,15 +437,15 @@
579
437
  max-width: calc(var(--ktl-grid-col-size) * 9);
580
438
  }
581
439
  @media (max-width: 767px) {
582
- :global .ktl-col-sm-9 {
440
+ .ktl-col-sm-9 {
583
441
  padding-right: var(--ktl-grid-gutter-mobile-half);
584
442
  padding-left: var(--ktl-grid-gutter-mobile-half);
585
443
  }
586
444
  }
587
- :global .ktl-col-sm-offset-9 {
445
+ .ktl-col-sm-offset-9 {
588
446
  margin-left: calc(var(--ktl-grid-col-size) * 9);
589
447
  }
590
- :global .ktl-col-sm-10 {
448
+ .ktl-col-sm-10 {
591
449
  box-sizing: border-box;
592
450
  flex: 0 0 auto;
593
451
  padding-right: var(--ktl-grid-gutter-half);
@@ -596,15 +454,15 @@
596
454
  max-width: calc(var(--ktl-grid-col-size) * 10);
597
455
  }
598
456
  @media (max-width: 767px) {
599
- :global .ktl-col-sm-10 {
457
+ .ktl-col-sm-10 {
600
458
  padding-right: var(--ktl-grid-gutter-mobile-half);
601
459
  padding-left: var(--ktl-grid-gutter-mobile-half);
602
460
  }
603
461
  }
604
- :global .ktl-col-sm-offset-10 {
462
+ .ktl-col-sm-offset-10 {
605
463
  margin-left: calc(var(--ktl-grid-col-size) * 10);
606
464
  }
607
- :global .ktl-col-sm-11 {
465
+ .ktl-col-sm-11 {
608
466
  box-sizing: border-box;
609
467
  flex: 0 0 auto;
610
468
  padding-right: var(--ktl-grid-gutter-half);
@@ -613,15 +471,15 @@
613
471
  max-width: calc(var(--ktl-grid-col-size) * 11);
614
472
  }
615
473
  @media (max-width: 767px) {
616
- :global .ktl-col-sm-11 {
474
+ .ktl-col-sm-11 {
617
475
  padding-right: var(--ktl-grid-gutter-mobile-half);
618
476
  padding-left: var(--ktl-grid-gutter-mobile-half);
619
477
  }
620
478
  }
621
- :global .ktl-col-sm-offset-11 {
479
+ .ktl-col-sm-offset-11 {
622
480
  margin-left: calc(var(--ktl-grid-col-size) * 11);
623
481
  }
624
- :global .ktl-col-sm-12 {
482
+ .ktl-col-sm-12 {
625
483
  box-sizing: border-box;
626
484
  flex: 0 0 auto;
627
485
  padding-right: var(--ktl-grid-gutter-half);
@@ -630,18 +488,18 @@
630
488
  max-width: calc(var(--ktl-grid-col-size) * 12);
631
489
  }
632
490
  @media (max-width: 767px) {
633
- :global .ktl-col-sm-12 {
491
+ .ktl-col-sm-12 {
634
492
  padding-right: var(--ktl-grid-gutter-mobile-half);
635
493
  padding-left: var(--ktl-grid-gutter-mobile-half);
636
494
  }
637
495
  }
638
- :global .ktl-col-sm-offset-12 {
496
+ .ktl-col-sm-offset-12 {
639
497
  margin-left: calc(var(--ktl-grid-col-size) * 12);
640
498
  }
641
499
  }
642
500
 
643
501
  @media (min-width: 1024px) {
644
- :global .ktl-col-md {
502
+ .ktl-col-md {
645
503
  padding-right: var(--ktl-grid-gutter-half);
646
504
  padding-left: var(--ktl-grid-gutter-half);
647
505
  flex-grow: 1;
@@ -649,12 +507,12 @@
649
507
  max-width: 100%;
650
508
  }
651
509
  @media (max-width: 767px) {
652
- :global .ktl-col-md {
510
+ .ktl-col-md {
653
511
  padding-right: var(--ktl-grid-gutter-mobile-half);
654
512
  padding-left: var(--ktl-grid-gutter-mobile-half)
655
513
  }
656
514
  }
657
- :global .ktl-col-md-1 {
515
+ .ktl-col-md-1 {
658
516
  box-sizing: border-box;
659
517
  flex: 0 0 auto;
660
518
  padding-right: var(--ktl-grid-gutter-half);
@@ -663,15 +521,15 @@
663
521
  max-width: calc(var(--ktl-grid-col-size) * 1);
664
522
  }
665
523
  @media (max-width: 767px) {
666
- :global .ktl-col-md-1 {
524
+ .ktl-col-md-1 {
667
525
  padding-right: var(--ktl-grid-gutter-mobile-half);
668
526
  padding-left: var(--ktl-grid-gutter-mobile-half);
669
527
  }
670
528
  }
671
- :global .ktl-col-md-offset-1 {
529
+ .ktl-col-md-offset-1 {
672
530
  margin-left: calc(var(--ktl-grid-col-size) * 1);
673
531
  }
674
- :global .ktl-col-md-2 {
532
+ .ktl-col-md-2 {
675
533
  box-sizing: border-box;
676
534
  flex: 0 0 auto;
677
535
  padding-right: var(--ktl-grid-gutter-half);
@@ -680,15 +538,15 @@
680
538
  max-width: calc(var(--ktl-grid-col-size) * 2);
681
539
  }
682
540
  @media (max-width: 767px) {
683
- :global .ktl-col-md-2 {
541
+ .ktl-col-md-2 {
684
542
  padding-right: var(--ktl-grid-gutter-mobile-half);
685
543
  padding-left: var(--ktl-grid-gutter-mobile-half);
686
544
  }
687
545
  }
688
- :global .ktl-col-md-offset-2 {
546
+ .ktl-col-md-offset-2 {
689
547
  margin-left: calc(var(--ktl-grid-col-size) * 2);
690
548
  }
691
- :global .ktl-col-md-3 {
549
+ .ktl-col-md-3 {
692
550
  box-sizing: border-box;
693
551
  flex: 0 0 auto;
694
552
  padding-right: var(--ktl-grid-gutter-half);
@@ -697,15 +555,15 @@
697
555
  max-width: calc(var(--ktl-grid-col-size) * 3);
698
556
  }
699
557
  @media (max-width: 767px) {
700
- :global .ktl-col-md-3 {
558
+ .ktl-col-md-3 {
701
559
  padding-right: var(--ktl-grid-gutter-mobile-half);
702
560
  padding-left: var(--ktl-grid-gutter-mobile-half);
703
561
  }
704
562
  }
705
- :global .ktl-col-md-offset-3 {
563
+ .ktl-col-md-offset-3 {
706
564
  margin-left: calc(var(--ktl-grid-col-size) * 3);
707
565
  }
708
- :global .ktl-col-md-4 {
566
+ .ktl-col-md-4 {
709
567
  box-sizing: border-box;
710
568
  flex: 0 0 auto;
711
569
  padding-right: var(--ktl-grid-gutter-half);
@@ -714,15 +572,15 @@
714
572
  max-width: calc(var(--ktl-grid-col-size) * 4);
715
573
  }
716
574
  @media (max-width: 767px) {
717
- :global .ktl-col-md-4 {
575
+ .ktl-col-md-4 {
718
576
  padding-right: var(--ktl-grid-gutter-mobile-half);
719
577
  padding-left: var(--ktl-grid-gutter-mobile-half);
720
578
  }
721
579
  }
722
- :global .ktl-col-md-offset-4 {
580
+ .ktl-col-md-offset-4 {
723
581
  margin-left: calc(var(--ktl-grid-col-size) * 4);
724
582
  }
725
- :global .ktl-col-md-5 {
583
+ .ktl-col-md-5 {
726
584
  box-sizing: border-box;
727
585
  flex: 0 0 auto;
728
586
  padding-right: var(--ktl-grid-gutter-half);
@@ -731,15 +589,15 @@
731
589
  max-width: calc(var(--ktl-grid-col-size) * 5);
732
590
  }
733
591
  @media (max-width: 767px) {
734
- :global .ktl-col-md-5 {
592
+ .ktl-col-md-5 {
735
593
  padding-right: var(--ktl-grid-gutter-mobile-half);
736
594
  padding-left: var(--ktl-grid-gutter-mobile-half);
737
595
  }
738
596
  }
739
- :global .ktl-col-md-offset-5 {
597
+ .ktl-col-md-offset-5 {
740
598
  margin-left: calc(var(--ktl-grid-col-size) * 5);
741
599
  }
742
- :global .ktl-col-md-6 {
600
+ .ktl-col-md-6 {
743
601
  box-sizing: border-box;
744
602
  flex: 0 0 auto;
745
603
  padding-right: var(--ktl-grid-gutter-half);
@@ -748,15 +606,15 @@
748
606
  max-width: calc(var(--ktl-grid-col-size) * 6);
749
607
  }
750
608
  @media (max-width: 767px) {
751
- :global .ktl-col-md-6 {
609
+ .ktl-col-md-6 {
752
610
  padding-right: var(--ktl-grid-gutter-mobile-half);
753
611
  padding-left: var(--ktl-grid-gutter-mobile-half);
754
612
  }
755
613
  }
756
- :global .ktl-col-md-offset-6 {
614
+ .ktl-col-md-offset-6 {
757
615
  margin-left: calc(var(--ktl-grid-col-size) * 6);
758
616
  }
759
- :global .ktl-col-md-7 {
617
+ .ktl-col-md-7 {
760
618
  box-sizing: border-box;
761
619
  flex: 0 0 auto;
762
620
  padding-right: var(--ktl-grid-gutter-half);
@@ -765,15 +623,15 @@
765
623
  max-width: calc(var(--ktl-grid-col-size) * 7);
766
624
  }
767
625
  @media (max-width: 767px) {
768
- :global .ktl-col-md-7 {
626
+ .ktl-col-md-7 {
769
627
  padding-right: var(--ktl-grid-gutter-mobile-half);
770
628
  padding-left: var(--ktl-grid-gutter-mobile-half);
771
629
  }
772
630
  }
773
- :global .ktl-col-md-offset-7 {
631
+ .ktl-col-md-offset-7 {
774
632
  margin-left: calc(var(--ktl-grid-col-size) * 7);
775
633
  }
776
- :global .ktl-col-md-8 {
634
+ .ktl-col-md-8 {
777
635
  box-sizing: border-box;
778
636
  flex: 0 0 auto;
779
637
  padding-right: var(--ktl-grid-gutter-half);
@@ -782,15 +640,15 @@
782
640
  max-width: calc(var(--ktl-grid-col-size) * 8);
783
641
  }
784
642
  @media (max-width: 767px) {
785
- :global .ktl-col-md-8 {
643
+ .ktl-col-md-8 {
786
644
  padding-right: var(--ktl-grid-gutter-mobile-half);
787
645
  padding-left: var(--ktl-grid-gutter-mobile-half);
788
646
  }
789
647
  }
790
- :global .ktl-col-md-offset-8 {
648
+ .ktl-col-md-offset-8 {
791
649
  margin-left: calc(var(--ktl-grid-col-size) * 8);
792
650
  }
793
- :global .ktl-col-md-9 {
651
+ .ktl-col-md-9 {
794
652
  box-sizing: border-box;
795
653
  flex: 0 0 auto;
796
654
  padding-right: var(--ktl-grid-gutter-half);
@@ -799,15 +657,15 @@
799
657
  max-width: calc(var(--ktl-grid-col-size) * 9);
800
658
  }
801
659
  @media (max-width: 767px) {
802
- :global .ktl-col-md-9 {
660
+ .ktl-col-md-9 {
803
661
  padding-right: var(--ktl-grid-gutter-mobile-half);
804
662
  padding-left: var(--ktl-grid-gutter-mobile-half);
805
663
  }
806
664
  }
807
- :global .ktl-col-md-offset-9 {
665
+ .ktl-col-md-offset-9 {
808
666
  margin-left: calc(var(--ktl-grid-col-size) * 9);
809
667
  }
810
- :global .ktl-col-md-10 {
668
+ .ktl-col-md-10 {
811
669
  box-sizing: border-box;
812
670
  flex: 0 0 auto;
813
671
  padding-right: var(--ktl-grid-gutter-half);
@@ -816,15 +674,15 @@
816
674
  max-width: calc(var(--ktl-grid-col-size) * 10);
817
675
  }
818
676
  @media (max-width: 767px) {
819
- :global .ktl-col-md-10 {
677
+ .ktl-col-md-10 {
820
678
  padding-right: var(--ktl-grid-gutter-mobile-half);
821
679
  padding-left: var(--ktl-grid-gutter-mobile-half);
822
680
  }
823
681
  }
824
- :global .ktl-col-md-offset-10 {
682
+ .ktl-col-md-offset-10 {
825
683
  margin-left: calc(var(--ktl-grid-col-size) * 10);
826
684
  }
827
- :global .ktl-col-md-11 {
685
+ .ktl-col-md-11 {
828
686
  box-sizing: border-box;
829
687
  flex: 0 0 auto;
830
688
  padding-right: var(--ktl-grid-gutter-half);
@@ -833,15 +691,15 @@
833
691
  max-width: calc(var(--ktl-grid-col-size) * 11);
834
692
  }
835
693
  @media (max-width: 767px) {
836
- :global .ktl-col-md-11 {
694
+ .ktl-col-md-11 {
837
695
  padding-right: var(--ktl-grid-gutter-mobile-half);
838
696
  padding-left: var(--ktl-grid-gutter-mobile-half);
839
697
  }
840
698
  }
841
- :global .ktl-col-md-offset-11 {
699
+ .ktl-col-md-offset-11 {
842
700
  margin-left: calc(var(--ktl-grid-col-size) * 11);
843
701
  }
844
- :global .ktl-col-md-12 {
702
+ .ktl-col-md-12 {
845
703
  box-sizing: border-box;
846
704
  flex: 0 0 auto;
847
705
  padding-right: var(--ktl-grid-gutter-half);
@@ -850,18 +708,18 @@
850
708
  max-width: calc(var(--ktl-grid-col-size) * 12);
851
709
  }
852
710
  @media (max-width: 767px) {
853
- :global .ktl-col-md-12 {
711
+ .ktl-col-md-12 {
854
712
  padding-right: var(--ktl-grid-gutter-mobile-half);
855
713
  padding-left: var(--ktl-grid-gutter-mobile-half);
856
714
  }
857
715
  }
858
- :global .ktl-col-md-offset-12 {
716
+ .ktl-col-md-offset-12 {
859
717
  margin-left: calc(var(--ktl-grid-col-size) * 12);
860
718
  }
861
719
  }
862
720
 
863
721
  @media (min-width: 1200px) {
864
- :global .ktl-col-lg {
722
+ .ktl-col-lg {
865
723
  padding-right: var(--ktl-grid-gutter-half);
866
724
  padding-left: var(--ktl-grid-gutter-half);
867
725
  flex-grow: 1;
@@ -869,12 +727,12 @@
869
727
  max-width: 100%;
870
728
  }
871
729
  @media (max-width: 767px) {
872
- :global .ktl-col-lg {
730
+ .ktl-col-lg {
873
731
  padding-right: var(--ktl-grid-gutter-mobile-half);
874
732
  padding-left: var(--ktl-grid-gutter-mobile-half)
875
733
  }
876
734
  }
877
- :global .ktl-col-lg-1 {
735
+ .ktl-col-lg-1 {
878
736
  box-sizing: border-box;
879
737
  flex: 0 0 auto;
880
738
  padding-right: var(--ktl-grid-gutter-half);
@@ -883,15 +741,15 @@
883
741
  max-width: calc(var(--ktl-grid-col-size) * 1);
884
742
  }
885
743
  @media (max-width: 767px) {
886
- :global .ktl-col-lg-1 {
744
+ .ktl-col-lg-1 {
887
745
  padding-right: var(--ktl-grid-gutter-mobile-half);
888
746
  padding-left: var(--ktl-grid-gutter-mobile-half);
889
747
  }
890
748
  }
891
- :global .ktl-col-lg-offset-1 {
749
+ .ktl-col-lg-offset-1 {
892
750
  margin-left: calc(var(--ktl-grid-col-size) * 1);
893
751
  }
894
- :global .ktl-col-lg-2 {
752
+ .ktl-col-lg-2 {
895
753
  box-sizing: border-box;
896
754
  flex: 0 0 auto;
897
755
  padding-right: var(--ktl-grid-gutter-half);
@@ -900,15 +758,15 @@
900
758
  max-width: calc(var(--ktl-grid-col-size) * 2);
901
759
  }
902
760
  @media (max-width: 767px) {
903
- :global .ktl-col-lg-2 {
761
+ .ktl-col-lg-2 {
904
762
  padding-right: var(--ktl-grid-gutter-mobile-half);
905
763
  padding-left: var(--ktl-grid-gutter-mobile-half);
906
764
  }
907
765
  }
908
- :global .ktl-col-lg-offset-2 {
766
+ .ktl-col-lg-offset-2 {
909
767
  margin-left: calc(var(--ktl-grid-col-size) * 2);
910
768
  }
911
- :global .ktl-col-lg-3 {
769
+ .ktl-col-lg-3 {
912
770
  box-sizing: border-box;
913
771
  flex: 0 0 auto;
914
772
  padding-right: var(--ktl-grid-gutter-half);
@@ -917,15 +775,15 @@
917
775
  max-width: calc(var(--ktl-grid-col-size) * 3);
918
776
  }
919
777
  @media (max-width: 767px) {
920
- :global .ktl-col-lg-3 {
778
+ .ktl-col-lg-3 {
921
779
  padding-right: var(--ktl-grid-gutter-mobile-half);
922
780
  padding-left: var(--ktl-grid-gutter-mobile-half);
923
781
  }
924
782
  }
925
- :global .ktl-col-lg-offset-3 {
783
+ .ktl-col-lg-offset-3 {
926
784
  margin-left: calc(var(--ktl-grid-col-size) * 3);
927
785
  }
928
- :global .ktl-col-lg-4 {
786
+ .ktl-col-lg-4 {
929
787
  box-sizing: border-box;
930
788
  flex: 0 0 auto;
931
789
  padding-right: var(--ktl-grid-gutter-half);
@@ -934,15 +792,15 @@
934
792
  max-width: calc(var(--ktl-grid-col-size) * 4);
935
793
  }
936
794
  @media (max-width: 767px) {
937
- :global .ktl-col-lg-4 {
795
+ .ktl-col-lg-4 {
938
796
  padding-right: var(--ktl-grid-gutter-mobile-half);
939
797
  padding-left: var(--ktl-grid-gutter-mobile-half);
940
798
  }
941
799
  }
942
- :global .ktl-col-lg-offset-4 {
800
+ .ktl-col-lg-offset-4 {
943
801
  margin-left: calc(var(--ktl-grid-col-size) * 4);
944
802
  }
945
- :global .ktl-col-lg-5 {
803
+ .ktl-col-lg-5 {
946
804
  box-sizing: border-box;
947
805
  flex: 0 0 auto;
948
806
  padding-right: var(--ktl-grid-gutter-half);
@@ -951,15 +809,15 @@
951
809
  max-width: calc(var(--ktl-grid-col-size) * 5);
952
810
  }
953
811
  @media (max-width: 767px) {
954
- :global .ktl-col-lg-5 {
812
+ .ktl-col-lg-5 {
955
813
  padding-right: var(--ktl-grid-gutter-mobile-half);
956
814
  padding-left: var(--ktl-grid-gutter-mobile-half);
957
815
  }
958
816
  }
959
- :global .ktl-col-lg-offset-5 {
817
+ .ktl-col-lg-offset-5 {
960
818
  margin-left: calc(var(--ktl-grid-col-size) * 5);
961
819
  }
962
- :global .ktl-col-lg-6 {
820
+ .ktl-col-lg-6 {
963
821
  box-sizing: border-box;
964
822
  flex: 0 0 auto;
965
823
  padding-right: var(--ktl-grid-gutter-half);
@@ -968,15 +826,15 @@
968
826
  max-width: calc(var(--ktl-grid-col-size) * 6);
969
827
  }
970
828
  @media (max-width: 767px) {
971
- :global .ktl-col-lg-6 {
829
+ .ktl-col-lg-6 {
972
830
  padding-right: var(--ktl-grid-gutter-mobile-half);
973
831
  padding-left: var(--ktl-grid-gutter-mobile-half);
974
832
  }
975
833
  }
976
- :global .ktl-col-lg-offset-6 {
834
+ .ktl-col-lg-offset-6 {
977
835
  margin-left: calc(var(--ktl-grid-col-size) * 6);
978
836
  }
979
- :global .ktl-col-lg-7 {
837
+ .ktl-col-lg-7 {
980
838
  box-sizing: border-box;
981
839
  flex: 0 0 auto;
982
840
  padding-right: var(--ktl-grid-gutter-half);
@@ -985,15 +843,15 @@
985
843
  max-width: calc(var(--ktl-grid-col-size) * 7);
986
844
  }
987
845
  @media (max-width: 767px) {
988
- :global .ktl-col-lg-7 {
846
+ .ktl-col-lg-7 {
989
847
  padding-right: var(--ktl-grid-gutter-mobile-half);
990
848
  padding-left: var(--ktl-grid-gutter-mobile-half);
991
849
  }
992
850
  }
993
- :global .ktl-col-lg-offset-7 {
851
+ .ktl-col-lg-offset-7 {
994
852
  margin-left: calc(var(--ktl-grid-col-size) * 7);
995
853
  }
996
- :global .ktl-col-lg-8 {
854
+ .ktl-col-lg-8 {
997
855
  box-sizing: border-box;
998
856
  flex: 0 0 auto;
999
857
  padding-right: var(--ktl-grid-gutter-half);
@@ -1002,15 +860,15 @@
1002
860
  max-width: calc(var(--ktl-grid-col-size) * 8);
1003
861
  }
1004
862
  @media (max-width: 767px) {
1005
- :global .ktl-col-lg-8 {
863
+ .ktl-col-lg-8 {
1006
864
  padding-right: var(--ktl-grid-gutter-mobile-half);
1007
865
  padding-left: var(--ktl-grid-gutter-mobile-half);
1008
866
  }
1009
867
  }
1010
- :global .ktl-col-lg-offset-8 {
868
+ .ktl-col-lg-offset-8 {
1011
869
  margin-left: calc(var(--ktl-grid-col-size) * 8);
1012
870
  }
1013
- :global .ktl-col-lg-9 {
871
+ .ktl-col-lg-9 {
1014
872
  box-sizing: border-box;
1015
873
  flex: 0 0 auto;
1016
874
  padding-right: var(--ktl-grid-gutter-half);
@@ -1019,15 +877,15 @@
1019
877
  max-width: calc(var(--ktl-grid-col-size) * 9);
1020
878
  }
1021
879
  @media (max-width: 767px) {
1022
- :global .ktl-col-lg-9 {
880
+ .ktl-col-lg-9 {
1023
881
  padding-right: var(--ktl-grid-gutter-mobile-half);
1024
882
  padding-left: var(--ktl-grid-gutter-mobile-half);
1025
883
  }
1026
884
  }
1027
- :global .ktl-col-lg-offset-9 {
885
+ .ktl-col-lg-offset-9 {
1028
886
  margin-left: calc(var(--ktl-grid-col-size) * 9);
1029
887
  }
1030
- :global .ktl-col-lg-10 {
888
+ .ktl-col-lg-10 {
1031
889
  box-sizing: border-box;
1032
890
  flex: 0 0 auto;
1033
891
  padding-right: var(--ktl-grid-gutter-half);
@@ -1036,15 +894,15 @@
1036
894
  max-width: calc(var(--ktl-grid-col-size) * 10);
1037
895
  }
1038
896
  @media (max-width: 767px) {
1039
- :global .ktl-col-lg-10 {
897
+ .ktl-col-lg-10 {
1040
898
  padding-right: var(--ktl-grid-gutter-mobile-half);
1041
899
  padding-left: var(--ktl-grid-gutter-mobile-half);
1042
900
  }
1043
901
  }
1044
- :global .ktl-col-lg-offset-10 {
902
+ .ktl-col-lg-offset-10 {
1045
903
  margin-left: calc(var(--ktl-grid-col-size) * 10);
1046
904
  }
1047
- :global .ktl-col-lg-11 {
905
+ .ktl-col-lg-11 {
1048
906
  box-sizing: border-box;
1049
907
  flex: 0 0 auto;
1050
908
  padding-right: var(--ktl-grid-gutter-half);
@@ -1053,15 +911,15 @@
1053
911
  max-width: calc(var(--ktl-grid-col-size) * 11);
1054
912
  }
1055
913
  @media (max-width: 767px) {
1056
- :global .ktl-col-lg-11 {
914
+ .ktl-col-lg-11 {
1057
915
  padding-right: var(--ktl-grid-gutter-mobile-half);
1058
916
  padding-left: var(--ktl-grid-gutter-mobile-half);
1059
917
  }
1060
918
  }
1061
- :global .ktl-col-lg-offset-11 {
919
+ .ktl-col-lg-offset-11 {
1062
920
  margin-left: calc(var(--ktl-grid-col-size) * 11);
1063
921
  }
1064
- :global .ktl-col-lg-12 {
922
+ .ktl-col-lg-12 {
1065
923
  box-sizing: border-box;
1066
924
  flex: 0 0 auto;
1067
925
  padding-right: var(--ktl-grid-gutter-half);
@@ -1070,12 +928,154 @@
1070
928
  max-width: calc(var(--ktl-grid-col-size) * 12);
1071
929
  }
1072
930
  @media (max-width: 767px) {
1073
- :global .ktl-col-lg-12 {
931
+ .ktl-col-lg-12 {
1074
932
  padding-right: var(--ktl-grid-gutter-mobile-half);
1075
933
  padding-left: var(--ktl-grid-gutter-mobile-half);
1076
934
  }
1077
935
  }
1078
- :global .ktl-col-lg-offset-12 {
936
+ .ktl-col-lg-offset-12 {
1079
937
  margin-left: calc(var(--ktl-grid-col-size) * 12);
1080
938
  }
1081
939
  }
940
+
941
+ .ktl-container {
942
+ margin: 0 auto;
943
+ padding: 0 var(--ktl-grid-gutter-mobile);
944
+ max-width: var(--ktl-grid-container-width-mobile);
945
+ }
946
+
947
+ @media (min-width: 1200px) {
948
+
949
+ .ktl-container {
950
+ padding: 0 var(--ktl-grid-gutter);
951
+ max-width: var(--ktl-grid-container-width-desktop)
952
+ }
953
+ }
954
+
955
+ .ktl-container-fluid {
956
+ max-width: none;
957
+ }
958
+
959
+ .ktl-row {
960
+ display: flex;
961
+ margin-left: calc(-1 * var(--ktl-grid-gutter-half));
962
+ margin-right: calc(-1 * var(--ktl-grid-gutter-half));
963
+ flex-wrap: wrap;
964
+ flex-direction: row;
965
+ }
966
+
967
+ .ktl-row--reverse {
968
+ flex-direction: row-reverse;
969
+ }
970
+
971
+ @media (max-width: 767px) {
972
+
973
+ .ktl-row {
974
+ margin-left: calc(-1 * var(--ktl-grid-gutter-mobile-half));
975
+ margin-right: calc(-1 * var(--ktl-grid-gutter-mobile-half))
976
+ }
977
+ }
978
+
979
+ .ktl-offset-top-xs {
980
+ margin-top: 8px;
981
+ }
982
+
983
+ .ktl-offset-top-s {
984
+ margin-top: 16px;
985
+ }
986
+
987
+ .ktl-offset-top-m {
988
+ margin-top: 32px;
989
+ }
990
+
991
+ @media (max-width: 767px) {
992
+
993
+ .ktl-offset-top-m {
994
+ margin-top: 16px
995
+ }
996
+ }
997
+
998
+ .ktl-offset-top-l {
999
+ margin-top: 48px;
1000
+ }
1001
+
1002
+ @media (max-width: 767px) {
1003
+
1004
+ .ktl-offset-top-l {
1005
+ margin-top: 32px
1006
+ }
1007
+ }
1008
+
1009
+ .ktl-offset-top-xl {
1010
+ margin-top: 64px;
1011
+ }
1012
+
1013
+ @media (max-width: 767px) {
1014
+
1015
+ .ktl-offset-top-xl {
1016
+ margin-top: 48px
1017
+ }
1018
+ }
1019
+
1020
+ .ktl-offset-top-xxl {
1021
+ margin-top: 96px;
1022
+ }
1023
+
1024
+ @media (max-width: 767px) {
1025
+
1026
+ .ktl-offset-top-xxl {
1027
+ margin-top: 64px
1028
+ }
1029
+ }
1030
+
1031
+ .ktl-offset-bottom-xs {
1032
+ margin-bottom: 8px;
1033
+ }
1034
+
1035
+ .ktl-offset-bottom-s {
1036
+ margin-bottom: 16px;
1037
+ }
1038
+
1039
+ .ktl-offset-bottom-m {
1040
+ margin-bottom: 32px;
1041
+ }
1042
+
1043
+ @media (max-width: 767px) {
1044
+
1045
+ .ktl-offset-bottom-m {
1046
+ margin-bottom: 16px
1047
+ }
1048
+ }
1049
+
1050
+ .ktl-offset-bottom-l {
1051
+ margin-bottom: 48px;
1052
+ }
1053
+
1054
+ @media (max-width: 767px) {
1055
+
1056
+ .ktl-offset-bottom-l {
1057
+ margin-bottom: 32px
1058
+ }
1059
+ }
1060
+
1061
+ .ktl-offset-bottom-xl {
1062
+ margin-bottom: 64px;
1063
+ }
1064
+
1065
+ @media (max-width: 767px) {
1066
+
1067
+ .ktl-offset-bottom-xl {
1068
+ margin-bottom: 48px
1069
+ }
1070
+ }
1071
+
1072
+ .ktl-offset-bottom-xxl {
1073
+ margin-bottom: 96px;
1074
+ }
1075
+
1076
+ @media (max-width: 767px) {
1077
+
1078
+ .ktl-offset-bottom-xxl {
1079
+ margin-bottom: 64px
1080
+ }
1081
+ }