@jetbrains/kotlin-web-site-ui 3.1.0-multiplatform-title.0 → 4.0.0-alpha.0

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