@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,1988 @@
1
+ /* Generated by theme/css/tools/generate.ts: do not edit, edit the generator instead. */
2
+ .pacem-margin {
3
+ &.margin-6 { margin: var(--pacem-size-6); }
4
+ &:is(.margin-y-6, .margin-top-6) { margin-top: var(--pacem-size-6); }
5
+ &:is(.margin-y-6, .margin-bottom-6) { margin-bottom: var(--pacem-size-6); }
6
+ &:is(.margin-x-6, .margin-left-6) { margin-left: var(--pacem-size-6); }
7
+ &:is(.margin-x-6, .margin-right-6) { margin-right: var(--pacem-size-6); }
8
+ &.margin-5 { margin: var(--pacem-size-5); }
9
+ &:is(.margin-y-5, .margin-top-5) { margin-top: var(--pacem-size-5); }
10
+ &:is(.margin-y-5, .margin-bottom-5) { margin-bottom: var(--pacem-size-5); }
11
+ &:is(.margin-x-5, .margin-left-5) { margin-left: var(--pacem-size-5); }
12
+ &:is(.margin-x-5, .margin-right-5) { margin-right: var(--pacem-size-5); }
13
+ &.margin-4 { margin: var(--pacem-size-4); }
14
+ &:is(.margin-y-4, .margin-top-4) { margin-top: var(--pacem-size-4); }
15
+ &:is(.margin-y-4, .margin-bottom-4) { margin-bottom: var(--pacem-size-4); }
16
+ &:is(.margin-x-4, .margin-left-4) { margin-left: var(--pacem-size-4); }
17
+ &:is(.margin-x-4, .margin-right-4) { margin-right: var(--pacem-size-4); }
18
+ &.margin-3 { margin: var(--pacem-size-3); }
19
+ &:is(.margin-y-3, .margin-top-3) { margin-top: var(--pacem-size-3); }
20
+ &:is(.margin-y-3, .margin-bottom-3) { margin-bottom: var(--pacem-size-3); }
21
+ &:is(.margin-x-3, .margin-left-3) { margin-left: var(--pacem-size-3); }
22
+ &:is(.margin-x-3, .margin-right-3) { margin-right: var(--pacem-size-3); }
23
+ &.margin-2 { margin: var(--pacem-size-2); }
24
+ &:is(.margin-y-2, .margin-top-2) { margin-top: var(--pacem-size-2); }
25
+ &:is(.margin-y-2, .margin-bottom-2) { margin-bottom: var(--pacem-size-2); }
26
+ &:is(.margin-x-2, .margin-left-2) { margin-left: var(--pacem-size-2); }
27
+ &:is(.margin-x-2, .margin-right-2) { margin-right: var(--pacem-size-2); }
28
+ &.margin-1 { margin: var(--pacem-size-1); }
29
+ &:is(.margin-y-1, .margin-top-1) { margin-top: var(--pacem-size-1); }
30
+ &:is(.margin-y-1, .margin-bottom-1) { margin-bottom: var(--pacem-size-1); }
31
+ &:is(.margin-x-1, .margin-left-1) { margin-left: var(--pacem-size-1); }
32
+ &:is(.margin-x-1, .margin-right-1) { margin-right: var(--pacem-size-1); }
33
+ &.margin-0 { margin: 0; }
34
+ &:is(.margin-y-0, .margin-top-0) { margin-top: 0; }
35
+ &:is(.margin-y-0, .margin-bottom-0) { margin-bottom: 0; }
36
+ &:is(.margin-x-0, .margin-left-0) { margin-left: 0; }
37
+ &:is(.margin-x-0, .margin-right-0) { margin-right: 0; }
38
+ &.margin--12 { margin: 12px; }
39
+ &:is(.margin-y--12, .margin-top--12) { margin-top: 12px; }
40
+ &:is(.margin-y--12, .margin-bottom--12) { margin-bottom: 12px; }
41
+ &:is(.margin-x--12, .margin-left--12) { margin-left: 12px; }
42
+ &:is(.margin-x--12, .margin-right--12) { margin-right: 12px; }
43
+ &.margin--11 { margin: 11px; }
44
+ &:is(.margin-y--11, .margin-top--11) { margin-top: 11px; }
45
+ &:is(.margin-y--11, .margin-bottom--11) { margin-bottom: 11px; }
46
+ &:is(.margin-x--11, .margin-left--11) { margin-left: 11px; }
47
+ &:is(.margin-x--11, .margin-right--11) { margin-right: 11px; }
48
+ &.margin--10 { margin: 10px; }
49
+ &:is(.margin-y--10, .margin-top--10) { margin-top: 10px; }
50
+ &:is(.margin-y--10, .margin-bottom--10) { margin-bottom: 10px; }
51
+ &:is(.margin-x--10, .margin-left--10) { margin-left: 10px; }
52
+ &:is(.margin-x--10, .margin-right--10) { margin-right: 10px; }
53
+ &.margin--9 { margin: 9px; }
54
+ &:is(.margin-y--9, .margin-top--9) { margin-top: 9px; }
55
+ &:is(.margin-y--9, .margin-bottom--9) { margin-bottom: 9px; }
56
+ &:is(.margin-x--9, .margin-left--9) { margin-left: 9px; }
57
+ &:is(.margin-x--9, .margin-right--9) { margin-right: 9px; }
58
+ &.margin--8 { margin: 8px; }
59
+ &:is(.margin-y--8, .margin-top--8) { margin-top: 8px; }
60
+ &:is(.margin-y--8, .margin-bottom--8) { margin-bottom: 8px; }
61
+ &:is(.margin-x--8, .margin-left--8) { margin-left: 8px; }
62
+ &:is(.margin-x--8, .margin-right--8) { margin-right: 8px; }
63
+ &.margin--7 { margin: 7px; }
64
+ &:is(.margin-y--7, .margin-top--7) { margin-top: 7px; }
65
+ &:is(.margin-y--7, .margin-bottom--7) { margin-bottom: 7px; }
66
+ &:is(.margin-x--7, .margin-left--7) { margin-left: 7px; }
67
+ &:is(.margin-x--7, .margin-right--7) { margin-right: 7px; }
68
+ &.margin--6 { margin: 6px; }
69
+ &:is(.margin-y--6, .margin-top--6) { margin-top: 6px; }
70
+ &:is(.margin-y--6, .margin-bottom--6) { margin-bottom: 6px; }
71
+ &:is(.margin-x--6, .margin-left--6) { margin-left: 6px; }
72
+ &:is(.margin-x--6, .margin-right--6) { margin-right: 6px; }
73
+ &.margin--5 { margin: 5px; }
74
+ &:is(.margin-y--5, .margin-top--5) { margin-top: 5px; }
75
+ &:is(.margin-y--5, .margin-bottom--5) { margin-bottom: 5px; }
76
+ &:is(.margin-x--5, .margin-left--5) { margin-left: 5px; }
77
+ &:is(.margin-x--5, .margin-right--5) { margin-right: 5px; }
78
+ &.margin--4 { margin: 4px; }
79
+ &:is(.margin-y--4, .margin-top--4) { margin-top: 4px; }
80
+ &:is(.margin-y--4, .margin-bottom--4) { margin-bottom: 4px; }
81
+ &:is(.margin-x--4, .margin-left--4) { margin-left: 4px; }
82
+ &:is(.margin-x--4, .margin-right--4) { margin-right: 4px; }
83
+ &.margin--3 { margin: 3px; }
84
+ &:is(.margin-y--3, .margin-top--3) { margin-top: 3px; }
85
+ &:is(.margin-y--3, .margin-bottom--3) { margin-bottom: 3px; }
86
+ &:is(.margin-x--3, .margin-left--3) { margin-left: 3px; }
87
+ &:is(.margin-x--3, .margin-right--3) { margin-right: 3px; }
88
+ &.margin--2 { margin: 2px; }
89
+ &:is(.margin-y--2, .margin-top--2) { margin-top: 2px; }
90
+ &:is(.margin-y--2, .margin-bottom--2) { margin-bottom: 2px; }
91
+ &:is(.margin-x--2, .margin-left--2) { margin-left: 2px; }
92
+ &:is(.margin-x--2, .margin-right--2) { margin-right: 2px; }
93
+ &.margin--1 { margin: 1px; }
94
+ &:is(.margin-y--1, .margin-top--1) { margin-top: 1px; }
95
+ &:is(.margin-y--1, .margin-bottom--1) { margin-bottom: 1px; }
96
+ &:is(.margin-x--1, .margin-left--1) { margin-left: 1px; }
97
+ &:is(.margin-x--1, .margin-right--1) { margin-right: 1px; }
98
+ &.margin-auto { margin: auto; }
99
+ }
100
+ .pacem-pad {
101
+ &.pad-6 { padding: var(--pacem-size-6); }
102
+ &:is(.pad-y-6, .pad-top-6) { padding-top: var(--pacem-size-6); }
103
+ &:is(.pad-y-6, .pad-bottom-6) { padding-bottom: var(--pacem-size-6); }
104
+ &:is(.pad-x-6, .pad-left-6) { padding-left: var(--pacem-size-6); }
105
+ &:is(.pad-x-6, .pad-right-6) { padding-right: var(--pacem-size-6); }
106
+ &.pad-5 { padding: var(--pacem-size-5); }
107
+ &:is(.pad-y-5, .pad-top-5) { padding-top: var(--pacem-size-5); }
108
+ &:is(.pad-y-5, .pad-bottom-5) { padding-bottom: var(--pacem-size-5); }
109
+ &:is(.pad-x-5, .pad-left-5) { padding-left: var(--pacem-size-5); }
110
+ &:is(.pad-x-5, .pad-right-5) { padding-right: var(--pacem-size-5); }
111
+ &.pad-4 { padding: var(--pacem-size-4); }
112
+ &:is(.pad-y-4, .pad-top-4) { padding-top: var(--pacem-size-4); }
113
+ &:is(.pad-y-4, .pad-bottom-4) { padding-bottom: var(--pacem-size-4); }
114
+ &:is(.pad-x-4, .pad-left-4) { padding-left: var(--pacem-size-4); }
115
+ &:is(.pad-x-4, .pad-right-4) { padding-right: var(--pacem-size-4); }
116
+ &.pad-3 { padding: var(--pacem-size-3); }
117
+ &:is(.pad-y-3, .pad-top-3) { padding-top: var(--pacem-size-3); }
118
+ &:is(.pad-y-3, .pad-bottom-3) { padding-bottom: var(--pacem-size-3); }
119
+ &:is(.pad-x-3, .pad-left-3) { padding-left: var(--pacem-size-3); }
120
+ &:is(.pad-x-3, .pad-right-3) { padding-right: var(--pacem-size-3); }
121
+ &.pad-2 { padding: var(--pacem-size-2); }
122
+ &:is(.pad-y-2, .pad-top-2) { padding-top: var(--pacem-size-2); }
123
+ &:is(.pad-y-2, .pad-bottom-2) { padding-bottom: var(--pacem-size-2); }
124
+ &:is(.pad-x-2, .pad-left-2) { padding-left: var(--pacem-size-2); }
125
+ &:is(.pad-x-2, .pad-right-2) { padding-right: var(--pacem-size-2); }
126
+ &.pad-1 { padding: var(--pacem-size-1); }
127
+ &:is(.pad-y-1, .pad-top-1) { padding-top: var(--pacem-size-1); }
128
+ &:is(.pad-y-1, .pad-bottom-1) { padding-bottom: var(--pacem-size-1); }
129
+ &:is(.pad-x-1, .pad-left-1) { padding-left: var(--pacem-size-1); }
130
+ &:is(.pad-x-1, .pad-right-1) { padding-right: var(--pacem-size-1); }
131
+ &.pad-0 { padding: 0; }
132
+ &:is(.pad-y-0, .pad-top-0) { padding-top: 0; }
133
+ &:is(.pad-y-0, .pad-bottom-0) { padding-bottom: 0; }
134
+ &:is(.pad-x-0, .pad-left-0) { padding-left: 0; }
135
+ &:is(.pad-x-0, .pad-right-0) { padding-right: 0; }
136
+ &.pad--12 { padding: 12px; }
137
+ &:is(.pad-y--12, .pad-top--12) { padding-top: 12px; }
138
+ &:is(.pad-y--12, .pad-bottom--12) { padding-bottom: 12px; }
139
+ &:is(.pad-x--12, .pad-left--12) { padding-left: 12px; }
140
+ &:is(.pad-x--12, .pad-right--12) { padding-right: 12px; }
141
+ &.pad--11 { padding: 11px; }
142
+ &:is(.pad-y--11, .pad-top--11) { padding-top: 11px; }
143
+ &:is(.pad-y--11, .pad-bottom--11) { padding-bottom: 11px; }
144
+ &:is(.pad-x--11, .pad-left--11) { padding-left: 11px; }
145
+ &:is(.pad-x--11, .pad-right--11) { padding-right: 11px; }
146
+ &.pad--10 { padding: 10px; }
147
+ &:is(.pad-y--10, .pad-top--10) { padding-top: 10px; }
148
+ &:is(.pad-y--10, .pad-bottom--10) { padding-bottom: 10px; }
149
+ &:is(.pad-x--10, .pad-left--10) { padding-left: 10px; }
150
+ &:is(.pad-x--10, .pad-right--10) { padding-right: 10px; }
151
+ &.pad--9 { padding: 9px; }
152
+ &:is(.pad-y--9, .pad-top--9) { padding-top: 9px; }
153
+ &:is(.pad-y--9, .pad-bottom--9) { padding-bottom: 9px; }
154
+ &:is(.pad-x--9, .pad-left--9) { padding-left: 9px; }
155
+ &:is(.pad-x--9, .pad-right--9) { padding-right: 9px; }
156
+ &.pad--8 { padding: 8px; }
157
+ &:is(.pad-y--8, .pad-top--8) { padding-top: 8px; }
158
+ &:is(.pad-y--8, .pad-bottom--8) { padding-bottom: 8px; }
159
+ &:is(.pad-x--8, .pad-left--8) { padding-left: 8px; }
160
+ &:is(.pad-x--8, .pad-right--8) { padding-right: 8px; }
161
+ &.pad--7 { padding: 7px; }
162
+ &:is(.pad-y--7, .pad-top--7) { padding-top: 7px; }
163
+ &:is(.pad-y--7, .pad-bottom--7) { padding-bottom: 7px; }
164
+ &:is(.pad-x--7, .pad-left--7) { padding-left: 7px; }
165
+ &:is(.pad-x--7, .pad-right--7) { padding-right: 7px; }
166
+ &.pad--6 { padding: 6px; }
167
+ &:is(.pad-y--6, .pad-top--6) { padding-top: 6px; }
168
+ &:is(.pad-y--6, .pad-bottom--6) { padding-bottom: 6px; }
169
+ &:is(.pad-x--6, .pad-left--6) { padding-left: 6px; }
170
+ &:is(.pad-x--6, .pad-right--6) { padding-right: 6px; }
171
+ &.pad--5 { padding: 5px; }
172
+ &:is(.pad-y--5, .pad-top--5) { padding-top: 5px; }
173
+ &:is(.pad-y--5, .pad-bottom--5) { padding-bottom: 5px; }
174
+ &:is(.pad-x--5, .pad-left--5) { padding-left: 5px; }
175
+ &:is(.pad-x--5, .pad-right--5) { padding-right: 5px; }
176
+ &.pad--4 { padding: 4px; }
177
+ &:is(.pad-y--4, .pad-top--4) { padding-top: 4px; }
178
+ &:is(.pad-y--4, .pad-bottom--4) { padding-bottom: 4px; }
179
+ &:is(.pad-x--4, .pad-left--4) { padding-left: 4px; }
180
+ &:is(.pad-x--4, .pad-right--4) { padding-right: 4px; }
181
+ &.pad--3 { padding: 3px; }
182
+ &:is(.pad-y--3, .pad-top--3) { padding-top: 3px; }
183
+ &:is(.pad-y--3, .pad-bottom--3) { padding-bottom: 3px; }
184
+ &:is(.pad-x--3, .pad-left--3) { padding-left: 3px; }
185
+ &:is(.pad-x--3, .pad-right--3) { padding-right: 3px; }
186
+ &.pad--2 { padding: 2px; }
187
+ &:is(.pad-y--2, .pad-top--2) { padding-top: 2px; }
188
+ &:is(.pad-y--2, .pad-bottom--2) { padding-bottom: 2px; }
189
+ &:is(.pad-x--2, .pad-left--2) { padding-left: 2px; }
190
+ &:is(.pad-x--2, .pad-right--2) { padding-right: 2px; }
191
+ &.pad--1 { padding: 1px; }
192
+ &:is(.pad-y--1, .pad-top--1) { padding-top: 1px; }
193
+ &:is(.pad-y--1, .pad-bottom--1) { padding-bottom: 1px; }
194
+ &:is(.pad-x--1, .pad-left--1) { padding-left: 1px; }
195
+ &:is(.pad-x--1, .pad-right--1) { padding-right: 1px; }
196
+ &.pad-auto { padding: auto; }
197
+ }
198
+
199
+ @media (--pacem-below-sm) {
200
+ .pacem-margin {
201
+ &.margin-xs-6 { margin: var(--pacem-size-6); }
202
+ &:is(.margin-y-xs-6, .margin-top-xs-6) { margin-top: var(--pacem-size-6); }
203
+ &:is(.margin-y-xs-6, .margin-bottom-xs-6) { margin-bottom: var(--pacem-size-6); }
204
+ &:is(.margin-x-xs-6, .margin-left-xs-6) { margin-left: var(--pacem-size-6); }
205
+ &:is(.margin-x-xs-6, .margin-right-xs-6) { margin-right: var(--pacem-size-6); }
206
+ &.margin-xs-5 { margin: var(--pacem-size-5); }
207
+ &:is(.margin-y-xs-5, .margin-top-xs-5) { margin-top: var(--pacem-size-5); }
208
+ &:is(.margin-y-xs-5, .margin-bottom-xs-5) { margin-bottom: var(--pacem-size-5); }
209
+ &:is(.margin-x-xs-5, .margin-left-xs-5) { margin-left: var(--pacem-size-5); }
210
+ &:is(.margin-x-xs-5, .margin-right-xs-5) { margin-right: var(--pacem-size-5); }
211
+ &.margin-xs-4 { margin: var(--pacem-size-4); }
212
+ &:is(.margin-y-xs-4, .margin-top-xs-4) { margin-top: var(--pacem-size-4); }
213
+ &:is(.margin-y-xs-4, .margin-bottom-xs-4) { margin-bottom: var(--pacem-size-4); }
214
+ &:is(.margin-x-xs-4, .margin-left-xs-4) { margin-left: var(--pacem-size-4); }
215
+ &:is(.margin-x-xs-4, .margin-right-xs-4) { margin-right: var(--pacem-size-4); }
216
+ &.margin-xs-3 { margin: var(--pacem-size-3); }
217
+ &:is(.margin-y-xs-3, .margin-top-xs-3) { margin-top: var(--pacem-size-3); }
218
+ &:is(.margin-y-xs-3, .margin-bottom-xs-3) { margin-bottom: var(--pacem-size-3); }
219
+ &:is(.margin-x-xs-3, .margin-left-xs-3) { margin-left: var(--pacem-size-3); }
220
+ &:is(.margin-x-xs-3, .margin-right-xs-3) { margin-right: var(--pacem-size-3); }
221
+ &.margin-xs-2 { margin: var(--pacem-size-2); }
222
+ &:is(.margin-y-xs-2, .margin-top-xs-2) { margin-top: var(--pacem-size-2); }
223
+ &:is(.margin-y-xs-2, .margin-bottom-xs-2) { margin-bottom: var(--pacem-size-2); }
224
+ &:is(.margin-x-xs-2, .margin-left-xs-2) { margin-left: var(--pacem-size-2); }
225
+ &:is(.margin-x-xs-2, .margin-right-xs-2) { margin-right: var(--pacem-size-2); }
226
+ &.margin-xs-1 { margin: var(--pacem-size-1); }
227
+ &:is(.margin-y-xs-1, .margin-top-xs-1) { margin-top: var(--pacem-size-1); }
228
+ &:is(.margin-y-xs-1, .margin-bottom-xs-1) { margin-bottom: var(--pacem-size-1); }
229
+ &:is(.margin-x-xs-1, .margin-left-xs-1) { margin-left: var(--pacem-size-1); }
230
+ &:is(.margin-x-xs-1, .margin-right-xs-1) { margin-right: var(--pacem-size-1); }
231
+ &.margin-xs-0 { margin: 0; }
232
+ &:is(.margin-y-xs-0, .margin-top-xs-0) { margin-top: 0; }
233
+ &:is(.margin-y-xs-0, .margin-bottom-xs-0) { margin-bottom: 0; }
234
+ &:is(.margin-x-xs-0, .margin-left-xs-0) { margin-left: 0; }
235
+ &:is(.margin-x-xs-0, .margin-right-xs-0) { margin-right: 0; }
236
+ &.margin-xs--12 { margin: 12px; }
237
+ &:is(.margin-y-xs--12, .margin-top-xs--12) { margin-top: 12px; }
238
+ &:is(.margin-y-xs--12, .margin-bottom-xs--12) { margin-bottom: 12px; }
239
+ &:is(.margin-x-xs--12, .margin-left-xs--12) { margin-left: 12px; }
240
+ &:is(.margin-x-xs--12, .margin-right-xs--12) { margin-right: 12px; }
241
+ &.margin-xs--11 { margin: 11px; }
242
+ &:is(.margin-y-xs--11, .margin-top-xs--11) { margin-top: 11px; }
243
+ &:is(.margin-y-xs--11, .margin-bottom-xs--11) { margin-bottom: 11px; }
244
+ &:is(.margin-x-xs--11, .margin-left-xs--11) { margin-left: 11px; }
245
+ &:is(.margin-x-xs--11, .margin-right-xs--11) { margin-right: 11px; }
246
+ &.margin-xs--10 { margin: 10px; }
247
+ &:is(.margin-y-xs--10, .margin-top-xs--10) { margin-top: 10px; }
248
+ &:is(.margin-y-xs--10, .margin-bottom-xs--10) { margin-bottom: 10px; }
249
+ &:is(.margin-x-xs--10, .margin-left-xs--10) { margin-left: 10px; }
250
+ &:is(.margin-x-xs--10, .margin-right-xs--10) { margin-right: 10px; }
251
+ &.margin-xs--9 { margin: 9px; }
252
+ &:is(.margin-y-xs--9, .margin-top-xs--9) { margin-top: 9px; }
253
+ &:is(.margin-y-xs--9, .margin-bottom-xs--9) { margin-bottom: 9px; }
254
+ &:is(.margin-x-xs--9, .margin-left-xs--9) { margin-left: 9px; }
255
+ &:is(.margin-x-xs--9, .margin-right-xs--9) { margin-right: 9px; }
256
+ &.margin-xs--8 { margin: 8px; }
257
+ &:is(.margin-y-xs--8, .margin-top-xs--8) { margin-top: 8px; }
258
+ &:is(.margin-y-xs--8, .margin-bottom-xs--8) { margin-bottom: 8px; }
259
+ &:is(.margin-x-xs--8, .margin-left-xs--8) { margin-left: 8px; }
260
+ &:is(.margin-x-xs--8, .margin-right-xs--8) { margin-right: 8px; }
261
+ &.margin-xs--7 { margin: 7px; }
262
+ &:is(.margin-y-xs--7, .margin-top-xs--7) { margin-top: 7px; }
263
+ &:is(.margin-y-xs--7, .margin-bottom-xs--7) { margin-bottom: 7px; }
264
+ &:is(.margin-x-xs--7, .margin-left-xs--7) { margin-left: 7px; }
265
+ &:is(.margin-x-xs--7, .margin-right-xs--7) { margin-right: 7px; }
266
+ &.margin-xs--6 { margin: 6px; }
267
+ &:is(.margin-y-xs--6, .margin-top-xs--6) { margin-top: 6px; }
268
+ &:is(.margin-y-xs--6, .margin-bottom-xs--6) { margin-bottom: 6px; }
269
+ &:is(.margin-x-xs--6, .margin-left-xs--6) { margin-left: 6px; }
270
+ &:is(.margin-x-xs--6, .margin-right-xs--6) { margin-right: 6px; }
271
+ &.margin-xs--5 { margin: 5px; }
272
+ &:is(.margin-y-xs--5, .margin-top-xs--5) { margin-top: 5px; }
273
+ &:is(.margin-y-xs--5, .margin-bottom-xs--5) { margin-bottom: 5px; }
274
+ &:is(.margin-x-xs--5, .margin-left-xs--5) { margin-left: 5px; }
275
+ &:is(.margin-x-xs--5, .margin-right-xs--5) { margin-right: 5px; }
276
+ &.margin-xs--4 { margin: 4px; }
277
+ &:is(.margin-y-xs--4, .margin-top-xs--4) { margin-top: 4px; }
278
+ &:is(.margin-y-xs--4, .margin-bottom-xs--4) { margin-bottom: 4px; }
279
+ &:is(.margin-x-xs--4, .margin-left-xs--4) { margin-left: 4px; }
280
+ &:is(.margin-x-xs--4, .margin-right-xs--4) { margin-right: 4px; }
281
+ &.margin-xs--3 { margin: 3px; }
282
+ &:is(.margin-y-xs--3, .margin-top-xs--3) { margin-top: 3px; }
283
+ &:is(.margin-y-xs--3, .margin-bottom-xs--3) { margin-bottom: 3px; }
284
+ &:is(.margin-x-xs--3, .margin-left-xs--3) { margin-left: 3px; }
285
+ &:is(.margin-x-xs--3, .margin-right-xs--3) { margin-right: 3px; }
286
+ &.margin-xs--2 { margin: 2px; }
287
+ &:is(.margin-y-xs--2, .margin-top-xs--2) { margin-top: 2px; }
288
+ &:is(.margin-y-xs--2, .margin-bottom-xs--2) { margin-bottom: 2px; }
289
+ &:is(.margin-x-xs--2, .margin-left-xs--2) { margin-left: 2px; }
290
+ &:is(.margin-x-xs--2, .margin-right-xs--2) { margin-right: 2px; }
291
+ &.margin-xs--1 { margin: 1px; }
292
+ &:is(.margin-y-xs--1, .margin-top-xs--1) { margin-top: 1px; }
293
+ &:is(.margin-y-xs--1, .margin-bottom-xs--1) { margin-bottom: 1px; }
294
+ &:is(.margin-x-xs--1, .margin-left-xs--1) { margin-left: 1px; }
295
+ &:is(.margin-x-xs--1, .margin-right-xs--1) { margin-right: 1px; }
296
+ &.margin-xs-auto { margin: auto; }
297
+ }
298
+ .pacem-pad {
299
+ &.pad-xs-6 { padding: var(--pacem-size-6); }
300
+ &:is(.pad-y-xs-6, .pad-top-xs-6) { padding-top: var(--pacem-size-6); }
301
+ &:is(.pad-y-xs-6, .pad-bottom-xs-6) { padding-bottom: var(--pacem-size-6); }
302
+ &:is(.pad-x-xs-6, .pad-left-xs-6) { padding-left: var(--pacem-size-6); }
303
+ &:is(.pad-x-xs-6, .pad-right-xs-6) { padding-right: var(--pacem-size-6); }
304
+ &.pad-xs-5 { padding: var(--pacem-size-5); }
305
+ &:is(.pad-y-xs-5, .pad-top-xs-5) { padding-top: var(--pacem-size-5); }
306
+ &:is(.pad-y-xs-5, .pad-bottom-xs-5) { padding-bottom: var(--pacem-size-5); }
307
+ &:is(.pad-x-xs-5, .pad-left-xs-5) { padding-left: var(--pacem-size-5); }
308
+ &:is(.pad-x-xs-5, .pad-right-xs-5) { padding-right: var(--pacem-size-5); }
309
+ &.pad-xs-4 { padding: var(--pacem-size-4); }
310
+ &:is(.pad-y-xs-4, .pad-top-xs-4) { padding-top: var(--pacem-size-4); }
311
+ &:is(.pad-y-xs-4, .pad-bottom-xs-4) { padding-bottom: var(--pacem-size-4); }
312
+ &:is(.pad-x-xs-4, .pad-left-xs-4) { padding-left: var(--pacem-size-4); }
313
+ &:is(.pad-x-xs-4, .pad-right-xs-4) { padding-right: var(--pacem-size-4); }
314
+ &.pad-xs-3 { padding: var(--pacem-size-3); }
315
+ &:is(.pad-y-xs-3, .pad-top-xs-3) { padding-top: var(--pacem-size-3); }
316
+ &:is(.pad-y-xs-3, .pad-bottom-xs-3) { padding-bottom: var(--pacem-size-3); }
317
+ &:is(.pad-x-xs-3, .pad-left-xs-3) { padding-left: var(--pacem-size-3); }
318
+ &:is(.pad-x-xs-3, .pad-right-xs-3) { padding-right: var(--pacem-size-3); }
319
+ &.pad-xs-2 { padding: var(--pacem-size-2); }
320
+ &:is(.pad-y-xs-2, .pad-top-xs-2) { padding-top: var(--pacem-size-2); }
321
+ &:is(.pad-y-xs-2, .pad-bottom-xs-2) { padding-bottom: var(--pacem-size-2); }
322
+ &:is(.pad-x-xs-2, .pad-left-xs-2) { padding-left: var(--pacem-size-2); }
323
+ &:is(.pad-x-xs-2, .pad-right-xs-2) { padding-right: var(--pacem-size-2); }
324
+ &.pad-xs-1 { padding: var(--pacem-size-1); }
325
+ &:is(.pad-y-xs-1, .pad-top-xs-1) { padding-top: var(--pacem-size-1); }
326
+ &:is(.pad-y-xs-1, .pad-bottom-xs-1) { padding-bottom: var(--pacem-size-1); }
327
+ &:is(.pad-x-xs-1, .pad-left-xs-1) { padding-left: var(--pacem-size-1); }
328
+ &:is(.pad-x-xs-1, .pad-right-xs-1) { padding-right: var(--pacem-size-1); }
329
+ &.pad-xs-0 { padding: 0; }
330
+ &:is(.pad-y-xs-0, .pad-top-xs-0) { padding-top: 0; }
331
+ &:is(.pad-y-xs-0, .pad-bottom-xs-0) { padding-bottom: 0; }
332
+ &:is(.pad-x-xs-0, .pad-left-xs-0) { padding-left: 0; }
333
+ &:is(.pad-x-xs-0, .pad-right-xs-0) { padding-right: 0; }
334
+ &.pad-xs--12 { padding: 12px; }
335
+ &:is(.pad-y-xs--12, .pad-top-xs--12) { padding-top: 12px; }
336
+ &:is(.pad-y-xs--12, .pad-bottom-xs--12) { padding-bottom: 12px; }
337
+ &:is(.pad-x-xs--12, .pad-left-xs--12) { padding-left: 12px; }
338
+ &:is(.pad-x-xs--12, .pad-right-xs--12) { padding-right: 12px; }
339
+ &.pad-xs--11 { padding: 11px; }
340
+ &:is(.pad-y-xs--11, .pad-top-xs--11) { padding-top: 11px; }
341
+ &:is(.pad-y-xs--11, .pad-bottom-xs--11) { padding-bottom: 11px; }
342
+ &:is(.pad-x-xs--11, .pad-left-xs--11) { padding-left: 11px; }
343
+ &:is(.pad-x-xs--11, .pad-right-xs--11) { padding-right: 11px; }
344
+ &.pad-xs--10 { padding: 10px; }
345
+ &:is(.pad-y-xs--10, .pad-top-xs--10) { padding-top: 10px; }
346
+ &:is(.pad-y-xs--10, .pad-bottom-xs--10) { padding-bottom: 10px; }
347
+ &:is(.pad-x-xs--10, .pad-left-xs--10) { padding-left: 10px; }
348
+ &:is(.pad-x-xs--10, .pad-right-xs--10) { padding-right: 10px; }
349
+ &.pad-xs--9 { padding: 9px; }
350
+ &:is(.pad-y-xs--9, .pad-top-xs--9) { padding-top: 9px; }
351
+ &:is(.pad-y-xs--9, .pad-bottom-xs--9) { padding-bottom: 9px; }
352
+ &:is(.pad-x-xs--9, .pad-left-xs--9) { padding-left: 9px; }
353
+ &:is(.pad-x-xs--9, .pad-right-xs--9) { padding-right: 9px; }
354
+ &.pad-xs--8 { padding: 8px; }
355
+ &:is(.pad-y-xs--8, .pad-top-xs--8) { padding-top: 8px; }
356
+ &:is(.pad-y-xs--8, .pad-bottom-xs--8) { padding-bottom: 8px; }
357
+ &:is(.pad-x-xs--8, .pad-left-xs--8) { padding-left: 8px; }
358
+ &:is(.pad-x-xs--8, .pad-right-xs--8) { padding-right: 8px; }
359
+ &.pad-xs--7 { padding: 7px; }
360
+ &:is(.pad-y-xs--7, .pad-top-xs--7) { padding-top: 7px; }
361
+ &:is(.pad-y-xs--7, .pad-bottom-xs--7) { padding-bottom: 7px; }
362
+ &:is(.pad-x-xs--7, .pad-left-xs--7) { padding-left: 7px; }
363
+ &:is(.pad-x-xs--7, .pad-right-xs--7) { padding-right: 7px; }
364
+ &.pad-xs--6 { padding: 6px; }
365
+ &:is(.pad-y-xs--6, .pad-top-xs--6) { padding-top: 6px; }
366
+ &:is(.pad-y-xs--6, .pad-bottom-xs--6) { padding-bottom: 6px; }
367
+ &:is(.pad-x-xs--6, .pad-left-xs--6) { padding-left: 6px; }
368
+ &:is(.pad-x-xs--6, .pad-right-xs--6) { padding-right: 6px; }
369
+ &.pad-xs--5 { padding: 5px; }
370
+ &:is(.pad-y-xs--5, .pad-top-xs--5) { padding-top: 5px; }
371
+ &:is(.pad-y-xs--5, .pad-bottom-xs--5) { padding-bottom: 5px; }
372
+ &:is(.pad-x-xs--5, .pad-left-xs--5) { padding-left: 5px; }
373
+ &:is(.pad-x-xs--5, .pad-right-xs--5) { padding-right: 5px; }
374
+ &.pad-xs--4 { padding: 4px; }
375
+ &:is(.pad-y-xs--4, .pad-top-xs--4) { padding-top: 4px; }
376
+ &:is(.pad-y-xs--4, .pad-bottom-xs--4) { padding-bottom: 4px; }
377
+ &:is(.pad-x-xs--4, .pad-left-xs--4) { padding-left: 4px; }
378
+ &:is(.pad-x-xs--4, .pad-right-xs--4) { padding-right: 4px; }
379
+ &.pad-xs--3 { padding: 3px; }
380
+ &:is(.pad-y-xs--3, .pad-top-xs--3) { padding-top: 3px; }
381
+ &:is(.pad-y-xs--3, .pad-bottom-xs--3) { padding-bottom: 3px; }
382
+ &:is(.pad-x-xs--3, .pad-left-xs--3) { padding-left: 3px; }
383
+ &:is(.pad-x-xs--3, .pad-right-xs--3) { padding-right: 3px; }
384
+ &.pad-xs--2 { padding: 2px; }
385
+ &:is(.pad-y-xs--2, .pad-top-xs--2) { padding-top: 2px; }
386
+ &:is(.pad-y-xs--2, .pad-bottom-xs--2) { padding-bottom: 2px; }
387
+ &:is(.pad-x-xs--2, .pad-left-xs--2) { padding-left: 2px; }
388
+ &:is(.pad-x-xs--2, .pad-right-xs--2) { padding-right: 2px; }
389
+ &.pad-xs--1 { padding: 1px; }
390
+ &:is(.pad-y-xs--1, .pad-top-xs--1) { padding-top: 1px; }
391
+ &:is(.pad-y-xs--1, .pad-bottom-xs--1) { padding-bottom: 1px; }
392
+ &:is(.pad-x-xs--1, .pad-left-xs--1) { padding-left: 1px; }
393
+ &:is(.pad-x-xs--1, .pad-right-xs--1) { padding-right: 1px; }
394
+ &.pad-xs-auto { padding: auto; }
395
+ }
396
+ }
397
+
398
+ @media (--pacem-sm) {
399
+ .pacem-margin {
400
+ &.margin-sm-6 { margin: var(--pacem-size-6); }
401
+ &:is(.margin-y-sm-6, .margin-top-sm-6) { margin-top: var(--pacem-size-6); }
402
+ &:is(.margin-y-sm-6, .margin-bottom-sm-6) { margin-bottom: var(--pacem-size-6); }
403
+ &:is(.margin-x-sm-6, .margin-left-sm-6) { margin-left: var(--pacem-size-6); }
404
+ &:is(.margin-x-sm-6, .margin-right-sm-6) { margin-right: var(--pacem-size-6); }
405
+ &.margin-sm-5 { margin: var(--pacem-size-5); }
406
+ &:is(.margin-y-sm-5, .margin-top-sm-5) { margin-top: var(--pacem-size-5); }
407
+ &:is(.margin-y-sm-5, .margin-bottom-sm-5) { margin-bottom: var(--pacem-size-5); }
408
+ &:is(.margin-x-sm-5, .margin-left-sm-5) { margin-left: var(--pacem-size-5); }
409
+ &:is(.margin-x-sm-5, .margin-right-sm-5) { margin-right: var(--pacem-size-5); }
410
+ &.margin-sm-4 { margin: var(--pacem-size-4); }
411
+ &:is(.margin-y-sm-4, .margin-top-sm-4) { margin-top: var(--pacem-size-4); }
412
+ &:is(.margin-y-sm-4, .margin-bottom-sm-4) { margin-bottom: var(--pacem-size-4); }
413
+ &:is(.margin-x-sm-4, .margin-left-sm-4) { margin-left: var(--pacem-size-4); }
414
+ &:is(.margin-x-sm-4, .margin-right-sm-4) { margin-right: var(--pacem-size-4); }
415
+ &.margin-sm-3 { margin: var(--pacem-size-3); }
416
+ &:is(.margin-y-sm-3, .margin-top-sm-3) { margin-top: var(--pacem-size-3); }
417
+ &:is(.margin-y-sm-3, .margin-bottom-sm-3) { margin-bottom: var(--pacem-size-3); }
418
+ &:is(.margin-x-sm-3, .margin-left-sm-3) { margin-left: var(--pacem-size-3); }
419
+ &:is(.margin-x-sm-3, .margin-right-sm-3) { margin-right: var(--pacem-size-3); }
420
+ &.margin-sm-2 { margin: var(--pacem-size-2); }
421
+ &:is(.margin-y-sm-2, .margin-top-sm-2) { margin-top: var(--pacem-size-2); }
422
+ &:is(.margin-y-sm-2, .margin-bottom-sm-2) { margin-bottom: var(--pacem-size-2); }
423
+ &:is(.margin-x-sm-2, .margin-left-sm-2) { margin-left: var(--pacem-size-2); }
424
+ &:is(.margin-x-sm-2, .margin-right-sm-2) { margin-right: var(--pacem-size-2); }
425
+ &.margin-sm-1 { margin: var(--pacem-size-1); }
426
+ &:is(.margin-y-sm-1, .margin-top-sm-1) { margin-top: var(--pacem-size-1); }
427
+ &:is(.margin-y-sm-1, .margin-bottom-sm-1) { margin-bottom: var(--pacem-size-1); }
428
+ &:is(.margin-x-sm-1, .margin-left-sm-1) { margin-left: var(--pacem-size-1); }
429
+ &:is(.margin-x-sm-1, .margin-right-sm-1) { margin-right: var(--pacem-size-1); }
430
+ &.margin-sm-0 { margin: 0; }
431
+ &:is(.margin-y-sm-0, .margin-top-sm-0) { margin-top: 0; }
432
+ &:is(.margin-y-sm-0, .margin-bottom-sm-0) { margin-bottom: 0; }
433
+ &:is(.margin-x-sm-0, .margin-left-sm-0) { margin-left: 0; }
434
+ &:is(.margin-x-sm-0, .margin-right-sm-0) { margin-right: 0; }
435
+ &.margin-sm--12 { margin: 12px; }
436
+ &:is(.margin-y-sm--12, .margin-top-sm--12) { margin-top: 12px; }
437
+ &:is(.margin-y-sm--12, .margin-bottom-sm--12) { margin-bottom: 12px; }
438
+ &:is(.margin-x-sm--12, .margin-left-sm--12) { margin-left: 12px; }
439
+ &:is(.margin-x-sm--12, .margin-right-sm--12) { margin-right: 12px; }
440
+ &.margin-sm--11 { margin: 11px; }
441
+ &:is(.margin-y-sm--11, .margin-top-sm--11) { margin-top: 11px; }
442
+ &:is(.margin-y-sm--11, .margin-bottom-sm--11) { margin-bottom: 11px; }
443
+ &:is(.margin-x-sm--11, .margin-left-sm--11) { margin-left: 11px; }
444
+ &:is(.margin-x-sm--11, .margin-right-sm--11) { margin-right: 11px; }
445
+ &.margin-sm--10 { margin: 10px; }
446
+ &:is(.margin-y-sm--10, .margin-top-sm--10) { margin-top: 10px; }
447
+ &:is(.margin-y-sm--10, .margin-bottom-sm--10) { margin-bottom: 10px; }
448
+ &:is(.margin-x-sm--10, .margin-left-sm--10) { margin-left: 10px; }
449
+ &:is(.margin-x-sm--10, .margin-right-sm--10) { margin-right: 10px; }
450
+ &.margin-sm--9 { margin: 9px; }
451
+ &:is(.margin-y-sm--9, .margin-top-sm--9) { margin-top: 9px; }
452
+ &:is(.margin-y-sm--9, .margin-bottom-sm--9) { margin-bottom: 9px; }
453
+ &:is(.margin-x-sm--9, .margin-left-sm--9) { margin-left: 9px; }
454
+ &:is(.margin-x-sm--9, .margin-right-sm--9) { margin-right: 9px; }
455
+ &.margin-sm--8 { margin: 8px; }
456
+ &:is(.margin-y-sm--8, .margin-top-sm--8) { margin-top: 8px; }
457
+ &:is(.margin-y-sm--8, .margin-bottom-sm--8) { margin-bottom: 8px; }
458
+ &:is(.margin-x-sm--8, .margin-left-sm--8) { margin-left: 8px; }
459
+ &:is(.margin-x-sm--8, .margin-right-sm--8) { margin-right: 8px; }
460
+ &.margin-sm--7 { margin: 7px; }
461
+ &:is(.margin-y-sm--7, .margin-top-sm--7) { margin-top: 7px; }
462
+ &:is(.margin-y-sm--7, .margin-bottom-sm--7) { margin-bottom: 7px; }
463
+ &:is(.margin-x-sm--7, .margin-left-sm--7) { margin-left: 7px; }
464
+ &:is(.margin-x-sm--7, .margin-right-sm--7) { margin-right: 7px; }
465
+ &.margin-sm--6 { margin: 6px; }
466
+ &:is(.margin-y-sm--6, .margin-top-sm--6) { margin-top: 6px; }
467
+ &:is(.margin-y-sm--6, .margin-bottom-sm--6) { margin-bottom: 6px; }
468
+ &:is(.margin-x-sm--6, .margin-left-sm--6) { margin-left: 6px; }
469
+ &:is(.margin-x-sm--6, .margin-right-sm--6) { margin-right: 6px; }
470
+ &.margin-sm--5 { margin: 5px; }
471
+ &:is(.margin-y-sm--5, .margin-top-sm--5) { margin-top: 5px; }
472
+ &:is(.margin-y-sm--5, .margin-bottom-sm--5) { margin-bottom: 5px; }
473
+ &:is(.margin-x-sm--5, .margin-left-sm--5) { margin-left: 5px; }
474
+ &:is(.margin-x-sm--5, .margin-right-sm--5) { margin-right: 5px; }
475
+ &.margin-sm--4 { margin: 4px; }
476
+ &:is(.margin-y-sm--4, .margin-top-sm--4) { margin-top: 4px; }
477
+ &:is(.margin-y-sm--4, .margin-bottom-sm--4) { margin-bottom: 4px; }
478
+ &:is(.margin-x-sm--4, .margin-left-sm--4) { margin-left: 4px; }
479
+ &:is(.margin-x-sm--4, .margin-right-sm--4) { margin-right: 4px; }
480
+ &.margin-sm--3 { margin: 3px; }
481
+ &:is(.margin-y-sm--3, .margin-top-sm--3) { margin-top: 3px; }
482
+ &:is(.margin-y-sm--3, .margin-bottom-sm--3) { margin-bottom: 3px; }
483
+ &:is(.margin-x-sm--3, .margin-left-sm--3) { margin-left: 3px; }
484
+ &:is(.margin-x-sm--3, .margin-right-sm--3) { margin-right: 3px; }
485
+ &.margin-sm--2 { margin: 2px; }
486
+ &:is(.margin-y-sm--2, .margin-top-sm--2) { margin-top: 2px; }
487
+ &:is(.margin-y-sm--2, .margin-bottom-sm--2) { margin-bottom: 2px; }
488
+ &:is(.margin-x-sm--2, .margin-left-sm--2) { margin-left: 2px; }
489
+ &:is(.margin-x-sm--2, .margin-right-sm--2) { margin-right: 2px; }
490
+ &.margin-sm--1 { margin: 1px; }
491
+ &:is(.margin-y-sm--1, .margin-top-sm--1) { margin-top: 1px; }
492
+ &:is(.margin-y-sm--1, .margin-bottom-sm--1) { margin-bottom: 1px; }
493
+ &:is(.margin-x-sm--1, .margin-left-sm--1) { margin-left: 1px; }
494
+ &:is(.margin-x-sm--1, .margin-right-sm--1) { margin-right: 1px; }
495
+ &.margin-sm-auto { margin: auto; }
496
+ }
497
+ .pacem-pad {
498
+ &.pad-sm-6 { padding: var(--pacem-size-6); }
499
+ &:is(.pad-y-sm-6, .pad-top-sm-6) { padding-top: var(--pacem-size-6); }
500
+ &:is(.pad-y-sm-6, .pad-bottom-sm-6) { padding-bottom: var(--pacem-size-6); }
501
+ &:is(.pad-x-sm-6, .pad-left-sm-6) { padding-left: var(--pacem-size-6); }
502
+ &:is(.pad-x-sm-6, .pad-right-sm-6) { padding-right: var(--pacem-size-6); }
503
+ &.pad-sm-5 { padding: var(--pacem-size-5); }
504
+ &:is(.pad-y-sm-5, .pad-top-sm-5) { padding-top: var(--pacem-size-5); }
505
+ &:is(.pad-y-sm-5, .pad-bottom-sm-5) { padding-bottom: var(--pacem-size-5); }
506
+ &:is(.pad-x-sm-5, .pad-left-sm-5) { padding-left: var(--pacem-size-5); }
507
+ &:is(.pad-x-sm-5, .pad-right-sm-5) { padding-right: var(--pacem-size-5); }
508
+ &.pad-sm-4 { padding: var(--pacem-size-4); }
509
+ &:is(.pad-y-sm-4, .pad-top-sm-4) { padding-top: var(--pacem-size-4); }
510
+ &:is(.pad-y-sm-4, .pad-bottom-sm-4) { padding-bottom: var(--pacem-size-4); }
511
+ &:is(.pad-x-sm-4, .pad-left-sm-4) { padding-left: var(--pacem-size-4); }
512
+ &:is(.pad-x-sm-4, .pad-right-sm-4) { padding-right: var(--pacem-size-4); }
513
+ &.pad-sm-3 { padding: var(--pacem-size-3); }
514
+ &:is(.pad-y-sm-3, .pad-top-sm-3) { padding-top: var(--pacem-size-3); }
515
+ &:is(.pad-y-sm-3, .pad-bottom-sm-3) { padding-bottom: var(--pacem-size-3); }
516
+ &:is(.pad-x-sm-3, .pad-left-sm-3) { padding-left: var(--pacem-size-3); }
517
+ &:is(.pad-x-sm-3, .pad-right-sm-3) { padding-right: var(--pacem-size-3); }
518
+ &.pad-sm-2 { padding: var(--pacem-size-2); }
519
+ &:is(.pad-y-sm-2, .pad-top-sm-2) { padding-top: var(--pacem-size-2); }
520
+ &:is(.pad-y-sm-2, .pad-bottom-sm-2) { padding-bottom: var(--pacem-size-2); }
521
+ &:is(.pad-x-sm-2, .pad-left-sm-2) { padding-left: var(--pacem-size-2); }
522
+ &:is(.pad-x-sm-2, .pad-right-sm-2) { padding-right: var(--pacem-size-2); }
523
+ &.pad-sm-1 { padding: var(--pacem-size-1); }
524
+ &:is(.pad-y-sm-1, .pad-top-sm-1) { padding-top: var(--pacem-size-1); }
525
+ &:is(.pad-y-sm-1, .pad-bottom-sm-1) { padding-bottom: var(--pacem-size-1); }
526
+ &:is(.pad-x-sm-1, .pad-left-sm-1) { padding-left: var(--pacem-size-1); }
527
+ &:is(.pad-x-sm-1, .pad-right-sm-1) { padding-right: var(--pacem-size-1); }
528
+ &.pad-sm-0 { padding: 0; }
529
+ &:is(.pad-y-sm-0, .pad-top-sm-0) { padding-top: 0; }
530
+ &:is(.pad-y-sm-0, .pad-bottom-sm-0) { padding-bottom: 0; }
531
+ &:is(.pad-x-sm-0, .pad-left-sm-0) { padding-left: 0; }
532
+ &:is(.pad-x-sm-0, .pad-right-sm-0) { padding-right: 0; }
533
+ &.pad-sm--12 { padding: 12px; }
534
+ &:is(.pad-y-sm--12, .pad-top-sm--12) { padding-top: 12px; }
535
+ &:is(.pad-y-sm--12, .pad-bottom-sm--12) { padding-bottom: 12px; }
536
+ &:is(.pad-x-sm--12, .pad-left-sm--12) { padding-left: 12px; }
537
+ &:is(.pad-x-sm--12, .pad-right-sm--12) { padding-right: 12px; }
538
+ &.pad-sm--11 { padding: 11px; }
539
+ &:is(.pad-y-sm--11, .pad-top-sm--11) { padding-top: 11px; }
540
+ &:is(.pad-y-sm--11, .pad-bottom-sm--11) { padding-bottom: 11px; }
541
+ &:is(.pad-x-sm--11, .pad-left-sm--11) { padding-left: 11px; }
542
+ &:is(.pad-x-sm--11, .pad-right-sm--11) { padding-right: 11px; }
543
+ &.pad-sm--10 { padding: 10px; }
544
+ &:is(.pad-y-sm--10, .pad-top-sm--10) { padding-top: 10px; }
545
+ &:is(.pad-y-sm--10, .pad-bottom-sm--10) { padding-bottom: 10px; }
546
+ &:is(.pad-x-sm--10, .pad-left-sm--10) { padding-left: 10px; }
547
+ &:is(.pad-x-sm--10, .pad-right-sm--10) { padding-right: 10px; }
548
+ &.pad-sm--9 { padding: 9px; }
549
+ &:is(.pad-y-sm--9, .pad-top-sm--9) { padding-top: 9px; }
550
+ &:is(.pad-y-sm--9, .pad-bottom-sm--9) { padding-bottom: 9px; }
551
+ &:is(.pad-x-sm--9, .pad-left-sm--9) { padding-left: 9px; }
552
+ &:is(.pad-x-sm--9, .pad-right-sm--9) { padding-right: 9px; }
553
+ &.pad-sm--8 { padding: 8px; }
554
+ &:is(.pad-y-sm--8, .pad-top-sm--8) { padding-top: 8px; }
555
+ &:is(.pad-y-sm--8, .pad-bottom-sm--8) { padding-bottom: 8px; }
556
+ &:is(.pad-x-sm--8, .pad-left-sm--8) { padding-left: 8px; }
557
+ &:is(.pad-x-sm--8, .pad-right-sm--8) { padding-right: 8px; }
558
+ &.pad-sm--7 { padding: 7px; }
559
+ &:is(.pad-y-sm--7, .pad-top-sm--7) { padding-top: 7px; }
560
+ &:is(.pad-y-sm--7, .pad-bottom-sm--7) { padding-bottom: 7px; }
561
+ &:is(.pad-x-sm--7, .pad-left-sm--7) { padding-left: 7px; }
562
+ &:is(.pad-x-sm--7, .pad-right-sm--7) { padding-right: 7px; }
563
+ &.pad-sm--6 { padding: 6px; }
564
+ &:is(.pad-y-sm--6, .pad-top-sm--6) { padding-top: 6px; }
565
+ &:is(.pad-y-sm--6, .pad-bottom-sm--6) { padding-bottom: 6px; }
566
+ &:is(.pad-x-sm--6, .pad-left-sm--6) { padding-left: 6px; }
567
+ &:is(.pad-x-sm--6, .pad-right-sm--6) { padding-right: 6px; }
568
+ &.pad-sm--5 { padding: 5px; }
569
+ &:is(.pad-y-sm--5, .pad-top-sm--5) { padding-top: 5px; }
570
+ &:is(.pad-y-sm--5, .pad-bottom-sm--5) { padding-bottom: 5px; }
571
+ &:is(.pad-x-sm--5, .pad-left-sm--5) { padding-left: 5px; }
572
+ &:is(.pad-x-sm--5, .pad-right-sm--5) { padding-right: 5px; }
573
+ &.pad-sm--4 { padding: 4px; }
574
+ &:is(.pad-y-sm--4, .pad-top-sm--4) { padding-top: 4px; }
575
+ &:is(.pad-y-sm--4, .pad-bottom-sm--4) { padding-bottom: 4px; }
576
+ &:is(.pad-x-sm--4, .pad-left-sm--4) { padding-left: 4px; }
577
+ &:is(.pad-x-sm--4, .pad-right-sm--4) { padding-right: 4px; }
578
+ &.pad-sm--3 { padding: 3px; }
579
+ &:is(.pad-y-sm--3, .pad-top-sm--3) { padding-top: 3px; }
580
+ &:is(.pad-y-sm--3, .pad-bottom-sm--3) { padding-bottom: 3px; }
581
+ &:is(.pad-x-sm--3, .pad-left-sm--3) { padding-left: 3px; }
582
+ &:is(.pad-x-sm--3, .pad-right-sm--3) { padding-right: 3px; }
583
+ &.pad-sm--2 { padding: 2px; }
584
+ &:is(.pad-y-sm--2, .pad-top-sm--2) { padding-top: 2px; }
585
+ &:is(.pad-y-sm--2, .pad-bottom-sm--2) { padding-bottom: 2px; }
586
+ &:is(.pad-x-sm--2, .pad-left-sm--2) { padding-left: 2px; }
587
+ &:is(.pad-x-sm--2, .pad-right-sm--2) { padding-right: 2px; }
588
+ &.pad-sm--1 { padding: 1px; }
589
+ &:is(.pad-y-sm--1, .pad-top-sm--1) { padding-top: 1px; }
590
+ &:is(.pad-y-sm--1, .pad-bottom-sm--1) { padding-bottom: 1px; }
591
+ &:is(.pad-x-sm--1, .pad-left-sm--1) { padding-left: 1px; }
592
+ &:is(.pad-x-sm--1, .pad-right-sm--1) { padding-right: 1px; }
593
+ &.pad-sm-auto { padding: auto; }
594
+ }
595
+ }
596
+
597
+ @media (--pacem-md) {
598
+ .pacem-margin {
599
+ &.margin-md-6 { margin: var(--pacem-size-6); }
600
+ &:is(.margin-y-md-6, .margin-top-md-6) { margin-top: var(--pacem-size-6); }
601
+ &:is(.margin-y-md-6, .margin-bottom-md-6) { margin-bottom: var(--pacem-size-6); }
602
+ &:is(.margin-x-md-6, .margin-left-md-6) { margin-left: var(--pacem-size-6); }
603
+ &:is(.margin-x-md-6, .margin-right-md-6) { margin-right: var(--pacem-size-6); }
604
+ &.margin-md-5 { margin: var(--pacem-size-5); }
605
+ &:is(.margin-y-md-5, .margin-top-md-5) { margin-top: var(--pacem-size-5); }
606
+ &:is(.margin-y-md-5, .margin-bottom-md-5) { margin-bottom: var(--pacem-size-5); }
607
+ &:is(.margin-x-md-5, .margin-left-md-5) { margin-left: var(--pacem-size-5); }
608
+ &:is(.margin-x-md-5, .margin-right-md-5) { margin-right: var(--pacem-size-5); }
609
+ &.margin-md-4 { margin: var(--pacem-size-4); }
610
+ &:is(.margin-y-md-4, .margin-top-md-4) { margin-top: var(--pacem-size-4); }
611
+ &:is(.margin-y-md-4, .margin-bottom-md-4) { margin-bottom: var(--pacem-size-4); }
612
+ &:is(.margin-x-md-4, .margin-left-md-4) { margin-left: var(--pacem-size-4); }
613
+ &:is(.margin-x-md-4, .margin-right-md-4) { margin-right: var(--pacem-size-4); }
614
+ &.margin-md-3 { margin: var(--pacem-size-3); }
615
+ &:is(.margin-y-md-3, .margin-top-md-3) { margin-top: var(--pacem-size-3); }
616
+ &:is(.margin-y-md-3, .margin-bottom-md-3) { margin-bottom: var(--pacem-size-3); }
617
+ &:is(.margin-x-md-3, .margin-left-md-3) { margin-left: var(--pacem-size-3); }
618
+ &:is(.margin-x-md-3, .margin-right-md-3) { margin-right: var(--pacem-size-3); }
619
+ &.margin-md-2 { margin: var(--pacem-size-2); }
620
+ &:is(.margin-y-md-2, .margin-top-md-2) { margin-top: var(--pacem-size-2); }
621
+ &:is(.margin-y-md-2, .margin-bottom-md-2) { margin-bottom: var(--pacem-size-2); }
622
+ &:is(.margin-x-md-2, .margin-left-md-2) { margin-left: var(--pacem-size-2); }
623
+ &:is(.margin-x-md-2, .margin-right-md-2) { margin-right: var(--pacem-size-2); }
624
+ &.margin-md-1 { margin: var(--pacem-size-1); }
625
+ &:is(.margin-y-md-1, .margin-top-md-1) { margin-top: var(--pacem-size-1); }
626
+ &:is(.margin-y-md-1, .margin-bottom-md-1) { margin-bottom: var(--pacem-size-1); }
627
+ &:is(.margin-x-md-1, .margin-left-md-1) { margin-left: var(--pacem-size-1); }
628
+ &:is(.margin-x-md-1, .margin-right-md-1) { margin-right: var(--pacem-size-1); }
629
+ &.margin-md-0 { margin: 0; }
630
+ &:is(.margin-y-md-0, .margin-top-md-0) { margin-top: 0; }
631
+ &:is(.margin-y-md-0, .margin-bottom-md-0) { margin-bottom: 0; }
632
+ &:is(.margin-x-md-0, .margin-left-md-0) { margin-left: 0; }
633
+ &:is(.margin-x-md-0, .margin-right-md-0) { margin-right: 0; }
634
+ &.margin-md--12 { margin: 12px; }
635
+ &:is(.margin-y-md--12, .margin-top-md--12) { margin-top: 12px; }
636
+ &:is(.margin-y-md--12, .margin-bottom-md--12) { margin-bottom: 12px; }
637
+ &:is(.margin-x-md--12, .margin-left-md--12) { margin-left: 12px; }
638
+ &:is(.margin-x-md--12, .margin-right-md--12) { margin-right: 12px; }
639
+ &.margin-md--11 { margin: 11px; }
640
+ &:is(.margin-y-md--11, .margin-top-md--11) { margin-top: 11px; }
641
+ &:is(.margin-y-md--11, .margin-bottom-md--11) { margin-bottom: 11px; }
642
+ &:is(.margin-x-md--11, .margin-left-md--11) { margin-left: 11px; }
643
+ &:is(.margin-x-md--11, .margin-right-md--11) { margin-right: 11px; }
644
+ &.margin-md--10 { margin: 10px; }
645
+ &:is(.margin-y-md--10, .margin-top-md--10) { margin-top: 10px; }
646
+ &:is(.margin-y-md--10, .margin-bottom-md--10) { margin-bottom: 10px; }
647
+ &:is(.margin-x-md--10, .margin-left-md--10) { margin-left: 10px; }
648
+ &:is(.margin-x-md--10, .margin-right-md--10) { margin-right: 10px; }
649
+ &.margin-md--9 { margin: 9px; }
650
+ &:is(.margin-y-md--9, .margin-top-md--9) { margin-top: 9px; }
651
+ &:is(.margin-y-md--9, .margin-bottom-md--9) { margin-bottom: 9px; }
652
+ &:is(.margin-x-md--9, .margin-left-md--9) { margin-left: 9px; }
653
+ &:is(.margin-x-md--9, .margin-right-md--9) { margin-right: 9px; }
654
+ &.margin-md--8 { margin: 8px; }
655
+ &:is(.margin-y-md--8, .margin-top-md--8) { margin-top: 8px; }
656
+ &:is(.margin-y-md--8, .margin-bottom-md--8) { margin-bottom: 8px; }
657
+ &:is(.margin-x-md--8, .margin-left-md--8) { margin-left: 8px; }
658
+ &:is(.margin-x-md--8, .margin-right-md--8) { margin-right: 8px; }
659
+ &.margin-md--7 { margin: 7px; }
660
+ &:is(.margin-y-md--7, .margin-top-md--7) { margin-top: 7px; }
661
+ &:is(.margin-y-md--7, .margin-bottom-md--7) { margin-bottom: 7px; }
662
+ &:is(.margin-x-md--7, .margin-left-md--7) { margin-left: 7px; }
663
+ &:is(.margin-x-md--7, .margin-right-md--7) { margin-right: 7px; }
664
+ &.margin-md--6 { margin: 6px; }
665
+ &:is(.margin-y-md--6, .margin-top-md--6) { margin-top: 6px; }
666
+ &:is(.margin-y-md--6, .margin-bottom-md--6) { margin-bottom: 6px; }
667
+ &:is(.margin-x-md--6, .margin-left-md--6) { margin-left: 6px; }
668
+ &:is(.margin-x-md--6, .margin-right-md--6) { margin-right: 6px; }
669
+ &.margin-md--5 { margin: 5px; }
670
+ &:is(.margin-y-md--5, .margin-top-md--5) { margin-top: 5px; }
671
+ &:is(.margin-y-md--5, .margin-bottom-md--5) { margin-bottom: 5px; }
672
+ &:is(.margin-x-md--5, .margin-left-md--5) { margin-left: 5px; }
673
+ &:is(.margin-x-md--5, .margin-right-md--5) { margin-right: 5px; }
674
+ &.margin-md--4 { margin: 4px; }
675
+ &:is(.margin-y-md--4, .margin-top-md--4) { margin-top: 4px; }
676
+ &:is(.margin-y-md--4, .margin-bottom-md--4) { margin-bottom: 4px; }
677
+ &:is(.margin-x-md--4, .margin-left-md--4) { margin-left: 4px; }
678
+ &:is(.margin-x-md--4, .margin-right-md--4) { margin-right: 4px; }
679
+ &.margin-md--3 { margin: 3px; }
680
+ &:is(.margin-y-md--3, .margin-top-md--3) { margin-top: 3px; }
681
+ &:is(.margin-y-md--3, .margin-bottom-md--3) { margin-bottom: 3px; }
682
+ &:is(.margin-x-md--3, .margin-left-md--3) { margin-left: 3px; }
683
+ &:is(.margin-x-md--3, .margin-right-md--3) { margin-right: 3px; }
684
+ &.margin-md--2 { margin: 2px; }
685
+ &:is(.margin-y-md--2, .margin-top-md--2) { margin-top: 2px; }
686
+ &:is(.margin-y-md--2, .margin-bottom-md--2) { margin-bottom: 2px; }
687
+ &:is(.margin-x-md--2, .margin-left-md--2) { margin-left: 2px; }
688
+ &:is(.margin-x-md--2, .margin-right-md--2) { margin-right: 2px; }
689
+ &.margin-md--1 { margin: 1px; }
690
+ &:is(.margin-y-md--1, .margin-top-md--1) { margin-top: 1px; }
691
+ &:is(.margin-y-md--1, .margin-bottom-md--1) { margin-bottom: 1px; }
692
+ &:is(.margin-x-md--1, .margin-left-md--1) { margin-left: 1px; }
693
+ &:is(.margin-x-md--1, .margin-right-md--1) { margin-right: 1px; }
694
+ &.margin-md-auto { margin: auto; }
695
+ }
696
+ .pacem-pad {
697
+ &.pad-md-6 { padding: var(--pacem-size-6); }
698
+ &:is(.pad-y-md-6, .pad-top-md-6) { padding-top: var(--pacem-size-6); }
699
+ &:is(.pad-y-md-6, .pad-bottom-md-6) { padding-bottom: var(--pacem-size-6); }
700
+ &:is(.pad-x-md-6, .pad-left-md-6) { padding-left: var(--pacem-size-6); }
701
+ &:is(.pad-x-md-6, .pad-right-md-6) { padding-right: var(--pacem-size-6); }
702
+ &.pad-md-5 { padding: var(--pacem-size-5); }
703
+ &:is(.pad-y-md-5, .pad-top-md-5) { padding-top: var(--pacem-size-5); }
704
+ &:is(.pad-y-md-5, .pad-bottom-md-5) { padding-bottom: var(--pacem-size-5); }
705
+ &:is(.pad-x-md-5, .pad-left-md-5) { padding-left: var(--pacem-size-5); }
706
+ &:is(.pad-x-md-5, .pad-right-md-5) { padding-right: var(--pacem-size-5); }
707
+ &.pad-md-4 { padding: var(--pacem-size-4); }
708
+ &:is(.pad-y-md-4, .pad-top-md-4) { padding-top: var(--pacem-size-4); }
709
+ &:is(.pad-y-md-4, .pad-bottom-md-4) { padding-bottom: var(--pacem-size-4); }
710
+ &:is(.pad-x-md-4, .pad-left-md-4) { padding-left: var(--pacem-size-4); }
711
+ &:is(.pad-x-md-4, .pad-right-md-4) { padding-right: var(--pacem-size-4); }
712
+ &.pad-md-3 { padding: var(--pacem-size-3); }
713
+ &:is(.pad-y-md-3, .pad-top-md-3) { padding-top: var(--pacem-size-3); }
714
+ &:is(.pad-y-md-3, .pad-bottom-md-3) { padding-bottom: var(--pacem-size-3); }
715
+ &:is(.pad-x-md-3, .pad-left-md-3) { padding-left: var(--pacem-size-3); }
716
+ &:is(.pad-x-md-3, .pad-right-md-3) { padding-right: var(--pacem-size-3); }
717
+ &.pad-md-2 { padding: var(--pacem-size-2); }
718
+ &:is(.pad-y-md-2, .pad-top-md-2) { padding-top: var(--pacem-size-2); }
719
+ &:is(.pad-y-md-2, .pad-bottom-md-2) { padding-bottom: var(--pacem-size-2); }
720
+ &:is(.pad-x-md-2, .pad-left-md-2) { padding-left: var(--pacem-size-2); }
721
+ &:is(.pad-x-md-2, .pad-right-md-2) { padding-right: var(--pacem-size-2); }
722
+ &.pad-md-1 { padding: var(--pacem-size-1); }
723
+ &:is(.pad-y-md-1, .pad-top-md-1) { padding-top: var(--pacem-size-1); }
724
+ &:is(.pad-y-md-1, .pad-bottom-md-1) { padding-bottom: var(--pacem-size-1); }
725
+ &:is(.pad-x-md-1, .pad-left-md-1) { padding-left: var(--pacem-size-1); }
726
+ &:is(.pad-x-md-1, .pad-right-md-1) { padding-right: var(--pacem-size-1); }
727
+ &.pad-md-0 { padding: 0; }
728
+ &:is(.pad-y-md-0, .pad-top-md-0) { padding-top: 0; }
729
+ &:is(.pad-y-md-0, .pad-bottom-md-0) { padding-bottom: 0; }
730
+ &:is(.pad-x-md-0, .pad-left-md-0) { padding-left: 0; }
731
+ &:is(.pad-x-md-0, .pad-right-md-0) { padding-right: 0; }
732
+ &.pad-md--12 { padding: 12px; }
733
+ &:is(.pad-y-md--12, .pad-top-md--12) { padding-top: 12px; }
734
+ &:is(.pad-y-md--12, .pad-bottom-md--12) { padding-bottom: 12px; }
735
+ &:is(.pad-x-md--12, .pad-left-md--12) { padding-left: 12px; }
736
+ &:is(.pad-x-md--12, .pad-right-md--12) { padding-right: 12px; }
737
+ &.pad-md--11 { padding: 11px; }
738
+ &:is(.pad-y-md--11, .pad-top-md--11) { padding-top: 11px; }
739
+ &:is(.pad-y-md--11, .pad-bottom-md--11) { padding-bottom: 11px; }
740
+ &:is(.pad-x-md--11, .pad-left-md--11) { padding-left: 11px; }
741
+ &:is(.pad-x-md--11, .pad-right-md--11) { padding-right: 11px; }
742
+ &.pad-md--10 { padding: 10px; }
743
+ &:is(.pad-y-md--10, .pad-top-md--10) { padding-top: 10px; }
744
+ &:is(.pad-y-md--10, .pad-bottom-md--10) { padding-bottom: 10px; }
745
+ &:is(.pad-x-md--10, .pad-left-md--10) { padding-left: 10px; }
746
+ &:is(.pad-x-md--10, .pad-right-md--10) { padding-right: 10px; }
747
+ &.pad-md--9 { padding: 9px; }
748
+ &:is(.pad-y-md--9, .pad-top-md--9) { padding-top: 9px; }
749
+ &:is(.pad-y-md--9, .pad-bottom-md--9) { padding-bottom: 9px; }
750
+ &:is(.pad-x-md--9, .pad-left-md--9) { padding-left: 9px; }
751
+ &:is(.pad-x-md--9, .pad-right-md--9) { padding-right: 9px; }
752
+ &.pad-md--8 { padding: 8px; }
753
+ &:is(.pad-y-md--8, .pad-top-md--8) { padding-top: 8px; }
754
+ &:is(.pad-y-md--8, .pad-bottom-md--8) { padding-bottom: 8px; }
755
+ &:is(.pad-x-md--8, .pad-left-md--8) { padding-left: 8px; }
756
+ &:is(.pad-x-md--8, .pad-right-md--8) { padding-right: 8px; }
757
+ &.pad-md--7 { padding: 7px; }
758
+ &:is(.pad-y-md--7, .pad-top-md--7) { padding-top: 7px; }
759
+ &:is(.pad-y-md--7, .pad-bottom-md--7) { padding-bottom: 7px; }
760
+ &:is(.pad-x-md--7, .pad-left-md--7) { padding-left: 7px; }
761
+ &:is(.pad-x-md--7, .pad-right-md--7) { padding-right: 7px; }
762
+ &.pad-md--6 { padding: 6px; }
763
+ &:is(.pad-y-md--6, .pad-top-md--6) { padding-top: 6px; }
764
+ &:is(.pad-y-md--6, .pad-bottom-md--6) { padding-bottom: 6px; }
765
+ &:is(.pad-x-md--6, .pad-left-md--6) { padding-left: 6px; }
766
+ &:is(.pad-x-md--6, .pad-right-md--6) { padding-right: 6px; }
767
+ &.pad-md--5 { padding: 5px; }
768
+ &:is(.pad-y-md--5, .pad-top-md--5) { padding-top: 5px; }
769
+ &:is(.pad-y-md--5, .pad-bottom-md--5) { padding-bottom: 5px; }
770
+ &:is(.pad-x-md--5, .pad-left-md--5) { padding-left: 5px; }
771
+ &:is(.pad-x-md--5, .pad-right-md--5) { padding-right: 5px; }
772
+ &.pad-md--4 { padding: 4px; }
773
+ &:is(.pad-y-md--4, .pad-top-md--4) { padding-top: 4px; }
774
+ &:is(.pad-y-md--4, .pad-bottom-md--4) { padding-bottom: 4px; }
775
+ &:is(.pad-x-md--4, .pad-left-md--4) { padding-left: 4px; }
776
+ &:is(.pad-x-md--4, .pad-right-md--4) { padding-right: 4px; }
777
+ &.pad-md--3 { padding: 3px; }
778
+ &:is(.pad-y-md--3, .pad-top-md--3) { padding-top: 3px; }
779
+ &:is(.pad-y-md--3, .pad-bottom-md--3) { padding-bottom: 3px; }
780
+ &:is(.pad-x-md--3, .pad-left-md--3) { padding-left: 3px; }
781
+ &:is(.pad-x-md--3, .pad-right-md--3) { padding-right: 3px; }
782
+ &.pad-md--2 { padding: 2px; }
783
+ &:is(.pad-y-md--2, .pad-top-md--2) { padding-top: 2px; }
784
+ &:is(.pad-y-md--2, .pad-bottom-md--2) { padding-bottom: 2px; }
785
+ &:is(.pad-x-md--2, .pad-left-md--2) { padding-left: 2px; }
786
+ &:is(.pad-x-md--2, .pad-right-md--2) { padding-right: 2px; }
787
+ &.pad-md--1 { padding: 1px; }
788
+ &:is(.pad-y-md--1, .pad-top-md--1) { padding-top: 1px; }
789
+ &:is(.pad-y-md--1, .pad-bottom-md--1) { padding-bottom: 1px; }
790
+ &:is(.pad-x-md--1, .pad-left-md--1) { padding-left: 1px; }
791
+ &:is(.pad-x-md--1, .pad-right-md--1) { padding-right: 1px; }
792
+ &.pad-md-auto { padding: auto; }
793
+ }
794
+ }
795
+
796
+ @media (--pacem-lg) {
797
+ .pacem-margin {
798
+ &.margin-lg-6 { margin: var(--pacem-size-6); }
799
+ &:is(.margin-y-lg-6, .margin-top-lg-6) { margin-top: var(--pacem-size-6); }
800
+ &:is(.margin-y-lg-6, .margin-bottom-lg-6) { margin-bottom: var(--pacem-size-6); }
801
+ &:is(.margin-x-lg-6, .margin-left-lg-6) { margin-left: var(--pacem-size-6); }
802
+ &:is(.margin-x-lg-6, .margin-right-lg-6) { margin-right: var(--pacem-size-6); }
803
+ &.margin-lg-5 { margin: var(--pacem-size-5); }
804
+ &:is(.margin-y-lg-5, .margin-top-lg-5) { margin-top: var(--pacem-size-5); }
805
+ &:is(.margin-y-lg-5, .margin-bottom-lg-5) { margin-bottom: var(--pacem-size-5); }
806
+ &:is(.margin-x-lg-5, .margin-left-lg-5) { margin-left: var(--pacem-size-5); }
807
+ &:is(.margin-x-lg-5, .margin-right-lg-5) { margin-right: var(--pacem-size-5); }
808
+ &.margin-lg-4 { margin: var(--pacem-size-4); }
809
+ &:is(.margin-y-lg-4, .margin-top-lg-4) { margin-top: var(--pacem-size-4); }
810
+ &:is(.margin-y-lg-4, .margin-bottom-lg-4) { margin-bottom: var(--pacem-size-4); }
811
+ &:is(.margin-x-lg-4, .margin-left-lg-4) { margin-left: var(--pacem-size-4); }
812
+ &:is(.margin-x-lg-4, .margin-right-lg-4) { margin-right: var(--pacem-size-4); }
813
+ &.margin-lg-3 { margin: var(--pacem-size-3); }
814
+ &:is(.margin-y-lg-3, .margin-top-lg-3) { margin-top: var(--pacem-size-3); }
815
+ &:is(.margin-y-lg-3, .margin-bottom-lg-3) { margin-bottom: var(--pacem-size-3); }
816
+ &:is(.margin-x-lg-3, .margin-left-lg-3) { margin-left: var(--pacem-size-3); }
817
+ &:is(.margin-x-lg-3, .margin-right-lg-3) { margin-right: var(--pacem-size-3); }
818
+ &.margin-lg-2 { margin: var(--pacem-size-2); }
819
+ &:is(.margin-y-lg-2, .margin-top-lg-2) { margin-top: var(--pacem-size-2); }
820
+ &:is(.margin-y-lg-2, .margin-bottom-lg-2) { margin-bottom: var(--pacem-size-2); }
821
+ &:is(.margin-x-lg-2, .margin-left-lg-2) { margin-left: var(--pacem-size-2); }
822
+ &:is(.margin-x-lg-2, .margin-right-lg-2) { margin-right: var(--pacem-size-2); }
823
+ &.margin-lg-1 { margin: var(--pacem-size-1); }
824
+ &:is(.margin-y-lg-1, .margin-top-lg-1) { margin-top: var(--pacem-size-1); }
825
+ &:is(.margin-y-lg-1, .margin-bottom-lg-1) { margin-bottom: var(--pacem-size-1); }
826
+ &:is(.margin-x-lg-1, .margin-left-lg-1) { margin-left: var(--pacem-size-1); }
827
+ &:is(.margin-x-lg-1, .margin-right-lg-1) { margin-right: var(--pacem-size-1); }
828
+ &.margin-lg-0 { margin: 0; }
829
+ &:is(.margin-y-lg-0, .margin-top-lg-0) { margin-top: 0; }
830
+ &:is(.margin-y-lg-0, .margin-bottom-lg-0) { margin-bottom: 0; }
831
+ &:is(.margin-x-lg-0, .margin-left-lg-0) { margin-left: 0; }
832
+ &:is(.margin-x-lg-0, .margin-right-lg-0) { margin-right: 0; }
833
+ &.margin-lg--12 { margin: 12px; }
834
+ &:is(.margin-y-lg--12, .margin-top-lg--12) { margin-top: 12px; }
835
+ &:is(.margin-y-lg--12, .margin-bottom-lg--12) { margin-bottom: 12px; }
836
+ &:is(.margin-x-lg--12, .margin-left-lg--12) { margin-left: 12px; }
837
+ &:is(.margin-x-lg--12, .margin-right-lg--12) { margin-right: 12px; }
838
+ &.margin-lg--11 { margin: 11px; }
839
+ &:is(.margin-y-lg--11, .margin-top-lg--11) { margin-top: 11px; }
840
+ &:is(.margin-y-lg--11, .margin-bottom-lg--11) { margin-bottom: 11px; }
841
+ &:is(.margin-x-lg--11, .margin-left-lg--11) { margin-left: 11px; }
842
+ &:is(.margin-x-lg--11, .margin-right-lg--11) { margin-right: 11px; }
843
+ &.margin-lg--10 { margin: 10px; }
844
+ &:is(.margin-y-lg--10, .margin-top-lg--10) { margin-top: 10px; }
845
+ &:is(.margin-y-lg--10, .margin-bottom-lg--10) { margin-bottom: 10px; }
846
+ &:is(.margin-x-lg--10, .margin-left-lg--10) { margin-left: 10px; }
847
+ &:is(.margin-x-lg--10, .margin-right-lg--10) { margin-right: 10px; }
848
+ &.margin-lg--9 { margin: 9px; }
849
+ &:is(.margin-y-lg--9, .margin-top-lg--9) { margin-top: 9px; }
850
+ &:is(.margin-y-lg--9, .margin-bottom-lg--9) { margin-bottom: 9px; }
851
+ &:is(.margin-x-lg--9, .margin-left-lg--9) { margin-left: 9px; }
852
+ &:is(.margin-x-lg--9, .margin-right-lg--9) { margin-right: 9px; }
853
+ &.margin-lg--8 { margin: 8px; }
854
+ &:is(.margin-y-lg--8, .margin-top-lg--8) { margin-top: 8px; }
855
+ &:is(.margin-y-lg--8, .margin-bottom-lg--8) { margin-bottom: 8px; }
856
+ &:is(.margin-x-lg--8, .margin-left-lg--8) { margin-left: 8px; }
857
+ &:is(.margin-x-lg--8, .margin-right-lg--8) { margin-right: 8px; }
858
+ &.margin-lg--7 { margin: 7px; }
859
+ &:is(.margin-y-lg--7, .margin-top-lg--7) { margin-top: 7px; }
860
+ &:is(.margin-y-lg--7, .margin-bottom-lg--7) { margin-bottom: 7px; }
861
+ &:is(.margin-x-lg--7, .margin-left-lg--7) { margin-left: 7px; }
862
+ &:is(.margin-x-lg--7, .margin-right-lg--7) { margin-right: 7px; }
863
+ &.margin-lg--6 { margin: 6px; }
864
+ &:is(.margin-y-lg--6, .margin-top-lg--6) { margin-top: 6px; }
865
+ &:is(.margin-y-lg--6, .margin-bottom-lg--6) { margin-bottom: 6px; }
866
+ &:is(.margin-x-lg--6, .margin-left-lg--6) { margin-left: 6px; }
867
+ &:is(.margin-x-lg--6, .margin-right-lg--6) { margin-right: 6px; }
868
+ &.margin-lg--5 { margin: 5px; }
869
+ &:is(.margin-y-lg--5, .margin-top-lg--5) { margin-top: 5px; }
870
+ &:is(.margin-y-lg--5, .margin-bottom-lg--5) { margin-bottom: 5px; }
871
+ &:is(.margin-x-lg--5, .margin-left-lg--5) { margin-left: 5px; }
872
+ &:is(.margin-x-lg--5, .margin-right-lg--5) { margin-right: 5px; }
873
+ &.margin-lg--4 { margin: 4px; }
874
+ &:is(.margin-y-lg--4, .margin-top-lg--4) { margin-top: 4px; }
875
+ &:is(.margin-y-lg--4, .margin-bottom-lg--4) { margin-bottom: 4px; }
876
+ &:is(.margin-x-lg--4, .margin-left-lg--4) { margin-left: 4px; }
877
+ &:is(.margin-x-lg--4, .margin-right-lg--4) { margin-right: 4px; }
878
+ &.margin-lg--3 { margin: 3px; }
879
+ &:is(.margin-y-lg--3, .margin-top-lg--3) { margin-top: 3px; }
880
+ &:is(.margin-y-lg--3, .margin-bottom-lg--3) { margin-bottom: 3px; }
881
+ &:is(.margin-x-lg--3, .margin-left-lg--3) { margin-left: 3px; }
882
+ &:is(.margin-x-lg--3, .margin-right-lg--3) { margin-right: 3px; }
883
+ &.margin-lg--2 { margin: 2px; }
884
+ &:is(.margin-y-lg--2, .margin-top-lg--2) { margin-top: 2px; }
885
+ &:is(.margin-y-lg--2, .margin-bottom-lg--2) { margin-bottom: 2px; }
886
+ &:is(.margin-x-lg--2, .margin-left-lg--2) { margin-left: 2px; }
887
+ &:is(.margin-x-lg--2, .margin-right-lg--2) { margin-right: 2px; }
888
+ &.margin-lg--1 { margin: 1px; }
889
+ &:is(.margin-y-lg--1, .margin-top-lg--1) { margin-top: 1px; }
890
+ &:is(.margin-y-lg--1, .margin-bottom-lg--1) { margin-bottom: 1px; }
891
+ &:is(.margin-x-lg--1, .margin-left-lg--1) { margin-left: 1px; }
892
+ &:is(.margin-x-lg--1, .margin-right-lg--1) { margin-right: 1px; }
893
+ &.margin-lg-auto { margin: auto; }
894
+ }
895
+ .pacem-pad {
896
+ &.pad-lg-6 { padding: var(--pacem-size-6); }
897
+ &:is(.pad-y-lg-6, .pad-top-lg-6) { padding-top: var(--pacem-size-6); }
898
+ &:is(.pad-y-lg-6, .pad-bottom-lg-6) { padding-bottom: var(--pacem-size-6); }
899
+ &:is(.pad-x-lg-6, .pad-left-lg-6) { padding-left: var(--pacem-size-6); }
900
+ &:is(.pad-x-lg-6, .pad-right-lg-6) { padding-right: var(--pacem-size-6); }
901
+ &.pad-lg-5 { padding: var(--pacem-size-5); }
902
+ &:is(.pad-y-lg-5, .pad-top-lg-5) { padding-top: var(--pacem-size-5); }
903
+ &:is(.pad-y-lg-5, .pad-bottom-lg-5) { padding-bottom: var(--pacem-size-5); }
904
+ &:is(.pad-x-lg-5, .pad-left-lg-5) { padding-left: var(--pacem-size-5); }
905
+ &:is(.pad-x-lg-5, .pad-right-lg-5) { padding-right: var(--pacem-size-5); }
906
+ &.pad-lg-4 { padding: var(--pacem-size-4); }
907
+ &:is(.pad-y-lg-4, .pad-top-lg-4) { padding-top: var(--pacem-size-4); }
908
+ &:is(.pad-y-lg-4, .pad-bottom-lg-4) { padding-bottom: var(--pacem-size-4); }
909
+ &:is(.pad-x-lg-4, .pad-left-lg-4) { padding-left: var(--pacem-size-4); }
910
+ &:is(.pad-x-lg-4, .pad-right-lg-4) { padding-right: var(--pacem-size-4); }
911
+ &.pad-lg-3 { padding: var(--pacem-size-3); }
912
+ &:is(.pad-y-lg-3, .pad-top-lg-3) { padding-top: var(--pacem-size-3); }
913
+ &:is(.pad-y-lg-3, .pad-bottom-lg-3) { padding-bottom: var(--pacem-size-3); }
914
+ &:is(.pad-x-lg-3, .pad-left-lg-3) { padding-left: var(--pacem-size-3); }
915
+ &:is(.pad-x-lg-3, .pad-right-lg-3) { padding-right: var(--pacem-size-3); }
916
+ &.pad-lg-2 { padding: var(--pacem-size-2); }
917
+ &:is(.pad-y-lg-2, .pad-top-lg-2) { padding-top: var(--pacem-size-2); }
918
+ &:is(.pad-y-lg-2, .pad-bottom-lg-2) { padding-bottom: var(--pacem-size-2); }
919
+ &:is(.pad-x-lg-2, .pad-left-lg-2) { padding-left: var(--pacem-size-2); }
920
+ &:is(.pad-x-lg-2, .pad-right-lg-2) { padding-right: var(--pacem-size-2); }
921
+ &.pad-lg-1 { padding: var(--pacem-size-1); }
922
+ &:is(.pad-y-lg-1, .pad-top-lg-1) { padding-top: var(--pacem-size-1); }
923
+ &:is(.pad-y-lg-1, .pad-bottom-lg-1) { padding-bottom: var(--pacem-size-1); }
924
+ &:is(.pad-x-lg-1, .pad-left-lg-1) { padding-left: var(--pacem-size-1); }
925
+ &:is(.pad-x-lg-1, .pad-right-lg-1) { padding-right: var(--pacem-size-1); }
926
+ &.pad-lg-0 { padding: 0; }
927
+ &:is(.pad-y-lg-0, .pad-top-lg-0) { padding-top: 0; }
928
+ &:is(.pad-y-lg-0, .pad-bottom-lg-0) { padding-bottom: 0; }
929
+ &:is(.pad-x-lg-0, .pad-left-lg-0) { padding-left: 0; }
930
+ &:is(.pad-x-lg-0, .pad-right-lg-0) { padding-right: 0; }
931
+ &.pad-lg--12 { padding: 12px; }
932
+ &:is(.pad-y-lg--12, .pad-top-lg--12) { padding-top: 12px; }
933
+ &:is(.pad-y-lg--12, .pad-bottom-lg--12) { padding-bottom: 12px; }
934
+ &:is(.pad-x-lg--12, .pad-left-lg--12) { padding-left: 12px; }
935
+ &:is(.pad-x-lg--12, .pad-right-lg--12) { padding-right: 12px; }
936
+ &.pad-lg--11 { padding: 11px; }
937
+ &:is(.pad-y-lg--11, .pad-top-lg--11) { padding-top: 11px; }
938
+ &:is(.pad-y-lg--11, .pad-bottom-lg--11) { padding-bottom: 11px; }
939
+ &:is(.pad-x-lg--11, .pad-left-lg--11) { padding-left: 11px; }
940
+ &:is(.pad-x-lg--11, .pad-right-lg--11) { padding-right: 11px; }
941
+ &.pad-lg--10 { padding: 10px; }
942
+ &:is(.pad-y-lg--10, .pad-top-lg--10) { padding-top: 10px; }
943
+ &:is(.pad-y-lg--10, .pad-bottom-lg--10) { padding-bottom: 10px; }
944
+ &:is(.pad-x-lg--10, .pad-left-lg--10) { padding-left: 10px; }
945
+ &:is(.pad-x-lg--10, .pad-right-lg--10) { padding-right: 10px; }
946
+ &.pad-lg--9 { padding: 9px; }
947
+ &:is(.pad-y-lg--9, .pad-top-lg--9) { padding-top: 9px; }
948
+ &:is(.pad-y-lg--9, .pad-bottom-lg--9) { padding-bottom: 9px; }
949
+ &:is(.pad-x-lg--9, .pad-left-lg--9) { padding-left: 9px; }
950
+ &:is(.pad-x-lg--9, .pad-right-lg--9) { padding-right: 9px; }
951
+ &.pad-lg--8 { padding: 8px; }
952
+ &:is(.pad-y-lg--8, .pad-top-lg--8) { padding-top: 8px; }
953
+ &:is(.pad-y-lg--8, .pad-bottom-lg--8) { padding-bottom: 8px; }
954
+ &:is(.pad-x-lg--8, .pad-left-lg--8) { padding-left: 8px; }
955
+ &:is(.pad-x-lg--8, .pad-right-lg--8) { padding-right: 8px; }
956
+ &.pad-lg--7 { padding: 7px; }
957
+ &:is(.pad-y-lg--7, .pad-top-lg--7) { padding-top: 7px; }
958
+ &:is(.pad-y-lg--7, .pad-bottom-lg--7) { padding-bottom: 7px; }
959
+ &:is(.pad-x-lg--7, .pad-left-lg--7) { padding-left: 7px; }
960
+ &:is(.pad-x-lg--7, .pad-right-lg--7) { padding-right: 7px; }
961
+ &.pad-lg--6 { padding: 6px; }
962
+ &:is(.pad-y-lg--6, .pad-top-lg--6) { padding-top: 6px; }
963
+ &:is(.pad-y-lg--6, .pad-bottom-lg--6) { padding-bottom: 6px; }
964
+ &:is(.pad-x-lg--6, .pad-left-lg--6) { padding-left: 6px; }
965
+ &:is(.pad-x-lg--6, .pad-right-lg--6) { padding-right: 6px; }
966
+ &.pad-lg--5 { padding: 5px; }
967
+ &:is(.pad-y-lg--5, .pad-top-lg--5) { padding-top: 5px; }
968
+ &:is(.pad-y-lg--5, .pad-bottom-lg--5) { padding-bottom: 5px; }
969
+ &:is(.pad-x-lg--5, .pad-left-lg--5) { padding-left: 5px; }
970
+ &:is(.pad-x-lg--5, .pad-right-lg--5) { padding-right: 5px; }
971
+ &.pad-lg--4 { padding: 4px; }
972
+ &:is(.pad-y-lg--4, .pad-top-lg--4) { padding-top: 4px; }
973
+ &:is(.pad-y-lg--4, .pad-bottom-lg--4) { padding-bottom: 4px; }
974
+ &:is(.pad-x-lg--4, .pad-left-lg--4) { padding-left: 4px; }
975
+ &:is(.pad-x-lg--4, .pad-right-lg--4) { padding-right: 4px; }
976
+ &.pad-lg--3 { padding: 3px; }
977
+ &:is(.pad-y-lg--3, .pad-top-lg--3) { padding-top: 3px; }
978
+ &:is(.pad-y-lg--3, .pad-bottom-lg--3) { padding-bottom: 3px; }
979
+ &:is(.pad-x-lg--3, .pad-left-lg--3) { padding-left: 3px; }
980
+ &:is(.pad-x-lg--3, .pad-right-lg--3) { padding-right: 3px; }
981
+ &.pad-lg--2 { padding: 2px; }
982
+ &:is(.pad-y-lg--2, .pad-top-lg--2) { padding-top: 2px; }
983
+ &:is(.pad-y-lg--2, .pad-bottom-lg--2) { padding-bottom: 2px; }
984
+ &:is(.pad-x-lg--2, .pad-left-lg--2) { padding-left: 2px; }
985
+ &:is(.pad-x-lg--2, .pad-right-lg--2) { padding-right: 2px; }
986
+ &.pad-lg--1 { padding: 1px; }
987
+ &:is(.pad-y-lg--1, .pad-top-lg--1) { padding-top: 1px; }
988
+ &:is(.pad-y-lg--1, .pad-bottom-lg--1) { padding-bottom: 1px; }
989
+ &:is(.pad-x-lg--1, .pad-left-lg--1) { padding-left: 1px; }
990
+ &:is(.pad-x-lg--1, .pad-right-lg--1) { padding-right: 1px; }
991
+ &.pad-lg-auto { padding: auto; }
992
+ }
993
+ }
994
+
995
+ @media (--pacem-xl) {
996
+ .pacem-margin {
997
+ &.margin-xl-6 { margin: var(--pacem-size-6); }
998
+ &:is(.margin-y-xl-6, .margin-top-xl-6) { margin-top: var(--pacem-size-6); }
999
+ &:is(.margin-y-xl-6, .margin-bottom-xl-6) { margin-bottom: var(--pacem-size-6); }
1000
+ &:is(.margin-x-xl-6, .margin-left-xl-6) { margin-left: var(--pacem-size-6); }
1001
+ &:is(.margin-x-xl-6, .margin-right-xl-6) { margin-right: var(--pacem-size-6); }
1002
+ &.margin-xl-5 { margin: var(--pacem-size-5); }
1003
+ &:is(.margin-y-xl-5, .margin-top-xl-5) { margin-top: var(--pacem-size-5); }
1004
+ &:is(.margin-y-xl-5, .margin-bottom-xl-5) { margin-bottom: var(--pacem-size-5); }
1005
+ &:is(.margin-x-xl-5, .margin-left-xl-5) { margin-left: var(--pacem-size-5); }
1006
+ &:is(.margin-x-xl-5, .margin-right-xl-5) { margin-right: var(--pacem-size-5); }
1007
+ &.margin-xl-4 { margin: var(--pacem-size-4); }
1008
+ &:is(.margin-y-xl-4, .margin-top-xl-4) { margin-top: var(--pacem-size-4); }
1009
+ &:is(.margin-y-xl-4, .margin-bottom-xl-4) { margin-bottom: var(--pacem-size-4); }
1010
+ &:is(.margin-x-xl-4, .margin-left-xl-4) { margin-left: var(--pacem-size-4); }
1011
+ &:is(.margin-x-xl-4, .margin-right-xl-4) { margin-right: var(--pacem-size-4); }
1012
+ &.margin-xl-3 { margin: var(--pacem-size-3); }
1013
+ &:is(.margin-y-xl-3, .margin-top-xl-3) { margin-top: var(--pacem-size-3); }
1014
+ &:is(.margin-y-xl-3, .margin-bottom-xl-3) { margin-bottom: var(--pacem-size-3); }
1015
+ &:is(.margin-x-xl-3, .margin-left-xl-3) { margin-left: var(--pacem-size-3); }
1016
+ &:is(.margin-x-xl-3, .margin-right-xl-3) { margin-right: var(--pacem-size-3); }
1017
+ &.margin-xl-2 { margin: var(--pacem-size-2); }
1018
+ &:is(.margin-y-xl-2, .margin-top-xl-2) { margin-top: var(--pacem-size-2); }
1019
+ &:is(.margin-y-xl-2, .margin-bottom-xl-2) { margin-bottom: var(--pacem-size-2); }
1020
+ &:is(.margin-x-xl-2, .margin-left-xl-2) { margin-left: var(--pacem-size-2); }
1021
+ &:is(.margin-x-xl-2, .margin-right-xl-2) { margin-right: var(--pacem-size-2); }
1022
+ &.margin-xl-1 { margin: var(--pacem-size-1); }
1023
+ &:is(.margin-y-xl-1, .margin-top-xl-1) { margin-top: var(--pacem-size-1); }
1024
+ &:is(.margin-y-xl-1, .margin-bottom-xl-1) { margin-bottom: var(--pacem-size-1); }
1025
+ &:is(.margin-x-xl-1, .margin-left-xl-1) { margin-left: var(--pacem-size-1); }
1026
+ &:is(.margin-x-xl-1, .margin-right-xl-1) { margin-right: var(--pacem-size-1); }
1027
+ &.margin-xl-0 { margin: 0; }
1028
+ &:is(.margin-y-xl-0, .margin-top-xl-0) { margin-top: 0; }
1029
+ &:is(.margin-y-xl-0, .margin-bottom-xl-0) { margin-bottom: 0; }
1030
+ &:is(.margin-x-xl-0, .margin-left-xl-0) { margin-left: 0; }
1031
+ &:is(.margin-x-xl-0, .margin-right-xl-0) { margin-right: 0; }
1032
+ &.margin-xl--12 { margin: 12px; }
1033
+ &:is(.margin-y-xl--12, .margin-top-xl--12) { margin-top: 12px; }
1034
+ &:is(.margin-y-xl--12, .margin-bottom-xl--12) { margin-bottom: 12px; }
1035
+ &:is(.margin-x-xl--12, .margin-left-xl--12) { margin-left: 12px; }
1036
+ &:is(.margin-x-xl--12, .margin-right-xl--12) { margin-right: 12px; }
1037
+ &.margin-xl--11 { margin: 11px; }
1038
+ &:is(.margin-y-xl--11, .margin-top-xl--11) { margin-top: 11px; }
1039
+ &:is(.margin-y-xl--11, .margin-bottom-xl--11) { margin-bottom: 11px; }
1040
+ &:is(.margin-x-xl--11, .margin-left-xl--11) { margin-left: 11px; }
1041
+ &:is(.margin-x-xl--11, .margin-right-xl--11) { margin-right: 11px; }
1042
+ &.margin-xl--10 { margin: 10px; }
1043
+ &:is(.margin-y-xl--10, .margin-top-xl--10) { margin-top: 10px; }
1044
+ &:is(.margin-y-xl--10, .margin-bottom-xl--10) { margin-bottom: 10px; }
1045
+ &:is(.margin-x-xl--10, .margin-left-xl--10) { margin-left: 10px; }
1046
+ &:is(.margin-x-xl--10, .margin-right-xl--10) { margin-right: 10px; }
1047
+ &.margin-xl--9 { margin: 9px; }
1048
+ &:is(.margin-y-xl--9, .margin-top-xl--9) { margin-top: 9px; }
1049
+ &:is(.margin-y-xl--9, .margin-bottom-xl--9) { margin-bottom: 9px; }
1050
+ &:is(.margin-x-xl--9, .margin-left-xl--9) { margin-left: 9px; }
1051
+ &:is(.margin-x-xl--9, .margin-right-xl--9) { margin-right: 9px; }
1052
+ &.margin-xl--8 { margin: 8px; }
1053
+ &:is(.margin-y-xl--8, .margin-top-xl--8) { margin-top: 8px; }
1054
+ &:is(.margin-y-xl--8, .margin-bottom-xl--8) { margin-bottom: 8px; }
1055
+ &:is(.margin-x-xl--8, .margin-left-xl--8) { margin-left: 8px; }
1056
+ &:is(.margin-x-xl--8, .margin-right-xl--8) { margin-right: 8px; }
1057
+ &.margin-xl--7 { margin: 7px; }
1058
+ &:is(.margin-y-xl--7, .margin-top-xl--7) { margin-top: 7px; }
1059
+ &:is(.margin-y-xl--7, .margin-bottom-xl--7) { margin-bottom: 7px; }
1060
+ &:is(.margin-x-xl--7, .margin-left-xl--7) { margin-left: 7px; }
1061
+ &:is(.margin-x-xl--7, .margin-right-xl--7) { margin-right: 7px; }
1062
+ &.margin-xl--6 { margin: 6px; }
1063
+ &:is(.margin-y-xl--6, .margin-top-xl--6) { margin-top: 6px; }
1064
+ &:is(.margin-y-xl--6, .margin-bottom-xl--6) { margin-bottom: 6px; }
1065
+ &:is(.margin-x-xl--6, .margin-left-xl--6) { margin-left: 6px; }
1066
+ &:is(.margin-x-xl--6, .margin-right-xl--6) { margin-right: 6px; }
1067
+ &.margin-xl--5 { margin: 5px; }
1068
+ &:is(.margin-y-xl--5, .margin-top-xl--5) { margin-top: 5px; }
1069
+ &:is(.margin-y-xl--5, .margin-bottom-xl--5) { margin-bottom: 5px; }
1070
+ &:is(.margin-x-xl--5, .margin-left-xl--5) { margin-left: 5px; }
1071
+ &:is(.margin-x-xl--5, .margin-right-xl--5) { margin-right: 5px; }
1072
+ &.margin-xl--4 { margin: 4px; }
1073
+ &:is(.margin-y-xl--4, .margin-top-xl--4) { margin-top: 4px; }
1074
+ &:is(.margin-y-xl--4, .margin-bottom-xl--4) { margin-bottom: 4px; }
1075
+ &:is(.margin-x-xl--4, .margin-left-xl--4) { margin-left: 4px; }
1076
+ &:is(.margin-x-xl--4, .margin-right-xl--4) { margin-right: 4px; }
1077
+ &.margin-xl--3 { margin: 3px; }
1078
+ &:is(.margin-y-xl--3, .margin-top-xl--3) { margin-top: 3px; }
1079
+ &:is(.margin-y-xl--3, .margin-bottom-xl--3) { margin-bottom: 3px; }
1080
+ &:is(.margin-x-xl--3, .margin-left-xl--3) { margin-left: 3px; }
1081
+ &:is(.margin-x-xl--3, .margin-right-xl--3) { margin-right: 3px; }
1082
+ &.margin-xl--2 { margin: 2px; }
1083
+ &:is(.margin-y-xl--2, .margin-top-xl--2) { margin-top: 2px; }
1084
+ &:is(.margin-y-xl--2, .margin-bottom-xl--2) { margin-bottom: 2px; }
1085
+ &:is(.margin-x-xl--2, .margin-left-xl--2) { margin-left: 2px; }
1086
+ &:is(.margin-x-xl--2, .margin-right-xl--2) { margin-right: 2px; }
1087
+ &.margin-xl--1 { margin: 1px; }
1088
+ &:is(.margin-y-xl--1, .margin-top-xl--1) { margin-top: 1px; }
1089
+ &:is(.margin-y-xl--1, .margin-bottom-xl--1) { margin-bottom: 1px; }
1090
+ &:is(.margin-x-xl--1, .margin-left-xl--1) { margin-left: 1px; }
1091
+ &:is(.margin-x-xl--1, .margin-right-xl--1) { margin-right: 1px; }
1092
+ &.margin-xl-auto { margin: auto; }
1093
+ }
1094
+ .pacem-pad {
1095
+ &.pad-xl-6 { padding: var(--pacem-size-6); }
1096
+ &:is(.pad-y-xl-6, .pad-top-xl-6) { padding-top: var(--pacem-size-6); }
1097
+ &:is(.pad-y-xl-6, .pad-bottom-xl-6) { padding-bottom: var(--pacem-size-6); }
1098
+ &:is(.pad-x-xl-6, .pad-left-xl-6) { padding-left: var(--pacem-size-6); }
1099
+ &:is(.pad-x-xl-6, .pad-right-xl-6) { padding-right: var(--pacem-size-6); }
1100
+ &.pad-xl-5 { padding: var(--pacem-size-5); }
1101
+ &:is(.pad-y-xl-5, .pad-top-xl-5) { padding-top: var(--pacem-size-5); }
1102
+ &:is(.pad-y-xl-5, .pad-bottom-xl-5) { padding-bottom: var(--pacem-size-5); }
1103
+ &:is(.pad-x-xl-5, .pad-left-xl-5) { padding-left: var(--pacem-size-5); }
1104
+ &:is(.pad-x-xl-5, .pad-right-xl-5) { padding-right: var(--pacem-size-5); }
1105
+ &.pad-xl-4 { padding: var(--pacem-size-4); }
1106
+ &:is(.pad-y-xl-4, .pad-top-xl-4) { padding-top: var(--pacem-size-4); }
1107
+ &:is(.pad-y-xl-4, .pad-bottom-xl-4) { padding-bottom: var(--pacem-size-4); }
1108
+ &:is(.pad-x-xl-4, .pad-left-xl-4) { padding-left: var(--pacem-size-4); }
1109
+ &:is(.pad-x-xl-4, .pad-right-xl-4) { padding-right: var(--pacem-size-4); }
1110
+ &.pad-xl-3 { padding: var(--pacem-size-3); }
1111
+ &:is(.pad-y-xl-3, .pad-top-xl-3) { padding-top: var(--pacem-size-3); }
1112
+ &:is(.pad-y-xl-3, .pad-bottom-xl-3) { padding-bottom: var(--pacem-size-3); }
1113
+ &:is(.pad-x-xl-3, .pad-left-xl-3) { padding-left: var(--pacem-size-3); }
1114
+ &:is(.pad-x-xl-3, .pad-right-xl-3) { padding-right: var(--pacem-size-3); }
1115
+ &.pad-xl-2 { padding: var(--pacem-size-2); }
1116
+ &:is(.pad-y-xl-2, .pad-top-xl-2) { padding-top: var(--pacem-size-2); }
1117
+ &:is(.pad-y-xl-2, .pad-bottom-xl-2) { padding-bottom: var(--pacem-size-2); }
1118
+ &:is(.pad-x-xl-2, .pad-left-xl-2) { padding-left: var(--pacem-size-2); }
1119
+ &:is(.pad-x-xl-2, .pad-right-xl-2) { padding-right: var(--pacem-size-2); }
1120
+ &.pad-xl-1 { padding: var(--pacem-size-1); }
1121
+ &:is(.pad-y-xl-1, .pad-top-xl-1) { padding-top: var(--pacem-size-1); }
1122
+ &:is(.pad-y-xl-1, .pad-bottom-xl-1) { padding-bottom: var(--pacem-size-1); }
1123
+ &:is(.pad-x-xl-1, .pad-left-xl-1) { padding-left: var(--pacem-size-1); }
1124
+ &:is(.pad-x-xl-1, .pad-right-xl-1) { padding-right: var(--pacem-size-1); }
1125
+ &.pad-xl-0 { padding: 0; }
1126
+ &:is(.pad-y-xl-0, .pad-top-xl-0) { padding-top: 0; }
1127
+ &:is(.pad-y-xl-0, .pad-bottom-xl-0) { padding-bottom: 0; }
1128
+ &:is(.pad-x-xl-0, .pad-left-xl-0) { padding-left: 0; }
1129
+ &:is(.pad-x-xl-0, .pad-right-xl-0) { padding-right: 0; }
1130
+ &.pad-xl--12 { padding: 12px; }
1131
+ &:is(.pad-y-xl--12, .pad-top-xl--12) { padding-top: 12px; }
1132
+ &:is(.pad-y-xl--12, .pad-bottom-xl--12) { padding-bottom: 12px; }
1133
+ &:is(.pad-x-xl--12, .pad-left-xl--12) { padding-left: 12px; }
1134
+ &:is(.pad-x-xl--12, .pad-right-xl--12) { padding-right: 12px; }
1135
+ &.pad-xl--11 { padding: 11px; }
1136
+ &:is(.pad-y-xl--11, .pad-top-xl--11) { padding-top: 11px; }
1137
+ &:is(.pad-y-xl--11, .pad-bottom-xl--11) { padding-bottom: 11px; }
1138
+ &:is(.pad-x-xl--11, .pad-left-xl--11) { padding-left: 11px; }
1139
+ &:is(.pad-x-xl--11, .pad-right-xl--11) { padding-right: 11px; }
1140
+ &.pad-xl--10 { padding: 10px; }
1141
+ &:is(.pad-y-xl--10, .pad-top-xl--10) { padding-top: 10px; }
1142
+ &:is(.pad-y-xl--10, .pad-bottom-xl--10) { padding-bottom: 10px; }
1143
+ &:is(.pad-x-xl--10, .pad-left-xl--10) { padding-left: 10px; }
1144
+ &:is(.pad-x-xl--10, .pad-right-xl--10) { padding-right: 10px; }
1145
+ &.pad-xl--9 { padding: 9px; }
1146
+ &:is(.pad-y-xl--9, .pad-top-xl--9) { padding-top: 9px; }
1147
+ &:is(.pad-y-xl--9, .pad-bottom-xl--9) { padding-bottom: 9px; }
1148
+ &:is(.pad-x-xl--9, .pad-left-xl--9) { padding-left: 9px; }
1149
+ &:is(.pad-x-xl--9, .pad-right-xl--9) { padding-right: 9px; }
1150
+ &.pad-xl--8 { padding: 8px; }
1151
+ &:is(.pad-y-xl--8, .pad-top-xl--8) { padding-top: 8px; }
1152
+ &:is(.pad-y-xl--8, .pad-bottom-xl--8) { padding-bottom: 8px; }
1153
+ &:is(.pad-x-xl--8, .pad-left-xl--8) { padding-left: 8px; }
1154
+ &:is(.pad-x-xl--8, .pad-right-xl--8) { padding-right: 8px; }
1155
+ &.pad-xl--7 { padding: 7px; }
1156
+ &:is(.pad-y-xl--7, .pad-top-xl--7) { padding-top: 7px; }
1157
+ &:is(.pad-y-xl--7, .pad-bottom-xl--7) { padding-bottom: 7px; }
1158
+ &:is(.pad-x-xl--7, .pad-left-xl--7) { padding-left: 7px; }
1159
+ &:is(.pad-x-xl--7, .pad-right-xl--7) { padding-right: 7px; }
1160
+ &.pad-xl--6 { padding: 6px; }
1161
+ &:is(.pad-y-xl--6, .pad-top-xl--6) { padding-top: 6px; }
1162
+ &:is(.pad-y-xl--6, .pad-bottom-xl--6) { padding-bottom: 6px; }
1163
+ &:is(.pad-x-xl--6, .pad-left-xl--6) { padding-left: 6px; }
1164
+ &:is(.pad-x-xl--6, .pad-right-xl--6) { padding-right: 6px; }
1165
+ &.pad-xl--5 { padding: 5px; }
1166
+ &:is(.pad-y-xl--5, .pad-top-xl--5) { padding-top: 5px; }
1167
+ &:is(.pad-y-xl--5, .pad-bottom-xl--5) { padding-bottom: 5px; }
1168
+ &:is(.pad-x-xl--5, .pad-left-xl--5) { padding-left: 5px; }
1169
+ &:is(.pad-x-xl--5, .pad-right-xl--5) { padding-right: 5px; }
1170
+ &.pad-xl--4 { padding: 4px; }
1171
+ &:is(.pad-y-xl--4, .pad-top-xl--4) { padding-top: 4px; }
1172
+ &:is(.pad-y-xl--4, .pad-bottom-xl--4) { padding-bottom: 4px; }
1173
+ &:is(.pad-x-xl--4, .pad-left-xl--4) { padding-left: 4px; }
1174
+ &:is(.pad-x-xl--4, .pad-right-xl--4) { padding-right: 4px; }
1175
+ &.pad-xl--3 { padding: 3px; }
1176
+ &:is(.pad-y-xl--3, .pad-top-xl--3) { padding-top: 3px; }
1177
+ &:is(.pad-y-xl--3, .pad-bottom-xl--3) { padding-bottom: 3px; }
1178
+ &:is(.pad-x-xl--3, .pad-left-xl--3) { padding-left: 3px; }
1179
+ &:is(.pad-x-xl--3, .pad-right-xl--3) { padding-right: 3px; }
1180
+ &.pad-xl--2 { padding: 2px; }
1181
+ &:is(.pad-y-xl--2, .pad-top-xl--2) { padding-top: 2px; }
1182
+ &:is(.pad-y-xl--2, .pad-bottom-xl--2) { padding-bottom: 2px; }
1183
+ &:is(.pad-x-xl--2, .pad-left-xl--2) { padding-left: 2px; }
1184
+ &:is(.pad-x-xl--2, .pad-right-xl--2) { padding-right: 2px; }
1185
+ &.pad-xl--1 { padding: 1px; }
1186
+ &:is(.pad-y-xl--1, .pad-top-xl--1) { padding-top: 1px; }
1187
+ &:is(.pad-y-xl--1, .pad-bottom-xl--1) { padding-bottom: 1px; }
1188
+ &:is(.pad-x-xl--1, .pad-left-xl--1) { padding-left: 1px; }
1189
+ &:is(.pad-x-xl--1, .pad-right-xl--1) { padding-right: 1px; }
1190
+ &.pad-xl-auto { padding: auto; }
1191
+ }
1192
+ }
1193
+
1194
+ @media (--pacem-hd) {
1195
+ .pacem-margin {
1196
+ &.margin-hd-6 { margin: var(--pacem-size-6); }
1197
+ &:is(.margin-y-hd-6, .margin-top-hd-6) { margin-top: var(--pacem-size-6); }
1198
+ &:is(.margin-y-hd-6, .margin-bottom-hd-6) { margin-bottom: var(--pacem-size-6); }
1199
+ &:is(.margin-x-hd-6, .margin-left-hd-6) { margin-left: var(--pacem-size-6); }
1200
+ &:is(.margin-x-hd-6, .margin-right-hd-6) { margin-right: var(--pacem-size-6); }
1201
+ &.margin-hd-5 { margin: var(--pacem-size-5); }
1202
+ &:is(.margin-y-hd-5, .margin-top-hd-5) { margin-top: var(--pacem-size-5); }
1203
+ &:is(.margin-y-hd-5, .margin-bottom-hd-5) { margin-bottom: var(--pacem-size-5); }
1204
+ &:is(.margin-x-hd-5, .margin-left-hd-5) { margin-left: var(--pacem-size-5); }
1205
+ &:is(.margin-x-hd-5, .margin-right-hd-5) { margin-right: var(--pacem-size-5); }
1206
+ &.margin-hd-4 { margin: var(--pacem-size-4); }
1207
+ &:is(.margin-y-hd-4, .margin-top-hd-4) { margin-top: var(--pacem-size-4); }
1208
+ &:is(.margin-y-hd-4, .margin-bottom-hd-4) { margin-bottom: var(--pacem-size-4); }
1209
+ &:is(.margin-x-hd-4, .margin-left-hd-4) { margin-left: var(--pacem-size-4); }
1210
+ &:is(.margin-x-hd-4, .margin-right-hd-4) { margin-right: var(--pacem-size-4); }
1211
+ &.margin-hd-3 { margin: var(--pacem-size-3); }
1212
+ &:is(.margin-y-hd-3, .margin-top-hd-3) { margin-top: var(--pacem-size-3); }
1213
+ &:is(.margin-y-hd-3, .margin-bottom-hd-3) { margin-bottom: var(--pacem-size-3); }
1214
+ &:is(.margin-x-hd-3, .margin-left-hd-3) { margin-left: var(--pacem-size-3); }
1215
+ &:is(.margin-x-hd-3, .margin-right-hd-3) { margin-right: var(--pacem-size-3); }
1216
+ &.margin-hd-2 { margin: var(--pacem-size-2); }
1217
+ &:is(.margin-y-hd-2, .margin-top-hd-2) { margin-top: var(--pacem-size-2); }
1218
+ &:is(.margin-y-hd-2, .margin-bottom-hd-2) { margin-bottom: var(--pacem-size-2); }
1219
+ &:is(.margin-x-hd-2, .margin-left-hd-2) { margin-left: var(--pacem-size-2); }
1220
+ &:is(.margin-x-hd-2, .margin-right-hd-2) { margin-right: var(--pacem-size-2); }
1221
+ &.margin-hd-1 { margin: var(--pacem-size-1); }
1222
+ &:is(.margin-y-hd-1, .margin-top-hd-1) { margin-top: var(--pacem-size-1); }
1223
+ &:is(.margin-y-hd-1, .margin-bottom-hd-1) { margin-bottom: var(--pacem-size-1); }
1224
+ &:is(.margin-x-hd-1, .margin-left-hd-1) { margin-left: var(--pacem-size-1); }
1225
+ &:is(.margin-x-hd-1, .margin-right-hd-1) { margin-right: var(--pacem-size-1); }
1226
+ &.margin-hd-0 { margin: 0; }
1227
+ &:is(.margin-y-hd-0, .margin-top-hd-0) { margin-top: 0; }
1228
+ &:is(.margin-y-hd-0, .margin-bottom-hd-0) { margin-bottom: 0; }
1229
+ &:is(.margin-x-hd-0, .margin-left-hd-0) { margin-left: 0; }
1230
+ &:is(.margin-x-hd-0, .margin-right-hd-0) { margin-right: 0; }
1231
+ &.margin-hd--12 { margin: 12px; }
1232
+ &:is(.margin-y-hd--12, .margin-top-hd--12) { margin-top: 12px; }
1233
+ &:is(.margin-y-hd--12, .margin-bottom-hd--12) { margin-bottom: 12px; }
1234
+ &:is(.margin-x-hd--12, .margin-left-hd--12) { margin-left: 12px; }
1235
+ &:is(.margin-x-hd--12, .margin-right-hd--12) { margin-right: 12px; }
1236
+ &.margin-hd--11 { margin: 11px; }
1237
+ &:is(.margin-y-hd--11, .margin-top-hd--11) { margin-top: 11px; }
1238
+ &:is(.margin-y-hd--11, .margin-bottom-hd--11) { margin-bottom: 11px; }
1239
+ &:is(.margin-x-hd--11, .margin-left-hd--11) { margin-left: 11px; }
1240
+ &:is(.margin-x-hd--11, .margin-right-hd--11) { margin-right: 11px; }
1241
+ &.margin-hd--10 { margin: 10px; }
1242
+ &:is(.margin-y-hd--10, .margin-top-hd--10) { margin-top: 10px; }
1243
+ &:is(.margin-y-hd--10, .margin-bottom-hd--10) { margin-bottom: 10px; }
1244
+ &:is(.margin-x-hd--10, .margin-left-hd--10) { margin-left: 10px; }
1245
+ &:is(.margin-x-hd--10, .margin-right-hd--10) { margin-right: 10px; }
1246
+ &.margin-hd--9 { margin: 9px; }
1247
+ &:is(.margin-y-hd--9, .margin-top-hd--9) { margin-top: 9px; }
1248
+ &:is(.margin-y-hd--9, .margin-bottom-hd--9) { margin-bottom: 9px; }
1249
+ &:is(.margin-x-hd--9, .margin-left-hd--9) { margin-left: 9px; }
1250
+ &:is(.margin-x-hd--9, .margin-right-hd--9) { margin-right: 9px; }
1251
+ &.margin-hd--8 { margin: 8px; }
1252
+ &:is(.margin-y-hd--8, .margin-top-hd--8) { margin-top: 8px; }
1253
+ &:is(.margin-y-hd--8, .margin-bottom-hd--8) { margin-bottom: 8px; }
1254
+ &:is(.margin-x-hd--8, .margin-left-hd--8) { margin-left: 8px; }
1255
+ &:is(.margin-x-hd--8, .margin-right-hd--8) { margin-right: 8px; }
1256
+ &.margin-hd--7 { margin: 7px; }
1257
+ &:is(.margin-y-hd--7, .margin-top-hd--7) { margin-top: 7px; }
1258
+ &:is(.margin-y-hd--7, .margin-bottom-hd--7) { margin-bottom: 7px; }
1259
+ &:is(.margin-x-hd--7, .margin-left-hd--7) { margin-left: 7px; }
1260
+ &:is(.margin-x-hd--7, .margin-right-hd--7) { margin-right: 7px; }
1261
+ &.margin-hd--6 { margin: 6px; }
1262
+ &:is(.margin-y-hd--6, .margin-top-hd--6) { margin-top: 6px; }
1263
+ &:is(.margin-y-hd--6, .margin-bottom-hd--6) { margin-bottom: 6px; }
1264
+ &:is(.margin-x-hd--6, .margin-left-hd--6) { margin-left: 6px; }
1265
+ &:is(.margin-x-hd--6, .margin-right-hd--6) { margin-right: 6px; }
1266
+ &.margin-hd--5 { margin: 5px; }
1267
+ &:is(.margin-y-hd--5, .margin-top-hd--5) { margin-top: 5px; }
1268
+ &:is(.margin-y-hd--5, .margin-bottom-hd--5) { margin-bottom: 5px; }
1269
+ &:is(.margin-x-hd--5, .margin-left-hd--5) { margin-left: 5px; }
1270
+ &:is(.margin-x-hd--5, .margin-right-hd--5) { margin-right: 5px; }
1271
+ &.margin-hd--4 { margin: 4px; }
1272
+ &:is(.margin-y-hd--4, .margin-top-hd--4) { margin-top: 4px; }
1273
+ &:is(.margin-y-hd--4, .margin-bottom-hd--4) { margin-bottom: 4px; }
1274
+ &:is(.margin-x-hd--4, .margin-left-hd--4) { margin-left: 4px; }
1275
+ &:is(.margin-x-hd--4, .margin-right-hd--4) { margin-right: 4px; }
1276
+ &.margin-hd--3 { margin: 3px; }
1277
+ &:is(.margin-y-hd--3, .margin-top-hd--3) { margin-top: 3px; }
1278
+ &:is(.margin-y-hd--3, .margin-bottom-hd--3) { margin-bottom: 3px; }
1279
+ &:is(.margin-x-hd--3, .margin-left-hd--3) { margin-left: 3px; }
1280
+ &:is(.margin-x-hd--3, .margin-right-hd--3) { margin-right: 3px; }
1281
+ &.margin-hd--2 { margin: 2px; }
1282
+ &:is(.margin-y-hd--2, .margin-top-hd--2) { margin-top: 2px; }
1283
+ &:is(.margin-y-hd--2, .margin-bottom-hd--2) { margin-bottom: 2px; }
1284
+ &:is(.margin-x-hd--2, .margin-left-hd--2) { margin-left: 2px; }
1285
+ &:is(.margin-x-hd--2, .margin-right-hd--2) { margin-right: 2px; }
1286
+ &.margin-hd--1 { margin: 1px; }
1287
+ &:is(.margin-y-hd--1, .margin-top-hd--1) { margin-top: 1px; }
1288
+ &:is(.margin-y-hd--1, .margin-bottom-hd--1) { margin-bottom: 1px; }
1289
+ &:is(.margin-x-hd--1, .margin-left-hd--1) { margin-left: 1px; }
1290
+ &:is(.margin-x-hd--1, .margin-right-hd--1) { margin-right: 1px; }
1291
+ &.margin-hd-auto { margin: auto; }
1292
+ }
1293
+ .pacem-pad {
1294
+ &.pad-hd-6 { padding: var(--pacem-size-6); }
1295
+ &:is(.pad-y-hd-6, .pad-top-hd-6) { padding-top: var(--pacem-size-6); }
1296
+ &:is(.pad-y-hd-6, .pad-bottom-hd-6) { padding-bottom: var(--pacem-size-6); }
1297
+ &:is(.pad-x-hd-6, .pad-left-hd-6) { padding-left: var(--pacem-size-6); }
1298
+ &:is(.pad-x-hd-6, .pad-right-hd-6) { padding-right: var(--pacem-size-6); }
1299
+ &.pad-hd-5 { padding: var(--pacem-size-5); }
1300
+ &:is(.pad-y-hd-5, .pad-top-hd-5) { padding-top: var(--pacem-size-5); }
1301
+ &:is(.pad-y-hd-5, .pad-bottom-hd-5) { padding-bottom: var(--pacem-size-5); }
1302
+ &:is(.pad-x-hd-5, .pad-left-hd-5) { padding-left: var(--pacem-size-5); }
1303
+ &:is(.pad-x-hd-5, .pad-right-hd-5) { padding-right: var(--pacem-size-5); }
1304
+ &.pad-hd-4 { padding: var(--pacem-size-4); }
1305
+ &:is(.pad-y-hd-4, .pad-top-hd-4) { padding-top: var(--pacem-size-4); }
1306
+ &:is(.pad-y-hd-4, .pad-bottom-hd-4) { padding-bottom: var(--pacem-size-4); }
1307
+ &:is(.pad-x-hd-4, .pad-left-hd-4) { padding-left: var(--pacem-size-4); }
1308
+ &:is(.pad-x-hd-4, .pad-right-hd-4) { padding-right: var(--pacem-size-4); }
1309
+ &.pad-hd-3 { padding: var(--pacem-size-3); }
1310
+ &:is(.pad-y-hd-3, .pad-top-hd-3) { padding-top: var(--pacem-size-3); }
1311
+ &:is(.pad-y-hd-3, .pad-bottom-hd-3) { padding-bottom: var(--pacem-size-3); }
1312
+ &:is(.pad-x-hd-3, .pad-left-hd-3) { padding-left: var(--pacem-size-3); }
1313
+ &:is(.pad-x-hd-3, .pad-right-hd-3) { padding-right: var(--pacem-size-3); }
1314
+ &.pad-hd-2 { padding: var(--pacem-size-2); }
1315
+ &:is(.pad-y-hd-2, .pad-top-hd-2) { padding-top: var(--pacem-size-2); }
1316
+ &:is(.pad-y-hd-2, .pad-bottom-hd-2) { padding-bottom: var(--pacem-size-2); }
1317
+ &:is(.pad-x-hd-2, .pad-left-hd-2) { padding-left: var(--pacem-size-2); }
1318
+ &:is(.pad-x-hd-2, .pad-right-hd-2) { padding-right: var(--pacem-size-2); }
1319
+ &.pad-hd-1 { padding: var(--pacem-size-1); }
1320
+ &:is(.pad-y-hd-1, .pad-top-hd-1) { padding-top: var(--pacem-size-1); }
1321
+ &:is(.pad-y-hd-1, .pad-bottom-hd-1) { padding-bottom: var(--pacem-size-1); }
1322
+ &:is(.pad-x-hd-1, .pad-left-hd-1) { padding-left: var(--pacem-size-1); }
1323
+ &:is(.pad-x-hd-1, .pad-right-hd-1) { padding-right: var(--pacem-size-1); }
1324
+ &.pad-hd-0 { padding: 0; }
1325
+ &:is(.pad-y-hd-0, .pad-top-hd-0) { padding-top: 0; }
1326
+ &:is(.pad-y-hd-0, .pad-bottom-hd-0) { padding-bottom: 0; }
1327
+ &:is(.pad-x-hd-0, .pad-left-hd-0) { padding-left: 0; }
1328
+ &:is(.pad-x-hd-0, .pad-right-hd-0) { padding-right: 0; }
1329
+ &.pad-hd--12 { padding: 12px; }
1330
+ &:is(.pad-y-hd--12, .pad-top-hd--12) { padding-top: 12px; }
1331
+ &:is(.pad-y-hd--12, .pad-bottom-hd--12) { padding-bottom: 12px; }
1332
+ &:is(.pad-x-hd--12, .pad-left-hd--12) { padding-left: 12px; }
1333
+ &:is(.pad-x-hd--12, .pad-right-hd--12) { padding-right: 12px; }
1334
+ &.pad-hd--11 { padding: 11px; }
1335
+ &:is(.pad-y-hd--11, .pad-top-hd--11) { padding-top: 11px; }
1336
+ &:is(.pad-y-hd--11, .pad-bottom-hd--11) { padding-bottom: 11px; }
1337
+ &:is(.pad-x-hd--11, .pad-left-hd--11) { padding-left: 11px; }
1338
+ &:is(.pad-x-hd--11, .pad-right-hd--11) { padding-right: 11px; }
1339
+ &.pad-hd--10 { padding: 10px; }
1340
+ &:is(.pad-y-hd--10, .pad-top-hd--10) { padding-top: 10px; }
1341
+ &:is(.pad-y-hd--10, .pad-bottom-hd--10) { padding-bottom: 10px; }
1342
+ &:is(.pad-x-hd--10, .pad-left-hd--10) { padding-left: 10px; }
1343
+ &:is(.pad-x-hd--10, .pad-right-hd--10) { padding-right: 10px; }
1344
+ &.pad-hd--9 { padding: 9px; }
1345
+ &:is(.pad-y-hd--9, .pad-top-hd--9) { padding-top: 9px; }
1346
+ &:is(.pad-y-hd--9, .pad-bottom-hd--9) { padding-bottom: 9px; }
1347
+ &:is(.pad-x-hd--9, .pad-left-hd--9) { padding-left: 9px; }
1348
+ &:is(.pad-x-hd--9, .pad-right-hd--9) { padding-right: 9px; }
1349
+ &.pad-hd--8 { padding: 8px; }
1350
+ &:is(.pad-y-hd--8, .pad-top-hd--8) { padding-top: 8px; }
1351
+ &:is(.pad-y-hd--8, .pad-bottom-hd--8) { padding-bottom: 8px; }
1352
+ &:is(.pad-x-hd--8, .pad-left-hd--8) { padding-left: 8px; }
1353
+ &:is(.pad-x-hd--8, .pad-right-hd--8) { padding-right: 8px; }
1354
+ &.pad-hd--7 { padding: 7px; }
1355
+ &:is(.pad-y-hd--7, .pad-top-hd--7) { padding-top: 7px; }
1356
+ &:is(.pad-y-hd--7, .pad-bottom-hd--7) { padding-bottom: 7px; }
1357
+ &:is(.pad-x-hd--7, .pad-left-hd--7) { padding-left: 7px; }
1358
+ &:is(.pad-x-hd--7, .pad-right-hd--7) { padding-right: 7px; }
1359
+ &.pad-hd--6 { padding: 6px; }
1360
+ &:is(.pad-y-hd--6, .pad-top-hd--6) { padding-top: 6px; }
1361
+ &:is(.pad-y-hd--6, .pad-bottom-hd--6) { padding-bottom: 6px; }
1362
+ &:is(.pad-x-hd--6, .pad-left-hd--6) { padding-left: 6px; }
1363
+ &:is(.pad-x-hd--6, .pad-right-hd--6) { padding-right: 6px; }
1364
+ &.pad-hd--5 { padding: 5px; }
1365
+ &:is(.pad-y-hd--5, .pad-top-hd--5) { padding-top: 5px; }
1366
+ &:is(.pad-y-hd--5, .pad-bottom-hd--5) { padding-bottom: 5px; }
1367
+ &:is(.pad-x-hd--5, .pad-left-hd--5) { padding-left: 5px; }
1368
+ &:is(.pad-x-hd--5, .pad-right-hd--5) { padding-right: 5px; }
1369
+ &.pad-hd--4 { padding: 4px; }
1370
+ &:is(.pad-y-hd--4, .pad-top-hd--4) { padding-top: 4px; }
1371
+ &:is(.pad-y-hd--4, .pad-bottom-hd--4) { padding-bottom: 4px; }
1372
+ &:is(.pad-x-hd--4, .pad-left-hd--4) { padding-left: 4px; }
1373
+ &:is(.pad-x-hd--4, .pad-right-hd--4) { padding-right: 4px; }
1374
+ &.pad-hd--3 { padding: 3px; }
1375
+ &:is(.pad-y-hd--3, .pad-top-hd--3) { padding-top: 3px; }
1376
+ &:is(.pad-y-hd--3, .pad-bottom-hd--3) { padding-bottom: 3px; }
1377
+ &:is(.pad-x-hd--3, .pad-left-hd--3) { padding-left: 3px; }
1378
+ &:is(.pad-x-hd--3, .pad-right-hd--3) { padding-right: 3px; }
1379
+ &.pad-hd--2 { padding: 2px; }
1380
+ &:is(.pad-y-hd--2, .pad-top-hd--2) { padding-top: 2px; }
1381
+ &:is(.pad-y-hd--2, .pad-bottom-hd--2) { padding-bottom: 2px; }
1382
+ &:is(.pad-x-hd--2, .pad-left-hd--2) { padding-left: 2px; }
1383
+ &:is(.pad-x-hd--2, .pad-right-hd--2) { padding-right: 2px; }
1384
+ &.pad-hd--1 { padding: 1px; }
1385
+ &:is(.pad-y-hd--1, .pad-top-hd--1) { padding-top: 1px; }
1386
+ &:is(.pad-y-hd--1, .pad-bottom-hd--1) { padding-bottom: 1px; }
1387
+ &:is(.pad-x-hd--1, .pad-left-hd--1) { padding-left: 1px; }
1388
+ &:is(.pad-x-hd--1, .pad-right-hd--1) { padding-right: 1px; }
1389
+ &.pad-hd-auto { padding: auto; }
1390
+ }
1391
+ }
1392
+
1393
+ @media (--pacem-2k) {
1394
+ .pacem-margin {
1395
+ &.margin-2k-6 { margin: var(--pacem-size-6); }
1396
+ &:is(.margin-y-2k-6, .margin-top-2k-6) { margin-top: var(--pacem-size-6); }
1397
+ &:is(.margin-y-2k-6, .margin-bottom-2k-6) { margin-bottom: var(--pacem-size-6); }
1398
+ &:is(.margin-x-2k-6, .margin-left-2k-6) { margin-left: var(--pacem-size-6); }
1399
+ &:is(.margin-x-2k-6, .margin-right-2k-6) { margin-right: var(--pacem-size-6); }
1400
+ &.margin-2k-5 { margin: var(--pacem-size-5); }
1401
+ &:is(.margin-y-2k-5, .margin-top-2k-5) { margin-top: var(--pacem-size-5); }
1402
+ &:is(.margin-y-2k-5, .margin-bottom-2k-5) { margin-bottom: var(--pacem-size-5); }
1403
+ &:is(.margin-x-2k-5, .margin-left-2k-5) { margin-left: var(--pacem-size-5); }
1404
+ &:is(.margin-x-2k-5, .margin-right-2k-5) { margin-right: var(--pacem-size-5); }
1405
+ &.margin-2k-4 { margin: var(--pacem-size-4); }
1406
+ &:is(.margin-y-2k-4, .margin-top-2k-4) { margin-top: var(--pacem-size-4); }
1407
+ &:is(.margin-y-2k-4, .margin-bottom-2k-4) { margin-bottom: var(--pacem-size-4); }
1408
+ &:is(.margin-x-2k-4, .margin-left-2k-4) { margin-left: var(--pacem-size-4); }
1409
+ &:is(.margin-x-2k-4, .margin-right-2k-4) { margin-right: var(--pacem-size-4); }
1410
+ &.margin-2k-3 { margin: var(--pacem-size-3); }
1411
+ &:is(.margin-y-2k-3, .margin-top-2k-3) { margin-top: var(--pacem-size-3); }
1412
+ &:is(.margin-y-2k-3, .margin-bottom-2k-3) { margin-bottom: var(--pacem-size-3); }
1413
+ &:is(.margin-x-2k-3, .margin-left-2k-3) { margin-left: var(--pacem-size-3); }
1414
+ &:is(.margin-x-2k-3, .margin-right-2k-3) { margin-right: var(--pacem-size-3); }
1415
+ &.margin-2k-2 { margin: var(--pacem-size-2); }
1416
+ &:is(.margin-y-2k-2, .margin-top-2k-2) { margin-top: var(--pacem-size-2); }
1417
+ &:is(.margin-y-2k-2, .margin-bottom-2k-2) { margin-bottom: var(--pacem-size-2); }
1418
+ &:is(.margin-x-2k-2, .margin-left-2k-2) { margin-left: var(--pacem-size-2); }
1419
+ &:is(.margin-x-2k-2, .margin-right-2k-2) { margin-right: var(--pacem-size-2); }
1420
+ &.margin-2k-1 { margin: var(--pacem-size-1); }
1421
+ &:is(.margin-y-2k-1, .margin-top-2k-1) { margin-top: var(--pacem-size-1); }
1422
+ &:is(.margin-y-2k-1, .margin-bottom-2k-1) { margin-bottom: var(--pacem-size-1); }
1423
+ &:is(.margin-x-2k-1, .margin-left-2k-1) { margin-left: var(--pacem-size-1); }
1424
+ &:is(.margin-x-2k-1, .margin-right-2k-1) { margin-right: var(--pacem-size-1); }
1425
+ &.margin-2k-0 { margin: 0; }
1426
+ &:is(.margin-y-2k-0, .margin-top-2k-0) { margin-top: 0; }
1427
+ &:is(.margin-y-2k-0, .margin-bottom-2k-0) { margin-bottom: 0; }
1428
+ &:is(.margin-x-2k-0, .margin-left-2k-0) { margin-left: 0; }
1429
+ &:is(.margin-x-2k-0, .margin-right-2k-0) { margin-right: 0; }
1430
+ &.margin-2k--12 { margin: 12px; }
1431
+ &:is(.margin-y-2k--12, .margin-top-2k--12) { margin-top: 12px; }
1432
+ &:is(.margin-y-2k--12, .margin-bottom-2k--12) { margin-bottom: 12px; }
1433
+ &:is(.margin-x-2k--12, .margin-left-2k--12) { margin-left: 12px; }
1434
+ &:is(.margin-x-2k--12, .margin-right-2k--12) { margin-right: 12px; }
1435
+ &.margin-2k--11 { margin: 11px; }
1436
+ &:is(.margin-y-2k--11, .margin-top-2k--11) { margin-top: 11px; }
1437
+ &:is(.margin-y-2k--11, .margin-bottom-2k--11) { margin-bottom: 11px; }
1438
+ &:is(.margin-x-2k--11, .margin-left-2k--11) { margin-left: 11px; }
1439
+ &:is(.margin-x-2k--11, .margin-right-2k--11) { margin-right: 11px; }
1440
+ &.margin-2k--10 { margin: 10px; }
1441
+ &:is(.margin-y-2k--10, .margin-top-2k--10) { margin-top: 10px; }
1442
+ &:is(.margin-y-2k--10, .margin-bottom-2k--10) { margin-bottom: 10px; }
1443
+ &:is(.margin-x-2k--10, .margin-left-2k--10) { margin-left: 10px; }
1444
+ &:is(.margin-x-2k--10, .margin-right-2k--10) { margin-right: 10px; }
1445
+ &.margin-2k--9 { margin: 9px; }
1446
+ &:is(.margin-y-2k--9, .margin-top-2k--9) { margin-top: 9px; }
1447
+ &:is(.margin-y-2k--9, .margin-bottom-2k--9) { margin-bottom: 9px; }
1448
+ &:is(.margin-x-2k--9, .margin-left-2k--9) { margin-left: 9px; }
1449
+ &:is(.margin-x-2k--9, .margin-right-2k--9) { margin-right: 9px; }
1450
+ &.margin-2k--8 { margin: 8px; }
1451
+ &:is(.margin-y-2k--8, .margin-top-2k--8) { margin-top: 8px; }
1452
+ &:is(.margin-y-2k--8, .margin-bottom-2k--8) { margin-bottom: 8px; }
1453
+ &:is(.margin-x-2k--8, .margin-left-2k--8) { margin-left: 8px; }
1454
+ &:is(.margin-x-2k--8, .margin-right-2k--8) { margin-right: 8px; }
1455
+ &.margin-2k--7 { margin: 7px; }
1456
+ &:is(.margin-y-2k--7, .margin-top-2k--7) { margin-top: 7px; }
1457
+ &:is(.margin-y-2k--7, .margin-bottom-2k--7) { margin-bottom: 7px; }
1458
+ &:is(.margin-x-2k--7, .margin-left-2k--7) { margin-left: 7px; }
1459
+ &:is(.margin-x-2k--7, .margin-right-2k--7) { margin-right: 7px; }
1460
+ &.margin-2k--6 { margin: 6px; }
1461
+ &:is(.margin-y-2k--6, .margin-top-2k--6) { margin-top: 6px; }
1462
+ &:is(.margin-y-2k--6, .margin-bottom-2k--6) { margin-bottom: 6px; }
1463
+ &:is(.margin-x-2k--6, .margin-left-2k--6) { margin-left: 6px; }
1464
+ &:is(.margin-x-2k--6, .margin-right-2k--6) { margin-right: 6px; }
1465
+ &.margin-2k--5 { margin: 5px; }
1466
+ &:is(.margin-y-2k--5, .margin-top-2k--5) { margin-top: 5px; }
1467
+ &:is(.margin-y-2k--5, .margin-bottom-2k--5) { margin-bottom: 5px; }
1468
+ &:is(.margin-x-2k--5, .margin-left-2k--5) { margin-left: 5px; }
1469
+ &:is(.margin-x-2k--5, .margin-right-2k--5) { margin-right: 5px; }
1470
+ &.margin-2k--4 { margin: 4px; }
1471
+ &:is(.margin-y-2k--4, .margin-top-2k--4) { margin-top: 4px; }
1472
+ &:is(.margin-y-2k--4, .margin-bottom-2k--4) { margin-bottom: 4px; }
1473
+ &:is(.margin-x-2k--4, .margin-left-2k--4) { margin-left: 4px; }
1474
+ &:is(.margin-x-2k--4, .margin-right-2k--4) { margin-right: 4px; }
1475
+ &.margin-2k--3 { margin: 3px; }
1476
+ &:is(.margin-y-2k--3, .margin-top-2k--3) { margin-top: 3px; }
1477
+ &:is(.margin-y-2k--3, .margin-bottom-2k--3) { margin-bottom: 3px; }
1478
+ &:is(.margin-x-2k--3, .margin-left-2k--3) { margin-left: 3px; }
1479
+ &:is(.margin-x-2k--3, .margin-right-2k--3) { margin-right: 3px; }
1480
+ &.margin-2k--2 { margin: 2px; }
1481
+ &:is(.margin-y-2k--2, .margin-top-2k--2) { margin-top: 2px; }
1482
+ &:is(.margin-y-2k--2, .margin-bottom-2k--2) { margin-bottom: 2px; }
1483
+ &:is(.margin-x-2k--2, .margin-left-2k--2) { margin-left: 2px; }
1484
+ &:is(.margin-x-2k--2, .margin-right-2k--2) { margin-right: 2px; }
1485
+ &.margin-2k--1 { margin: 1px; }
1486
+ &:is(.margin-y-2k--1, .margin-top-2k--1) { margin-top: 1px; }
1487
+ &:is(.margin-y-2k--1, .margin-bottom-2k--1) { margin-bottom: 1px; }
1488
+ &:is(.margin-x-2k--1, .margin-left-2k--1) { margin-left: 1px; }
1489
+ &:is(.margin-x-2k--1, .margin-right-2k--1) { margin-right: 1px; }
1490
+ &.margin-2k-auto { margin: auto; }
1491
+ }
1492
+ .pacem-pad {
1493
+ &.pad-2k-6 { padding: var(--pacem-size-6); }
1494
+ &:is(.pad-y-2k-6, .pad-top-2k-6) { padding-top: var(--pacem-size-6); }
1495
+ &:is(.pad-y-2k-6, .pad-bottom-2k-6) { padding-bottom: var(--pacem-size-6); }
1496
+ &:is(.pad-x-2k-6, .pad-left-2k-6) { padding-left: var(--pacem-size-6); }
1497
+ &:is(.pad-x-2k-6, .pad-right-2k-6) { padding-right: var(--pacem-size-6); }
1498
+ &.pad-2k-5 { padding: var(--pacem-size-5); }
1499
+ &:is(.pad-y-2k-5, .pad-top-2k-5) { padding-top: var(--pacem-size-5); }
1500
+ &:is(.pad-y-2k-5, .pad-bottom-2k-5) { padding-bottom: var(--pacem-size-5); }
1501
+ &:is(.pad-x-2k-5, .pad-left-2k-5) { padding-left: var(--pacem-size-5); }
1502
+ &:is(.pad-x-2k-5, .pad-right-2k-5) { padding-right: var(--pacem-size-5); }
1503
+ &.pad-2k-4 { padding: var(--pacem-size-4); }
1504
+ &:is(.pad-y-2k-4, .pad-top-2k-4) { padding-top: var(--pacem-size-4); }
1505
+ &:is(.pad-y-2k-4, .pad-bottom-2k-4) { padding-bottom: var(--pacem-size-4); }
1506
+ &:is(.pad-x-2k-4, .pad-left-2k-4) { padding-left: var(--pacem-size-4); }
1507
+ &:is(.pad-x-2k-4, .pad-right-2k-4) { padding-right: var(--pacem-size-4); }
1508
+ &.pad-2k-3 { padding: var(--pacem-size-3); }
1509
+ &:is(.pad-y-2k-3, .pad-top-2k-3) { padding-top: var(--pacem-size-3); }
1510
+ &:is(.pad-y-2k-3, .pad-bottom-2k-3) { padding-bottom: var(--pacem-size-3); }
1511
+ &:is(.pad-x-2k-3, .pad-left-2k-3) { padding-left: var(--pacem-size-3); }
1512
+ &:is(.pad-x-2k-3, .pad-right-2k-3) { padding-right: var(--pacem-size-3); }
1513
+ &.pad-2k-2 { padding: var(--pacem-size-2); }
1514
+ &:is(.pad-y-2k-2, .pad-top-2k-2) { padding-top: var(--pacem-size-2); }
1515
+ &:is(.pad-y-2k-2, .pad-bottom-2k-2) { padding-bottom: var(--pacem-size-2); }
1516
+ &:is(.pad-x-2k-2, .pad-left-2k-2) { padding-left: var(--pacem-size-2); }
1517
+ &:is(.pad-x-2k-2, .pad-right-2k-2) { padding-right: var(--pacem-size-2); }
1518
+ &.pad-2k-1 { padding: var(--pacem-size-1); }
1519
+ &:is(.pad-y-2k-1, .pad-top-2k-1) { padding-top: var(--pacem-size-1); }
1520
+ &:is(.pad-y-2k-1, .pad-bottom-2k-1) { padding-bottom: var(--pacem-size-1); }
1521
+ &:is(.pad-x-2k-1, .pad-left-2k-1) { padding-left: var(--pacem-size-1); }
1522
+ &:is(.pad-x-2k-1, .pad-right-2k-1) { padding-right: var(--pacem-size-1); }
1523
+ &.pad-2k-0 { padding: 0; }
1524
+ &:is(.pad-y-2k-0, .pad-top-2k-0) { padding-top: 0; }
1525
+ &:is(.pad-y-2k-0, .pad-bottom-2k-0) { padding-bottom: 0; }
1526
+ &:is(.pad-x-2k-0, .pad-left-2k-0) { padding-left: 0; }
1527
+ &:is(.pad-x-2k-0, .pad-right-2k-0) { padding-right: 0; }
1528
+ &.pad-2k--12 { padding: 12px; }
1529
+ &:is(.pad-y-2k--12, .pad-top-2k--12) { padding-top: 12px; }
1530
+ &:is(.pad-y-2k--12, .pad-bottom-2k--12) { padding-bottom: 12px; }
1531
+ &:is(.pad-x-2k--12, .pad-left-2k--12) { padding-left: 12px; }
1532
+ &:is(.pad-x-2k--12, .pad-right-2k--12) { padding-right: 12px; }
1533
+ &.pad-2k--11 { padding: 11px; }
1534
+ &:is(.pad-y-2k--11, .pad-top-2k--11) { padding-top: 11px; }
1535
+ &:is(.pad-y-2k--11, .pad-bottom-2k--11) { padding-bottom: 11px; }
1536
+ &:is(.pad-x-2k--11, .pad-left-2k--11) { padding-left: 11px; }
1537
+ &:is(.pad-x-2k--11, .pad-right-2k--11) { padding-right: 11px; }
1538
+ &.pad-2k--10 { padding: 10px; }
1539
+ &:is(.pad-y-2k--10, .pad-top-2k--10) { padding-top: 10px; }
1540
+ &:is(.pad-y-2k--10, .pad-bottom-2k--10) { padding-bottom: 10px; }
1541
+ &:is(.pad-x-2k--10, .pad-left-2k--10) { padding-left: 10px; }
1542
+ &:is(.pad-x-2k--10, .pad-right-2k--10) { padding-right: 10px; }
1543
+ &.pad-2k--9 { padding: 9px; }
1544
+ &:is(.pad-y-2k--9, .pad-top-2k--9) { padding-top: 9px; }
1545
+ &:is(.pad-y-2k--9, .pad-bottom-2k--9) { padding-bottom: 9px; }
1546
+ &:is(.pad-x-2k--9, .pad-left-2k--9) { padding-left: 9px; }
1547
+ &:is(.pad-x-2k--9, .pad-right-2k--9) { padding-right: 9px; }
1548
+ &.pad-2k--8 { padding: 8px; }
1549
+ &:is(.pad-y-2k--8, .pad-top-2k--8) { padding-top: 8px; }
1550
+ &:is(.pad-y-2k--8, .pad-bottom-2k--8) { padding-bottom: 8px; }
1551
+ &:is(.pad-x-2k--8, .pad-left-2k--8) { padding-left: 8px; }
1552
+ &:is(.pad-x-2k--8, .pad-right-2k--8) { padding-right: 8px; }
1553
+ &.pad-2k--7 { padding: 7px; }
1554
+ &:is(.pad-y-2k--7, .pad-top-2k--7) { padding-top: 7px; }
1555
+ &:is(.pad-y-2k--7, .pad-bottom-2k--7) { padding-bottom: 7px; }
1556
+ &:is(.pad-x-2k--7, .pad-left-2k--7) { padding-left: 7px; }
1557
+ &:is(.pad-x-2k--7, .pad-right-2k--7) { padding-right: 7px; }
1558
+ &.pad-2k--6 { padding: 6px; }
1559
+ &:is(.pad-y-2k--6, .pad-top-2k--6) { padding-top: 6px; }
1560
+ &:is(.pad-y-2k--6, .pad-bottom-2k--6) { padding-bottom: 6px; }
1561
+ &:is(.pad-x-2k--6, .pad-left-2k--6) { padding-left: 6px; }
1562
+ &:is(.pad-x-2k--6, .pad-right-2k--6) { padding-right: 6px; }
1563
+ &.pad-2k--5 { padding: 5px; }
1564
+ &:is(.pad-y-2k--5, .pad-top-2k--5) { padding-top: 5px; }
1565
+ &:is(.pad-y-2k--5, .pad-bottom-2k--5) { padding-bottom: 5px; }
1566
+ &:is(.pad-x-2k--5, .pad-left-2k--5) { padding-left: 5px; }
1567
+ &:is(.pad-x-2k--5, .pad-right-2k--5) { padding-right: 5px; }
1568
+ &.pad-2k--4 { padding: 4px; }
1569
+ &:is(.pad-y-2k--4, .pad-top-2k--4) { padding-top: 4px; }
1570
+ &:is(.pad-y-2k--4, .pad-bottom-2k--4) { padding-bottom: 4px; }
1571
+ &:is(.pad-x-2k--4, .pad-left-2k--4) { padding-left: 4px; }
1572
+ &:is(.pad-x-2k--4, .pad-right-2k--4) { padding-right: 4px; }
1573
+ &.pad-2k--3 { padding: 3px; }
1574
+ &:is(.pad-y-2k--3, .pad-top-2k--3) { padding-top: 3px; }
1575
+ &:is(.pad-y-2k--3, .pad-bottom-2k--3) { padding-bottom: 3px; }
1576
+ &:is(.pad-x-2k--3, .pad-left-2k--3) { padding-left: 3px; }
1577
+ &:is(.pad-x-2k--3, .pad-right-2k--3) { padding-right: 3px; }
1578
+ &.pad-2k--2 { padding: 2px; }
1579
+ &:is(.pad-y-2k--2, .pad-top-2k--2) { padding-top: 2px; }
1580
+ &:is(.pad-y-2k--2, .pad-bottom-2k--2) { padding-bottom: 2px; }
1581
+ &:is(.pad-x-2k--2, .pad-left-2k--2) { padding-left: 2px; }
1582
+ &:is(.pad-x-2k--2, .pad-right-2k--2) { padding-right: 2px; }
1583
+ &.pad-2k--1 { padding: 1px; }
1584
+ &:is(.pad-y-2k--1, .pad-top-2k--1) { padding-top: 1px; }
1585
+ &:is(.pad-y-2k--1, .pad-bottom-2k--1) { padding-bottom: 1px; }
1586
+ &:is(.pad-x-2k--1, .pad-left-2k--1) { padding-left: 1px; }
1587
+ &:is(.pad-x-2k--1, .pad-right-2k--1) { padding-right: 1px; }
1588
+ &.pad-2k-auto { padding: auto; }
1589
+ }
1590
+ }
1591
+
1592
+ @media (--pacem-4k) {
1593
+ .pacem-margin {
1594
+ &.margin-4k-6 { margin: var(--pacem-size-6); }
1595
+ &:is(.margin-y-4k-6, .margin-top-4k-6) { margin-top: var(--pacem-size-6); }
1596
+ &:is(.margin-y-4k-6, .margin-bottom-4k-6) { margin-bottom: var(--pacem-size-6); }
1597
+ &:is(.margin-x-4k-6, .margin-left-4k-6) { margin-left: var(--pacem-size-6); }
1598
+ &:is(.margin-x-4k-6, .margin-right-4k-6) { margin-right: var(--pacem-size-6); }
1599
+ &.margin-4k-5 { margin: var(--pacem-size-5); }
1600
+ &:is(.margin-y-4k-5, .margin-top-4k-5) { margin-top: var(--pacem-size-5); }
1601
+ &:is(.margin-y-4k-5, .margin-bottom-4k-5) { margin-bottom: var(--pacem-size-5); }
1602
+ &:is(.margin-x-4k-5, .margin-left-4k-5) { margin-left: var(--pacem-size-5); }
1603
+ &:is(.margin-x-4k-5, .margin-right-4k-5) { margin-right: var(--pacem-size-5); }
1604
+ &.margin-4k-4 { margin: var(--pacem-size-4); }
1605
+ &:is(.margin-y-4k-4, .margin-top-4k-4) { margin-top: var(--pacem-size-4); }
1606
+ &:is(.margin-y-4k-4, .margin-bottom-4k-4) { margin-bottom: var(--pacem-size-4); }
1607
+ &:is(.margin-x-4k-4, .margin-left-4k-4) { margin-left: var(--pacem-size-4); }
1608
+ &:is(.margin-x-4k-4, .margin-right-4k-4) { margin-right: var(--pacem-size-4); }
1609
+ &.margin-4k-3 { margin: var(--pacem-size-3); }
1610
+ &:is(.margin-y-4k-3, .margin-top-4k-3) { margin-top: var(--pacem-size-3); }
1611
+ &:is(.margin-y-4k-3, .margin-bottom-4k-3) { margin-bottom: var(--pacem-size-3); }
1612
+ &:is(.margin-x-4k-3, .margin-left-4k-3) { margin-left: var(--pacem-size-3); }
1613
+ &:is(.margin-x-4k-3, .margin-right-4k-3) { margin-right: var(--pacem-size-3); }
1614
+ &.margin-4k-2 { margin: var(--pacem-size-2); }
1615
+ &:is(.margin-y-4k-2, .margin-top-4k-2) { margin-top: var(--pacem-size-2); }
1616
+ &:is(.margin-y-4k-2, .margin-bottom-4k-2) { margin-bottom: var(--pacem-size-2); }
1617
+ &:is(.margin-x-4k-2, .margin-left-4k-2) { margin-left: var(--pacem-size-2); }
1618
+ &:is(.margin-x-4k-2, .margin-right-4k-2) { margin-right: var(--pacem-size-2); }
1619
+ &.margin-4k-1 { margin: var(--pacem-size-1); }
1620
+ &:is(.margin-y-4k-1, .margin-top-4k-1) { margin-top: var(--pacem-size-1); }
1621
+ &:is(.margin-y-4k-1, .margin-bottom-4k-1) { margin-bottom: var(--pacem-size-1); }
1622
+ &:is(.margin-x-4k-1, .margin-left-4k-1) { margin-left: var(--pacem-size-1); }
1623
+ &:is(.margin-x-4k-1, .margin-right-4k-1) { margin-right: var(--pacem-size-1); }
1624
+ &.margin-4k-0 { margin: 0; }
1625
+ &:is(.margin-y-4k-0, .margin-top-4k-0) { margin-top: 0; }
1626
+ &:is(.margin-y-4k-0, .margin-bottom-4k-0) { margin-bottom: 0; }
1627
+ &:is(.margin-x-4k-0, .margin-left-4k-0) { margin-left: 0; }
1628
+ &:is(.margin-x-4k-0, .margin-right-4k-0) { margin-right: 0; }
1629
+ &.margin-4k--12 { margin: 12px; }
1630
+ &:is(.margin-y-4k--12, .margin-top-4k--12) { margin-top: 12px; }
1631
+ &:is(.margin-y-4k--12, .margin-bottom-4k--12) { margin-bottom: 12px; }
1632
+ &:is(.margin-x-4k--12, .margin-left-4k--12) { margin-left: 12px; }
1633
+ &:is(.margin-x-4k--12, .margin-right-4k--12) { margin-right: 12px; }
1634
+ &.margin-4k--11 { margin: 11px; }
1635
+ &:is(.margin-y-4k--11, .margin-top-4k--11) { margin-top: 11px; }
1636
+ &:is(.margin-y-4k--11, .margin-bottom-4k--11) { margin-bottom: 11px; }
1637
+ &:is(.margin-x-4k--11, .margin-left-4k--11) { margin-left: 11px; }
1638
+ &:is(.margin-x-4k--11, .margin-right-4k--11) { margin-right: 11px; }
1639
+ &.margin-4k--10 { margin: 10px; }
1640
+ &:is(.margin-y-4k--10, .margin-top-4k--10) { margin-top: 10px; }
1641
+ &:is(.margin-y-4k--10, .margin-bottom-4k--10) { margin-bottom: 10px; }
1642
+ &:is(.margin-x-4k--10, .margin-left-4k--10) { margin-left: 10px; }
1643
+ &:is(.margin-x-4k--10, .margin-right-4k--10) { margin-right: 10px; }
1644
+ &.margin-4k--9 { margin: 9px; }
1645
+ &:is(.margin-y-4k--9, .margin-top-4k--9) { margin-top: 9px; }
1646
+ &:is(.margin-y-4k--9, .margin-bottom-4k--9) { margin-bottom: 9px; }
1647
+ &:is(.margin-x-4k--9, .margin-left-4k--9) { margin-left: 9px; }
1648
+ &:is(.margin-x-4k--9, .margin-right-4k--9) { margin-right: 9px; }
1649
+ &.margin-4k--8 { margin: 8px; }
1650
+ &:is(.margin-y-4k--8, .margin-top-4k--8) { margin-top: 8px; }
1651
+ &:is(.margin-y-4k--8, .margin-bottom-4k--8) { margin-bottom: 8px; }
1652
+ &:is(.margin-x-4k--8, .margin-left-4k--8) { margin-left: 8px; }
1653
+ &:is(.margin-x-4k--8, .margin-right-4k--8) { margin-right: 8px; }
1654
+ &.margin-4k--7 { margin: 7px; }
1655
+ &:is(.margin-y-4k--7, .margin-top-4k--7) { margin-top: 7px; }
1656
+ &:is(.margin-y-4k--7, .margin-bottom-4k--7) { margin-bottom: 7px; }
1657
+ &:is(.margin-x-4k--7, .margin-left-4k--7) { margin-left: 7px; }
1658
+ &:is(.margin-x-4k--7, .margin-right-4k--7) { margin-right: 7px; }
1659
+ &.margin-4k--6 { margin: 6px; }
1660
+ &:is(.margin-y-4k--6, .margin-top-4k--6) { margin-top: 6px; }
1661
+ &:is(.margin-y-4k--6, .margin-bottom-4k--6) { margin-bottom: 6px; }
1662
+ &:is(.margin-x-4k--6, .margin-left-4k--6) { margin-left: 6px; }
1663
+ &:is(.margin-x-4k--6, .margin-right-4k--6) { margin-right: 6px; }
1664
+ &.margin-4k--5 { margin: 5px; }
1665
+ &:is(.margin-y-4k--5, .margin-top-4k--5) { margin-top: 5px; }
1666
+ &:is(.margin-y-4k--5, .margin-bottom-4k--5) { margin-bottom: 5px; }
1667
+ &:is(.margin-x-4k--5, .margin-left-4k--5) { margin-left: 5px; }
1668
+ &:is(.margin-x-4k--5, .margin-right-4k--5) { margin-right: 5px; }
1669
+ &.margin-4k--4 { margin: 4px; }
1670
+ &:is(.margin-y-4k--4, .margin-top-4k--4) { margin-top: 4px; }
1671
+ &:is(.margin-y-4k--4, .margin-bottom-4k--4) { margin-bottom: 4px; }
1672
+ &:is(.margin-x-4k--4, .margin-left-4k--4) { margin-left: 4px; }
1673
+ &:is(.margin-x-4k--4, .margin-right-4k--4) { margin-right: 4px; }
1674
+ &.margin-4k--3 { margin: 3px; }
1675
+ &:is(.margin-y-4k--3, .margin-top-4k--3) { margin-top: 3px; }
1676
+ &:is(.margin-y-4k--3, .margin-bottom-4k--3) { margin-bottom: 3px; }
1677
+ &:is(.margin-x-4k--3, .margin-left-4k--3) { margin-left: 3px; }
1678
+ &:is(.margin-x-4k--3, .margin-right-4k--3) { margin-right: 3px; }
1679
+ &.margin-4k--2 { margin: 2px; }
1680
+ &:is(.margin-y-4k--2, .margin-top-4k--2) { margin-top: 2px; }
1681
+ &:is(.margin-y-4k--2, .margin-bottom-4k--2) { margin-bottom: 2px; }
1682
+ &:is(.margin-x-4k--2, .margin-left-4k--2) { margin-left: 2px; }
1683
+ &:is(.margin-x-4k--2, .margin-right-4k--2) { margin-right: 2px; }
1684
+ &.margin-4k--1 { margin: 1px; }
1685
+ &:is(.margin-y-4k--1, .margin-top-4k--1) { margin-top: 1px; }
1686
+ &:is(.margin-y-4k--1, .margin-bottom-4k--1) { margin-bottom: 1px; }
1687
+ &:is(.margin-x-4k--1, .margin-left-4k--1) { margin-left: 1px; }
1688
+ &:is(.margin-x-4k--1, .margin-right-4k--1) { margin-right: 1px; }
1689
+ &.margin-4k-auto { margin: auto; }
1690
+ }
1691
+ .pacem-pad {
1692
+ &.pad-4k-6 { padding: var(--pacem-size-6); }
1693
+ &:is(.pad-y-4k-6, .pad-top-4k-6) { padding-top: var(--pacem-size-6); }
1694
+ &:is(.pad-y-4k-6, .pad-bottom-4k-6) { padding-bottom: var(--pacem-size-6); }
1695
+ &:is(.pad-x-4k-6, .pad-left-4k-6) { padding-left: var(--pacem-size-6); }
1696
+ &:is(.pad-x-4k-6, .pad-right-4k-6) { padding-right: var(--pacem-size-6); }
1697
+ &.pad-4k-5 { padding: var(--pacem-size-5); }
1698
+ &:is(.pad-y-4k-5, .pad-top-4k-5) { padding-top: var(--pacem-size-5); }
1699
+ &:is(.pad-y-4k-5, .pad-bottom-4k-5) { padding-bottom: var(--pacem-size-5); }
1700
+ &:is(.pad-x-4k-5, .pad-left-4k-5) { padding-left: var(--pacem-size-5); }
1701
+ &:is(.pad-x-4k-5, .pad-right-4k-5) { padding-right: var(--pacem-size-5); }
1702
+ &.pad-4k-4 { padding: var(--pacem-size-4); }
1703
+ &:is(.pad-y-4k-4, .pad-top-4k-4) { padding-top: var(--pacem-size-4); }
1704
+ &:is(.pad-y-4k-4, .pad-bottom-4k-4) { padding-bottom: var(--pacem-size-4); }
1705
+ &:is(.pad-x-4k-4, .pad-left-4k-4) { padding-left: var(--pacem-size-4); }
1706
+ &:is(.pad-x-4k-4, .pad-right-4k-4) { padding-right: var(--pacem-size-4); }
1707
+ &.pad-4k-3 { padding: var(--pacem-size-3); }
1708
+ &:is(.pad-y-4k-3, .pad-top-4k-3) { padding-top: var(--pacem-size-3); }
1709
+ &:is(.pad-y-4k-3, .pad-bottom-4k-3) { padding-bottom: var(--pacem-size-3); }
1710
+ &:is(.pad-x-4k-3, .pad-left-4k-3) { padding-left: var(--pacem-size-3); }
1711
+ &:is(.pad-x-4k-3, .pad-right-4k-3) { padding-right: var(--pacem-size-3); }
1712
+ &.pad-4k-2 { padding: var(--pacem-size-2); }
1713
+ &:is(.pad-y-4k-2, .pad-top-4k-2) { padding-top: var(--pacem-size-2); }
1714
+ &:is(.pad-y-4k-2, .pad-bottom-4k-2) { padding-bottom: var(--pacem-size-2); }
1715
+ &:is(.pad-x-4k-2, .pad-left-4k-2) { padding-left: var(--pacem-size-2); }
1716
+ &:is(.pad-x-4k-2, .pad-right-4k-2) { padding-right: var(--pacem-size-2); }
1717
+ &.pad-4k-1 { padding: var(--pacem-size-1); }
1718
+ &:is(.pad-y-4k-1, .pad-top-4k-1) { padding-top: var(--pacem-size-1); }
1719
+ &:is(.pad-y-4k-1, .pad-bottom-4k-1) { padding-bottom: var(--pacem-size-1); }
1720
+ &:is(.pad-x-4k-1, .pad-left-4k-1) { padding-left: var(--pacem-size-1); }
1721
+ &:is(.pad-x-4k-1, .pad-right-4k-1) { padding-right: var(--pacem-size-1); }
1722
+ &.pad-4k-0 { padding: 0; }
1723
+ &:is(.pad-y-4k-0, .pad-top-4k-0) { padding-top: 0; }
1724
+ &:is(.pad-y-4k-0, .pad-bottom-4k-0) { padding-bottom: 0; }
1725
+ &:is(.pad-x-4k-0, .pad-left-4k-0) { padding-left: 0; }
1726
+ &:is(.pad-x-4k-0, .pad-right-4k-0) { padding-right: 0; }
1727
+ &.pad-4k--12 { padding: 12px; }
1728
+ &:is(.pad-y-4k--12, .pad-top-4k--12) { padding-top: 12px; }
1729
+ &:is(.pad-y-4k--12, .pad-bottom-4k--12) { padding-bottom: 12px; }
1730
+ &:is(.pad-x-4k--12, .pad-left-4k--12) { padding-left: 12px; }
1731
+ &:is(.pad-x-4k--12, .pad-right-4k--12) { padding-right: 12px; }
1732
+ &.pad-4k--11 { padding: 11px; }
1733
+ &:is(.pad-y-4k--11, .pad-top-4k--11) { padding-top: 11px; }
1734
+ &:is(.pad-y-4k--11, .pad-bottom-4k--11) { padding-bottom: 11px; }
1735
+ &:is(.pad-x-4k--11, .pad-left-4k--11) { padding-left: 11px; }
1736
+ &:is(.pad-x-4k--11, .pad-right-4k--11) { padding-right: 11px; }
1737
+ &.pad-4k--10 { padding: 10px; }
1738
+ &:is(.pad-y-4k--10, .pad-top-4k--10) { padding-top: 10px; }
1739
+ &:is(.pad-y-4k--10, .pad-bottom-4k--10) { padding-bottom: 10px; }
1740
+ &:is(.pad-x-4k--10, .pad-left-4k--10) { padding-left: 10px; }
1741
+ &:is(.pad-x-4k--10, .pad-right-4k--10) { padding-right: 10px; }
1742
+ &.pad-4k--9 { padding: 9px; }
1743
+ &:is(.pad-y-4k--9, .pad-top-4k--9) { padding-top: 9px; }
1744
+ &:is(.pad-y-4k--9, .pad-bottom-4k--9) { padding-bottom: 9px; }
1745
+ &:is(.pad-x-4k--9, .pad-left-4k--9) { padding-left: 9px; }
1746
+ &:is(.pad-x-4k--9, .pad-right-4k--9) { padding-right: 9px; }
1747
+ &.pad-4k--8 { padding: 8px; }
1748
+ &:is(.pad-y-4k--8, .pad-top-4k--8) { padding-top: 8px; }
1749
+ &:is(.pad-y-4k--8, .pad-bottom-4k--8) { padding-bottom: 8px; }
1750
+ &:is(.pad-x-4k--8, .pad-left-4k--8) { padding-left: 8px; }
1751
+ &:is(.pad-x-4k--8, .pad-right-4k--8) { padding-right: 8px; }
1752
+ &.pad-4k--7 { padding: 7px; }
1753
+ &:is(.pad-y-4k--7, .pad-top-4k--7) { padding-top: 7px; }
1754
+ &:is(.pad-y-4k--7, .pad-bottom-4k--7) { padding-bottom: 7px; }
1755
+ &:is(.pad-x-4k--7, .pad-left-4k--7) { padding-left: 7px; }
1756
+ &:is(.pad-x-4k--7, .pad-right-4k--7) { padding-right: 7px; }
1757
+ &.pad-4k--6 { padding: 6px; }
1758
+ &:is(.pad-y-4k--6, .pad-top-4k--6) { padding-top: 6px; }
1759
+ &:is(.pad-y-4k--6, .pad-bottom-4k--6) { padding-bottom: 6px; }
1760
+ &:is(.pad-x-4k--6, .pad-left-4k--6) { padding-left: 6px; }
1761
+ &:is(.pad-x-4k--6, .pad-right-4k--6) { padding-right: 6px; }
1762
+ &.pad-4k--5 { padding: 5px; }
1763
+ &:is(.pad-y-4k--5, .pad-top-4k--5) { padding-top: 5px; }
1764
+ &:is(.pad-y-4k--5, .pad-bottom-4k--5) { padding-bottom: 5px; }
1765
+ &:is(.pad-x-4k--5, .pad-left-4k--5) { padding-left: 5px; }
1766
+ &:is(.pad-x-4k--5, .pad-right-4k--5) { padding-right: 5px; }
1767
+ &.pad-4k--4 { padding: 4px; }
1768
+ &:is(.pad-y-4k--4, .pad-top-4k--4) { padding-top: 4px; }
1769
+ &:is(.pad-y-4k--4, .pad-bottom-4k--4) { padding-bottom: 4px; }
1770
+ &:is(.pad-x-4k--4, .pad-left-4k--4) { padding-left: 4px; }
1771
+ &:is(.pad-x-4k--4, .pad-right-4k--4) { padding-right: 4px; }
1772
+ &.pad-4k--3 { padding: 3px; }
1773
+ &:is(.pad-y-4k--3, .pad-top-4k--3) { padding-top: 3px; }
1774
+ &:is(.pad-y-4k--3, .pad-bottom-4k--3) { padding-bottom: 3px; }
1775
+ &:is(.pad-x-4k--3, .pad-left-4k--3) { padding-left: 3px; }
1776
+ &:is(.pad-x-4k--3, .pad-right-4k--3) { padding-right: 3px; }
1777
+ &.pad-4k--2 { padding: 2px; }
1778
+ &:is(.pad-y-4k--2, .pad-top-4k--2) { padding-top: 2px; }
1779
+ &:is(.pad-y-4k--2, .pad-bottom-4k--2) { padding-bottom: 2px; }
1780
+ &:is(.pad-x-4k--2, .pad-left-4k--2) { padding-left: 2px; }
1781
+ &:is(.pad-x-4k--2, .pad-right-4k--2) { padding-right: 2px; }
1782
+ &.pad-4k--1 { padding: 1px; }
1783
+ &:is(.pad-y-4k--1, .pad-top-4k--1) { padding-top: 1px; }
1784
+ &:is(.pad-y-4k--1, .pad-bottom-4k--1) { padding-bottom: 1px; }
1785
+ &:is(.pad-x-4k--1, .pad-left-4k--1) { padding-left: 1px; }
1786
+ &:is(.pad-x-4k--1, .pad-right-4k--1) { padding-right: 1px; }
1787
+ &.pad-4k-auto { padding: auto; }
1788
+ }
1789
+ }
1790
+
1791
+ @media (orientation: portrait) {
1792
+ .pacem-margin {
1793
+ &.margin-v-6 { margin: var(--pacem-size-6); }
1794
+ &:is(.margin-y-v-6, .margin-top-v-6) { margin-top: var(--pacem-size-6); }
1795
+ &:is(.margin-y-v-6, .margin-bottom-v-6) { margin-bottom: var(--pacem-size-6); }
1796
+ &:is(.margin-x-v-6, .margin-left-v-6) { margin-left: var(--pacem-size-6); }
1797
+ &:is(.margin-x-v-6, .margin-right-v-6) { margin-right: var(--pacem-size-6); }
1798
+ &.margin-v-5 { margin: var(--pacem-size-5); }
1799
+ &:is(.margin-y-v-5, .margin-top-v-5) { margin-top: var(--pacem-size-5); }
1800
+ &:is(.margin-y-v-5, .margin-bottom-v-5) { margin-bottom: var(--pacem-size-5); }
1801
+ &:is(.margin-x-v-5, .margin-left-v-5) { margin-left: var(--pacem-size-5); }
1802
+ &:is(.margin-x-v-5, .margin-right-v-5) { margin-right: var(--pacem-size-5); }
1803
+ &.margin-v-4 { margin: var(--pacem-size-4); }
1804
+ &:is(.margin-y-v-4, .margin-top-v-4) { margin-top: var(--pacem-size-4); }
1805
+ &:is(.margin-y-v-4, .margin-bottom-v-4) { margin-bottom: var(--pacem-size-4); }
1806
+ &:is(.margin-x-v-4, .margin-left-v-4) { margin-left: var(--pacem-size-4); }
1807
+ &:is(.margin-x-v-4, .margin-right-v-4) { margin-right: var(--pacem-size-4); }
1808
+ &.margin-v-3 { margin: var(--pacem-size-3); }
1809
+ &:is(.margin-y-v-3, .margin-top-v-3) { margin-top: var(--pacem-size-3); }
1810
+ &:is(.margin-y-v-3, .margin-bottom-v-3) { margin-bottom: var(--pacem-size-3); }
1811
+ &:is(.margin-x-v-3, .margin-left-v-3) { margin-left: var(--pacem-size-3); }
1812
+ &:is(.margin-x-v-3, .margin-right-v-3) { margin-right: var(--pacem-size-3); }
1813
+ &.margin-v-2 { margin: var(--pacem-size-2); }
1814
+ &:is(.margin-y-v-2, .margin-top-v-2) { margin-top: var(--pacem-size-2); }
1815
+ &:is(.margin-y-v-2, .margin-bottom-v-2) { margin-bottom: var(--pacem-size-2); }
1816
+ &:is(.margin-x-v-2, .margin-left-v-2) { margin-left: var(--pacem-size-2); }
1817
+ &:is(.margin-x-v-2, .margin-right-v-2) { margin-right: var(--pacem-size-2); }
1818
+ &.margin-v-1 { margin: var(--pacem-size-1); }
1819
+ &:is(.margin-y-v-1, .margin-top-v-1) { margin-top: var(--pacem-size-1); }
1820
+ &:is(.margin-y-v-1, .margin-bottom-v-1) { margin-bottom: var(--pacem-size-1); }
1821
+ &:is(.margin-x-v-1, .margin-left-v-1) { margin-left: var(--pacem-size-1); }
1822
+ &:is(.margin-x-v-1, .margin-right-v-1) { margin-right: var(--pacem-size-1); }
1823
+ &.margin-v-0 { margin: 0; }
1824
+ &:is(.margin-y-v-0, .margin-top-v-0) { margin-top: 0; }
1825
+ &:is(.margin-y-v-0, .margin-bottom-v-0) { margin-bottom: 0; }
1826
+ &:is(.margin-x-v-0, .margin-left-v-0) { margin-left: 0; }
1827
+ &:is(.margin-x-v-0, .margin-right-v-0) { margin-right: 0; }
1828
+ &.margin-v--12 { margin: 12px; }
1829
+ &:is(.margin-y-v--12, .margin-top-v--12) { margin-top: 12px; }
1830
+ &:is(.margin-y-v--12, .margin-bottom-v--12) { margin-bottom: 12px; }
1831
+ &:is(.margin-x-v--12, .margin-left-v--12) { margin-left: 12px; }
1832
+ &:is(.margin-x-v--12, .margin-right-v--12) { margin-right: 12px; }
1833
+ &.margin-v--11 { margin: 11px; }
1834
+ &:is(.margin-y-v--11, .margin-top-v--11) { margin-top: 11px; }
1835
+ &:is(.margin-y-v--11, .margin-bottom-v--11) { margin-bottom: 11px; }
1836
+ &:is(.margin-x-v--11, .margin-left-v--11) { margin-left: 11px; }
1837
+ &:is(.margin-x-v--11, .margin-right-v--11) { margin-right: 11px; }
1838
+ &.margin-v--10 { margin: 10px; }
1839
+ &:is(.margin-y-v--10, .margin-top-v--10) { margin-top: 10px; }
1840
+ &:is(.margin-y-v--10, .margin-bottom-v--10) { margin-bottom: 10px; }
1841
+ &:is(.margin-x-v--10, .margin-left-v--10) { margin-left: 10px; }
1842
+ &:is(.margin-x-v--10, .margin-right-v--10) { margin-right: 10px; }
1843
+ &.margin-v--9 { margin: 9px; }
1844
+ &:is(.margin-y-v--9, .margin-top-v--9) { margin-top: 9px; }
1845
+ &:is(.margin-y-v--9, .margin-bottom-v--9) { margin-bottom: 9px; }
1846
+ &:is(.margin-x-v--9, .margin-left-v--9) { margin-left: 9px; }
1847
+ &:is(.margin-x-v--9, .margin-right-v--9) { margin-right: 9px; }
1848
+ &.margin-v--8 { margin: 8px; }
1849
+ &:is(.margin-y-v--8, .margin-top-v--8) { margin-top: 8px; }
1850
+ &:is(.margin-y-v--8, .margin-bottom-v--8) { margin-bottom: 8px; }
1851
+ &:is(.margin-x-v--8, .margin-left-v--8) { margin-left: 8px; }
1852
+ &:is(.margin-x-v--8, .margin-right-v--8) { margin-right: 8px; }
1853
+ &.margin-v--7 { margin: 7px; }
1854
+ &:is(.margin-y-v--7, .margin-top-v--7) { margin-top: 7px; }
1855
+ &:is(.margin-y-v--7, .margin-bottom-v--7) { margin-bottom: 7px; }
1856
+ &:is(.margin-x-v--7, .margin-left-v--7) { margin-left: 7px; }
1857
+ &:is(.margin-x-v--7, .margin-right-v--7) { margin-right: 7px; }
1858
+ &.margin-v--6 { margin: 6px; }
1859
+ &:is(.margin-y-v--6, .margin-top-v--6) { margin-top: 6px; }
1860
+ &:is(.margin-y-v--6, .margin-bottom-v--6) { margin-bottom: 6px; }
1861
+ &:is(.margin-x-v--6, .margin-left-v--6) { margin-left: 6px; }
1862
+ &:is(.margin-x-v--6, .margin-right-v--6) { margin-right: 6px; }
1863
+ &.margin-v--5 { margin: 5px; }
1864
+ &:is(.margin-y-v--5, .margin-top-v--5) { margin-top: 5px; }
1865
+ &:is(.margin-y-v--5, .margin-bottom-v--5) { margin-bottom: 5px; }
1866
+ &:is(.margin-x-v--5, .margin-left-v--5) { margin-left: 5px; }
1867
+ &:is(.margin-x-v--5, .margin-right-v--5) { margin-right: 5px; }
1868
+ &.margin-v--4 { margin: 4px; }
1869
+ &:is(.margin-y-v--4, .margin-top-v--4) { margin-top: 4px; }
1870
+ &:is(.margin-y-v--4, .margin-bottom-v--4) { margin-bottom: 4px; }
1871
+ &:is(.margin-x-v--4, .margin-left-v--4) { margin-left: 4px; }
1872
+ &:is(.margin-x-v--4, .margin-right-v--4) { margin-right: 4px; }
1873
+ &.margin-v--3 { margin: 3px; }
1874
+ &:is(.margin-y-v--3, .margin-top-v--3) { margin-top: 3px; }
1875
+ &:is(.margin-y-v--3, .margin-bottom-v--3) { margin-bottom: 3px; }
1876
+ &:is(.margin-x-v--3, .margin-left-v--3) { margin-left: 3px; }
1877
+ &:is(.margin-x-v--3, .margin-right-v--3) { margin-right: 3px; }
1878
+ &.margin-v--2 { margin: 2px; }
1879
+ &:is(.margin-y-v--2, .margin-top-v--2) { margin-top: 2px; }
1880
+ &:is(.margin-y-v--2, .margin-bottom-v--2) { margin-bottom: 2px; }
1881
+ &:is(.margin-x-v--2, .margin-left-v--2) { margin-left: 2px; }
1882
+ &:is(.margin-x-v--2, .margin-right-v--2) { margin-right: 2px; }
1883
+ &.margin-v--1 { margin: 1px; }
1884
+ &:is(.margin-y-v--1, .margin-top-v--1) { margin-top: 1px; }
1885
+ &:is(.margin-y-v--1, .margin-bottom-v--1) { margin-bottom: 1px; }
1886
+ &:is(.margin-x-v--1, .margin-left-v--1) { margin-left: 1px; }
1887
+ &:is(.margin-x-v--1, .margin-right-v--1) { margin-right: 1px; }
1888
+ &.margin-v-auto { margin: auto; }
1889
+ }
1890
+ .pacem-pad {
1891
+ &.pad-v-6 { padding: var(--pacem-size-6); }
1892
+ &:is(.pad-y-v-6, .pad-top-v-6) { padding-top: var(--pacem-size-6); }
1893
+ &:is(.pad-y-v-6, .pad-bottom-v-6) { padding-bottom: var(--pacem-size-6); }
1894
+ &:is(.pad-x-v-6, .pad-left-v-6) { padding-left: var(--pacem-size-6); }
1895
+ &:is(.pad-x-v-6, .pad-right-v-6) { padding-right: var(--pacem-size-6); }
1896
+ &.pad-v-5 { padding: var(--pacem-size-5); }
1897
+ &:is(.pad-y-v-5, .pad-top-v-5) { padding-top: var(--pacem-size-5); }
1898
+ &:is(.pad-y-v-5, .pad-bottom-v-5) { padding-bottom: var(--pacem-size-5); }
1899
+ &:is(.pad-x-v-5, .pad-left-v-5) { padding-left: var(--pacem-size-5); }
1900
+ &:is(.pad-x-v-5, .pad-right-v-5) { padding-right: var(--pacem-size-5); }
1901
+ &.pad-v-4 { padding: var(--pacem-size-4); }
1902
+ &:is(.pad-y-v-4, .pad-top-v-4) { padding-top: var(--pacem-size-4); }
1903
+ &:is(.pad-y-v-4, .pad-bottom-v-4) { padding-bottom: var(--pacem-size-4); }
1904
+ &:is(.pad-x-v-4, .pad-left-v-4) { padding-left: var(--pacem-size-4); }
1905
+ &:is(.pad-x-v-4, .pad-right-v-4) { padding-right: var(--pacem-size-4); }
1906
+ &.pad-v-3 { padding: var(--pacem-size-3); }
1907
+ &:is(.pad-y-v-3, .pad-top-v-3) { padding-top: var(--pacem-size-3); }
1908
+ &:is(.pad-y-v-3, .pad-bottom-v-3) { padding-bottom: var(--pacem-size-3); }
1909
+ &:is(.pad-x-v-3, .pad-left-v-3) { padding-left: var(--pacem-size-3); }
1910
+ &:is(.pad-x-v-3, .pad-right-v-3) { padding-right: var(--pacem-size-3); }
1911
+ &.pad-v-2 { padding: var(--pacem-size-2); }
1912
+ &:is(.pad-y-v-2, .pad-top-v-2) { padding-top: var(--pacem-size-2); }
1913
+ &:is(.pad-y-v-2, .pad-bottom-v-2) { padding-bottom: var(--pacem-size-2); }
1914
+ &:is(.pad-x-v-2, .pad-left-v-2) { padding-left: var(--pacem-size-2); }
1915
+ &:is(.pad-x-v-2, .pad-right-v-2) { padding-right: var(--pacem-size-2); }
1916
+ &.pad-v-1 { padding: var(--pacem-size-1); }
1917
+ &:is(.pad-y-v-1, .pad-top-v-1) { padding-top: var(--pacem-size-1); }
1918
+ &:is(.pad-y-v-1, .pad-bottom-v-1) { padding-bottom: var(--pacem-size-1); }
1919
+ &:is(.pad-x-v-1, .pad-left-v-1) { padding-left: var(--pacem-size-1); }
1920
+ &:is(.pad-x-v-1, .pad-right-v-1) { padding-right: var(--pacem-size-1); }
1921
+ &.pad-v-0 { padding: 0; }
1922
+ &:is(.pad-y-v-0, .pad-top-v-0) { padding-top: 0; }
1923
+ &:is(.pad-y-v-0, .pad-bottom-v-0) { padding-bottom: 0; }
1924
+ &:is(.pad-x-v-0, .pad-left-v-0) { padding-left: 0; }
1925
+ &:is(.pad-x-v-0, .pad-right-v-0) { padding-right: 0; }
1926
+ &.pad-v--12 { padding: 12px; }
1927
+ &:is(.pad-y-v--12, .pad-top-v--12) { padding-top: 12px; }
1928
+ &:is(.pad-y-v--12, .pad-bottom-v--12) { padding-bottom: 12px; }
1929
+ &:is(.pad-x-v--12, .pad-left-v--12) { padding-left: 12px; }
1930
+ &:is(.pad-x-v--12, .pad-right-v--12) { padding-right: 12px; }
1931
+ &.pad-v--11 { padding: 11px; }
1932
+ &:is(.pad-y-v--11, .pad-top-v--11) { padding-top: 11px; }
1933
+ &:is(.pad-y-v--11, .pad-bottom-v--11) { padding-bottom: 11px; }
1934
+ &:is(.pad-x-v--11, .pad-left-v--11) { padding-left: 11px; }
1935
+ &:is(.pad-x-v--11, .pad-right-v--11) { padding-right: 11px; }
1936
+ &.pad-v--10 { padding: 10px; }
1937
+ &:is(.pad-y-v--10, .pad-top-v--10) { padding-top: 10px; }
1938
+ &:is(.pad-y-v--10, .pad-bottom-v--10) { padding-bottom: 10px; }
1939
+ &:is(.pad-x-v--10, .pad-left-v--10) { padding-left: 10px; }
1940
+ &:is(.pad-x-v--10, .pad-right-v--10) { padding-right: 10px; }
1941
+ &.pad-v--9 { padding: 9px; }
1942
+ &:is(.pad-y-v--9, .pad-top-v--9) { padding-top: 9px; }
1943
+ &:is(.pad-y-v--9, .pad-bottom-v--9) { padding-bottom: 9px; }
1944
+ &:is(.pad-x-v--9, .pad-left-v--9) { padding-left: 9px; }
1945
+ &:is(.pad-x-v--9, .pad-right-v--9) { padding-right: 9px; }
1946
+ &.pad-v--8 { padding: 8px; }
1947
+ &:is(.pad-y-v--8, .pad-top-v--8) { padding-top: 8px; }
1948
+ &:is(.pad-y-v--8, .pad-bottom-v--8) { padding-bottom: 8px; }
1949
+ &:is(.pad-x-v--8, .pad-left-v--8) { padding-left: 8px; }
1950
+ &:is(.pad-x-v--8, .pad-right-v--8) { padding-right: 8px; }
1951
+ &.pad-v--7 { padding: 7px; }
1952
+ &:is(.pad-y-v--7, .pad-top-v--7) { padding-top: 7px; }
1953
+ &:is(.pad-y-v--7, .pad-bottom-v--7) { padding-bottom: 7px; }
1954
+ &:is(.pad-x-v--7, .pad-left-v--7) { padding-left: 7px; }
1955
+ &:is(.pad-x-v--7, .pad-right-v--7) { padding-right: 7px; }
1956
+ &.pad-v--6 { padding: 6px; }
1957
+ &:is(.pad-y-v--6, .pad-top-v--6) { padding-top: 6px; }
1958
+ &:is(.pad-y-v--6, .pad-bottom-v--6) { padding-bottom: 6px; }
1959
+ &:is(.pad-x-v--6, .pad-left-v--6) { padding-left: 6px; }
1960
+ &:is(.pad-x-v--6, .pad-right-v--6) { padding-right: 6px; }
1961
+ &.pad-v--5 { padding: 5px; }
1962
+ &:is(.pad-y-v--5, .pad-top-v--5) { padding-top: 5px; }
1963
+ &:is(.pad-y-v--5, .pad-bottom-v--5) { padding-bottom: 5px; }
1964
+ &:is(.pad-x-v--5, .pad-left-v--5) { padding-left: 5px; }
1965
+ &:is(.pad-x-v--5, .pad-right-v--5) { padding-right: 5px; }
1966
+ &.pad-v--4 { padding: 4px; }
1967
+ &:is(.pad-y-v--4, .pad-top-v--4) { padding-top: 4px; }
1968
+ &:is(.pad-y-v--4, .pad-bottom-v--4) { padding-bottom: 4px; }
1969
+ &:is(.pad-x-v--4, .pad-left-v--4) { padding-left: 4px; }
1970
+ &:is(.pad-x-v--4, .pad-right-v--4) { padding-right: 4px; }
1971
+ &.pad-v--3 { padding: 3px; }
1972
+ &:is(.pad-y-v--3, .pad-top-v--3) { padding-top: 3px; }
1973
+ &:is(.pad-y-v--3, .pad-bottom-v--3) { padding-bottom: 3px; }
1974
+ &:is(.pad-x-v--3, .pad-left-v--3) { padding-left: 3px; }
1975
+ &:is(.pad-x-v--3, .pad-right-v--3) { padding-right: 3px; }
1976
+ &.pad-v--2 { padding: 2px; }
1977
+ &:is(.pad-y-v--2, .pad-top-v--2) { padding-top: 2px; }
1978
+ &:is(.pad-y-v--2, .pad-bottom-v--2) { padding-bottom: 2px; }
1979
+ &:is(.pad-x-v--2, .pad-left-v--2) { padding-left: 2px; }
1980
+ &:is(.pad-x-v--2, .pad-right-v--2) { padding-right: 2px; }
1981
+ &.pad-v--1 { padding: 1px; }
1982
+ &:is(.pad-y-v--1, .pad-top-v--1) { padding-top: 1px; }
1983
+ &:is(.pad-y-v--1, .pad-bottom-v--1) { padding-bottom: 1px; }
1984
+ &:is(.pad-x-v--1, .pad-left-v--1) { padding-left: 1px; }
1985
+ &:is(.pad-x-v--1, .pad-right-v--1) { padding-right: 1px; }
1986
+ &.pad-v-auto { padding: auto; }
1987
+ }
1988
+ }