@pacem/pacem-theme-css 0.0.0-stage → 2.0.0-abel

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 (153) hide show
  1. package/LICENSE +191 -0
  2. package/NOTICE +4 -0
  3. package/README.md +142 -3
  4. package/cli.js +26 -0
  5. package/pacem-themes.json +10 -0
  6. package/package.json +45 -6
  7. package/src/2d/index.css +44 -0
  8. package/src/3d/index.css +49 -0
  9. package/src/base/animations.css +82 -0
  10. package/src/base/attributes.css +19 -0
  11. package/src/base/backgrounds.css +37 -0
  12. package/src/base/body.css +199 -0
  13. package/src/base/content.css +4 -0
  14. package/src/base/icons.css +74 -0
  15. package/src/base/logging.css +5 -0
  16. package/src/base/overrides.css +3 -0
  17. package/src/base/preloader.css +17 -0
  18. package/src/base/reset.css +50 -0
  19. package/src/base/shell.css +3 -0
  20. package/src/base/text.css +184 -0
  21. package/src/basic/index.css +285 -0
  22. package/src/charts/generated/colors.css +49 -0
  23. package/src/charts/index.css +573 -0
  24. package/src/fx/index.css +230 -0
  25. package/src/layout/address.css +46 -0
  26. package/src/layout/animations.css +33 -0
  27. package/src/layout/borders.css +63 -0
  28. package/src/layout/box.css +271 -0
  29. package/src/layout/breadcrumbs.css +114 -0
  30. package/src/layout/cards.css +246 -0
  31. package/src/layout/coloring.css +862 -0
  32. package/src/layout/container.css +40 -0
  33. package/src/layout/corners.css +52 -0
  34. package/src/layout/datatable.css +324 -0
  35. package/src/layout/elevation.css +73 -0
  36. package/src/layout/fetch-feedback.css +125 -0
  37. package/src/layout/generated/borders.css +403 -0
  38. package/src/layout/generated/card-ribbon.css +94 -0
  39. package/src/layout/generated/card-sides.css +888 -0
  40. package/src/layout/generated/grid-system.css +308 -0
  41. package/src/layout/generated/grids.css +952 -0
  42. package/src/layout/generated/layout-stretch.css +132 -0
  43. package/src/layout/generated/positioning.css +323 -0
  44. package/src/layout/generated/sizing.css +478 -0
  45. package/src/layout/generated/spacing.css +1988 -0
  46. package/src/layout/generated/visibility.css +384 -0
  47. package/src/layout/grid-system.css +49 -0
  48. package/src/layout/grids.css +92 -0
  49. package/src/layout/index.css +39 -0
  50. package/src/layout/interactive.css +11 -0
  51. package/src/layout/layout.css +479 -0
  52. package/src/layout/lists.css +104 -0
  53. package/src/layout/other.css +25 -0
  54. package/src/layout/panels.css +337 -0
  55. package/src/layout/positioning.css +108 -0
  56. package/src/layout/scroll.css +85 -0
  57. package/src/layout/shapes.css +20 -0
  58. package/src/layout/shell.css +3 -0
  59. package/src/layout/sizing.css +25 -0
  60. package/src/layout/spacing.css +17 -0
  61. package/src/layout/superposition-system.css +116 -0
  62. package/src/layout/tokens-chips.css +15 -0
  63. package/src/layout/toolbar.css +30 -0
  64. package/src/layout/typography.css +106 -0
  65. package/src/layout/visibility.css +231 -0
  66. package/src/maps/index.css +20 -0
  67. package/src/media/index.css +6 -0
  68. package/src/media.css +18 -0
  69. package/src/pacem-content.css +24 -0
  70. package/src/pacem-shell.css +14 -0
  71. package/src/pacem.css +35 -0
  72. package/src/plus/carousel.css +327 -0
  73. package/src/plus/datagrid.css +68 -0
  74. package/src/plus/gallery.css +186 -0
  75. package/src/plus/icons.css +25 -0
  76. package/src/plus/index.css +7 -0
  77. package/src/plus/misc.css +194 -0
  78. package/src/scaffolding/calendar-picker.css +291 -0
  79. package/src/scaffolding/checkbox-radio.css +118 -0
  80. package/src/scaffolding/checkbox.css +200 -0
  81. package/src/scaffolding/childform.css +156 -0
  82. package/src/scaffolding/color.css +129 -0
  83. package/src/scaffolding/contenteditable.css +403 -0
  84. package/src/scaffolding/datepicker.css +126 -0
  85. package/src/scaffolding/elements.css +30 -0
  86. package/src/scaffolding/fieldset.css +346 -0
  87. package/src/scaffolding/form.css +36 -0
  88. package/src/scaffolding/formfield.css +364 -0
  89. package/src/scaffolding/generated/calendar-picker.css +40 -0
  90. package/src/scaffolding/generated/colors.css +115 -0
  91. package/src/scaffolding/generated/formfield.css +500 -0
  92. package/src/scaffolding/hierarchy.css +76 -0
  93. package/src/scaffolding/icons.css +64 -0
  94. package/src/scaffolding/image.css +195 -0
  95. package/src/scaffolding/index.css +40 -0
  96. package/src/scaffolding/input.css +163 -0
  97. package/src/scaffolding/inputs.css +77 -0
  98. package/src/scaffolding/latlng.css +173 -0
  99. package/src/scaffolding/markdown.css +14 -0
  100. package/src/scaffolding/password.css +7 -0
  101. package/src/scaffolding/pickers.css +150 -0
  102. package/src/scaffolding/radio.css +68 -0
  103. package/src/scaffolding/select.css +59 -0
  104. package/src/scaffolding/slider.css +236 -0
  105. package/src/scaffolding/snapshot.css +167 -0
  106. package/src/scaffolding/suggest.css +92 -0
  107. package/src/scaffolding/tags.css +132 -0
  108. package/src/scaffolding/textarea.css +45 -0
  109. package/src/scaffolding/upload.css +283 -0
  110. package/src/scaffolding/validators.css +29 -0
  111. package/src/tokens/colors.css +403 -0
  112. package/src/tokens/components.css +16 -0
  113. package/src/tokens/system.css +92 -0
  114. package/src/tokens/theme.css +221 -0
  115. package/src/traits.css +18 -0
  116. package/src/transforms/index.css +5 -0
  117. package/src/ui/anchor.css +55 -0
  118. package/src/ui/balloon.css +573 -0
  119. package/src/ui/binder.css +28 -0
  120. package/src/ui/blade.css +83 -0
  121. package/src/ui/bottom-sheet.css +53 -0
  122. package/src/ui/button.css +626 -0
  123. package/src/ui/calendar.css +415 -0
  124. package/src/ui/collapse.css +25 -0
  125. package/src/ui/dialog.css +230 -0
  126. package/src/ui/divider.css +42 -0
  127. package/src/ui/generated/calendar.css +363 -0
  128. package/src/ui/hidden.css +40 -0
  129. package/src/ui/icon.css +90 -0
  130. package/src/ui/image.css +140 -0
  131. package/src/ui/index.css +30 -0
  132. package/src/ui/led.css +84 -0
  133. package/src/ui/loader.css +174 -0
  134. package/src/ui/markdown.css +352 -0
  135. package/src/ui/marquee.css +41 -0
  136. package/src/ui/menu.css +386 -0
  137. package/src/ui/pager.css +133 -0
  138. package/src/ui/progressbar.css +137 -0
  139. package/src/ui/shell.css +4 -0
  140. package/src/ui/sidebar.css +103 -0
  141. package/src/ui/sticky-header.css +22 -0
  142. package/src/ui/tabs.css +355 -0
  143. package/src/ui/ticker.css +105 -0
  144. package/src/ui/timeline.css +106 -0
  145. package/src/ui/toast.css +182 -0
  146. package/src/ui/toc.css +58 -0
  147. package/src/ui/tuner.css +196 -0
  148. package/src/ui/view.css +30 -0
  149. package/src/ui/window.css +287 -0
  150. package/templates/theme.css +28 -0
  151. package/themebuilder.js +19 -0
  152. package/themes/dark.css +6 -0
  153. package/themes/light.css +97 -0
