  /****************************/
 /*           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);
}

.mb-xs {
    margin-bottom: var(--responsive-space-xs);
}

.ml-s {
    margin-bottom: var(--responsive-space-s);
}

.ml-m {
    margin-bottom: var(--responsive-space-m);
}

.ml-l {
    margin-bottom: var(--responsive-space-l);
}

.ml-xl {
    margin-bottom: 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);
}

.pr-48 {
    padding-right: var(--static-space-48);
}

.pr-56 {
    padding-right: 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);
}