@once-ui-system/core 1.0.0

package/dist/styles/spacing.scss

@@ -0,0 +1,1461 @@
+  /****************************/
+ /*           MARGIN         */
+/****************************/
+
+/* EVEN */
+.m-0 {
+    margin: var(--static-space-0);
+}
+
+.m-1 {
+    margin: var(--static-space-1);
+}
+
+.m-2 {
+    margin: var(--static-space-2);
+}
+
+.m-4 {
+    margin: var(--static-space-4);
+}
+
+.m-8 {
+    margin: var(--static-space-8);
+}
+
+.m-12 {
+    margin: var(--static-space-12);
+}
+
+.m-16 {
+    margin: var(--static-space-16);
+}
+
+.m-20 {
+    margin: var(--static-space-20);
+}
+
+.m-24 {
+    margin: var(--static-space-24);
+}
+
+.m-32 {
+    margin: var(--static-space-32);
+}
+
+.m-40 {
+    margin: var(--static-space-40);
+}
+
+.m-48 {
+    margin: var(--static-space-48);
+}
+
+.m-56 {
+    margin: var(--static-space-56);
+}
+
+.m-64 {
+    margin: var(--static-space-64);
+}
+
+.m-80 {
+    margin: var(--static-space-80);
+}
+
+.m-104 {
+    margin: var(--static-space-104);
+}
+
+.m-128 {
+    margin: var(--static-space-128);
+}
+
+.m-160 {
+    margin: var(--static-space-160);
+}
+
+.m-xs {
+    margin-bottom: var(--responsive-space-xs);
+}
+
+.m-s {
+    margin-bottom: var(--responsive-space-s);
+}
+
+.m-m {
+    margin-bottom: var(--responsive-space-m);
+}
+
+.m-l {
+    margin-bottom: var(--responsive-space-l);
+}
+
+.m-xl {
+    margin-bottom: var(--responsive-space-xl);
+}
+
+/* X */
+.mx-0 {
+    margin: auto var(--static-space-0);
+}
+
+.mx-1 {
+    margin: auto var(--static-space-1);
+}
+
+.mx-2 {
+    margin: auto var(--static-space-2);
+}
+
+.mx-4 {
+    margin: auto var(--static-space-4);
+}
+
+.mx-8 {
+    margin: auto var(--static-space-8);
+}
+
+.mx-12 {
+    margin: auto var(--static-space-12);
+}
+
+.mx-16 {
+    margin: auto var(--static-space-16);
+}
+
+.mx-20 {
+    margin: auto var(--static-space-20);
+}
+
+.mx-24 {
+    margin: auto var(--static-space-24);
+}
+
+.mx-32 {
+    margin: auto var(--static-space-32);
+}
+
+.mx-40 {
+    margin: auto var(--static-space-40);
+}
+
+.mx-64 {
+    margin: auto var(--static-space-64);
+}
+
+.mx-80 {
+    margin: auto var(--static-space-80);
+}
+
+.mx-104 {
+    margin: auto var(--static-space-104);
+}
+
+.mx-128 {
+    margin: auto var(--static-space-128);
+}
+
+.mx-160 {
+    margin: auto var(--static-space-160);
+}
+
+.mx-xs {
+    margin-bottom: var(--responsive-space-xs);
+}
+
+.mx-s {
+    margin-bottom: var(--responsive-space-s);
+}
+
+.mx-m {
+    margin-bottom: var(--responsive-space-m);
+}
+
+.mx-l {
+    margin-bottom: var(--responsive-space-l);
+}
+
+.mx-xl {
+    margin-bottom: var(--responsive-space-xl);
+}
+
+/* Y */
+.my-0 {
+    margin: var(--static-space-0) auto;
+}
+
+.my-1 {
+    margin: var(--static-space-1) auto;
+}
+
+.my-2 {
+    margin: var(--static-space-2) auto;
+}
+
+.my-4 {
+    margin: var(--static-space-4) auto;
+}
+
+.my-8 {
+    margin: var(--static-space-8) auto;
+}
+
+.my-12 {
+    margin: var(--static-space-12) auto;
+}
+
+.my-16 {
+    margin: var(--static-space-16) auto;
+}
+
+.my-20 {
+    margin: var(--static-space-20) auto;
+}
+
+.my-24 {
+    margin: var(--static-space-24) auto;
+}
+
+.my-32 {
+    margin: var(--static-space-32) auto;
+}
+
+.my-40 {
+    margin: var(--static-space-40) auto;
+}
+
+.my-48 {
+    margin: var(--static-space-48) auto;
+}
+
+.my-56 {
+    margin: var(--static-space-56) auto;
+}
+
+.my-64 {
+    margin: var(--static-space-64) auto;
+}
+
+.my-80 {
+    margin: var(--static-space-80) auto;
+}
+
+.my-104 {
+    margin: var(--static-space-104) auto;
+}
+
+.my-128 {
+    margin: var(--static-space-128) auto;
+}
+
+.my-160 {
+    margin: var(--static-space-160) auto;
+}
+
+.my-xs {
+    margin-bottom: var(--responsive-space-xs);
+}
+
+.my-s {
+    margin-bottom: var(--responsive-space-s);
+}
+
+.my-m {
+    margin-bottom: var(--responsive-space-m);
+}
+
+.my-l {
+    margin-bottom: var(--responsive-space-l);
+}
+
+.my-xl {
+    margin-bottom: var(--responsive-space-xl);
+}
+
+/* TOP */
+.mt-0 {
+    margin-top: var(--static-space-0);
+}
+
+.mt-1 {
+    margin-top: var(--static-space-1);
+}
+
+.mt-2 {
+    margin-top: var(--static-space-2);
+}
+
+.mt-4 {
+    margin-top: var(--static-space-4);
+}
+
+.mt-8 {
+    margin-top: var(--static-space-8);
+}
+
+.mt-12 {
+    margin-top: var(--static-space-12);
+}
+
+.mt-16 {
+    margin-top: var(--static-space-16);
+}
+
+.mt-20 {
+    margin-top: var(--static-space-20);
+}
+
+.mt-24 {
+    margin-top: var(--static-space-24);
+}
+
+.mt-32 {
+    margin-top: var(--static-space-32);
+}
+
+.mt-40 {
+    margin-top: var(--static-space-40);
+}
+
+.mt-48 {
+    margin-top: var(--static-space-48);
+}
+
+.mt-56 {
+    margin-top: var(--static-space-56);
+}
+
+.mt-64 {
+    margin-top: var(--static-space-64);
+}
+
+.mt-80 {
+    margin-top: var(--static-space-80);
+}
+
+.mt-104 {
+    margin-top: var(--static-space-104);
+}
+
+.mt-128 {
+    margin-top: var(--static-space-128);
+}
+
+.mt-160 {
+    margin-top: var(--static-space-160);
+}
+
+.mt-xs {
+    margin-top: var(--responsive-space-xs);
+}
+
+.mt-s {
+    margin-top: var(--responsive-space-s);
+}
+
+.mt-m {
+    margin-top: var(--responsive-space-m);
+}
+
+.mt-l {
+    margin-top: var(--responsive-space-l);
+}
+
+.mt-xl {
+    margin-top: var(--responsive-space-xl);
+}
+
+/* RIGHT */
+.mr-0 {
+    margin-right: var(--static-space-0);
+}
+
+.mr-1 {
+    margin-right: var(--static-space-1);
+}
+
+.mr-2 {
+    margin-right: var(--static-space-2);
+}
+
+.mr-4 {
+    margin-right: var(--static-space-4);
+}
+
+.mr-8 {
+    margin-right: var(--static-space-8);
+}
+
+.mr-12 {
+    margin-right: var(--static-space-12);
+}
+
+.mr-16 {
+    margin-right: var(--static-space-16);
+}
+
+.mr-20 {
+    margin-right: var(--static-space-20);
+}
+
+.mr-24 {
+    margin-right: var(--static-space-24);
+}
+
+.mr-32 {
+    margin-right: var(--static-space-32);
+}
+
+.mr-40 {
+    margin-right: var(--static-space-40);
+}
+
+.mr-48 {
+    margin-right: var(--static-space-48);
+}
+
+.mr-56 {
+    margin-right: var(--static-space-56);
+}
+
+.mr-64 {
+    margin-right: var(--static-space-64);
+}
+
+.mr-80 {
+    margin-right: var(--static-space-80);
+}
+
+.mr-104 {
+    margin-right: var(--static-space-104);
+}
+
+.mr-128 {
+    margin-right: var(--static-space-128);
+}
+
+.mr-160 {
+    margin-right: var(--static-space-160);
+}
+
+.mr-xs {
+    margin-bottom: var(--responsive-space-xs);
+}
+
+.mr-s {
+    margin-bottom: var(--responsive-space-s);
+}
+
+.mr-m {
+    margin-bottom: var(--responsive-space-m);
+}
+
+.mr-l {
+    margin-bottom: var(--responsive-space-l);
+}
+
+.mr-xl {
+    margin-bottom: var(--responsive-space-xl);
+}
+
+/* BOTTOM */
+.mb-0 {
+    margin-bottom: var(--static-space-0);
+}
+
+.mb-1 {
+    margin-bottom: var(--static-space-1);
+}
+
+.mb-2 {
+    margin-bottom: var(--static-space-2);
+}
+
+.mb-4 {
+    margin-bottom: var(--static-space-4);
+}
+
+.mb-8 {
+    margin-bottom: var(--static-space-8);
+}
+
+.mb-12 {
+    margin-bottom: var(--static-space-12);
+}
+
+.mb-16 {
+    margin-bottom: var(--static-space-16);
+}
+
+.mb-20 {
+    margin-bottom: var(--static-space-20);
+}
+
+.mb-24 {
+    margin-bottom: var(--static-space-24);
+}
+
+.mb-32 {
+    margin-bottom: var(--static-space-32);
+}
+
+.mb-40 {
+    margin-bottom: var(--static-space-40);
+}
+
+.mb-48 {
+    margin-bottom: var(--static-space-48);
+}
+
+.mb-56 {
+    margin-bottom: var(--static-space-56);
+}
+
+.mb-64 {
+    margin-bottom: var(--static-space-64);
+}
+
+.mb-80 {
+    margin-bottom: var(--static-space-80);
+}
+
+.mb-104 {
+    margin-bottom: var(--static-space-104);
+}
+
+.mb-128 {
+    margin-bottom: var(--static-space-128);
+}
+
+.mb-160 {
+    margin-bottom: var(--static-space-160);
+}
+
+.mb-xs {
+    margin-bottom: var(--responsive-space-xs);
+}
+
+.mb-s {
+    margin-bottom: var(--responsive-space-s);
+}
+
+.mb-m {
+    margin-bottom: var(--responsive-space-m);
+}
+
+.mb-l {
+    margin-bottom: var(--responsive-space-l);
+}
+
+.mb-xl {
+    margin-bottom: var(--responsive-space-xl);
+}
+
+/* LEFT */
+.ml-0 {
+    margin-left: var(--static-space-0);
+}
+
+.ml-1 {
+    margin-left: var(--static-space-1);
+}
+
+.ml-2 {
+    margin-left: var(--static-space-2);
+}
+
+.ml-4 {
+    margin-left: var(--static-space-4);
+}
+
+.ml-8 {
+    margin-left: var(--static-space-8);
+}
+
+.ml-12 {
+    margin-left: var(--static-space-12);
+}
+
+.ml-16 {
+    margin-left: var(--static-space-16);
+}
+
+.ml-20 {
+    margin-left: var(--static-space-20);
+}
+
+.ml-24 {
+    margin-left: var(--static-space-24);
+}
+
+.ml-32 {
+    margin-left: var(--static-space-32);
+}
+
+.ml-40 {
+    margin-left: var(--static-space-40);
+}
+
+.ml-48 {
+    margin-left: var(--static-space-48);
+}
+
+.ml-56 {
+    margin-left: var(--static-space-56);
+}
+
+.ml-64 {
+    margin-left: var(--static-space-64);
+}
+
+.ml-80 {
+    margin-left: var(--static-space-80);
+}
+
+.ml-104 {
+    margin-left: var(--static-space-104);
+}
+
+.ml-128 {
+    margin-left: var(--static-space-128);
+}
+
+.ml-160 {
+    margin-left: var(--static-space-160);
+}
+
+.ml-xs {
+    margin-left: var(--responsive-space-xs);
+}
+
+.ml-s {
+    margin-left: var(--responsive-space-s);
+}
+
+.ml-m {
+    margin-left: var(--responsive-space-m);
+}
+
+.ml-l {
+    margin-left: var(--responsive-space-l);
+}
+
+.ml-xl {
+    margin-left: var(--responsive-space-xl);
+}
+
+
+
+  /****************************/
+ /*           PADDING        */
+/****************************/
+
+/* EVEN */
+.p-0 {
+    padding: var(--static-space-0);
+}
+
+.p-1 {
+    padding: var(--static-space-1);
+}
+
+.p-2 {
+    padding: var(--static-space-2);
+}
+
+.p-4 {
+    padding: var(--static-space-4);
+}
+
+.p-8 {
+    padding: var(--static-space-8);
+}
+
+.p-12 {
+    padding: var(--static-space-12);
+}
+
+.p-16 {
+    padding: var(--static-space-16);
+}
+
+.p-20 {
+    padding: var(--static-space-20);
+}
+
+.p-24 {
+    padding: var(--static-space-24);
+}
+
+.p-32 {
+    padding: var(--static-space-32);
+}
+
+.p-40 {
+    padding: var(--static-space-40);
+}
+
+.p-48 {
+    padding: var(--static-space-48);
+}
+
+.p-56 {
+    padding: var(--static-space-56);
+}
+
+.p-64 {
+    padding: var(--static-space-64);
+}
+
+.p-80 {
+    padding: var(--static-space-80);
+}
+
+.p-104 {
+    padding: var(--static-space-104);
+}
+
+.p-128 {
+    padding: var(--static-space-128);
+}
+
+.p-160 {
+    padding: var(--static-space-160);
+}
+
+.p-xs {
+    padding: var(--responsive-space-xs);
+}
+
+.p-s {
+    padding: var(--responsive-space-s);
+}
+
+.p-m {
+    padding: var(--responsive-space-m);
+}
+
+.p-l {
+    padding: var(--responsive-space-l);
+}
+
+.p-xl {
+    padding: var(--responsive-space-xl);
+}
+
+/* X */
+.px-0 {
+    padding-left: var(--static-space-0);
+    padding-right: var(--static-space-0);
+}
+
+.px-1 {
+    padding-left: var(--static-space-1);
+    padding-right: var(--static-space-1);
+}
+
+.px-2 {
+    padding-left: var(--static-space-2);
+    padding-right: var(--static-space-2);
+}
+
+.px-4 {
+    padding-left: var(--static-space-4);
+    padding-right: var(--static-space-4);
+}
+
+.px-8 {
+    padding-left: var(--static-space-8);
+    padding-right: var(--static-space-8);
+}
+
+.px-12 {
+    padding-left: var(--static-space-12);
+    padding-right: var(--static-space-12);
+}
+
+.px-16 {
+    padding-left: var(--static-space-16);
+    padding-right: var(--static-space-16);
+}
+
+.px-20 {
+    padding-left: var(--static-space-20);
+    padding-right: var(--static-space-20);
+}
+
+.px-24 {
+    padding-left: var(--static-space-24);
+    padding-right: var(--static-space-24);
+}
+
+.px-32 {
+    padding-left: var(--static-space-32);
+    padding-right: var(--static-space-32);
+}
+
+.px-40 {
+    padding-left: var(--static-space-40);
+    padding-right: var(--static-space-40);
+}
+
+.px-48 {
+    padding-left: var(--static-space-48);
+    padding-right: var(--static-space-48);
+}
+
+.px-56 {
+    padding-left: var(--static-space-56);
+    padding-right: var(--static-space-56);
+}
+
+.px-64 {
+    padding-left: var(--static-space-64);
+    padding-right: var(--static-space-64);
+}
+
+.px-80 {
+    padding-left: var(--static-space-80);
+    padding-right: var(--static-space-80);
+}
+
+.px-104 {
+    padding-left: var(--static-space-104);
+    padding-right: var(--static-space-104);
+}
+
+.px-128 {
+    padding-left: var(--static-space-128);
+    padding-right: var(--static-space-128);
+}
+
+.px-160 {
+    padding-left: var(--static-space-160);
+    padding-right: var(--static-space-160);
+}
+
+.px-xs {
+    padding-left: var(--responsive-space-xs);
+    padding-right: var(--responsive-space-xs);
+}
+
+.px-s {
+    padding-left: var(--responsive-space-s);
+    padding-right: var(--responsive-space-s);
+}
+
+.px-m {
+    padding-left: var(--responsive-space-m);
+    padding-right: var(--responsive-space-m);
+}
+
+.px-l {
+    padding-left: var(--responsive-space-l);
+    padding-right: var(--responsive-space-l);
+}
+
+.px-xl {
+    padding-left: var(--responsive-space-xl);
+    padding-right: var(--responsive-space-xl);
+}
+
+/* Y */
+.py-0 {
+    padding-top: var(--static-space-0);
+    padding-bottom: var(--static-space-0);
+}
+
+.py-1 {
+    padding-top: var(--static-space-1);
+    padding-bottom: var(--static-space-1);
+}
+
+.py-2 {
+    padding-top: var(--static-space-2);
+    padding-bottom: var(--static-space-2);
+}
+
+.py-4 {
+    padding-top: var(--static-space-4);
+    padding-bottom: var(--static-space-4);
+}
+
+.py-8 {
+    padding-top: var(--static-space-8);
+    padding-bottom: var(--static-space-8);
+}
+
+.py-12 {
+    padding-top: var(--static-space-12);
+    padding-bottom: var(--static-space-12);
+}
+
+.py-16 {
+    padding-top: var(--static-space-16);
+    padding-bottom: var(--static-space-16);
+}
+
+.py-20 {
+    padding-top: var(--static-space-20);
+    padding-bottom: var(--static-space-20);
+}
+
+.py-24 {
+    padding-top: var(--static-space-24);
+    padding-bottom: var(--static-space-24);
+}
+
+.py-32 {
+    padding-top: var(--static-space-32);
+    padding-bottom: var(--static-space-32);
+}
+
+.py-40 {
+    padding-top: var(--static-space-40);
+    padding-bottom: var(--static-space-40);
+}
+
+.py-48 {
+    padding-top: var(--static-space-48);
+    padding-bottom: var(--static-space-48);
+}
+
+.py-56 {
+    padding-top: var(--static-space-56);
+    padding-bottom: var(--static-space-56);
+}
+
+.py-64 {
+    padding-top: var(--static-space-64);
+    padding-bottom: var(--static-space-64);
+}
+
+.py-80 {
+    padding-top: var(--static-space-80);
+    padding-bottom: var(--static-space-80);
+}
+
+.py-104 {
+    padding-top: var(--static-space-104);
+    padding-bottom: var(--static-space-104);
+}
+
+.py-128 {
+    padding-top: var(--static-space-128);
+    padding-bottom: var(--static-space-128);
+}
+
+.py-160 {
+    padding-top: var(--static-space-160);
+    padding-bottom: var(--static-space-160);
+}
+
+.py-xs {
+    padding-top: var(--responsive-space-xs);
+    padding-bottom: var(--responsive-space-xs);
+}
+
+.py-s {
+    padding-top: var(--responsive-space-s);
+    padding-bottom: var(--responsive-space-s);
+}
+
+.py-m {
+    padding-top: var(--responsive-space-m);
+    padding-bottom: var(--responsive-space-m);
+}
+
+.py-l {
+    padding-top: var(--responsive-space-l);
+    padding-bottom: var(--responsive-space-l);
+}
+
+.py-xl {
+    padding-top: var(--responsive-space-xl);
+    padding-bottom: var(--responsive-space-xl);
+}
+
+/* TOP */
+.pt-0 {
+    padding-top: var(--static-space-0);
+}
+
+.pt-1 {
+    padding-top: var(--static-space-1);
+}
+
+.pt-2 {
+    padding-top: var(--static-space-2);
+}
+
+.pt-4 {
+    padding-top: var(--static-space-4);
+}
+
+.pt-8 {
+    padding-top: var(--static-space-8);
+}
+
+.pt-12 {
+    padding-top: var(--static-space-12);
+}
+
+.pt-16 {
+    padding-top: var(--static-space-16);
+}
+
+.pt-20 {
+    padding-top: var(--static-space-20);
+}
+
+.pt-24 {
+    padding-top: var(--static-space-24);
+}
+
+.pt-32 {
+    padding-top: var(--static-space-32);
+}
+
+.pt-40 {
+    padding-top: var(--static-space-40);
+}
+
+.pt-48 {
+    padding-top: var(--static-space-48);
+}
+
+.pt-56 {
+    padding-top: var(--static-space-56);
+}
+
+.pt-64 {
+    padding-top: var(--static-space-64);
+}
+
+.pt-80 {
+    padding-top: var(--static-space-80);
+}
+
+.pt-104 {
+    padding-top: var(--static-space-104);
+}
+
+.pt-128 {
+    padding-top: var(--static-space-128);
+}
+
+.pt-160 {
+    padding-top: var(--static-space-160);
+}
+
+.pt-xs {
+    padding-top: var(--responsive-space-xs);
+}
+
+.pt-s {
+    padding-top: var(--responsive-space-s);
+}
+
+.pt-m {
+    padding-top: var(--responsive-space-m);
+}
+
+.pt-l {
+    padding-top: var(--responsive-space-l);
+}
+
+.pt-xl {
+    padding-top: var(--responsive-space-xl);
+}
+
+
+/* RIGHT */
+.pr-0 {
+    padding-right: var(--static-space-0);
+}
+
+.pr-1 {
+    padding-right: var(--static-space-1);
+}
+
+.pr-2 {
+    padding-right: var(--static-space-2);
+}
+
+.pr-4 {
+    padding-right: var(--static-space-4);
+}
+
+.pr-8 {
+    padding-right: var(--static-space-8);
+}
+
+.pr-12 {
+    padding-right: var(--static-space-12);
+}
+
+.pr-16 {
+    padding-right: var(--static-space-16);
+}
+
+.pr-20 {
+    padding-right: var(--static-space-20);
+}
+
+.pr-24 {
+    padding-right: var(--static-space-24);
+}
+
+.pr-32 {
+    padding-right: var(--static-space-32);
+}
+
+.pr-40 {
+    padding-right: var(--static-space-40);
+}
+
+.pr-48 {
+    padding-right: var(--static-space-48);
+}
+
+.pr-56 {
+    padding-right: var(--static-space-56);
+}
+
+.pr-64 {
+    padding-right: var(--static-space-64);
+}
+
+.pr-80 {
+    padding-right: var(--static-space-80);
+}
+
+.pr-104 {
+    padding-right: var(--static-space-104);
+}
+
+.pr-128 {
+    padding-right: var(--static-space-128);
+}
+
+.pr-160 {
+    padding-right: var(--static-space-160);
+}
+
+.pr-xs {
+    padding-right: var(--responsive-space-xs);
+}
+
+.pr-s {
+    padding-right: var(--responsive-space-s);
+}
+
+.pr-m {
+    padding-right: var(--responsive-space-m);
+}
+
+.pr-l {
+    padding-right: var(--responsive-space-l);
+}
+
+.pr-xl {
+    padding-right: var(--responsive-space-xl);
+}
+
+/* BOTTOM */
+.pb-0 {
+    padding-bottom: var(--static-space-0);
+}
+
+.pb-1 {
+    padding-bottom: var(--static-space-1);
+}
+
+.pb-2 {
+    padding-bottom: var(--static-space-2);
+}
+
+.pb-4 {
+    padding-bottom: var(--static-space-4);
+}
+
+.pb-8 {
+    padding-bottom: var(--static-space-8);
+}
+
+.pb-12 {
+    padding-bottom: var(--static-space-12);
+}
+
+.pb-16 {
+    padding-bottom: var(--static-space-16);
+}
+
+.pb-20 {
+    padding-bottom: var(--static-space-20);
+}
+
+.pb-24 {
+    padding-bottom: var(--static-space-24);
+}
+
+.pb-32 {
+    padding-bottom: var(--static-space-32);
+}
+
+.pb-40 {
+    padding-bottom: var(--static-space-40);
+}
+
+.pb-48 {
+    padding-bottom: var(--static-space-48);
+}
+
+.pb-56 {
+    padding-bottom: var(--static-space-56);
+}
+
+.pb-64 {
+    padding-bottom: var(--static-space-64);
+}
+
+.pb-80 {
+    padding-bottom: var(--static-space-80);
+}
+
+.pb-104 {
+    padding-bottom: var(--static-space-104);
+}
+
+.pb-128 {
+    padding-bottom: var(--static-space-128);
+}
+
+.pb-160 {
+    padding-bottom: var(--static-space-160);
+}
+
+.pb-xs {
+    padding-bottom: var(--responsive-space-xs);
+}
+
+.pb-s {
+    padding-bottom: var(--responsive-space-s);
+}
+
+.pb-m {
+    padding-bottom: var(--responsive-space-m);
+}
+
+.pb-l {
+    padding-bottom: var(--responsive-space-l);
+}
+
+.pb-xl {
+    padding-bottom: var(--responsive-space-xl);
+}
+
+/* LEFT */
+.pl-0 {
+    padding-left: var(--static-space-0);
+}
+
+.pl-1 {
+    padding-left: var(--static-space-1);
+}
+
+.pl-2 {
+    padding-left: var(--static-space-2);
+}
+
+.pl-4 {
+    padding-left: var(--static-space-4);
+}
+
+.pl-8 {
+    padding-left: var(--static-space-8);
+}
+
+.pl-12 {
+    padding-left: var(--static-space-12);
+}
+
+.pl-16 {
+    padding-left: var(--static-space-16);
+}
+
+.pl-20 {
+    padding-left: var(--static-space-20);
+}
+
+.pl-24 {
+    padding-left: var(--static-space-24);
+}
+
+.pl-32 {
+    padding-left: var(--static-space-32);
+}
+
+.pl-40 {
+    padding-left: var(--static-space-40);
+}
+
+.pl-48 {
+    padding-left: var(--static-space-48);
+}
+
+.pl-56 {
+    padding-left: var(--static-space-56);
+}
+
+.pl-64 {
+    padding-left: var(--static-space-64);
+}
+
+.pl-80 {
+    padding-left: var(--static-space-80);
+}
+
+.pl-104 {
+    padding-left: var(--static-space-104);
+}
+
+.pl-128 {
+    padding-left: var(--static-space-128);
+}
+
+.pl-160 {
+    padding-left: var(--static-space-160);
+}
+
+.pl-xs {
+    padding-left: var(--responsive-space-xs);
+}
+
+.pl-s {
+    padding-left: var(--responsive-space-s);
+}
+
+.pl-m {
+    padding-left: var(--responsive-space-m);
+}
+
+.pl-l {
+    padding-left: var(--responsive-space-l);
+}
+
+.pl-xl {
+    padding-left: var(--responsive-space-xl);
+}
+
+
+
+
+  /****************************/
+ /*            GAP           */
+/****************************/
+
+// Negative gap: collapse stacked borders
+
+.g-horizontal--1 > *:not(:first-child) {
+    margin-left: -1px;
+}
+  
+.g-vertical--1 > *:not(:first-child) {
+    margin-top: -1px;
+}
+
+// Regular gap
+
+.g-0 {
+    gap: var(--static-space-0);
+}
+
+.g-1 {
+    gap: var(--static-space-1);
+}
+
+.g-2 {
+    gap: var(--static-space-2);
+}
+
+.g-4 {
+    gap: var(--static-space-4);
+}
+
+.g-8 {
+    gap: var(--static-space-8);
+}
+
+.g-12 {
+    gap: var(--static-space-12);
+}
+
+.g-16 {
+    gap: var(--static-space-16);
+}
+
+.g-20 {
+    gap: var(--static-space-20);
+}
+
+.g-24 {
+    gap: var(--static-space-24);
+}
+
+.g-32 {
+    gap: var(--static-space-32);
+}
+
+.g-40 {
+    gap: var(--static-space-40);
+}
+
+.g-48 {
+    gap: var(--static-space-48);
+}
+
+.g-56 {
+    gap: var(--static-space-56);
+}
+
+.g-64 {
+    gap: var(--static-space-64);
+}
+
+.g-80 {
+    gap: var(--static-space-80);
+}
+
+.g-104 {
+    gap: var(--static-space-104);
+}
+
+.g-128 {
+    gap: var(--static-space-128);
+}
+
+.g-160 {
+    gap: var(--static-space-160);
+}
+
+.g-xs {
+    gap: var(--responsive-space-xs);
+}
+
+.g-s {
+    gap: var(--responsive-space-s);
+}
+
+.g-m {
+    gap: var(--responsive-space-m);
+}
+
+.g-l {
+    gap: var(--responsive-space-l);
+}
+
+.g-xl {
+    gap: var(--responsive-space-xl);
+}