-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathglobal.grid.css
More file actions
365 lines (354 loc) · 23.4 KB
/
Copy pathglobal.grid.css
File metadata and controls
365 lines (354 loc) · 23.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
/* GRID */
/* Generated by src/tools/generate.global.grid.cjs */
.grid {
display: grid;
--grid-tc: repeat(4, 1fr);
--grid-cs: 1; /* column start */
--grid-ce: -1; /* column end */
grid-template-columns: var(--grid-tc);
grid-column-gap: var(--grid-column-gap);
grid-row-gap: var(--grid-row-gap);
}
.grid-flush {
grid-column-gap: 0;
grid-row-gap: 0;
}
/* DEFAULT */
.grid > .grid_item { display: block; appearance: none; }
.grid[col="1"] { --grid-tc: repeat(1, 1fr) }
.grid[col="2"] { --grid-tc: repeat(2, 1fr) }
.grid[col="3"] { --grid-tc: repeat(3, 1fr) }
.grid[col="4"] { --grid-tc: repeat(4, 1fr) }
.grid[col="5"] { --grid-tc: repeat(5, 1fr) }
.grid[col="6"] { --grid-tc: repeat(6, 1fr) }
.grid[col="7"] { --grid-tc: repeat(7, 1fr) }
.grid[col="8"] { --grid-tc: repeat(8, 1fr) }
.grid[col="9"] { --grid-tc: repeat(9, 1fr) }
.grid[col="10"] { --grid-tc: repeat(10, 1fr) }
.grid[col="11"] { --grid-tc: repeat(11, 1fr) }
.grid[col="12"] { --grid-tc: repeat(12, 1fr) }
.grid[col="13"] { --grid-tc: repeat(13, 1fr) }
.grid[col="14"] { --grid-tc: repeat(14, 1fr) }
.grid[col="15"] { --grid-tc: repeat(15, 1fr) }
.grid[col="16"] { --grid-tc: repeat(16, 1fr) }
.grid[col="17"] { --grid-tc: repeat(17, 1fr) }
.grid[col="18"] { --grid-tc: repeat(18, 1fr) }
.grid[col="19"] { --grid-tc: repeat(19, 1fr) }
.grid[col="20"] { --grid-tc: repeat(20, 1fr) }
.grid[col="21"] { --grid-tc: repeat(21, 1fr) }
.grid[col="22"] { --grid-tc: repeat(22, 1fr) }
.grid[col="23"] { --grid-tc: repeat(23, 1fr) }
.grid[col="24"] { --grid-tc: repeat(24, 1fr) }
/* span=start... */
.grid > .grid_item[span^="1"] { --grid-cs: 1 }
.grid > .grid_item[span^="2"] { --grid-cs: 2 }
.grid > .grid_item[span^="3"] { --grid-cs: 3 }
.grid > .grid_item[span^="4"] { --grid-cs: 4 }
.grid > .grid_item[span^="5"] { --grid-cs: 5 }
.grid > .grid_item[span^="6"] { --grid-cs: 6 }
.grid > .grid_item[span^="7"] { --grid-cs: 7 }
.grid > .grid_item[span^="8"] { --grid-cs: 8 }
.grid > .grid_item[span^="9"] { --grid-cs: 9 }
.grid > .grid_item[span^="10"] { --grid-cs: 10 }
.grid > .grid_item[span^="11"] { --grid-cs: 11 }
.grid > .grid_item[span^="12"] { --grid-cs: 12 }
.grid > .grid_item[span^="13"] { --grid-cs: 13 }
.grid > .grid_item[span^="14"] { --grid-cs: 14 }
.grid > .grid_item[span^="15"] { --grid-cs: 15 }
.grid > .grid_item[span^="16"] { --grid-cs: 16 }
.grid > .grid_item[span^="17"] { --grid-cs: 17 }
.grid > .grid_item[span^="18"] { --grid-cs: 18 }
.grid > .grid_item[span^="19"] { --grid-cs: 19 }
.grid > .grid_item[span^="20"] { --grid-cs: 20 }
.grid > .grid_item[span^="21"] { --grid-cs: 21 }
.grid > .grid_item[span^="22"] { --grid-cs: 22 }
.grid > .grid_item[span^="23"] { --grid-cs: 23 }
.grid > .grid_item[span^="24"] { --grid-cs: 24 }
/* span=...+width, span=...-end */
.grid > .grid_item[span$="+1"], .grid > .grid_item[span="1"] { --grid-ce: 1 }
.grid > .grid_item[span$="+2"], .grid > .grid_item[span$="-1"], .grid > .grid_item[span="2"] { --grid-ce: 2 }
.grid > .grid_item[span$="+3"], .grid > .grid_item[span$="-2"], .grid > .grid_item[span="3"] { --grid-ce: 3 }
.grid > .grid_item[span$="+4"], .grid > .grid_item[span$="-3"], .grid > .grid_item[span="4"] { --grid-ce: 4 }
.grid > .grid_item[span$="+5"], .grid > .grid_item[span$="-4"], .grid > .grid_item[span="5"] { --grid-ce: 5 }
.grid > .grid_item[span$="+6"], .grid > .grid_item[span$="-5"], .grid > .grid_item[span="6"] { --grid-ce: 6 }
.grid > .grid_item[span$="+7"], .grid > .grid_item[span$="-6"], .grid > .grid_item[span="7"] { --grid-ce: 7 }
.grid > .grid_item[span$="+8"], .grid > .grid_item[span$="-7"], .grid > .grid_item[span="8"] { --grid-ce: 8 }
.grid > .grid_item[span$="+9"], .grid > .grid_item[span$="-8"], .grid > .grid_item[span="9"] { --grid-ce: 9 }
.grid > .grid_item[span$="+10"], .grid > .grid_item[span$="-9"], .grid > .grid_item[span="10"] { --grid-ce: 10 }
.grid > .grid_item[span$="+11"], .grid > .grid_item[span$="-10"], .grid > .grid_item[span="11"] { --grid-ce: 11 }
.grid > .grid_item[span$="+12"], .grid > .grid_item[span$="-11"], .grid > .grid_item[span="12"] { --grid-ce: 12 }
.grid > .grid_item[span$="+13"], .grid > .grid_item[span$="-12"], .grid > .grid_item[span="13"] { --grid-ce: 13 }
.grid > .grid_item[span$="+14"], .grid > .grid_item[span$="-13"], .grid > .grid_item[span="14"] { --grid-ce: 14 }
.grid > .grid_item[span$="+15"], .grid > .grid_item[span$="-14"], .grid > .grid_item[span="15"] { --grid-ce: 15 }
.grid > .grid_item[span$="+16"], .grid > .grid_item[span$="-15"], .grid > .grid_item[span="16"] { --grid-ce: 16 }
.grid > .grid_item[span$="+17"], .grid > .grid_item[span$="-16"], .grid > .grid_item[span="17"] { --grid-ce: 17 }
.grid > .grid_item[span$="+18"], .grid > .grid_item[span$="-17"], .grid > .grid_item[span="18"] { --grid-ce: 18 }
.grid > .grid_item[span$="+19"], .grid > .grid_item[span$="-18"], .grid > .grid_item[span="19"] { --grid-ce: 19 }
.grid > .grid_item[span$="+20"], .grid > .grid_item[span$="-19"], .grid > .grid_item[span="20"] { --grid-ce: 20 }
.grid > .grid_item[span$="+21"], .grid > .grid_item[span$="-20"], .grid > .grid_item[span="21"] { --grid-ce: 21 }
.grid > .grid_item[span$="+22"], .grid > .grid_item[span$="-21"], .grid > .grid_item[span="22"] { --grid-ce: 22 }
.grid > .grid_item[span$="+23"], .grid > .grid_item[span$="-22"], .grid > .grid_item[span="23"] { --grid-ce: 23 }
.grid > .grid_item[span$="+24"], .grid > .grid_item[span$="-23"], .grid > .grid_item[span="24"] { --grid-ce: 24 }
.grid > .grid_item[span$="-24"] { --grid-ce: 25 }
/* connect vars */
.grid > .grid_item[span] { grid-column-end: span var(--grid-ce) }
.grid > .grid_item[span*="+"], .grid > .grid_item[span*="-"], .grid > .grid_item[span*=".."] {
grid-column-start: var(--grid-cs) }
.grid > .grid_item[span*="-"], .grid > .grid_item[span*=".."] {
grid-column-end: var(--grid-ce) }
.grid > .grid_item[span="row"] { grid-column: 1 / -1 }
/* MD — window >= 768px */
@media only screen and (--md-n-above) {
.grid[col-md="1"] { --grid-tc: repeat(1, 1fr) }
.grid[col-md="2"] { --grid-tc: repeat(2, 1fr) }
.grid[col-md="3"] { --grid-tc: repeat(3, 1fr) }
.grid[col-md="4"] { --grid-tc: repeat(4, 1fr) }
.grid[col-md="5"] { --grid-tc: repeat(5, 1fr) }
.grid[col-md="6"] { --grid-tc: repeat(6, 1fr) }
.grid[col-md="7"] { --grid-tc: repeat(7, 1fr) }
.grid[col-md="8"] { --grid-tc: repeat(8, 1fr) }
.grid[col-md="9"] { --grid-tc: repeat(9, 1fr) }
.grid[col-md="10"] { --grid-tc: repeat(10, 1fr) }
.grid[col-md="11"] { --grid-tc: repeat(11, 1fr) }
.grid[col-md="12"] { --grid-tc: repeat(12, 1fr) }
.grid[col-md="13"] { --grid-tc: repeat(13, 1fr) }
.grid[col-md="14"] { --grid-tc: repeat(14, 1fr) }
.grid[col-md="15"] { --grid-tc: repeat(15, 1fr) }
.grid[col-md="16"] { --grid-tc: repeat(16, 1fr) }
.grid[col-md="17"] { --grid-tc: repeat(17, 1fr) }
.grid[col-md="18"] { --grid-tc: repeat(18, 1fr) }
.grid[col-md="19"] { --grid-tc: repeat(19, 1fr) }
.grid[col-md="20"] { --grid-tc: repeat(20, 1fr) }
.grid[col-md="21"] { --grid-tc: repeat(21, 1fr) }
.grid[col-md="22"] { --grid-tc: repeat(22, 1fr) }
.grid[col-md="23"] { --grid-tc: repeat(23, 1fr) }
.grid[col-md="24"] { --grid-tc: repeat(24, 1fr) }
/* span-md=start... */
.grid > .grid_item[span-md^="1"] { --grid-cs: 1 }
.grid > .grid_item[span-md^="2"] { --grid-cs: 2 }
.grid > .grid_item[span-md^="3"] { --grid-cs: 3 }
.grid > .grid_item[span-md^="4"] { --grid-cs: 4 }
.grid > .grid_item[span-md^="5"] { --grid-cs: 5 }
.grid > .grid_item[span-md^="6"] { --grid-cs: 6 }
.grid > .grid_item[span-md^="7"] { --grid-cs: 7 }
.grid > .grid_item[span-md^="8"] { --grid-cs: 8 }
.grid > .grid_item[span-md^="9"] { --grid-cs: 9 }
.grid > .grid_item[span-md^="10"] { --grid-cs: 10 }
.grid > .grid_item[span-md^="11"] { --grid-cs: 11 }
.grid > .grid_item[span-md^="12"] { --grid-cs: 12 }
.grid > .grid_item[span-md^="13"] { --grid-cs: 13 }
.grid > .grid_item[span-md^="14"] { --grid-cs: 14 }
.grid > .grid_item[span-md^="15"] { --grid-cs: 15 }
.grid > .grid_item[span-md^="16"] { --grid-cs: 16 }
.grid > .grid_item[span-md^="17"] { --grid-cs: 17 }
.grid > .grid_item[span-md^="18"] { --grid-cs: 18 }
.grid > .grid_item[span-md^="19"] { --grid-cs: 19 }
.grid > .grid_item[span-md^="20"] { --grid-cs: 20 }
.grid > .grid_item[span-md^="21"] { --grid-cs: 21 }
.grid > .grid_item[span-md^="22"] { --grid-cs: 22 }
.grid > .grid_item[span-md^="23"] { --grid-cs: 23 }
.grid > .grid_item[span-md^="24"] { --grid-cs: 24 }
/* span-md=...+width, span-md=...-end */
.grid > .grid_item[span-md$="+1"], .grid > .grid_item[span-md="1"] { --grid-ce: 1 }
.grid > .grid_item[span-md$="+2"], .grid > .grid_item[span-md$="-1"], .grid > .grid_item[span-md="2"] { --grid-ce: 2 }
.grid > .grid_item[span-md$="+3"], .grid > .grid_item[span-md$="-2"], .grid > .grid_item[span-md="3"] { --grid-ce: 3 }
.grid > .grid_item[span-md$="+4"], .grid > .grid_item[span-md$="-3"], .grid > .grid_item[span-md="4"] { --grid-ce: 4 }
.grid > .grid_item[span-md$="+5"], .grid > .grid_item[span-md$="-4"], .grid > .grid_item[span-md="5"] { --grid-ce: 5 }
.grid > .grid_item[span-md$="+6"], .grid > .grid_item[span-md$="-5"], .grid > .grid_item[span-md="6"] { --grid-ce: 6 }
.grid > .grid_item[span-md$="+7"], .grid > .grid_item[span-md$="-6"], .grid > .grid_item[span-md="7"] { --grid-ce: 7 }
.grid > .grid_item[span-md$="+8"], .grid > .grid_item[span-md$="-7"], .grid > .grid_item[span-md="8"] { --grid-ce: 8 }
.grid > .grid_item[span-md$="+9"], .grid > .grid_item[span-md$="-8"], .grid > .grid_item[span-md="9"] { --grid-ce: 9 }
.grid > .grid_item[span-md$="+10"], .grid > .grid_item[span-md$="-9"], .grid > .grid_item[span-md="10"] { --grid-ce: 10 }
.grid > .grid_item[span-md$="+11"], .grid > .grid_item[span-md$="-10"], .grid > .grid_item[span-md="11"] { --grid-ce: 11 }
.grid > .grid_item[span-md$="+12"], .grid > .grid_item[span-md$="-11"], .grid > .grid_item[span-md="12"] { --grid-ce: 12 }
.grid > .grid_item[span-md$="+13"], .grid > .grid_item[span-md$="-12"], .grid > .grid_item[span-md="13"] { --grid-ce: 13 }
.grid > .grid_item[span-md$="+14"], .grid > .grid_item[span-md$="-13"], .grid > .grid_item[span-md="14"] { --grid-ce: 14 }
.grid > .grid_item[span-md$="+15"], .grid > .grid_item[span-md$="-14"], .grid > .grid_item[span-md="15"] { --grid-ce: 15 }
.grid > .grid_item[span-md$="+16"], .grid > .grid_item[span-md$="-15"], .grid > .grid_item[span-md="16"] { --grid-ce: 16 }
.grid > .grid_item[span-md$="+17"], .grid > .grid_item[span-md$="-16"], .grid > .grid_item[span-md="17"] { --grid-ce: 17 }
.grid > .grid_item[span-md$="+18"], .grid > .grid_item[span-md$="-17"], .grid > .grid_item[span-md="18"] { --grid-ce: 18 }
.grid > .grid_item[span-md$="+19"], .grid > .grid_item[span-md$="-18"], .grid > .grid_item[span-md="19"] { --grid-ce: 19 }
.grid > .grid_item[span-md$="+20"], .grid > .grid_item[span-md$="-19"], .grid > .grid_item[span-md="20"] { --grid-ce: 20 }
.grid > .grid_item[span-md$="+21"], .grid > .grid_item[span-md$="-20"], .grid > .grid_item[span-md="21"] { --grid-ce: 21 }
.grid > .grid_item[span-md$="+22"], .grid > .grid_item[span-md$="-21"], .grid > .grid_item[span-md="22"] { --grid-ce: 22 }
.grid > .grid_item[span-md$="+23"], .grid > .grid_item[span-md$="-22"], .grid > .grid_item[span-md="23"] { --grid-ce: 23 }
.grid > .grid_item[span-md$="+24"], .grid > .grid_item[span-md$="-23"], .grid > .grid_item[span-md="24"] { --grid-ce: 24 }
.grid > .grid_item[span-md$="-24"] { --grid-ce: 25 }
/* connect vars */
.grid > .grid_item[span-md] { grid-column-end: span var(--grid-ce) }
.grid > .grid_item[span-md*="+"], .grid > .grid_item[span-md*="-"], .grid > .grid_item[span-md*=".."] {
grid-column-start: var(--grid-cs) }
.grid > .grid_item[span-md*="-"], .grid > .grid_item[span-md*=".."] {
grid-column-end: var(--grid-ce) }
.grid > .grid_item[span-md="row"] { grid-column: 1 / -1 }
}
/* LARGE - width >= 1024 */
@media only screen and (--lg-n-above) {
.grid[col-lg="1"] { --grid-tc: repeat(1, 1fr) }
.grid[col-lg="2"] { --grid-tc: repeat(2, 1fr) }
.grid[col-lg="3"] { --grid-tc: repeat(3, 1fr) }
.grid[col-lg="4"] { --grid-tc: repeat(4, 1fr) }
.grid[col-lg="5"] { --grid-tc: repeat(5, 1fr) }
.grid[col-lg="6"] { --grid-tc: repeat(6, 1fr) }
.grid[col-lg="7"] { --grid-tc: repeat(7, 1fr) }
.grid[col-lg="8"] { --grid-tc: repeat(8, 1fr) }
.grid[col-lg="9"] { --grid-tc: repeat(9, 1fr) }
.grid[col-lg="10"] { --grid-tc: repeat(10, 1fr) }
.grid[col-lg="11"] { --grid-tc: repeat(11, 1fr) }
.grid[col-lg="12"] { --grid-tc: repeat(12, 1fr) }
.grid[col-lg="13"] { --grid-tc: repeat(13, 1fr) }
.grid[col-lg="14"] { --grid-tc: repeat(14, 1fr) }
.grid[col-lg="15"] { --grid-tc: repeat(15, 1fr) }
.grid[col-lg="16"] { --grid-tc: repeat(16, 1fr) }
.grid[col-lg="17"] { --grid-tc: repeat(17, 1fr) }
.grid[col-lg="18"] { --grid-tc: repeat(18, 1fr) }
.grid[col-lg="19"] { --grid-tc: repeat(19, 1fr) }
.grid[col-lg="20"] { --grid-tc: repeat(20, 1fr) }
.grid[col-lg="21"] { --grid-tc: repeat(21, 1fr) }
.grid[col-lg="22"] { --grid-tc: repeat(22, 1fr) }
.grid[col-lg="23"] { --grid-tc: repeat(23, 1fr) }
.grid[col-lg="24"] { --grid-tc: repeat(24, 1fr) }
/* span-lg=start... */
.grid > .grid_item[span-lg^="1"] { --grid-cs: 1 }
.grid > .grid_item[span-lg^="2"] { --grid-cs: 2 }
.grid > .grid_item[span-lg^="3"] { --grid-cs: 3 }
.grid > .grid_item[span-lg^="4"] { --grid-cs: 4 }
.grid > .grid_item[span-lg^="5"] { --grid-cs: 5 }
.grid > .grid_item[span-lg^="6"] { --grid-cs: 6 }
.grid > .grid_item[span-lg^="7"] { --grid-cs: 7 }
.grid > .grid_item[span-lg^="8"] { --grid-cs: 8 }
.grid > .grid_item[span-lg^="9"] { --grid-cs: 9 }
.grid > .grid_item[span-lg^="10"] { --grid-cs: 10 }
.grid > .grid_item[span-lg^="11"] { --grid-cs: 11 }
.grid > .grid_item[span-lg^="12"] { --grid-cs: 12 }
.grid > .grid_item[span-lg^="13"] { --grid-cs: 13 }
.grid > .grid_item[span-lg^="14"] { --grid-cs: 14 }
.grid > .grid_item[span-lg^="15"] { --grid-cs: 15 }
.grid > .grid_item[span-lg^="16"] { --grid-cs: 16 }
.grid > .grid_item[span-lg^="17"] { --grid-cs: 17 }
.grid > .grid_item[span-lg^="18"] { --grid-cs: 18 }
.grid > .grid_item[span-lg^="19"] { --grid-cs: 19 }
.grid > .grid_item[span-lg^="20"] { --grid-cs: 20 }
.grid > .grid_item[span-lg^="21"] { --grid-cs: 21 }
.grid > .grid_item[span-lg^="22"] { --grid-cs: 22 }
.grid > .grid_item[span-lg^="23"] { --grid-cs: 23 }
.grid > .grid_item[span-lg^="24"] { --grid-cs: 24 }
/* span-lg=...+width, span-lg=...-end */
.grid > .grid_item[span-lg$="+1"], .grid > .grid_item[span-lg="1"] { --grid-ce: 1 }
.grid > .grid_item[span-lg$="+2"], .grid > .grid_item[span-lg$="-1"], .grid > .grid_item[span-lg="2"] { --grid-ce: 2 }
.grid > .grid_item[span-lg$="+3"], .grid > .grid_item[span-lg$="-2"], .grid > .grid_item[span-lg="3"] { --grid-ce: 3 }
.grid > .grid_item[span-lg$="+4"], .grid > .grid_item[span-lg$="-3"], .grid > .grid_item[span-lg="4"] { --grid-ce: 4 }
.grid > .grid_item[span-lg$="+5"], .grid > .grid_item[span-lg$="-4"], .grid > .grid_item[span-lg="5"] { --grid-ce: 5 }
.grid > .grid_item[span-lg$="+6"], .grid > .grid_item[span-lg$="-5"], .grid > .grid_item[span-lg="6"] { --grid-ce: 6 }
.grid > .grid_item[span-lg$="+7"], .grid > .grid_item[span-lg$="-6"], .grid > .grid_item[span-lg="7"] { --grid-ce: 7 }
.grid > .grid_item[span-lg$="+8"], .grid > .grid_item[span-lg$="-7"], .grid > .grid_item[span-lg="8"] { --grid-ce: 8 }
.grid > .grid_item[span-lg$="+9"], .grid > .grid_item[span-lg$="-8"], .grid > .grid_item[span-lg="9"] { --grid-ce: 9 }
.grid > .grid_item[span-lg$="+10"], .grid > .grid_item[span-lg$="-9"], .grid > .grid_item[span-lg="10"] { --grid-ce: 10 }
.grid > .grid_item[span-lg$="+11"], .grid > .grid_item[span-lg$="-10"], .grid > .grid_item[span-lg="11"] { --grid-ce: 11 }
.grid > .grid_item[span-lg$="+12"], .grid > .grid_item[span-lg$="-11"], .grid > .grid_item[span-lg="12"] { --grid-ce: 12 }
.grid > .grid_item[span-lg$="+13"], .grid > .grid_item[span-lg$="-12"], .grid > .grid_item[span-lg="13"] { --grid-ce: 13 }
.grid > .grid_item[span-lg$="+14"], .grid > .grid_item[span-lg$="-13"], .grid > .grid_item[span-lg="14"] { --grid-ce: 14 }
.grid > .grid_item[span-lg$="+15"], .grid > .grid_item[span-lg$="-14"], .grid > .grid_item[span-lg="15"] { --grid-ce: 15 }
.grid > .grid_item[span-lg$="+16"], .grid > .grid_item[span-lg$="-15"], .grid > .grid_item[span-lg="16"] { --grid-ce: 16 }
.grid > .grid_item[span-lg$="+17"], .grid > .grid_item[span-lg$="-16"], .grid > .grid_item[span-lg="17"] { --grid-ce: 17 }
.grid > .grid_item[span-lg$="+18"], .grid > .grid_item[span-lg$="-17"], .grid > .grid_item[span-lg="18"] { --grid-ce: 18 }
.grid > .grid_item[span-lg$="+19"], .grid > .grid_item[span-lg$="-18"], .grid > .grid_item[span-lg="19"] { --grid-ce: 19 }
.grid > .grid_item[span-lg$="+20"], .grid > .grid_item[span-lg$="-19"], .grid > .grid_item[span-lg="20"] { --grid-ce: 20 }
.grid > .grid_item[span-lg$="+21"], .grid > .grid_item[span-lg$="-20"], .grid > .grid_item[span-lg="21"] { --grid-ce: 21 }
.grid > .grid_item[span-lg$="+22"], .grid > .grid_item[span-lg$="-21"], .grid > .grid_item[span-lg="22"] { --grid-ce: 22 }
.grid > .grid_item[span-lg$="+23"], .grid > .grid_item[span-lg$="-22"], .grid > .grid_item[span-lg="23"] { --grid-ce: 23 }
.grid > .grid_item[span-lg$="+24"], .grid > .grid_item[span-lg$="-23"], .grid > .grid_item[span-lg="24"] { --grid-ce: 24 }
.grid > .grid_item[span-lg$="-24"] { --grid-ce: 25 }
/* connect vars */
.grid > .grid_item[span-lg] { grid-column-end: span var(--grid-ce) }
.grid > .grid_item[span-lg*="+"], .grid > .grid_item[span-lg*="-"], .grid > .grid_item[span-lg*=".."] {
grid-column-start: var(--grid-cs) }
.grid > .grid_item[span-lg*="-"], .grid > .grid_item[span-lg*=".."] {
grid-column-end: var(--grid-ce) }
.grid > .grid_item[span-lg="row"] { grid-column: 1 / -1 }
}
/* EXTRA LARGE - width >= 1440 */
@media only screen and (--xl-n-above) {
.grid[col-xl="1"] { --grid-tc: repeat(1, 1fr) }
.grid[col-xl="2"] { --grid-tc: repeat(2, 1fr) }
.grid[col-xl="3"] { --grid-tc: repeat(3, 1fr) }
.grid[col-xl="4"] { --grid-tc: repeat(4, 1fr) }
.grid[col-xl="5"] { --grid-tc: repeat(5, 1fr) }
.grid[col-xl="6"] { --grid-tc: repeat(6, 1fr) }
.grid[col-xl="7"] { --grid-tc: repeat(7, 1fr) }
.grid[col-xl="8"] { --grid-tc: repeat(8, 1fr) }
.grid[col-xl="9"] { --grid-tc: repeat(9, 1fr) }
.grid[col-xl="10"] { --grid-tc: repeat(10, 1fr) }
.grid[col-xl="11"] { --grid-tc: repeat(11, 1fr) }
.grid[col-xl="12"] { --grid-tc: repeat(12, 1fr) }
.grid[col-xl="13"] { --grid-tc: repeat(13, 1fr) }
.grid[col-xl="14"] { --grid-tc: repeat(14, 1fr) }
.grid[col-xl="15"] { --grid-tc: repeat(15, 1fr) }
.grid[col-xl="16"] { --grid-tc: repeat(16, 1fr) }
.grid[col-xl="17"] { --grid-tc: repeat(17, 1fr) }
.grid[col-xl="18"] { --grid-tc: repeat(18, 1fr) }
.grid[col-xl="19"] { --grid-tc: repeat(19, 1fr) }
.grid[col-xl="20"] { --grid-tc: repeat(20, 1fr) }
.grid[col-xl="21"] { --grid-tc: repeat(21, 1fr) }
.grid[col-xl="22"] { --grid-tc: repeat(22, 1fr) }
.grid[col-xl="23"] { --grid-tc: repeat(23, 1fr) }
.grid[col-xl="24"] { --grid-tc: repeat(24, 1fr) }
/* span-xl=start... */
.grid > .grid_item[span-xl^="1"] { --grid-cs: 1 }
.grid > .grid_item[span-xl^="2"] { --grid-cs: 2 }
.grid > .grid_item[span-xl^="3"] { --grid-cs: 3 }
.grid > .grid_item[span-xl^="4"] { --grid-cs: 4 }
.grid > .grid_item[span-xl^="5"] { --grid-cs: 5 }
.grid > .grid_item[span-xl^="6"] { --grid-cs: 6 }
.grid > .grid_item[span-xl^="7"] { --grid-cs: 7 }
.grid > .grid_item[span-xl^="8"] { --grid-cs: 8 }
.grid > .grid_item[span-xl^="9"] { --grid-cs: 9 }
.grid > .grid_item[span-xl^="10"] { --grid-cs: 10 }
.grid > .grid_item[span-xl^="11"] { --grid-cs: 11 }
.grid > .grid_item[span-xl^="12"] { --grid-cs: 12 }
.grid > .grid_item[span-xl^="13"] { --grid-cs: 13 }
.grid > .grid_item[span-xl^="14"] { --grid-cs: 14 }
.grid > .grid_item[span-xl^="15"] { --grid-cs: 15 }
.grid > .grid_item[span-xl^="16"] { --grid-cs: 16 }
.grid > .grid_item[span-xl^="17"] { --grid-cs: 17 }
.grid > .grid_item[span-xl^="18"] { --grid-cs: 18 }
.grid > .grid_item[span-xl^="19"] { --grid-cs: 19 }
.grid > .grid_item[span-xl^="20"] { --grid-cs: 20 }
.grid > .grid_item[span-xl^="21"] { --grid-cs: 21 }
.grid > .grid_item[span-xl^="22"] { --grid-cs: 22 }
.grid > .grid_item[span-xl^="23"] { --grid-cs: 23 }
.grid > .grid_item[span-xl^="24"] { --grid-cs: 24 }
/* span-xl=...+width, span-xl=...-end */
.grid > .grid_item[span-xl$="+1"], .grid > .grid_item[span-xl="1"] { --grid-ce: 1 }
.grid > .grid_item[span-xl$="+2"], .grid > .grid_item[span-xl$="-1"], .grid > .grid_item[span-xl="2"] { --grid-ce: 2 }
.grid > .grid_item[span-xl$="+3"], .grid > .grid_item[span-xl$="-2"], .grid > .grid_item[span-xl="3"] { --grid-ce: 3 }
.grid > .grid_item[span-xl$="+4"], .grid > .grid_item[span-xl$="-3"], .grid > .grid_item[span-xl="4"] { --grid-ce: 4 }
.grid > .grid_item[span-xl$="+5"], .grid > .grid_item[span-xl$="-4"], .grid > .grid_item[span-xl="5"] { --grid-ce: 5 }
.grid > .grid_item[span-xl$="+6"], .grid > .grid_item[span-xl$="-5"], .grid > .grid_item[span-xl="6"] { --grid-ce: 6 }
.grid > .grid_item[span-xl$="+7"], .grid > .grid_item[span-xl$="-6"], .grid > .grid_item[span-xl="7"] { --grid-ce: 7 }
.grid > .grid_item[span-xl$="+8"], .grid > .grid_item[span-xl$="-7"], .grid > .grid_item[span-xl="8"] { --grid-ce: 8 }
.grid > .grid_item[span-xl$="+9"], .grid > .grid_item[span-xl$="-8"], .grid > .grid_item[span-xl="9"] { --grid-ce: 9 }
.grid > .grid_item[span-xl$="+10"], .grid > .grid_item[span-xl$="-9"], .grid > .grid_item[span-xl="10"] { --grid-ce: 10 }
.grid > .grid_item[span-xl$="+11"], .grid > .grid_item[span-xl$="-10"], .grid > .grid_item[span-xl="11"] { --grid-ce: 11 }
.grid > .grid_item[span-xl$="+12"], .grid > .grid_item[span-xl$="-11"], .grid > .grid_item[span-xl="12"] { --grid-ce: 12 }
.grid > .grid_item[span-xl$="+13"], .grid > .grid_item[span-xl$="-12"], .grid > .grid_item[span-xl="13"] { --grid-ce: 13 }
.grid > .grid_item[span-xl$="+14"], .grid > .grid_item[span-xl$="-13"], .grid > .grid_item[span-xl="14"] { --grid-ce: 14 }
.grid > .grid_item[span-xl$="+15"], .grid > .grid_item[span-xl$="-14"], .grid > .grid_item[span-xl="15"] { --grid-ce: 15 }
.grid > .grid_item[span-xl$="+16"], .grid > .grid_item[span-xl$="-15"], .grid > .grid_item[span-xl="16"] { --grid-ce: 16 }
.grid > .grid_item[span-xl$="+17"], .grid > .grid_item[span-xl$="-16"], .grid > .grid_item[span-xl="17"] { --grid-ce: 17 }
.grid > .grid_item[span-xl$="+18"], .grid > .grid_item[span-xl$="-17"], .grid > .grid_item[span-xl="18"] { --grid-ce: 18 }
.grid > .grid_item[span-xl$="+19"], .grid > .grid_item[span-xl$="-18"], .grid > .grid_item[span-xl="19"] { --grid-ce: 19 }
.grid > .grid_item[span-xl$="+20"], .grid > .grid_item[span-xl$="-19"], .grid > .grid_item[span-xl="20"] { --grid-ce: 20 }
.grid > .grid_item[span-xl$="+21"], .grid > .grid_item[span-xl$="-20"], .grid > .grid_item[span-xl="21"] { --grid-ce: 21 }
.grid > .grid_item[span-xl$="+22"], .grid > .grid_item[span-xl$="-21"], .grid > .grid_item[span-xl="22"] { --grid-ce: 22 }
.grid > .grid_item[span-xl$="+23"], .grid > .grid_item[span-xl$="-22"], .grid > .grid_item[span-xl="23"] { --grid-ce: 23 }
.grid > .grid_item[span-xl$="+24"], .grid > .grid_item[span-xl$="-23"], .grid > .grid_item[span-xl="24"] { --grid-ce: 24 }
.grid > .grid_item[span-xl$="-24"] { --grid-ce: 25 }
/* connect vars */
.grid > .grid_item[span-xl] { grid-column-end: span var(--grid-ce) }
.grid > .grid_item[span-xl*="+"], .grid > .grid_item[span-xl*="-"], .grid > .grid_item[span-xl*=".."] {
grid-column-start: var(--grid-cs) }
.grid > .grid_item[span-xl*="-"], .grid > .grid_item[span-xl*=".."] {
grid-column-end: var(--grid-ce) }
.grid > .grid_item[span-xl="row"] { grid-column: 1 / -1 }
}