piloti 1.0.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 (17) hide show
  1. package/README.md +207 -0
  2. package/bin/piloti.js +264 -0
  3. package/config/config.json +303 -0
  4. package/package.json +43 -0
  5. package/src/0-gen-settings/index.css +4 -0
  6. package/src/0-gen-settings/responsive.css +501 -0
  7. package/src/0-gen-settings/utilities.css +218 -0
  8. package/src/0-gen-settings/variables.css +72 -0
  9. package/src/1-reset/reset.css +48 -0
  10. package/src/2-base/global.css +25 -0
  11. package/src/3-compositions/cluster.css +15 -0
  12. package/src/3-compositions/flow.css +22 -0
  13. package/src/3-compositions/stack.css +14 -0
  14. package/src/4-utilities/custom.css +4 -0
  15. package/src/5-blocks/nav.css +0 -0
  16. package/src/5-blocks/pricing-card.css +0 -0
  17. package/src/main.css +12 -0
package/src/0-gen-settings/responsive.css ADDED
@@ -0,0 +1,501 @@
1
+ /* ============================================
2
+ Responsive Utilities - Auto-generated
3
+ Config: config.json
4
+ ============================================ */
5
+
6
+ /* sm: (min-width: 640px) */
7
+ @media (min-width: 640px) {
8
+ .sm\:m-0 { margin: var(--spacing-0); }
9
+ .sm\:m-1 { margin: var(--spacing-1); }
10
+ .sm\:m-2 { margin: var(--spacing-2); }
11
+ .sm\:m-3 { margin: var(--spacing-3); }
12
+ .sm\:m-4 { margin: var(--spacing-4); }
13
+ .sm\:m-6 { margin: var(--spacing-6); }
14
+ .sm\:m-8 { margin: var(--spacing-8); }
15
+ .sm\:mt-0 { margin-top: var(--spacing-0); }
16
+ .sm\:mt-1 { margin-top: var(--spacing-1); }
17
+ .sm\:mt-2 { margin-top: var(--spacing-2); }
18
+ .sm\:mt-4 { margin-top: var(--spacing-4); }
19
+ .sm\:mt-8 { margin-top: var(--spacing-8); }
20
+ .sm\:mb-0 { margin-bottom: var(--spacing-0); }
21
+ .sm\:mb-1 { margin-bottom: var(--spacing-1); }
22
+ .sm\:mb-2 { margin-bottom: var(--spacing-2); }
23
+ .sm\:mb-4 { margin-bottom: var(--spacing-4); }
24
+ .sm\:mb-8 { margin-bottom: var(--spacing-8); }
25
+ .sm\:ml-0 { margin-left: var(--spacing-0); }
26
+ .sm\:ml-1 { margin-left: var(--spacing-1); }
27
+ .sm\:ml-2 { margin-left: var(--spacing-2); }
28
+ .sm\:ml-4 { margin-left: var(--spacing-4); }
29
+ .sm\:ml-8 { margin-left: var(--spacing-8); }
30
+ .sm\:mr-0 { margin-right: var(--spacing-0); }
31
+ .sm\:mr-1 { margin-right: var(--spacing-1); }
32
+ .sm\:mr-2 { margin-right: var(--spacing-2); }
33
+ .sm\:mr-4 { margin-right: var(--spacing-4); }
34
+ .sm\:mr-8 { margin-right: var(--spacing-8); }
35
+ .sm\:mx-0 { margin-inline: var(--spacing-0); }
36
+ .sm\:mx-2 { margin-inline: var(--spacing-2); }
37
+ .sm\:mx-4 { margin-inline: var(--spacing-4); }
38
+ .sm\:mx-8 { margin-inline: var(--spacing-8); }
39
+ .sm\:my-0 { margin-block: var(--spacing-0); }
40
+ .sm\:my-2 { margin-block: var(--spacing-2); }
41
+ .sm\:my-4 { margin-block: var(--spacing-4); }
42
+ .sm\:my-8 { margin-block: var(--spacing-8); }
43
+ .sm\:p-0 { padding: var(--spacing-0); }
44
+ .sm\:p-1 { padding: var(--spacing-1); }
45
+ .sm\:p-2 { padding: var(--spacing-2); }
46
+ .sm\:p-3 { padding: var(--spacing-3); }
47
+ .sm\:p-4 { padding: var(--spacing-4); }
48
+ .sm\:p-6 { padding: var(--spacing-6); }
49
+ .sm\:p-8 { padding: var(--spacing-8); }
50
+ .sm\:pt-0 { padding-top: var(--spacing-0); }
51
+ .sm\:pt-1 { padding-top: var(--spacing-1); }
52
+ .sm\:pt-2 { padding-top: var(--spacing-2); }
53
+ .sm\:pt-4 { padding-top: var(--spacing-4); }
54
+ .sm\:pt-8 { padding-top: var(--spacing-8); }
55
+ .sm\:pb-0 { padding-bottom: var(--spacing-0); }
56
+ .sm\:pb-1 { padding-bottom: var(--spacing-1); }
57
+ .sm\:pb-2 { padding-bottom: var(--spacing-2); }
58
+ .sm\:pb-4 { padding-bottom: var(--spacing-4); }
59
+ .sm\:pb-8 { padding-bottom: var(--spacing-8); }
60
+ .sm\:pl-0 { padding-left: var(--spacing-0); }
61
+ .sm\:pl-1 { padding-left: var(--spacing-1); }
62
+ .sm\:pl-2 { padding-left: var(--spacing-2); }
63
+ .sm\:pl-4 { padding-left: var(--spacing-4); }
64
+ .sm\:pl-8 { padding-left: var(--spacing-8); }
65
+ .sm\:pr-0 { padding-right: var(--spacing-0); }
66
+ .sm\:pr-1 { padding-right: var(--spacing-1); }
67
+ .sm\:pr-2 { padding-right: var(--spacing-2); }
68
+ .sm\:pr-4 { padding-right: var(--spacing-4); }
69
+ .sm\:pr-8 { padding-right: var(--spacing-8); }
70
+ .sm\:px-0 { padding-inline: var(--spacing-0); }
71
+ .sm\:px-2 { padding-inline: var(--spacing-2); }
72
+ .sm\:px-4 { padding-inline: var(--spacing-4); }
73
+ .sm\:px-8 { padding-inline: var(--spacing-8); }
74
+ .sm\:py-0 { padding-block: var(--spacing-0); }
75
+ .sm\:py-2 { padding-block: var(--spacing-2); }
76
+ .sm\:py-4 { padding-block: var(--spacing-4); }
77
+ .sm\:py-8 { padding-block: var(--spacing-8); }
78
+ .sm\:gap-0 { gap: var(--spacing-0); }
79
+ .sm\:gap-1 { gap: var(--spacing-1); }
80
+ .sm\:gap-2 { gap: var(--spacing-2); }
81
+ .sm\:gap-3 { gap: var(--spacing-3); }
82
+ .sm\:gap-4 { gap: var(--spacing-4); }
83
+ .sm\:gap-6 { gap: var(--spacing-6); }
84
+ .sm\:gap-8 { gap: var(--spacing-8); }
85
+ .sm\:font-sm { font-size: var(--fontSize-sm); }
86
+ .sm\:font-base { font-size: var(--fontSize-base); }
87
+ .sm\:font-xl { font-size: var(--fontSize-xl); }
88
+ .sm\:font-2xl { font-size: var(--fontSize-2xl); }
89
+ .sm\:font-3xl { font-size: var(--fontSize-3xl); }
90
+ .sm\:font-4xl { font-size: var(--fontSize-4xl); }
91
+ .sm\:w-0 { width: var(--size-0); }
92
+ .sm\:w-full { width: var(--size-full); }
93
+ .sm\:w-screen { width: var(--size-screen); }
94
+ .sm\:w-auto { width: var(--size-auto); }
95
+ .sm\:w-1\/2 { width: var(--size-1/2); }
96
+ .sm\:w-1\/3 { width: var(--size-1/3); }
97
+ .sm\:w-2\/3 { width: var(--size-2/3); }
98
+ .sm\:w-1\/4 { width: var(--size-1/4); }
99
+ .sm\:w-3\/4 { width: var(--size-3/4); }
100
+ .sm\:h-0 { height: var(--size-0); }
101
+ .sm\:h-full { height: var(--size-full); }
102
+ .sm\:h-screen { height: var(--size-screen); }
103
+ .sm\:h-auto { height: var(--size-auto); }
104
+ .sm\:d-flex { display: flex; }
105
+ .sm\:d-grid { display: grid; }
106
+ .sm\:d-block { display: block; }
107
+ .sm\:d-inline { display: inline; }
108
+ .sm\:d-inline-block { display: inline-block; }
109
+ .sm\:d-none { display: none; }
110
+ .sm\:flex-row { flex-direction: row; }
111
+ .sm\:flex-col { flex-direction: column; }
112
+ .sm\:flex-row-reverse { flex-direction: row-reverse; }
113
+ .sm\:flex-col-reverse { flex-direction: column-reverse; }
114
+ .sm\:justify-start { justify-content: flex-start; }
115
+ .sm\:justify-end { justify-content: flex-end; }
116
+ .sm\:justify-center { justify-content: center; }
117
+ .sm\:justify-between { justify-content: space-between; }
118
+ .sm\:justify-around { justify-content: space-around; }
119
+ .sm\:justify-evenly { justify-content: space-evenly; }
120
+ .sm\:items-start { align-items: flex-start; }
121
+ .sm\:items-end { align-items: flex-end; }
122
+ .sm\:items-center { align-items: center; }
123
+ .sm\:items-baseline { align-items: baseline; }
124
+ .sm\:items-stretch { align-items: stretch; }
125
+ .sm\:text-left { text-align: left; }
126
+ .sm\:text-center { text-align: center; }
127
+ .sm\:text-right { text-align: right; }
128
+ }
129
+
130
+ /* md: (min-width: 768px) */
131
+ @media (min-width: 768px) {
132
+ .md\:m-0 { margin: var(--spacing-0); }
133
+ .md\:m-1 { margin: var(--spacing-1); }
134
+ .md\:m-2 { margin: var(--spacing-2); }
135
+ .md\:m-3 { margin: var(--spacing-3); }
136
+ .md\:m-4 { margin: var(--spacing-4); }
137
+ .md\:m-6 { margin: var(--spacing-6); }
138
+ .md\:m-8 { margin: var(--spacing-8); }
139
+ .md\:mt-0 { margin-top: var(--spacing-0); }
140
+ .md\:mt-1 { margin-top: var(--spacing-1); }
141
+ .md\:mt-2 { margin-top: var(--spacing-2); }
142
+ .md\:mt-4 { margin-top: var(--spacing-4); }
143
+ .md\:mt-8 { margin-top: var(--spacing-8); }
144
+ .md\:mb-0 { margin-bottom: var(--spacing-0); }
145
+ .md\:mb-1 { margin-bottom: var(--spacing-1); }
146
+ .md\:mb-2 { margin-bottom: var(--spacing-2); }
147
+ .md\:mb-4 { margin-bottom: var(--spacing-4); }
148
+ .md\:mb-8 { margin-bottom: var(--spacing-8); }
149
+ .md\:ml-0 { margin-left: var(--spacing-0); }
150
+ .md\:ml-1 { margin-left: var(--spacing-1); }
151
+ .md\:ml-2 { margin-left: var(--spacing-2); }
152
+ .md\:ml-4 { margin-left: var(--spacing-4); }
153
+ .md\:ml-8 { margin-left: var(--spacing-8); }
154
+ .md\:mr-0 { margin-right: var(--spacing-0); }
155
+ .md\:mr-1 { margin-right: var(--spacing-1); }
156
+ .md\:mr-2 { margin-right: var(--spacing-2); }
157
+ .md\:mr-4 { margin-right: var(--spacing-4); }
158
+ .md\:mr-8 { margin-right: var(--spacing-8); }
159
+ .md\:mx-0 { margin-inline: var(--spacing-0); }
160
+ .md\:mx-2 { margin-inline: var(--spacing-2); }
161
+ .md\:mx-4 { margin-inline: var(--spacing-4); }
162
+ .md\:mx-8 { margin-inline: var(--spacing-8); }
163
+ .md\:my-0 { margin-block: var(--spacing-0); }
164
+ .md\:my-2 { margin-block: var(--spacing-2); }
165
+ .md\:my-4 { margin-block: var(--spacing-4); }
166
+ .md\:my-8 { margin-block: var(--spacing-8); }
167
+ .md\:p-0 { padding: var(--spacing-0); }
168
+ .md\:p-1 { padding: var(--spacing-1); }
169
+ .md\:p-2 { padding: var(--spacing-2); }
170
+ .md\:p-3 { padding: var(--spacing-3); }
171
+ .md\:p-4 { padding: var(--spacing-4); }
172
+ .md\:p-6 { padding: var(--spacing-6); }
173
+ .md\:p-8 { padding: var(--spacing-8); }
174
+ .md\:pt-0 { padding-top: var(--spacing-0); }
175
+ .md\:pt-1 { padding-top: var(--spacing-1); }
176
+ .md\:pt-2 { padding-top: var(--spacing-2); }
177
+ .md\:pt-4 { padding-top: var(--spacing-4); }
178
+ .md\:pt-8 { padding-top: var(--spacing-8); }
179
+ .md\:pb-0 { padding-bottom: var(--spacing-0); }
180
+ .md\:pb-1 { padding-bottom: var(--spacing-1); }
181
+ .md\:pb-2 { padding-bottom: var(--spacing-2); }
182
+ .md\:pb-4 { padding-bottom: var(--spacing-4); }
183
+ .md\:pb-8 { padding-bottom: var(--spacing-8); }
184
+ .md\:pl-0 { padding-left: var(--spacing-0); }
185
+ .md\:pl-1 { padding-left: var(--spacing-1); }
186
+ .md\:pl-2 { padding-left: var(--spacing-2); }
187
+ .md\:pl-4 { padding-left: var(--spacing-4); }
188
+ .md\:pl-8 { padding-left: var(--spacing-8); }
189
+ .md\:pr-0 { padding-right: var(--spacing-0); }
190
+ .md\:pr-1 { padding-right: var(--spacing-1); }
191
+ .md\:pr-2 { padding-right: var(--spacing-2); }
192
+ .md\:pr-4 { padding-right: var(--spacing-4); }
193
+ .md\:pr-8 { padding-right: var(--spacing-8); }
194
+ .md\:px-0 { padding-inline: var(--spacing-0); }
195
+ .md\:px-2 { padding-inline: var(--spacing-2); }
196
+ .md\:px-4 { padding-inline: var(--spacing-4); }
197
+ .md\:px-8 { padding-inline: var(--spacing-8); }
198
+ .md\:py-0 { padding-block: var(--spacing-0); }
199
+ .md\:py-2 { padding-block: var(--spacing-2); }
200
+ .md\:py-4 { padding-block: var(--spacing-4); }
201
+ .md\:py-8 { padding-block: var(--spacing-8); }
202
+ .md\:gap-0 { gap: var(--spacing-0); }
203
+ .md\:gap-1 { gap: var(--spacing-1); }
204
+ .md\:gap-2 { gap: var(--spacing-2); }
205
+ .md\:gap-3 { gap: var(--spacing-3); }
206
+ .md\:gap-4 { gap: var(--spacing-4); }
207
+ .md\:gap-6 { gap: var(--spacing-6); }
208
+ .md\:gap-8 { gap: var(--spacing-8); }
209
+ .md\:font-sm { font-size: var(--fontSize-sm); }
210
+ .md\:font-base { font-size: var(--fontSize-base); }
211
+ .md\:font-xl { font-size: var(--fontSize-xl); }
212
+ .md\:font-2xl { font-size: var(--fontSize-2xl); }
213
+ .md\:font-3xl { font-size: var(--fontSize-3xl); }
214
+ .md\:font-4xl { font-size: var(--fontSize-4xl); }
215
+ .md\:w-0 { width: var(--size-0); }
216
+ .md\:w-full { width: var(--size-full); }
217
+ .md\:w-screen { width: var(--size-screen); }
218
+ .md\:w-auto { width: var(--size-auto); }
219
+ .md\:w-1\/2 { width: var(--size-1/2); }
220
+ .md\:w-1\/3 { width: var(--size-1/3); }
221
+ .md\:w-2\/3 { width: var(--size-2/3); }
222
+ .md\:w-1\/4 { width: var(--size-1/4); }
223
+ .md\:w-3\/4 { width: var(--size-3/4); }
224
+ .md\:h-0 { height: var(--size-0); }
225
+ .md\:h-full { height: var(--size-full); }
226
+ .md\:h-screen { height: var(--size-screen); }
227
+ .md\:h-auto { height: var(--size-auto); }
228
+ .md\:d-flex { display: flex; }
229
+ .md\:d-grid { display: grid; }
230
+ .md\:d-block { display: block; }
231
+ .md\:d-inline { display: inline; }
232
+ .md\:d-inline-block { display: inline-block; }
233
+ .md\:d-none { display: none; }
234
+ .md\:flex-row { flex-direction: row; }
235
+ .md\:flex-col { flex-direction: column; }
236
+ .md\:flex-row-reverse { flex-direction: row-reverse; }
237
+ .md\:flex-col-reverse { flex-direction: column-reverse; }
238
+ .md\:justify-start { justify-content: flex-start; }
239
+ .md\:justify-end { justify-content: flex-end; }
240
+ .md\:justify-center { justify-content: center; }
241
+ .md\:justify-between { justify-content: space-between; }
242
+ .md\:justify-around { justify-content: space-around; }
243
+ .md\:justify-evenly { justify-content: space-evenly; }
244
+ .md\:items-start { align-items: flex-start; }
245
+ .md\:items-end { align-items: flex-end; }
246
+ .md\:items-center { align-items: center; }
247
+ .md\:items-baseline { align-items: baseline; }
248
+ .md\:items-stretch { align-items: stretch; }
249
+ .md\:text-left { text-align: left; }
250
+ .md\:text-center { text-align: center; }
251
+ .md\:text-right { text-align: right; }
252
+ }
253
+
254
+ /* lg: (min-width: 1024px) */
255
+ @media (min-width: 1024px) {
256
+ .lg\:m-0 { margin: var(--spacing-0); }
257
+ .lg\:m-1 { margin: var(--spacing-1); }
258
+ .lg\:m-2 { margin: var(--spacing-2); }
259
+ .lg\:m-3 { margin: var(--spacing-3); }
260
+ .lg\:m-4 { margin: var(--spacing-4); }
261
+ .lg\:m-6 { margin: var(--spacing-6); }
262
+ .lg\:m-8 { margin: var(--spacing-8); }
263
+ .lg\:mt-0 { margin-top: var(--spacing-0); }
264
+ .lg\:mt-1 { margin-top: var(--spacing-1); }
265
+ .lg\:mt-2 { margin-top: var(--spacing-2); }
266
+ .lg\:mt-4 { margin-top: var(--spacing-4); }
267
+ .lg\:mt-8 { margin-top: var(--spacing-8); }
268
+ .lg\:mb-0 { margin-bottom: var(--spacing-0); }
269
+ .lg\:mb-1 { margin-bottom: var(--spacing-1); }
270
+ .lg\:mb-2 { margin-bottom: var(--spacing-2); }
271
+ .lg\:mb-4 { margin-bottom: var(--spacing-4); }
272
+ .lg\:mb-8 { margin-bottom: var(--spacing-8); }
273
+ .lg\:ml-0 { margin-left: var(--spacing-0); }
274
+ .lg\:ml-1 { margin-left: var(--spacing-1); }
275
+ .lg\:ml-2 { margin-left: var(--spacing-2); }
276
+ .lg\:ml-4 { margin-left: var(--spacing-4); }
277
+ .lg\:ml-8 { margin-left: var(--spacing-8); }
278
+ .lg\:mr-0 { margin-right: var(--spacing-0); }
279
+ .lg\:mr-1 { margin-right: var(--spacing-1); }
280
+ .lg\:mr-2 { margin-right: var(--spacing-2); }
281
+ .lg\:mr-4 { margin-right: var(--spacing-4); }
282
+ .lg\:mr-8 { margin-right: var(--spacing-8); }
283
+ .lg\:mx-0 { margin-inline: var(--spacing-0); }
284
+ .lg\:mx-2 { margin-inline: var(--spacing-2); }
285
+ .lg\:mx-4 { margin-inline: var(--spacing-4); }
286
+ .lg\:mx-8 { margin-inline: var(--spacing-8); }
287
+ .lg\:my-0 { margin-block: var(--spacing-0); }
288
+ .lg\:my-2 { margin-block: var(--spacing-2); }
289
+ .lg\:my-4 { margin-block: var(--spacing-4); }
290
+ .lg\:my-8 { margin-block: var(--spacing-8); }
291
+ .lg\:p-0 { padding: var(--spacing-0); }
292
+ .lg\:p-1 { padding: var(--spacing-1); }
293
+ .lg\:p-2 { padding: var(--spacing-2); }
294
+ .lg\:p-3 { padding: var(--spacing-3); }
295
+ .lg\:p-4 { padding: var(--spacing-4); }
296
+ .lg\:p-6 { padding: var(--spacing-6); }
297
+ .lg\:p-8 { padding: var(--spacing-8); }
298
+ .lg\:pt-0 { padding-top: var(--spacing-0); }
299
+ .lg\:pt-1 { padding-top: var(--spacing-1); }
300
+ .lg\:pt-2 { padding-top: var(--spacing-2); }
301
+ .lg\:pt-4 { padding-top: var(--spacing-4); }
302
+ .lg\:pt-8 { padding-top: var(--spacing-8); }
303
+ .lg\:pb-0 { padding-bottom: var(--spacing-0); }
304
+ .lg\:pb-1 { padding-bottom: var(--spacing-1); }
305
+ .lg\:pb-2 { padding-bottom: var(--spacing-2); }
306
+ .lg\:pb-4 { padding-bottom: var(--spacing-4); }
307
+ .lg\:pb-8 { padding-bottom: var(--spacing-8); }
308
+ .lg\:pl-0 { padding-left: var(--spacing-0); }
309
+ .lg\:pl-1 { padding-left: var(--spacing-1); }
310
+ .lg\:pl-2 { padding-left: var(--spacing-2); }
311
+ .lg\:pl-4 { padding-left: var(--spacing-4); }
312
+ .lg\:pl-8 { padding-left: var(--spacing-8); }
313
+ .lg\:pr-0 { padding-right: var(--spacing-0); }
314
+ .lg\:pr-1 { padding-right: var(--spacing-1); }
315
+ .lg\:pr-2 { padding-right: var(--spacing-2); }
316
+ .lg\:pr-4 { padding-right: var(--spacing-4); }
317
+ .lg\:pr-8 { padding-right: var(--spacing-8); }
318
+ .lg\:px-0 { padding-inline: var(--spacing-0); }
319
+ .lg\:px-2 { padding-inline: var(--spacing-2); }
320
+ .lg\:px-4 { padding-inline: var(--spacing-4); }
321
+ .lg\:px-8 { padding-inline: var(--spacing-8); }
322
+ .lg\:py-0 { padding-block: var(--spacing-0); }
323
+ .lg\:py-2 { padding-block: var(--spacing-2); }
324
+ .lg\:py-4 { padding-block: var(--spacing-4); }
325
+ .lg\:py-8 { padding-block: var(--spacing-8); }
326
+ .lg\:gap-0 { gap: var(--spacing-0); }
327
+ .lg\:gap-1 { gap: var(--spacing-1); }
328
+ .lg\:gap-2 { gap: var(--spacing-2); }
329
+ .lg\:gap-3 { gap: var(--spacing-3); }
330
+ .lg\:gap-4 { gap: var(--spacing-4); }
331
+ .lg\:gap-6 { gap: var(--spacing-6); }
332
+ .lg\:gap-8 { gap: var(--spacing-8); }
333
+ .lg\:font-sm { font-size: var(--fontSize-sm); }
334
+ .lg\:font-base { font-size: var(--fontSize-base); }
335
+ .lg\:font-xl { font-size: var(--fontSize-xl); }
336
+ .lg\:font-2xl { font-size: var(--fontSize-2xl); }
337
+ .lg\:font-3xl { font-size: var(--fontSize-3xl); }
338
+ .lg\:font-4xl { font-size: var(--fontSize-4xl); }
339
+ .lg\:w-0 { width: var(--size-0); }
340
+ .lg\:w-full { width: var(--size-full); }
341
+ .lg\:w-screen { width: var(--size-screen); }
342
+ .lg\:w-auto { width: var(--size-auto); }
343
+ .lg\:w-1\/2 { width: var(--size-1/2); }
344
+ .lg\:w-1\/3 { width: var(--size-1/3); }
345
+ .lg\:w-2\/3 { width: var(--size-2/3); }
346
+ .lg\:w-1\/4 { width: var(--size-1/4); }
347
+ .lg\:w-3\/4 { width: var(--size-3/4); }
348
+ .lg\:h-0 { height: var(--size-0); }
349
+ .lg\:h-full { height: var(--size-full); }
350
+ .lg\:h-screen { height: var(--size-screen); }
351
+ .lg\:h-auto { height: var(--size-auto); }
352
+ .lg\:d-flex { display: flex; }
353
+ .lg\:d-grid { display: grid; }
354
+ .lg\:d-block { display: block; }
355
+ .lg\:d-inline { display: inline; }
356
+ .lg\:d-inline-block { display: inline-block; }
357
+ .lg\:d-none { display: none; }
358
+ .lg\:flex-row { flex-direction: row; }
359
+ .lg\:flex-col { flex-direction: column; }
360
+ .lg\:flex-row-reverse { flex-direction: row-reverse; }
361
+ .lg\:flex-col-reverse { flex-direction: column-reverse; }
362
+ .lg\:justify-start { justify-content: flex-start; }
363
+ .lg\:justify-end { justify-content: flex-end; }
364
+ .lg\:justify-center { justify-content: center; }
365
+ .lg\:justify-between { justify-content: space-between; }
366
+ .lg\:justify-around { justify-content: space-around; }
367
+ .lg\:justify-evenly { justify-content: space-evenly; }
368
+ .lg\:items-start { align-items: flex-start; }
369
+ .lg\:items-end { align-items: flex-end; }
370
+ .lg\:items-center { align-items: center; }
371
+ .lg\:items-baseline { align-items: baseline; }
372
+ .lg\:items-stretch { align-items: stretch; }
373
+ .lg\:text-left { text-align: left; }
374
+ .lg\:text-center { text-align: center; }
375
+ .lg\:text-right { text-align: right; }
376
+ }
377
+
378
+ /* xl: (min-width: 1280px) */
379
+ @media (min-width: 1280px) {
380
+ .xl\:m-0 { margin: var(--spacing-0); }
381
+ .xl\:m-1 { margin: var(--spacing-1); }
382
+ .xl\:m-2 { margin: var(--spacing-2); }
383
+ .xl\:m-3 { margin: var(--spacing-3); }
384
+ .xl\:m-4 { margin: var(--spacing-4); }
385
+ .xl\:m-6 { margin: var(--spacing-6); }
386
+ .xl\:m-8 { margin: var(--spacing-8); }
387
+ .xl\:mt-0 { margin-top: var(--spacing-0); }
388
+ .xl\:mt-1 { margin-top: var(--spacing-1); }
389
+ .xl\:mt-2 { margin-top: var(--spacing-2); }
390
+ .xl\:mt-4 { margin-top: var(--spacing-4); }
391
+ .xl\:mt-8 { margin-top: var(--spacing-8); }
392
+ .xl\:mb-0 { margin-bottom: var(--spacing-0); }
393
+ .xl\:mb-1 { margin-bottom: var(--spacing-1); }
394
+ .xl\:mb-2 { margin-bottom: var(--spacing-2); }
395
+ .xl\:mb-4 { margin-bottom: var(--spacing-4); }
396
+ .xl\:mb-8 { margin-bottom: var(--spacing-8); }
397
+ .xl\:ml-0 { margin-left: var(--spacing-0); }
398
+ .xl\:ml-1 { margin-left: var(--spacing-1); }
399
+ .xl\:ml-2 { margin-left: var(--spacing-2); }
400
+ .xl\:ml-4 { margin-left: var(--spacing-4); }
401
+ .xl\:ml-8 { margin-left: var(--spacing-8); }
402
+ .xl\:mr-0 { margin-right: var(--spacing-0); }
403
+ .xl\:mr-1 { margin-right: var(--spacing-1); }
404
+ .xl\:mr-2 { margin-right: var(--spacing-2); }
405
+ .xl\:mr-4 { margin-right: var(--spacing-4); }
406
+ .xl\:mr-8 { margin-right: var(--spacing-8); }
407
+ .xl\:mx-0 { margin-inline: var(--spacing-0); }
408
+ .xl\:mx-2 { margin-inline: var(--spacing-2); }
409
+ .xl\:mx-4 { margin-inline: var(--spacing-4); }
410
+ .xl\:mx-8 { margin-inline: var(--spacing-8); }
411
+ .xl\:my-0 { margin-block: var(--spacing-0); }
412
+ .xl\:my-2 { margin-block: var(--spacing-2); }
413
+ .xl\:my-4 { margin-block: var(--spacing-4); }
414
+ .xl\:my-8 { margin-block: var(--spacing-8); }
415
+ .xl\:p-0 { padding: var(--spacing-0); }
416
+ .xl\:p-1 { padding: var(--spacing-1); }
417
+ .xl\:p-2 { padding: var(--spacing-2); }
418
+ .xl\:p-3 { padding: var(--spacing-3); }
419
+ .xl\:p-4 { padding: var(--spacing-4); }
420
+ .xl\:p-6 { padding: var(--spacing-6); }
421
+ .xl\:p-8 { padding: var(--spacing-8); }
422
+ .xl\:pt-0 { padding-top: var(--spacing-0); }
423
+ .xl\:pt-1 { padding-top: var(--spacing-1); }
424
+ .xl\:pt-2 { padding-top: var(--spacing-2); }
425
+ .xl\:pt-4 { padding-top: var(--spacing-4); }
426
+ .xl\:pt-8 { padding-top: var(--spacing-8); }
427
+ .xl\:pb-0 { padding-bottom: var(--spacing-0); }
428
+ .xl\:pb-1 { padding-bottom: var(--spacing-1); }
429
+ .xl\:pb-2 { padding-bottom: var(--spacing-2); }
430
+ .xl\:pb-4 { padding-bottom: var(--spacing-4); }
431
+ .xl\:pb-8 { padding-bottom: var(--spacing-8); }
432
+ .xl\:pl-0 { padding-left: var(--spacing-0); }
433
+ .xl\:pl-1 { padding-left: var(--spacing-1); }
434
+ .xl\:pl-2 { padding-left: var(--spacing-2); }
435
+ .xl\:pl-4 { padding-left: var(--spacing-4); }
436
+ .xl\:pl-8 { padding-left: var(--spacing-8); }
437
+ .xl\:pr-0 { padding-right: var(--spacing-0); }
438
+ .xl\:pr-1 { padding-right: var(--spacing-1); }
439
+ .xl\:pr-2 { padding-right: var(--spacing-2); }
440
+ .xl\:pr-4 { padding-right: var(--spacing-4); }
441
+ .xl\:pr-8 { padding-right: var(--spacing-8); }
442
+ .xl\:px-0 { padding-inline: var(--spacing-0); }
443
+ .xl\:px-2 { padding-inline: var(--spacing-2); }
444
+ .xl\:px-4 { padding-inline: var(--spacing-4); }
445
+ .xl\:px-8 { padding-inline: var(--spacing-8); }
446
+ .xl\:py-0 { padding-block: var(--spacing-0); }
447
+ .xl\:py-2 { padding-block: var(--spacing-2); }
448
+ .xl\:py-4 { padding-block: var(--spacing-4); }
449
+ .xl\:py-8 { padding-block: var(--spacing-8); }
450
+ .xl\:gap-0 { gap: var(--spacing-0); }
451
+ .xl\:gap-1 { gap: var(--spacing-1); }
452
+ .xl\:gap-2 { gap: var(--spacing-2); }
453
+ .xl\:gap-3 { gap: var(--spacing-3); }
454
+ .xl\:gap-4 { gap: var(--spacing-4); }
455
+ .xl\:gap-6 { gap: var(--spacing-6); }
456
+ .xl\:gap-8 { gap: var(--spacing-8); }
457
+ .xl\:font-sm { font-size: var(--fontSize-sm); }
458
+ .xl\:font-base { font-size: var(--fontSize-base); }
459
+ .xl\:font-xl { font-size: var(--fontSize-xl); }
460
+ .xl\:font-2xl { font-size: var(--fontSize-2xl); }
461
+ .xl\:font-3xl { font-size: var(--fontSize-3xl); }
462
+ .xl\:font-4xl { font-size: var(--fontSize-4xl); }
463
+ .xl\:w-0 { width: var(--size-0); }
464
+ .xl\:w-full { width: var(--size-full); }
465
+ .xl\:w-screen { width: var(--size-screen); }
466
+ .xl\:w-auto { width: var(--size-auto); }
467
+ .xl\:w-1\/2 { width: var(--size-1/2); }
468
+ .xl\:w-1\/3 { width: var(--size-1/3); }
469
+ .xl\:w-2\/3 { width: var(--size-2/3); }
470
+ .xl\:w-1\/4 { width: var(--size-1/4); }
471
+ .xl\:w-3\/4 { width: var(--size-3/4); }
472
+ .xl\:h-0 { height: var(--size-0); }
473
+ .xl\:h-full { height: var(--size-full); }
474
+ .xl\:h-screen { height: var(--size-screen); }
475
+ .xl\:h-auto { height: var(--size-auto); }
476
+ .xl\:d-flex { display: flex; }
477
+ .xl\:d-grid { display: grid; }
478
+ .xl\:d-block { display: block; }
479
+ .xl\:d-inline { display: inline; }
480
+ .xl\:d-inline-block { display: inline-block; }
481
+ .xl\:d-none { display: none; }
482
+ .xl\:flex-row { flex-direction: row; }
483
+ .xl\:flex-col { flex-direction: column; }
484
+ .xl\:flex-row-reverse { flex-direction: row-reverse; }
485
+ .xl\:flex-col-reverse { flex-direction: column-reverse; }
486
+ .xl\:justify-start { justify-content: flex-start; }
487
+ .xl\:justify-end { justify-content: flex-end; }
488
+ .xl\:justify-center { justify-content: center; }
489
+ .xl\:justify-between { justify-content: space-between; }
490
+ .xl\:justify-around { justify-content: space-around; }
491
+ .xl\:justify-evenly { justify-content: space-evenly; }
492
+ .xl\:items-start { align-items: flex-start; }
493
+ .xl\:items-end { align-items: flex-end; }
494
+ .xl\:items-center { align-items: center; }
495
+ .xl\:items-baseline { align-items: baseline; }
496
+ .xl\:items-stretch { align-items: stretch; }
497
+ .xl\:text-left { text-align: left; }
498
+ .xl\:text-center { text-align: center; }
499
+ .xl\:text-right { text-align: right; }
500
+ }
501
+