@@ -0,0 +1,952 @@
1
+ /* Generated by theme/css/tools/generate.ts: do not edit, edit the generator instead. */
2
+ .pacem-grid > .pacem-cell {
3
+ &.cols-12 { grid-column: auto / span 12; }
4
+ &.cols-11 { grid-column: auto / span 11; }
5
+ &.cols-10 { grid-column: auto / span 10; }
6
+ &.cols-9 { grid-column: auto / span 9; }
7
+ &.cols-8 { grid-column: auto / span 8; }
8
+ &.cols-7 { grid-column: auto / span 7; }
9
+ &.cols-6 { grid-column: auto / span 6; }
10
+ &.cols-5 { grid-column: auto / span 5; }
11
+ &.cols-4 { grid-column: auto / span 4; }
12
+ &.cols-3 { grid-column: auto / span 3; }
13
+ &.cols-2 { grid-column: auto / span 2; }
14
+ &.cols-1 { grid-column: auto / span 1; }
15
+ &.cols-start-12 { grid-column-start: 12; }
16
+ &.cols-start-11 { grid-column-start: 11; }
17
+ &.cols-start-10 { grid-column-start: 10; }
18
+ &.cols-start-9 { grid-column-start: 9; }
19
+ &.cols-start-8 { grid-column-start: 8; }
20
+ &.cols-start-7 { grid-column-start: 7; }
21
+ &.cols-start-6 { grid-column-start: 6; }
22
+ &.cols-start-5 { grid-column-start: 5; }
23
+ &.cols-start-4 { grid-column-start: 4; }
24
+ &.cols-start-3 { grid-column-start: 3; }
25
+ &.cols-start-2 { grid-column-start: 2; }
26
+ &.cols-start-1 { grid-column-start: 1; }
27
+ &.rows-12 { grid-row: auto / span 12; }
28
+ &.rows-11 { grid-row: auto / span 11; }
29
+ &.rows-10 { grid-row: auto / span 10; }
30
+ &.rows-9 { grid-row: auto / span 9; }
31
+ &.rows-8 { grid-row: auto / span 8; }
32
+ &.rows-7 { grid-row: auto / span 7; }
33
+ &.rows-6 { grid-row: auto / span 6; }
34
+ &.rows-5 { grid-row: auto / span 5; }
35
+ &.rows-4 { grid-row: auto / span 4; }
36
+ &.rows-3 { grid-row: auto / span 3; }
37
+ &.rows-2 { grid-row: auto / span 2; }
38
+ &.rows-1 { grid-row: auto / span 1; }
39
+ &.rows-start-12 { grid-row-start: 12; }
40
+ &.rows-start-11 { grid-row-start: 11; }
41
+ &.rows-start-10 { grid-row-start: 10; }
42
+ &.rows-start-9 { grid-row-start: 9; }
43
+ &.rows-start-8 { grid-row-start: 8; }
44
+ &.rows-start-7 { grid-row-start: 7; }
45
+ &.rows-start-6 { grid-row-start: 6; }
46
+ &.rows-start-5 { grid-row-start: 5; }
47
+ &.rows-start-4 { grid-row-start: 4; }
48
+ &.rows-start-3 { grid-row-start: 3; }
49
+ &.rows-start-2 { grid-row-start: 2; }
50
+ &.rows-start-1 { grid-row-start: 1; }
51
+ }
52
+
53
+ @media (--pacem-below-sm) {
54
+ .pacem-grid:not(.grid-contained) > .pacem-cell {
55
+ &.cols-xs-12 { grid-column: auto / span 12; }
56
+ &.cols-xs-11 { grid-column: auto / span 11; }
57
+ &.cols-xs-10 { grid-column: auto / span 10; }
58
+ &.cols-xs-9 { grid-column: auto / span 9; }
59
+ &.cols-xs-8 { grid-column: auto / span 8; }
60
+ &.cols-xs-7 { grid-column: auto / span 7; }
61
+ &.cols-xs-6 { grid-column: auto / span 6; }
62
+ &.cols-xs-5 { grid-column: auto / span 5; }
63
+ &.cols-xs-4 { grid-column: auto / span 4; }
64
+ &.cols-xs-3 { grid-column: auto / span 3; }
65
+ &.cols-xs-2 { grid-column: auto / span 2; }
66
+ &.cols-xs-1 { grid-column: auto / span 1; }
67
+ &.cols-xs-start-12 { grid-column-start: 12; }
68
+ &.cols-xs-start-11 { grid-column-start: 11; }
69
+ &.cols-xs-start-10 { grid-column-start: 10; }
70
+ &.cols-xs-start-9 { grid-column-start: 9; }
71
+ &.cols-xs-start-8 { grid-column-start: 8; }
72
+ &.cols-xs-start-7 { grid-column-start: 7; }
73
+ &.cols-xs-start-6 { grid-column-start: 6; }
74
+ &.cols-xs-start-5 { grid-column-start: 5; }
75
+ &.cols-xs-start-4 { grid-column-start: 4; }
76
+ &.cols-xs-start-3 { grid-column-start: 3; }
77
+ &.cols-xs-start-2 { grid-column-start: 2; }
78
+ &.cols-xs-start-1 { grid-column-start: 1; }
79
+ &.rows-xs-12 { grid-row: auto / span 12; }
80
+ &.rows-xs-11 { grid-row: auto / span 11; }
81
+ &.rows-xs-10 { grid-row: auto / span 10; }
82
+ &.rows-xs-9 { grid-row: auto / span 9; }
83
+ &.rows-xs-8 { grid-row: auto / span 8; }
84
+ &.rows-xs-7 { grid-row: auto / span 7; }
85
+ &.rows-xs-6 { grid-row: auto / span 6; }
86
+ &.rows-xs-5 { grid-row: auto / span 5; }
87
+ &.rows-xs-4 { grid-row: auto / span 4; }
88
+ &.rows-xs-3 { grid-row: auto / span 3; }
89
+ &.rows-xs-2 { grid-row: auto / span 2; }
90
+ &.rows-xs-1 { grid-row: auto / span 1; }
91
+ &.rows-xs-start-12 { grid-row-start: 12; }
92
+ &.rows-xs-start-11 { grid-row-start: 11; }
93
+ &.rows-xs-start-10 { grid-row-start: 10; }
94
+ &.rows-xs-start-9 { grid-row-start: 9; }
95
+ &.rows-xs-start-8 { grid-row-start: 8; }
96
+ &.rows-xs-start-7 { grid-row-start: 7; }
97
+ &.rows-xs-start-6 { grid-row-start: 6; }
98
+ &.rows-xs-start-5 { grid-row-start: 5; }
99
+ &.rows-xs-start-4 { grid-row-start: 4; }
100
+ &.rows-xs-start-3 { grid-row-start: 3; }
101
+ &.rows-xs-start-2 { grid-row-start: 2; }
102
+ &.rows-xs-start-1 { grid-row-start: 1; }
103
+ }
104
+ }
105
+
106
+ @media (--pacem-sm) {
107
+ .pacem-grid:not(.grid-contained) > .pacem-cell {
108
+ &.cols-sm-12 { grid-column: auto / span 12; }
109
+ &.cols-sm-11 { grid-column: auto / span 11; }
110
+ &.cols-sm-10 { grid-column: auto / span 10; }
111
+ &.cols-sm-9 { grid-column: auto / span 9; }
112
+ &.cols-sm-8 { grid-column: auto / span 8; }
113
+ &.cols-sm-7 { grid-column: auto / span 7; }
114
+ &.cols-sm-6 { grid-column: auto / span 6; }
115
+ &.cols-sm-5 { grid-column: auto / span 5; }
116
+ &.cols-sm-4 { grid-column: auto / span 4; }
117
+ &.cols-sm-3 { grid-column: auto / span 3; }
118
+ &.cols-sm-2 { grid-column: auto / span 2; }
119
+ &.cols-sm-1 { grid-column: auto / span 1; }
120
+ &.cols-sm-start-12 { grid-column-start: 12; }
121
+ &.cols-sm-start-11 { grid-column-start: 11; }
122
+ &.cols-sm-start-10 { grid-column-start: 10; }
123
+ &.cols-sm-start-9 { grid-column-start: 9; }
124
+ &.cols-sm-start-8 { grid-column-start: 8; }
125
+ &.cols-sm-start-7 { grid-column-start: 7; }
126
+ &.cols-sm-start-6 { grid-column-start: 6; }
127
+ &.cols-sm-start-5 { grid-column-start: 5; }
128
+ &.cols-sm-start-4 { grid-column-start: 4; }
129
+ &.cols-sm-start-3 { grid-column-start: 3; }
130
+ &.cols-sm-start-2 { grid-column-start: 2; }
131
+ &.cols-sm-start-1 { grid-column-start: 1; }
132
+ &.rows-sm-12 { grid-row: auto / span 12; }
133
+ &.rows-sm-11 { grid-row: auto / span 11; }
134
+ &.rows-sm-10 { grid-row: auto / span 10; }
135
+ &.rows-sm-9 { grid-row: auto / span 9; }
136
+ &.rows-sm-8 { grid-row: auto / span 8; }
137
+ &.rows-sm-7 { grid-row: auto / span 7; }
138
+ &.rows-sm-6 { grid-row: auto / span 6; }
139
+ &.rows-sm-5 { grid-row: auto / span 5; }
140
+ &.rows-sm-4 { grid-row: auto / span 4; }
141
+ &.rows-sm-3 { grid-row: auto / span 3; }
142
+ &.rows-sm-2 { grid-row: auto / span 2; }
143
+ &.rows-sm-1 { grid-row: auto / span 1; }
144
+ &.rows-sm-start-12 { grid-row-start: 12; }
145
+ &.rows-sm-start-11 { grid-row-start: 11; }
146
+ &.rows-sm-start-10 { grid-row-start: 10; }
147
+ &.rows-sm-start-9 { grid-row-start: 9; }
148
+ &.rows-sm-start-8 { grid-row-start: 8; }
149
+ &.rows-sm-start-7 { grid-row-start: 7; }
150
+ &.rows-sm-start-6 { grid-row-start: 6; }
151
+ &.rows-sm-start-5 { grid-row-start: 5; }
152
+ &.rows-sm-start-4 { grid-row-start: 4; }
153
+ &.rows-sm-start-3 { grid-row-start: 3; }
154
+ &.rows-sm-start-2 { grid-row-start: 2; }
155
+ &.rows-sm-start-1 { grid-row-start: 1; }
156
+ }
157
+ }
158
+
159
+ @media (--pacem-md) {
160
+ .pacem-grid:not(.grid-contained) > .pacem-cell {
161
+ &.cols-md-12 { grid-column: auto / span 12; }
162
+ &.cols-md-11 { grid-column: auto / span 11; }
163
+ &.cols-md-10 { grid-column: auto / span 10; }
164
+ &.cols-md-9 { grid-column: auto / span 9; }
165
+ &.cols-md-8 { grid-column: auto / span 8; }
166
+ &.cols-md-7 { grid-column: auto / span 7; }
167
+ &.cols-md-6 { grid-column: auto / span 6; }
168
+ &.cols-md-5 { grid-column: auto / span 5; }
169
+ &.cols-md-4 { grid-column: auto / span 4; }
170
+ &.cols-md-3 { grid-column: auto / span 3; }
171
+ &.cols-md-2 { grid-column: auto / span 2; }
172
+ &.cols-md-1 { grid-column: auto / span 1; }
173
+ &.cols-md-start-12 { grid-column-start: 12; }
174
+ &.cols-md-start-11 { grid-column-start: 11; }
175
+ &.cols-md-start-10 { grid-column-start: 10; }
176
+ &.cols-md-start-9 { grid-column-start: 9; }
177
+ &.cols-md-start-8 { grid-column-start: 8; }
178
+ &.cols-md-start-7 { grid-column-start: 7; }
179
+ &.cols-md-start-6 { grid-column-start: 6; }
180
+ &.cols-md-start-5 { grid-column-start: 5; }
181
+ &.cols-md-start-4 { grid-column-start: 4; }
182
+ &.cols-md-start-3 { grid-column-start: 3; }
183
+ &.cols-md-start-2 { grid-column-start: 2; }
184
+ &.cols-md-start-1 { grid-column-start: 1; }
185
+ &.rows-md-12 { grid-row: auto / span 12; }
186
+ &.rows-md-11 { grid-row: auto / span 11; }
187
+ &.rows-md-10 { grid-row: auto / span 10; }
188
+ &.rows-md-9 { grid-row: auto / span 9; }
189
+ &.rows-md-8 { grid-row: auto / span 8; }
190
+ &.rows-md-7 { grid-row: auto / span 7; }
191
+ &.rows-md-6 { grid-row: auto / span 6; }
192
+ &.rows-md-5 { grid-row: auto / span 5; }
193
+ &.rows-md-4 { grid-row: auto / span 4; }
194
+ &.rows-md-3 { grid-row: auto / span 3; }
195
+ &.rows-md-2 { grid-row: auto / span 2; }
196
+ &.rows-md-1 { grid-row: auto / span 1; }
197
+ &.rows-md-start-12 { grid-row-start: 12; }
198
+ &.rows-md-start-11 { grid-row-start: 11; }
199
+ &.rows-md-start-10 { grid-row-start: 10; }
200
+ &.rows-md-start-9 { grid-row-start: 9; }
201
+ &.rows-md-start-8 { grid-row-start: 8; }
202
+ &.rows-md-start-7 { grid-row-start: 7; }
203
+ &.rows-md-start-6 { grid-row-start: 6; }
204
+ &.rows-md-start-5 { grid-row-start: 5; }
205
+ &.rows-md-start-4 { grid-row-start: 4; }
206
+ &.rows-md-start-3 { grid-row-start: 3; }
207
+ &.rows-md-start-2 { grid-row-start: 2; }
208
+ &.rows-md-start-1 { grid-row-start: 1; }
209
+ }
210
+ }
211
+
212
+ @media (--pacem-lg) {
213
+ .pacem-grid:not(.grid-contained) > .pacem-cell {
214
+ &.cols-lg-12 { grid-column: auto / span 12; }
215
+ &.cols-lg-11 { grid-column: auto / span 11; }
216
+ &.cols-lg-10 { grid-column: auto / span 10; }
217
+ &.cols-lg-9 { grid-column: auto / span 9; }
218
+ &.cols-lg-8 { grid-column: auto / span 8; }
219
+ &.cols-lg-7 { grid-column: auto / span 7; }
220
+ &.cols-lg-6 { grid-column: auto / span 6; }
221
+ &.cols-lg-5 { grid-column: auto / span 5; }
222
+ &.cols-lg-4 { grid-column: auto / span 4; }
223
+ &.cols-lg-3 { grid-column: auto / span 3; }
224
+ &.cols-lg-2 { grid-column: auto / span 2; }
225
+ &.cols-lg-1 { grid-column: auto / span 1; }
226
+ &.cols-lg-start-12 { grid-column-start: 12; }
227
+ &.cols-lg-start-11 { grid-column-start: 11; }
228
+ &.cols-lg-start-10 { grid-column-start: 10; }
229
+ &.cols-lg-start-9 { grid-column-start: 9; }
230
+ &.cols-lg-start-8 { grid-column-start: 8; }
231
+ &.cols-lg-start-7 { grid-column-start: 7; }
232
+ &.cols-lg-start-6 { grid-column-start: 6; }
233
+ &.cols-lg-start-5 { grid-column-start: 5; }
234
+ &.cols-lg-start-4 { grid-column-start: 4; }
235
+ &.cols-lg-start-3 { grid-column-start: 3; }
236
+ &.cols-lg-start-2 { grid-column-start: 2; }
237
+ &.cols-lg-start-1 { grid-column-start: 1; }
238
+ &.rows-lg-12 { grid-row: auto / span 12; }
239
+ &.rows-lg-11 { grid-row: auto / span 11; }
240
+ &.rows-lg-10 { grid-row: auto / span 10; }
241
+ &.rows-lg-9 { grid-row: auto / span 9; }
242
+ &.rows-lg-8 { grid-row: auto / span 8; }
243
+ &.rows-lg-7 { grid-row: auto / span 7; }
244
+ &.rows-lg-6 { grid-row: auto / span 6; }
245
+ &.rows-lg-5 { grid-row: auto / span 5; }
246
+ &.rows-lg-4 { grid-row: auto / span 4; }
247
+ &.rows-lg-3 { grid-row: auto / span 3; }
248
+ &.rows-lg-2 { grid-row: auto / span 2; }
249
+ &.rows-lg-1 { grid-row: auto / span 1; }
250
+ &.rows-lg-start-12 { grid-row-start: 12; }
251
+ &.rows-lg-start-11 { grid-row-start: 11; }
252
+ &.rows-lg-start-10 { grid-row-start: 10; }
253
+ &.rows-lg-start-9 { grid-row-start: 9; }
254
+ &.rows-lg-start-8 { grid-row-start: 8; }
255
+ &.rows-lg-start-7 { grid-row-start: 7; }
256
+ &.rows-lg-start-6 { grid-row-start: 6; }
257
+ &.rows-lg-start-5 { grid-row-start: 5; }
258
+ &.rows-lg-start-4 { grid-row-start: 4; }
259
+ &.rows-lg-start-3 { grid-row-start: 3; }
260
+ &.rows-lg-start-2 { grid-row-start: 2; }
261
+ &.rows-lg-start-1 { grid-row-start: 1; }
262
+ }
263
+ }
264
+
265
+ @media (--pacem-xl) {
266
+ .pacem-grid:not(.grid-contained) > .pacem-cell {
267
+ &.cols-xl-12 { grid-column: auto / span 12; }
268
+ &.cols-xl-11 { grid-column: auto / span 11; }
269
+ &.cols-xl-10 { grid-column: auto / span 10; }
270
+ &.cols-xl-9 { grid-column: auto / span 9; }
271
+ &.cols-xl-8 { grid-column: auto / span 8; }
272
+ &.cols-xl-7 { grid-column: auto / span 7; }
273
+ &.cols-xl-6 { grid-column: auto / span 6; }
274
+ &.cols-xl-5 { grid-column: auto / span 5; }
275
+ &.cols-xl-4 { grid-column: auto / span 4; }
276
+ &.cols-xl-3 { grid-column: auto / span 3; }
277
+ &.cols-xl-2 { grid-column: auto / span 2; }
278
+ &.cols-xl-1 { grid-column: auto / span 1; }
279
+ &.cols-xl-start-12 { grid-column-start: 12; }
280
+ &.cols-xl-start-11 { grid-column-start: 11; }
281
+ &.cols-xl-start-10 { grid-column-start: 10; }
282
+ &.cols-xl-start-9 { grid-column-start: 9; }
283
+ &.cols-xl-start-8 { grid-column-start: 8; }
284
+ &.cols-xl-start-7 { grid-column-start: 7; }
285
+ &.cols-xl-start-6 { grid-column-start: 6; }
286
+ &.cols-xl-start-5 { grid-column-start: 5; }
287
+ &.cols-xl-start-4 { grid-column-start: 4; }
288
+ &.cols-xl-start-3 { grid-column-start: 3; }
289
+ &.cols-xl-start-2 { grid-column-start: 2; }
290
+ &.cols-xl-start-1 { grid-column-start: 1; }
291
+ &.rows-xl-12 { grid-row: auto / span 12; }
292
+ &.rows-xl-11 { grid-row: auto / span 11; }
293
+ &.rows-xl-10 { grid-row: auto / span 10; }
294
+ &.rows-xl-9 { grid-row: auto / span 9; }
295
+ &.rows-xl-8 { grid-row: auto / span 8; }
296
+ &.rows-xl-7 { grid-row: auto / span 7; }
297
+ &.rows-xl-6 { grid-row: auto / span 6; }
298
+ &.rows-xl-5 { grid-row: auto / span 5; }
299
+ &.rows-xl-4 { grid-row: auto / span 4; }
300
+ &.rows-xl-3 { grid-row: auto / span 3; }
301
+ &.rows-xl-2 { grid-row: auto / span 2; }
302
+ &.rows-xl-1 { grid-row: auto / span 1; }
303
+ &.rows-xl-start-12 { grid-row-start: 12; }
304
+ &.rows-xl-start-11 { grid-row-start: 11; }
305
+ &.rows-xl-start-10 { grid-row-start: 10; }
306
+ &.rows-xl-start-9 { grid-row-start: 9; }
307
+ &.rows-xl-start-8 { grid-row-start: 8; }
308
+ &.rows-xl-start-7 { grid-row-start: 7; }
309
+ &.rows-xl-start-6 { grid-row-start: 6; }
310
+ &.rows-xl-start-5 { grid-row-start: 5; }
311
+ &.rows-xl-start-4 { grid-row-start: 4; }
312
+ &.rows-xl-start-3 { grid-row-start: 3; }
313
+ &.rows-xl-start-2 { grid-row-start: 2; }
314
+ &.rows-xl-start-1 { grid-row-start: 1; }
315
+ }
316
+ }
317
+
318
+ @media (--pacem-hd) {
319
+ .pacem-grid:not(.grid-contained) > .pacem-cell {
320
+ &.cols-hd-12 { grid-column: auto / span 12; }
321
+ &.cols-hd-11 { grid-column: auto / span 11; }
322
+ &.cols-hd-10 { grid-column: auto / span 10; }
323
+ &.cols-hd-9 { grid-column: auto / span 9; }
324
+ &.cols-hd-8 { grid-column: auto / span 8; }
325
+ &.cols-hd-7 { grid-column: auto / span 7; }
326
+ &.cols-hd-6 { grid-column: auto / span 6; }
327
+ &.cols-hd-5 { grid-column: auto / span 5; }
328
+ &.cols-hd-4 { grid-column: auto / span 4; }
329
+ &.cols-hd-3 { grid-column: auto / span 3; }
330
+ &.cols-hd-2 { grid-column: auto / span 2; }
331
+ &.cols-hd-1 { grid-column: auto / span 1; }
332
+ &.cols-hd-start-12 { grid-column-start: 12; }
333
+ &.cols-hd-start-11 { grid-column-start: 11; }
334
+ &.cols-hd-start-10 { grid-column-start: 10; }
335
+ &.cols-hd-start-9 { grid-column-start: 9; }
336
+ &.cols-hd-start-8 { grid-column-start: 8; }
337
+ &.cols-hd-start-7 { grid-column-start: 7; }
338
+ &.cols-hd-start-6 { grid-column-start: 6; }
339
+ &.cols-hd-start-5 { grid-column-start: 5; }
340
+ &.cols-hd-start-4 { grid-column-start: 4; }
341
+ &.cols-hd-start-3 { grid-column-start: 3; }
342
+ &.cols-hd-start-2 { grid-column-start: 2; }
343
+ &.cols-hd-start-1 { grid-column-start: 1; }
344
+ &.rows-hd-12 { grid-row: auto / span 12; }
345
+ &.rows-hd-11 { grid-row: auto / span 11; }
346
+ &.rows-hd-10 { grid-row: auto / span 10; }
347
+ &.rows-hd-9 { grid-row: auto / span 9; }
348
+ &.rows-hd-8 { grid-row: auto / span 8; }
349
+ &.rows-hd-7 { grid-row: auto / span 7; }
350
+ &.rows-hd-6 { grid-row: auto / span 6; }
351
+ &.rows-hd-5 { grid-row: auto / span 5; }
352
+ &.rows-hd-4 { grid-row: auto / span 4; }
353
+ &.rows-hd-3 { grid-row: auto / span 3; }
354
+ &.rows-hd-2 { grid-row: auto / span 2; }
355
+ &.rows-hd-1 { grid-row: auto / span 1; }
356
+ &.rows-hd-start-12 { grid-row-start: 12; }
357
+ &.rows-hd-start-11 { grid-row-start: 11; }
358
+ &.rows-hd-start-10 { grid-row-start: 10; }
359
+ &.rows-hd-start-9 { grid-row-start: 9; }
360
+ &.rows-hd-start-8 { grid-row-start: 8; }
361
+ &.rows-hd-start-7 { grid-row-start: 7; }
362
+ &.rows-hd-start-6 { grid-row-start: 6; }
363
+ &.rows-hd-start-5 { grid-row-start: 5; }
364
+ &.rows-hd-start-4 { grid-row-start: 4; }
365
+ &.rows-hd-start-3 { grid-row-start: 3; }
366
+ &.rows-hd-start-2 { grid-row-start: 2; }
367
+ &.rows-hd-start-1 { grid-row-start: 1; }
368
+ }
369
+ }
370
+
371
+ @media (--pacem-2k) {
372
+ .pacem-grid:not(.grid-contained) > .pacem-cell {
373
+ &.cols-2k-12 { grid-column: auto / span 12; }
374
+ &.cols-2k-11 { grid-column: auto / span 11; }
375
+ &.cols-2k-10 { grid-column: auto / span 10; }
376
+ &.cols-2k-9 { grid-column: auto / span 9; }
377
+ &.cols-2k-8 { grid-column: auto / span 8; }
378
+ &.cols-2k-7 { grid-column: auto / span 7; }
379
+ &.cols-2k-6 { grid-column: auto / span 6; }
380
+ &.cols-2k-5 { grid-column: auto / span 5; }
381
+ &.cols-2k-4 { grid-column: auto / span 4; }
382
+ &.cols-2k-3 { grid-column: auto / span 3; }
383
+ &.cols-2k-2 { grid-column: auto / span 2; }
384
+ &.cols-2k-1 { grid-column: auto / span 1; }
385
+ &.cols-2k-start-12 { grid-column-start: 12; }
386
+ &.cols-2k-start-11 { grid-column-start: 11; }
387
+ &.cols-2k-start-10 { grid-column-start: 10; }
388
+ &.cols-2k-start-9 { grid-column-start: 9; }
389
+ &.cols-2k-start-8 { grid-column-start: 8; }
390
+ &.cols-2k-start-7 { grid-column-start: 7; }
391
+ &.cols-2k-start-6 { grid-column-start: 6; }
392
+ &.cols-2k-start-5 { grid-column-start: 5; }
393
+ &.cols-2k-start-4 { grid-column-start: 4; }
394
+ &.cols-2k-start-3 { grid-column-start: 3; }
395
+ &.cols-2k-start-2 { grid-column-start: 2; }
396
+ &.cols-2k-start-1 { grid-column-start: 1; }
397
+ &.rows-2k-12 { grid-row: auto / span 12; }
398
+ &.rows-2k-11 { grid-row: auto / span 11; }
399
+ &.rows-2k-10 { grid-row: auto / span 10; }
400
+ &.rows-2k-9 { grid-row: auto / span 9; }
401
+ &.rows-2k-8 { grid-row: auto / span 8; }
402
+ &.rows-2k-7 { grid-row: auto / span 7; }
403
+ &.rows-2k-6 { grid-row: auto / span 6; }
404
+ &.rows-2k-5 { grid-row: auto / span 5; }
405
+ &.rows-2k-4 { grid-row: auto / span 4; }
406
+ &.rows-2k-3 { grid-row: auto / span 3; }
407
+ &.rows-2k-2 { grid-row: auto / span 2; }
408
+ &.rows-2k-1 { grid-row: auto / span 1; }
409
+ &.rows-2k-start-12 { grid-row-start: 12; }
410
+ &.rows-2k-start-11 { grid-row-start: 11; }
411
+ &.rows-2k-start-10 { grid-row-start: 10; }
412
+ &.rows-2k-start-9 { grid-row-start: 9; }
413
+ &.rows-2k-start-8 { grid-row-start: 8; }
414
+ &.rows-2k-start-7 { grid-row-start: 7; }
415
+ &.rows-2k-start-6 { grid-row-start: 6; }
416
+ &.rows-2k-start-5 { grid-row-start: 5; }
417
+ &.rows-2k-start-4 { grid-row-start: 4; }
418
+ &.rows-2k-start-3 { grid-row-start: 3; }
419
+ &.rows-2k-start-2 { grid-row-start: 2; }
420
+ &.rows-2k-start-1 { grid-row-start: 1; }
421
+ }
422
+ }
423
+
424
+ @media (--pacem-4k) {
425
+ .pacem-grid:not(.grid-contained) > .pacem-cell {
426
+ &.cols-4k-12 { grid-column: auto / span 12; }
427
+ &.cols-4k-11 { grid-column: auto / span 11; }
428
+ &.cols-4k-10 { grid-column: auto / span 10; }
429
+ &.cols-4k-9 { grid-column: auto / span 9; }
430
+ &.cols-4k-8 { grid-column: auto / span 8; }
431
+ &.cols-4k-7 { grid-column: auto / span 7; }
432
+ &.cols-4k-6 { grid-column: auto / span 6; }
433
+ &.cols-4k-5 { grid-column: auto / span 5; }
434
+ &.cols-4k-4 { grid-column: auto / span 4; }
435
+ &.cols-4k-3 { grid-column: auto / span 3; }
436
+ &.cols-4k-2 { grid-column: auto / span 2; }
437
+ &.cols-4k-1 { grid-column: auto / span 1; }
438
+ &.cols-4k-start-12 { grid-column-start: 12; }
439
+ &.cols-4k-start-11 { grid-column-start: 11; }
440
+ &.cols-4k-start-10 { grid-column-start: 10; }
441
+ &.cols-4k-start-9 { grid-column-start: 9; }
442
+ &.cols-4k-start-8 { grid-column-start: 8; }
443
+ &.cols-4k-start-7 { grid-column-start: 7; }
444
+ &.cols-4k-start-6 { grid-column-start: 6; }
445
+ &.cols-4k-start-5 { grid-column-start: 5; }
446
+ &.cols-4k-start-4 { grid-column-start: 4; }
447
+ &.cols-4k-start-3 { grid-column-start: 3; }
448
+ &.cols-4k-start-2 { grid-column-start: 2; }
449
+ &.cols-4k-start-1 { grid-column-start: 1; }
450
+ &.rows-4k-12 { grid-row: auto / span 12; }
451
+ &.rows-4k-11 { grid-row: auto / span 11; }
452
+ &.rows-4k-10 { grid-row: auto / span 10; }
453
+ &.rows-4k-9 { grid-row: auto / span 9; }
454
+ &.rows-4k-8 { grid-row: auto / span 8; }
455
+ &.rows-4k-7 { grid-row: auto / span 7; }
456
+ &.rows-4k-6 { grid-row: auto / span 6; }
457
+ &.rows-4k-5 { grid-row: auto / span 5; }
458
+ &.rows-4k-4 { grid-row: auto / span 4; }
459
+ &.rows-4k-3 { grid-row: auto / span 3; }
460
+ &.rows-4k-2 { grid-row: auto / span 2; }
461
+ &.rows-4k-1 { grid-row: auto / span 1; }
462
+ &.rows-4k-start-12 { grid-row-start: 12; }
463
+ &.rows-4k-start-11 { grid-row-start: 11; }
464
+ &.rows-4k-start-10 { grid-row-start: 10; }
465
+ &.rows-4k-start-9 { grid-row-start: 9; }
466
+ &.rows-4k-start-8 { grid-row-start: 8; }
467
+ &.rows-4k-start-7 { grid-row-start: 7; }
468
+ &.rows-4k-start-6 { grid-row-start: 6; }
469
+ &.rows-4k-start-5 { grid-row-start: 5; }
470
+ &.rows-4k-start-4 { grid-row-start: 4; }
471
+ &.rows-4k-start-3 { grid-row-start: 3; }
472
+ &.rows-4k-start-2 { grid-row-start: 2; }
473
+ &.rows-4k-start-1 { grid-row-start: 1; }
474
+ }
475
+ }
476
+
477
+ @media (orientation: portrait) {
478
+ .pacem-grid > .pacem-cell {
479
+ &.cols-v-12 { grid-column: auto / span 12; }
480
+ &.cols-v-11 { grid-column: auto / span 11; }
481
+ &.cols-v-10 { grid-column: auto / span 10; }
482
+ &.cols-v-9 { grid-column: auto / span 9; }
483
+ &.cols-v-8 { grid-column: auto / span 8; }
484
+ &.cols-v-7 { grid-column: auto / span 7; }
485
+ &.cols-v-6 { grid-column: auto / span 6; }
486
+ &.cols-v-5 { grid-column: auto / span 5; }
487
+ &.cols-v-4 { grid-column: auto / span 4; }
488
+ &.cols-v-3 { grid-column: auto / span 3; }
489
+ &.cols-v-2 { grid-column: auto / span 2; }
490
+ &.cols-v-1 { grid-column: auto / span 1; }
491
+ &.cols-v-start-12 { grid-column-start: 12; }
492
+ &.cols-v-start-11 { grid-column-start: 11; }
493
+ &.cols-v-start-10 { grid-column-start: 10; }
494
+ &.cols-v-start-9 { grid-column-start: 9; }
495
+ &.cols-v-start-8 { grid-column-start: 8; }
496
+ &.cols-v-start-7 { grid-column-start: 7; }
497
+ &.cols-v-start-6 { grid-column-start: 6; }
498
+ &.cols-v-start-5 { grid-column-start: 5; }
499
+ &.cols-v-start-4 { grid-column-start: 4; }
500
+ &.cols-v-start-3 { grid-column-start: 3; }
501
+ &.cols-v-start-2 { grid-column-start: 2; }
502
+ &.cols-v-start-1 { grid-column-start: 1; }
503
+ &.rows-v-12 { grid-row: auto / span 12; }
504
+ &.rows-v-11 { grid-row: auto / span 11; }
505
+ &.rows-v-10 { grid-row: auto / span 10; }
506
+ &.rows-v-9 { grid-row: auto / span 9; }
507
+ &.rows-v-8 { grid-row: auto / span 8; }
508
+ &.rows-v-7 { grid-row: auto / span 7; }
509
+ &.rows-v-6 { grid-row: auto / span 6; }
510
+ &.rows-v-5 { grid-row: auto / span 5; }
511
+ &.rows-v-4 { grid-row: auto / span 4; }
512
+ &.rows-v-3 { grid-row: auto / span 3; }
513
+ &.rows-v-2 { grid-row: auto / span 2; }
514
+ &.rows-v-1 { grid-row: auto / span 1; }
515
+ &.rows-v-start-12 { grid-row-start: 12; }
516
+ &.rows-v-start-11 { grid-row-start: 11; }
517
+ &.rows-v-start-10 { grid-row-start: 10; }
518
+ &.rows-v-start-9 { grid-row-start: 9; }
519
+ &.rows-v-start-8 { grid-row-start: 8; }
520
+ &.rows-v-start-7 { grid-row-start: 7; }
521
+ &.rows-v-start-6 { grid-row-start: 6; }
522
+ &.rows-v-start-5 { grid-row-start: 5; }
523
+ &.rows-v-start-4 { grid-row-start: 4; }
524
+ &.rows-v-start-3 { grid-row-start: 3; }
525
+ &.rows-v-start-2 { grid-row-start: 2; }
526
+ &.rows-v-start-1 { grid-row-start: 1; }
527
+ }
528
+ }
529
+
530
+ @container pacem (width < 768px) {
531
+ .pacem-grid.grid-contained > .pacem-cell {
532
+ &.cols-xs-12 { grid-column: auto / span 12; }
533
+ &.cols-xs-11 { grid-column: auto / span 11; }
534
+ &.cols-xs-10 { grid-column: auto / span 10; }
535
+ &.cols-xs-9 { grid-column: auto / span 9; }
536
+ &.cols-xs-8 { grid-column: auto / span 8; }
537
+ &.cols-xs-7 { grid-column: auto / span 7; }
538
+ &.cols-xs-6 { grid-column: auto / span 6; }
539
+ &.cols-xs-5 { grid-column: auto / span 5; }
540
+ &.cols-xs-4 { grid-column: auto / span 4; }
541
+ &.cols-xs-3 { grid-column: auto / span 3; }
542
+ &.cols-xs-2 { grid-column: auto / span 2; }
543
+ &.cols-xs-1 { grid-column: auto / span 1; }
544
+ &.cols-xs-start-12 { grid-column-start: 12; }
545
+ &.cols-xs-start-11 { grid-column-start: 11; }
546
+ &.cols-xs-start-10 { grid-column-start: 10; }
547
+ &.cols-xs-start-9 { grid-column-start: 9; }
548
+ &.cols-xs-start-8 { grid-column-start: 8; }
549
+ &.cols-xs-start-7 { grid-column-start: 7; }
550
+ &.cols-xs-start-6 { grid-column-start: 6; }
551
+ &.cols-xs-start-5 { grid-column-start: 5; }
552
+ &.cols-xs-start-4 { grid-column-start: 4; }
553
+ &.cols-xs-start-3 { grid-column-start: 3; }
554
+ &.cols-xs-start-2 { grid-column-start: 2; }
555
+ &.cols-xs-start-1 { grid-column-start: 1; }
556
+ &.rows-xs-12 { grid-row: auto / span 12; }
557
+ &.rows-xs-11 { grid-row: auto / span 11; }
558
+ &.rows-xs-10 { grid-row: auto / span 10; }
559
+ &.rows-xs-9 { grid-row: auto / span 9; }
560
+ &.rows-xs-8 { grid-row: auto / span 8; }
561
+ &.rows-xs-7 { grid-row: auto / span 7; }
562
+ &.rows-xs-6 { grid-row: auto / span 6; }
563
+ &.rows-xs-5 { grid-row: auto / span 5; }
564
+ &.rows-xs-4 { grid-row: auto / span 4; }
565
+ &.rows-xs-3 { grid-row: auto / span 3; }
566
+ &.rows-xs-2 { grid-row: auto / span 2; }
567
+ &.rows-xs-1 { grid-row: auto / span 1; }
568
+ &.rows-xs-start-12 { grid-row-start: 12; }
569
+ &.rows-xs-start-11 { grid-row-start: 11; }
570
+ &.rows-xs-start-10 { grid-row-start: 10; }
571
+ &.rows-xs-start-9 { grid-row-start: 9; }
572
+ &.rows-xs-start-8 { grid-row-start: 8; }
573
+ &.rows-xs-start-7 { grid-row-start: 7; }
574
+ &.rows-xs-start-6 { grid-row-start: 6; }
575
+ &.rows-xs-start-5 { grid-row-start: 5; }
576
+ &.rows-xs-start-4 { grid-row-start: 4; }
577
+ &.rows-xs-start-3 { grid-row-start: 3; }
578
+ &.rows-xs-start-2 { grid-row-start: 2; }
579
+ &.rows-xs-start-1 { grid-row-start: 1; }
580
+ }
581
+ }
582
+
583
+ @container pacem (width >= 768px) {
584
+ .pacem-grid.grid-contained > .pacem-cell {
585
+ &.cols-sm-12 { grid-column: auto / span 12; }
586
+ &.cols-sm-11 { grid-column: auto / span 11; }
587
+ &.cols-sm-10 { grid-column: auto / span 10; }
588
+ &.cols-sm-9 { grid-column: auto / span 9; }
589
+ &.cols-sm-8 { grid-column: auto / span 8; }
590
+ &.cols-sm-7 { grid-column: auto / span 7; }
591
+ &.cols-sm-6 { grid-column: auto / span 6; }
592
+ &.cols-sm-5 { grid-column: auto / span 5; }
593
+ &.cols-sm-4 { grid-column: auto / span 4; }
594
+ &.cols-sm-3 { grid-column: auto / span 3; }
595
+ &.cols-sm-2 { grid-column: auto / span 2; }
596
+ &.cols-sm-1 { grid-column: auto / span 1; }
597
+ &.cols-sm-start-12 { grid-column-start: 12; }
598
+ &.cols-sm-start-11 { grid-column-start: 11; }
599
+ &.cols-sm-start-10 { grid-column-start: 10; }
600
+ &.cols-sm-start-9 { grid-column-start: 9; }
601
+ &.cols-sm-start-8 { grid-column-start: 8; }
602
+ &.cols-sm-start-7 { grid-column-start: 7; }
603
+ &.cols-sm-start-6 { grid-column-start: 6; }
604
+ &.cols-sm-start-5 { grid-column-start: 5; }
605
+ &.cols-sm-start-4 { grid-column-start: 4; }
606
+ &.cols-sm-start-3 { grid-column-start: 3; }
607
+ &.cols-sm-start-2 { grid-column-start: 2; }
608
+ &.cols-sm-start-1 { grid-column-start: 1; }
609
+ &.rows-sm-12 { grid-row: auto / span 12; }
610
+ &.rows-sm-11 { grid-row: auto / span 11; }
611
+ &.rows-sm-10 { grid-row: auto / span 10; }
612
+ &.rows-sm-9 { grid-row: auto / span 9; }
613
+ &.rows-sm-8 { grid-row: auto / span 8; }
614
+ &.rows-sm-7 { grid-row: auto / span 7; }
615
+ &.rows-sm-6 { grid-row: auto / span 6; }
616
+ &.rows-sm-5 { grid-row: auto / span 5; }
617
+ &.rows-sm-4 { grid-row: auto / span 4; }
618
+ &.rows-sm-3 { grid-row: auto / span 3; }
619
+ &.rows-sm-2 { grid-row: auto / span 2; }
620
+ &.rows-sm-1 { grid-row: auto / span 1; }
621
+ &.rows-sm-start-12 { grid-row-start: 12; }
622
+ &.rows-sm-start-11 { grid-row-start: 11; }
623
+ &.rows-sm-start-10 { grid-row-start: 10; }
624
+ &.rows-sm-start-9 { grid-row-start: 9; }
625
+ &.rows-sm-start-8 { grid-row-start: 8; }
626
+ &.rows-sm-start-7 { grid-row-start: 7; }
627
+ &.rows-sm-start-6 { grid-row-start: 6; }
628
+ &.rows-sm-start-5 { grid-row-start: 5; }
629
+ &.rows-sm-start-4 { grid-row-start: 4; }
630
+ &.rows-sm-start-3 { grid-row-start: 3; }
631
+ &.rows-sm-start-2 { grid-row-start: 2; }
632
+ &.rows-sm-start-1 { grid-row-start: 1; }
633
+ }
634
+ }
635
+
636
+ @container pacem (width >= 992px) {
637
+ .pacem-grid.grid-contained > .pacem-cell {
638
+ &.cols-md-12 { grid-column: auto / span 12; }
639
+ &.cols-md-11 { grid-column: auto / span 11; }
640
+ &.cols-md-10 { grid-column: auto / span 10; }
641
+ &.cols-md-9 { grid-column: auto / span 9; }
642
+ &.cols-md-8 { grid-column: auto / span 8; }
643
+ &.cols-md-7 { grid-column: auto / span 7; }
644
+ &.cols-md-6 { grid-column: auto / span 6; }
645
+ &.cols-md-5 { grid-column: auto / span 5; }
646
+ &.cols-md-4 { grid-column: auto / span 4; }
647
+ &.cols-md-3 { grid-column: auto / span 3; }
648
+ &.cols-md-2 { grid-column: auto / span 2; }
649
+ &.cols-md-1 { grid-column: auto / span 1; }
650
+ &.cols-md-start-12 { grid-column-start: 12; }
651
+ &.cols-md-start-11 { grid-column-start: 11; }
652
+ &.cols-md-start-10 { grid-column-start: 10; }
653
+ &.cols-md-start-9 { grid-column-start: 9; }
654
+ &.cols-md-start-8 { grid-column-start: 8; }
655
+ &.cols-md-start-7 { grid-column-start: 7; }
656
+ &.cols-md-start-6 { grid-column-start: 6; }
657
+ &.cols-md-start-5 { grid-column-start: 5; }
658
+ &.cols-md-start-4 { grid-column-start: 4; }
659
+ &.cols-md-start-3 { grid-column-start: 3; }
660
+ &.cols-md-start-2 { grid-column-start: 2; }
661
+ &.cols-md-start-1 { grid-column-start: 1; }
662
+ &.rows-md-12 { grid-row: auto / span 12; }
663
+ &.rows-md-11 { grid-row: auto / span 11; }
664
+ &.rows-md-10 { grid-row: auto / span 10; }
665
+ &.rows-md-9 { grid-row: auto / span 9; }
666
+ &.rows-md-8 { grid-row: auto / span 8; }
667
+ &.rows-md-7 { grid-row: auto / span 7; }
668
+ &.rows-md-6 { grid-row: auto / span 6; }
669
+ &.rows-md-5 { grid-row: auto / span 5; }
670
+ &.rows-md-4 { grid-row: auto / span 4; }
671
+ &.rows-md-3 { grid-row: auto / span 3; }
672
+ &.rows-md-2 { grid-row: auto / span 2; }
673
+ &.rows-md-1 { grid-row: auto / span 1; }
674
+ &.rows-md-start-12 { grid-row-start: 12; }
675
+ &.rows-md-start-11 { grid-row-start: 11; }
676
+ &.rows-md-start-10 { grid-row-start: 10; }
677
+ &.rows-md-start-9 { grid-row-start: 9; }
678
+ &.rows-md-start-8 { grid-row-start: 8; }
679
+ &.rows-md-start-7 { grid-row-start: 7; }
680
+ &.rows-md-start-6 { grid-row-start: 6; }
681
+ &.rows-md-start-5 { grid-row-start: 5; }
682
+ &.rows-md-start-4 { grid-row-start: 4; }
683
+ &.rows-md-start-3 { grid-row-start: 3; }
684
+ &.rows-md-start-2 { grid-row-start: 2; }
685
+ &.rows-md-start-1 { grid-row-start: 1; }
686
+ }
687
+ }
688
+
689
+ @container pacem (width >= 1200px) {
690
+ .pacem-grid.grid-contained > .pacem-cell {
691
+ &.cols-lg-12 { grid-column: auto / span 12; }
692
+ &.cols-lg-11 { grid-column: auto / span 11; }
693
+ &.cols-lg-10 { grid-column: auto / span 10; }
694
+ &.cols-lg-9 { grid-column: auto / span 9; }
695
+ &.cols-lg-8 { grid-column: auto / span 8; }
696
+ &.cols-lg-7 { grid-column: auto / span 7; }
697
+ &.cols-lg-6 { grid-column: auto / span 6; }
698
+ &.cols-lg-5 { grid-column: auto / span 5; }
699
+ &.cols-lg-4 { grid-column: auto / span 4; }
700
+ &.cols-lg-3 { grid-column: auto / span 3; }
701
+ &.cols-lg-2 { grid-column: auto / span 2; }
702
+ &.cols-lg-1 { grid-column: auto / span 1; }
703
+ &.cols-lg-start-12 { grid-column-start: 12; }
704
+ &.cols-lg-start-11 { grid-column-start: 11; }
705
+ &.cols-lg-start-10 { grid-column-start: 10; }
706
+ &.cols-lg-start-9 { grid-column-start: 9; }
707
+ &.cols-lg-start-8 { grid-column-start: 8; }
708
+ &.cols-lg-start-7 { grid-column-start: 7; }
709
+ &.cols-lg-start-6 { grid-column-start: 6; }
710
+ &.cols-lg-start-5 { grid-column-start: 5; }
711
+ &.cols-lg-start-4 { grid-column-start: 4; }
712
+ &.cols-lg-start-3 { grid-column-start: 3; }
713
+ &.cols-lg-start-2 { grid-column-start: 2; }
714
+ &.cols-lg-start-1 { grid-column-start: 1; }
715
+ &.rows-lg-12 { grid-row: auto / span 12; }
716
+ &.rows-lg-11 { grid-row: auto / span 11; }
717
+ &.rows-lg-10 { grid-row: auto / span 10; }
718
+ &.rows-lg-9 { grid-row: auto / span 9; }
719
+ &.rows-lg-8 { grid-row: auto / span 8; }
720
+ &.rows-lg-7 { grid-row: auto / span 7; }
721
+ &.rows-lg-6 { grid-row: auto / span 6; }
722
+ &.rows-lg-5 { grid-row: auto / span 5; }
723
+ &.rows-lg-4 { grid-row: auto / span 4; }
724
+ &.rows-lg-3 { grid-row: auto / span 3; }
725
+ &.rows-lg-2 { grid-row: auto / span 2; }
726
+ &.rows-lg-1 { grid-row: auto / span 1; }
727
+ &.rows-lg-start-12 { grid-row-start: 12; }
728
+ &.rows-lg-start-11 { grid-row-start: 11; }
729
+ &.rows-lg-start-10 { grid-row-start: 10; }
730
+ &.rows-lg-start-9 { grid-row-start: 9; }
731
+ &.rows-lg-start-8 { grid-row-start: 8; }
732
+ &.rows-lg-start-7 { grid-row-start: 7; }
733
+ &.rows-lg-start-6 { grid-row-start: 6; }
734
+ &.rows-lg-start-5 { grid-row-start: 5; }
735
+ &.rows-lg-start-4 { grid-row-start: 4; }
736
+ &.rows-lg-start-3 { grid-row-start: 3; }
737
+ &.rows-lg-start-2 { grid-row-start: 2; }
738
+ &.rows-lg-start-1 { grid-row-start: 1; }
739
+ }
740
+ }
741
+
742
+ @container pacem (width >= 1824px) {
743
+ .pacem-grid.grid-contained > .pacem-cell {
744
+ &.cols-xl-12 { grid-column: auto / span 12; }
745
+ &.cols-xl-11 { grid-column: auto / span 11; }
746
+ &.cols-xl-10 { grid-column: auto / span 10; }
747
+ &.cols-xl-9 { grid-column: auto / span 9; }
748
+ &.cols-xl-8 { grid-column: auto / span 8; }
749
+ &.cols-xl-7 { grid-column: auto / span 7; }
750
+ &.cols-xl-6 { grid-column: auto / span 6; }
751
+ &.cols-xl-5 { grid-column: auto / span 5; }
752
+ &.cols-xl-4 { grid-column: auto / span 4; }
753
+ &.cols-xl-3 { grid-column: auto / span 3; }
754
+ &.cols-xl-2 { grid-column: auto / span 2; }
755
+ &.cols-xl-1 { grid-column: auto / span 1; }
756
+ &.cols-xl-start-12 { grid-column-start: 12; }
757
+ &.cols-xl-start-11 { grid-column-start: 11; }
758
+ &.cols-xl-start-10 { grid-column-start: 10; }
759
+ &.cols-xl-start-9 { grid-column-start: 9; }
760
+ &.cols-xl-start-8 { grid-column-start: 8; }
761
+ &.cols-xl-start-7 { grid-column-start: 7; }
762
+ &.cols-xl-start-6 { grid-column-start: 6; }
763
+ &.cols-xl-start-5 { grid-column-start: 5; }
764
+ &.cols-xl-start-4 { grid-column-start: 4; }
765
+ &.cols-xl-start-3 { grid-column-start: 3; }
766
+ &.cols-xl-start-2 { grid-column-start: 2; }
767
+ &.cols-xl-start-1 { grid-column-start: 1; }
768
+ &.rows-xl-12 { grid-row: auto / span 12; }
769
+ &.rows-xl-11 { grid-row: auto / span 11; }
770
+ &.rows-xl-10 { grid-row: auto / span 10; }
771
+ &.rows-xl-9 { grid-row: auto / span 9; }
772
+ &.rows-xl-8 { grid-row: auto / span 8; }
773
+ &.rows-xl-7 { grid-row: auto / span 7; }
774
+ &.rows-xl-6 { grid-row: auto / span 6; }
775
+ &.rows-xl-5 { grid-row: auto / span 5; }
776
+ &.rows-xl-4 { grid-row: auto / span 4; }
777
+ &.rows-xl-3 { grid-row: auto / span 3; }
778
+ &.rows-xl-2 { grid-row: auto / span 2; }
779
+ &.rows-xl-1 { grid-row: auto / span 1; }
780
+ &.rows-xl-start-12 { grid-row-start: 12; }
781
+ &.rows-xl-start-11 { grid-row-start: 11; }
782
+ &.rows-xl-start-10 { grid-row-start: 10; }
783
+ &.rows-xl-start-9 { grid-row-start: 9; }
784
+ &.rows-xl-start-8 { grid-row-start: 8; }
785
+ &.rows-xl-start-7 { grid-row-start: 7; }
786
+ &.rows-xl-start-6 { grid-row-start: 6; }
787
+ &.rows-xl-start-5 { grid-row-start: 5; }
788
+ &.rows-xl-start-4 { grid-row-start: 4; }
789
+ &.rows-xl-start-3 { grid-row-start: 3; }
790
+ &.rows-xl-start-2 { grid-row-start: 2; }
791
+ &.rows-xl-start-1 { grid-row-start: 1; }
792
+ }
793
+ }
794
+
795
+ @container pacem (width >= 1920px) {
796
+ .pacem-grid.grid-contained > .pacem-cell {
797
+ &.cols-hd-12 { grid-column: auto / span 12; }
798
+ &.cols-hd-11 { grid-column: auto / span 11; }
799
+ &.cols-hd-10 { grid-column: auto / span 10; }
800
+ &.cols-hd-9 { grid-column: auto / span 9; }
801
+ &.cols-hd-8 { grid-column: auto / span 8; }
802
+ &.cols-hd-7 { grid-column: auto / span 7; }
803
+ &.cols-hd-6 { grid-column: auto / span 6; }
804
+ &.cols-hd-5 { grid-column: auto / span 5; }
805
+ &.cols-hd-4 { grid-column: auto / span 4; }
806
+ &.cols-hd-3 { grid-column: auto / span 3; }
807
+ &.cols-hd-2 { grid-column: auto / span 2; }
808
+ &.cols-hd-1 { grid-column: auto / span 1; }
809
+ &.cols-hd-start-12 { grid-column-start: 12; }
810
+ &.cols-hd-start-11 { grid-column-start: 11; }
811
+ &.cols-hd-start-10 { grid-column-start: 10; }
812
+ &.cols-hd-start-9 { grid-column-start: 9; }
813
+ &.cols-hd-start-8 { grid-column-start: 8; }
814
+ &.cols-hd-start-7 { grid-column-start: 7; }
815
+ &.cols-hd-start-6 { grid-column-start: 6; }
816
+ &.cols-hd-start-5 { grid-column-start: 5; }
817
+ &.cols-hd-start-4 { grid-column-start: 4; }
818
+ &.cols-hd-start-3 { grid-column-start: 3; }
819
+ &.cols-hd-start-2 { grid-column-start: 2; }
820
+ &.cols-hd-start-1 { grid-column-start: 1; }
821
+ &.rows-hd-12 { grid-row: auto / span 12; }
822
+ &.rows-hd-11 { grid-row: auto / span 11; }
823
+ &.rows-hd-10 { grid-row: auto / span 10; }
824
+ &.rows-hd-9 { grid-row: auto / span 9; }
825
+ &.rows-hd-8 { grid-row: auto / span 8; }
826
+ &.rows-hd-7 { grid-row: auto / span 7; }
827
+ &.rows-hd-6 { grid-row: auto / span 6; }
828
+ &.rows-hd-5 { grid-row: auto / span 5; }
829
+ &.rows-hd-4 { grid-row: auto / span 4; }
830
+ &.rows-hd-3 { grid-row: auto / span 3; }
831
+ &.rows-hd-2 { grid-row: auto / span 2; }
832
+ &.rows-hd-1 { grid-row: auto / span 1; }
833
+ &.rows-hd-start-12 { grid-row-start: 12; }
834
+ &.rows-hd-start-11 { grid-row-start: 11; }
835
+ &.rows-hd-start-10 { grid-row-start: 10; }
836
+ &.rows-hd-start-9 { grid-row-start: 9; }
837
+ &.rows-hd-start-8 { grid-row-start: 8; }
838
+ &.rows-hd-start-7 { grid-row-start: 7; }
839
+ &.rows-hd-start-6 { grid-row-start: 6; }
840
+ &.rows-hd-start-5 { grid-row-start: 5; }
841
+ &.rows-hd-start-4 { grid-row-start: 4; }
842
+ &.rows-hd-start-3 { grid-row-start: 3; }
843
+ &.rows-hd-start-2 { grid-row-start: 2; }
844
+ &.rows-hd-start-1 { grid-row-start: 1; }
845
+ }
846
+ }
847
+
848
+ @container pacem (width >= 2048px) {
849
+ .pacem-grid.grid-contained > .pacem-cell {
850
+ &.cols-2k-12 { grid-column: auto / span 12; }
851
+ &.cols-2k-11 { grid-column: auto / span 11; }
852
+ &.cols-2k-10 { grid-column: auto / span 10; }
853
+ &.cols-2k-9 { grid-column: auto / span 9; }
854
+ &.cols-2k-8 { grid-column: auto / span 8; }
855
+ &.cols-2k-7 { grid-column: auto / span 7; }
856
+ &.cols-2k-6 { grid-column: auto / span 6; }
857
+ &.cols-2k-5 { grid-column: auto / span 5; }
858
+ &.cols-2k-4 { grid-column: auto / span 4; }
859
+ &.cols-2k-3 { grid-column: auto / span 3; }
860
+ &.cols-2k-2 { grid-column: auto / span 2; }
861
+ &.cols-2k-1 { grid-column: auto / span 1; }
862
+ &.cols-2k-start-12 { grid-column-start: 12; }
863
+ &.cols-2k-start-11 { grid-column-start: 11; }
864
+ &.cols-2k-start-10 { grid-column-start: 10; }
865
+ &.cols-2k-start-9 { grid-column-start: 9; }
866
+ &.cols-2k-start-8 { grid-column-start: 8; }
867
+ &.cols-2k-start-7 { grid-column-start: 7; }
868
+ &.cols-2k-start-6 { grid-column-start: 6; }
869
+ &.cols-2k-start-5 { grid-column-start: 5; }
870
+ &.cols-2k-start-4 { grid-column-start: 4; }
871
+ &.cols-2k-start-3 { grid-column-start: 3; }
872
+ &.cols-2k-start-2 { grid-column-start: 2; }
873
+ &.cols-2k-start-1 { grid-column-start: 1; }
874
+ &.rows-2k-12 { grid-row: auto / span 12; }
875
+ &.rows-2k-11 { grid-row: auto / span 11; }
876
+ &.rows-2k-10 { grid-row: auto / span 10; }
877
+ &.rows-2k-9 { grid-row: auto / span 9; }
878
+ &.rows-2k-8 { grid-row: auto / span 8; }
879
+ &.rows-2k-7 { grid-row: auto / span 7; }
880
+ &.rows-2k-6 { grid-row: auto / span 6; }
881
+ &.rows-2k-5 { grid-row: auto / span 5; }
882
+ &.rows-2k-4 { grid-row: auto / span 4; }
883
+ &.rows-2k-3 { grid-row: auto / span 3; }
884
+ &.rows-2k-2 { grid-row: auto / span 2; }
885
+ &.rows-2k-1 { grid-row: auto / span 1; }
886
+ &.rows-2k-start-12 { grid-row-start: 12; }
887
+ &.rows-2k-start-11 { grid-row-start: 11; }
888
+ &.rows-2k-start-10 { grid-row-start: 10; }
889
+ &.rows-2k-start-9 { grid-row-start: 9; }
890
+ &.rows-2k-start-8 { grid-row-start: 8; }
891
+ &.rows-2k-start-7 { grid-row-start: 7; }
892
+ &.rows-2k-start-6 { grid-row-start: 6; }
893
+ &.rows-2k-start-5 { grid-row-start: 5; }
894
+ &.rows-2k-start-4 { grid-row-start: 4; }
895
+ &.rows-2k-start-3 { grid-row-start: 3; }
896
+ &.rows-2k-start-2 { grid-row-start: 2; }
897
+ &.rows-2k-start-1 { grid-row-start: 1; }
898
+ }
899
+ }
900
+
901
+ @container pacem (width >= 3840px) {
902
+ .pacem-grid.grid-contained > .pacem-cell {
903
+ &.cols-4k-12 { grid-column: auto / span 12; }
904
+ &.cols-4k-11 { grid-column: auto / span 11; }
905
+ &.cols-4k-10 { grid-column: auto / span 10; }
906
+ &.cols-4k-9 { grid-column: auto / span 9; }
907
+ &.cols-4k-8 { grid-column: auto / span 8; }
908
+ &.cols-4k-7 { grid-column: auto / span 7; }
909
+ &.cols-4k-6 { grid-column: auto / span 6; }
910
+ &.cols-4k-5 { grid-column: auto / span 5; }
911
+ &.cols-4k-4 { grid-column: auto / span 4; }
912
+ &.cols-4k-3 { grid-column: auto / span 3; }
913
+ &.cols-4k-2 { grid-column: auto / span 2; }
914
+ &.cols-4k-1 { grid-column: auto / span 1; }
915
+ &.cols-4k-start-12 { grid-column-start: 12; }
916
+ &.cols-4k-start-11 { grid-column-start: 11; }
917
+ &.cols-4k-start-10 { grid-column-start: 10; }
918
+ &.cols-4k-start-9 { grid-column-start: 9; }
919
+ &.cols-4k-start-8 { grid-column-start: 8; }
920
+ &.cols-4k-start-7 { grid-column-start: 7; }
921
+ &.cols-4k-start-6 { grid-column-start: 6; }
922
+ &.cols-4k-start-5 { grid-column-start: 5; }
923
+ &.cols-4k-start-4 { grid-column-start: 4; }
924
+ &.cols-4k-start-3 { grid-column-start: 3; }
925
+ &.cols-4k-start-2 { grid-column-start: 2; }
926
+ &.cols-4k-start-1 { grid-column-start: 1; }
927
+ &.rows-4k-12 { grid-row: auto / span 12; }
928
+ &.rows-4k-11 { grid-row: auto / span 11; }
929
+ &.rows-4k-10 { grid-row: auto / span 10; }
930
+ &.rows-4k-9 { grid-row: auto / span 9; }
931
+ &.rows-4k-8 { grid-row: auto / span 8; }
932
+ &.rows-4k-7 { grid-row: auto / span 7; }
933
+ &.rows-4k-6 { grid-row: auto / span 6; }
934
+ &.rows-4k-5 { grid-row: auto / span 5; }
935
+ &.rows-4k-4 { grid-row: auto / span 4; }
936
+ &.rows-4k-3 { grid-row: auto / span 3; }
937
+ &.rows-4k-2 { grid-row: auto / span 2; }
938
+ &.rows-4k-1 { grid-row: auto / span 1; }
939
+ &.rows-4k-start-12 { grid-row-start: 12; }
940
+ &.rows-4k-start-11 { grid-row-start: 11; }
941
+ &.rows-4k-start-10 { grid-row-start: 10; }
942
+ &.rows-4k-start-9 { grid-row-start: 9; }
943
+ &.rows-4k-start-8 { grid-row-start: 8; }
944
+ &.rows-4k-start-7 { grid-row-start: 7; }
945
+ &.rows-4k-start-6 { grid-row-start: 6; }
946
+ &.rows-4k-start-5 { grid-row-start: 5; }
947
+ &.rows-4k-start-4 { grid-row-start: 4; }
948
+ &.rows-4k-start-3 { grid-row-start: 3; }
949
+ &.rows-4k-start-2 { grid-row-start: 2; }
950
+ &.rows-4k-start-1 { grid-row-start: 1; }
951
+ }
952
+ }