@medyll/cssfabric 0.0.14 → 0.1.0

package/lib/styles/core/box/box.css

@@ -163,2005 +163,2005 @@
 }
 
 .pad, .pad-1 {
-  padding: var(--box-sp-1);
+  padding: var(--box-unit-1);
 }
 .pad-2 {
-  padding: var(--box-sp-2);
+  padding: var(--box-unit-2);
 }
 .pad-3 {
-  padding: var(--box-sp-3);
+  padding: var(--box-unit-3);
 }
 .pad-4 {
-  padding: var(--box-sp-4);
+  padding: var(--box-unit-4);
 }
 .pad-5 {
-  padding: var(--box-sp-5);
+  padding: var(--box-unit-5);
 }
 .pad-6 {
-  padding: var(--box-sp-6);
+  padding: var(--box-unit-6);
 }
 .pad-7 {
-  padding: var(--box-sp-7);
+  padding: var(--box-unit-7);
 }
 .pad-8 {
-  padding: var(--box-sp-8);
+  padding: var(--box-unit-8);
 }
 .pad-9 {
-  padding: var(--box-sp-9);
+  padding: var(--box-unit-9);
 }
 .pad-10 {
-  padding: var(--box-sp-10);
+  padding: var(--box-unit-10);
 }
 .pad-11 {
-  padding: var(--box-sp-11);
+  padding: var(--box-unit-11);
 }
 .pad-12 {
-  padding: var(--box-sp-12);
+  padding: var(--box-unit-12);
 }
 .pad-13 {
-  padding: var(--box-sp-13);
+  padding: var(--box-unit-13);
 }
 .pad-14 {
-  padding: var(--box-sp-14);
+  padding: var(--box-unit-14);
 }
 .pad-15 {
-  padding: var(--box-sp-15);
+  padding: var(--box-unit-15);
 }
 .pad-16 {
-  padding: var(--box-sp-16);
+  padding: var(--box-unit-16);
 }
 .pad-17 {
-  padding: var(--box-sp-17);
+  padding: var(--box-unit-17);
 }
 .pad-18 {
-  padding: var(--box-sp-18);
+  padding: var(--box-unit-18);
 }
 .pad-19 {
-  padding: var(--box-sp-19);
+  padding: var(--box-unit-19);
 }
 .pad-20 {
-  padding: var(--box-sp-20);
+  padding: var(--box-unit-20);
 }
 .pad-21 {
-  padding: var(--box-sp-21);
+  padding: var(--box-unit-21);
 }
 .pad-22 {
-  padding: var(--box-sp-22);
+  padding: var(--box-unit-22);
 }
 .pad-23 {
-  padding: var(--box-sp-23);
+  padding: var(--box-unit-23);
 }
 .pad-24 {
-  padding: var(--box-sp-24);
+  padding: var(--box-unit-24);
 }
 .pad-25 {
-  padding: var(--box-sp-25);
+  padding: var(--box-unit-25);
 }
 .pad-26 {
-  padding: var(--box-sp-26);
+  padding: var(--box-unit-26);
 }
 .pad-27 {
-  padding: var(--box-sp-27);
+  padding: var(--box-unit-27);
 }
 .pad-28 {
-  padding: var(--box-sp-28);
+  padding: var(--box-unit-28);
 }
 .pad-29 {
-  padding: var(--box-sp-29);
+  padding: var(--box-unit-29);
 }
 .pad-30 {
-  padding: var(--box-sp-30);
+  padding: var(--box-unit-30);
 }
 .pad-31 {
-  padding: var(--box-sp-31);
+  padding: var(--box-unit-31);
 }
 .pad-32 {
-  padding: var(--box-sp-32);
+  padding: var(--box-unit-32);
 }
 
 .pad-t, .pad-t-1 {
-  padding-top: var(--box-sp-1);
+  padding-top: var(--box-unit-1);
 }
 .pad-t-2 {
-  padding-top: var(--box-sp-2);
+  padding-top: var(--box-unit-2);
 }
 .pad-t-3 {
-  padding-top: var(--box-sp-3);
+  padding-top: var(--box-unit-3);
 }
 .pad-t-4 {
-  padding-top: var(--box-sp-4);
+  padding-top: var(--box-unit-4);
 }
 .pad-t-5 {
-  padding-top: var(--box-sp-5);
+  padding-top: var(--box-unit-5);
 }
 .pad-t-6 {
-  padding-top: var(--box-sp-6);
+  padding-top: var(--box-unit-6);
 }
 .pad-t-7 {
-  padding-top: var(--box-sp-7);
+  padding-top: var(--box-unit-7);
 }
 .pad-t-8 {
-  padding-top: var(--box-sp-8);
+  padding-top: var(--box-unit-8);
 }
 .pad-t-9 {
-  padding-top: var(--box-sp-9);
+  padding-top: var(--box-unit-9);
 }
 .pad-t-10 {
-  padding-top: var(--box-sp-10);
+  padding-top: var(--box-unit-10);
 }
 .pad-t-11 {
-  padding-top: var(--box-sp-11);
+  padding-top: var(--box-unit-11);
 }
 .pad-t-12 {
-  padding-top: var(--box-sp-12);
+  padding-top: var(--box-unit-12);
 }
 .pad-t-13 {
-  padding-top: var(--box-sp-13);
+  padding-top: var(--box-unit-13);
 }
 .pad-t-14 {
-  padding-top: var(--box-sp-14);
+  padding-top: var(--box-unit-14);
 }
 .pad-t-15 {
-  padding-top: var(--box-sp-15);
+  padding-top: var(--box-unit-15);
 }
 .pad-t-16 {
-  padding-top: var(--box-sp-16);
+  padding-top: var(--box-unit-16);
 }
 .pad-t-17 {
-  padding-top: var(--box-sp-17);
+  padding-top: var(--box-unit-17);
 }
 .pad-t-18 {
-  padding-top: var(--box-sp-18);
+  padding-top: var(--box-unit-18);
 }
 .pad-t-19 {
-  padding-top: var(--box-sp-19);
+  padding-top: var(--box-unit-19);
 }
 .pad-t-20 {
-  padding-top: var(--box-sp-20);
+  padding-top: var(--box-unit-20);
 }
 .pad-t-21 {
-  padding-top: var(--box-sp-21);
+  padding-top: var(--box-unit-21);
 }
 .pad-t-22 {
-  padding-top: var(--box-sp-22);
+  padding-top: var(--box-unit-22);
 }
 .pad-t-23 {
-  padding-top: var(--box-sp-23);
+  padding-top: var(--box-unit-23);
 }
 .pad-t-24 {
-  padding-top: var(--box-sp-24);
+  padding-top: var(--box-unit-24);
 }
 .pad-t-25 {
-  padding-top: var(--box-sp-25);
+  padding-top: var(--box-unit-25);
 }
 .pad-t-26 {
-  padding-top: var(--box-sp-26);
+  padding-top: var(--box-unit-26);
 }
 .pad-t-27 {
-  padding-top: var(--box-sp-27);
+  padding-top: var(--box-unit-27);
 }
 .pad-t-28 {
-  padding-top: var(--box-sp-28);
+  padding-top: var(--box-unit-28);
 }
 .pad-t-29 {
-  padding-top: var(--box-sp-29);
+  padding-top: var(--box-unit-29);
 }
 .pad-t-30 {
-  padding-top: var(--box-sp-30);
+  padding-top: var(--box-unit-30);
 }
 .pad-t-31 {
-  padding-top: var(--box-sp-31);
+  padding-top: var(--box-unit-31);
 }
 .pad-t-32 {
-  padding-top: var(--box-sp-32);
+  padding-top: var(--box-unit-32);
 }
 
 .pad-b, .pad-b-1 {
-  padding-bottom: var(--box-sp-1);
+  padding-bottom: var(--box-unit-1);
 }
 .pad-b-2 {
-  padding-bottom: var(--box-sp-2);
+  padding-bottom: var(--box-unit-2);
 }
 .pad-b-3 {
-  padding-bottom: var(--box-sp-3);
+  padding-bottom: var(--box-unit-3);
 }
 .pad-b-4 {
-  padding-bottom: var(--box-sp-4);
+  padding-bottom: var(--box-unit-4);
 }
 .pad-b-5 {
-  padding-bottom: var(--box-sp-5);
+  padding-bottom: var(--box-unit-5);
 }
 .pad-b-6 {
-  padding-bottom: var(--box-sp-6);
+  padding-bottom: var(--box-unit-6);
 }
 .pad-b-7 {
-  padding-bottom: var(--box-sp-7);
+  padding-bottom: var(--box-unit-7);
 }
 .pad-b-8 {
-  padding-bottom: var(--box-sp-8);
+  padding-bottom: var(--box-unit-8);
 }
 .pad-b-9 {
-  padding-bottom: var(--box-sp-9);
+  padding-bottom: var(--box-unit-9);
 }
 .pad-b-10 {
-  padding-bottom: var(--box-sp-10);
+  padding-bottom: var(--box-unit-10);
 }
 .pad-b-11 {
-  padding-bottom: var(--box-sp-11);
+  padding-bottom: var(--box-unit-11);
 }
 .pad-b-12 {
-  padding-bottom: var(--box-sp-12);
+  padding-bottom: var(--box-unit-12);
 }
 .pad-b-13 {
-  padding-bottom: var(--box-sp-13);
+  padding-bottom: var(--box-unit-13);
 }
 .pad-b-14 {
-  padding-bottom: var(--box-sp-14);
+  padding-bottom: var(--box-unit-14);
 }
 .pad-b-15 {
-  padding-bottom: var(--box-sp-15);
+  padding-bottom: var(--box-unit-15);
 }
 .pad-b-16 {
-  padding-bottom: var(--box-sp-16);
+  padding-bottom: var(--box-unit-16);
 }
 .pad-b-17 {
-  padding-bottom: var(--box-sp-17);
+  padding-bottom: var(--box-unit-17);
 }
 .pad-b-18 {
-  padding-bottom: var(--box-sp-18);
+  padding-bottom: var(--box-unit-18);
 }
 .pad-b-19 {
-  padding-bottom: var(--box-sp-19);
+  padding-bottom: var(--box-unit-19);
 }
 .pad-b-20 {
-  padding-bottom: var(--box-sp-20);
+  padding-bottom: var(--box-unit-20);
 }
 .pad-b-21 {
-  padding-bottom: var(--box-sp-21);
+  padding-bottom: var(--box-unit-21);
 }
 .pad-b-22 {
-  padding-bottom: var(--box-sp-22);
+  padding-bottom: var(--box-unit-22);
 }
 .pad-b-23 {
-  padding-bottom: var(--box-sp-23);
+  padding-bottom: var(--box-unit-23);
 }
 .pad-b-24 {
-  padding-bottom: var(--box-sp-24);
+  padding-bottom: var(--box-unit-24);
 }
 .pad-b-25 {
-  padding-bottom: var(--box-sp-25);
+  padding-bottom: var(--box-unit-25);
 }
 .pad-b-26 {
-  padding-bottom: var(--box-sp-26);
+  padding-bottom: var(--box-unit-26);
 }
 .pad-b-27 {
-  padding-bottom: var(--box-sp-27);
+  padding-bottom: var(--box-unit-27);
 }
 .pad-b-28 {
-  padding-bottom: var(--box-sp-28);
+  padding-bottom: var(--box-unit-28);
 }
 .pad-b-29 {
-  padding-bottom: var(--box-sp-29);
+  padding-bottom: var(--box-unit-29);
 }
 .pad-b-30 {
-  padding-bottom: var(--box-sp-30);
+  padding-bottom: var(--box-unit-30);
 }
 .pad-b-31 {
-  padding-bottom: var(--box-sp-31);
+  padding-bottom: var(--box-unit-31);
 }
 .pad-b-32 {
-  padding-bottom: var(--box-sp-32);
+  padding-bottom: var(--box-unit-32);
 }
 
 .pad-l, .pad-l-1 {
-  padding-left: var(--box-sp-1);
+  padding-left: var(--box-unit-1);
 }
 .pad-l-2 {
-  padding-left: var(--box-sp-2);
+  padding-left: var(--box-unit-2);
 }
 .pad-l-3 {
-  padding-left: var(--box-sp-3);
+  padding-left: var(--box-unit-3);
 }
 .pad-l-4 {
-  padding-left: var(--box-sp-4);
+  padding-left: var(--box-unit-4);
 }
 .pad-l-5 {
-  padding-left: var(--box-sp-5);
+  padding-left: var(--box-unit-5);
 }
 .pad-l-6 {
-  padding-left: var(--box-sp-6);
+  padding-left: var(--box-unit-6);
 }
 .pad-l-7 {
-  padding-left: var(--box-sp-7);
+  padding-left: var(--box-unit-7);
 }
 .pad-l-8 {
-  padding-left: var(--box-sp-8);
+  padding-left: var(--box-unit-8);
 }
 .pad-l-9 {
-  padding-left: var(--box-sp-9);
+  padding-left: var(--box-unit-9);
 }
 .pad-l-10 {
-  padding-left: var(--box-sp-10);
+  padding-left: var(--box-unit-10);
 }
 .pad-l-11 {
-  padding-left: var(--box-sp-11);
+  padding-left: var(--box-unit-11);
 }
 .pad-l-12 {
-  padding-left: var(--box-sp-12);
+  padding-left: var(--box-unit-12);
 }
 .pad-l-13 {
-  padding-left: var(--box-sp-13);
+  padding-left: var(--box-unit-13);
 }
 .pad-l-14 {
-  padding-left: var(--box-sp-14);
+  padding-left: var(--box-unit-14);
 }
 .pad-l-15 {
-  padding-left: var(--box-sp-15);
+  padding-left: var(--box-unit-15);
 }
 .pad-l-16 {
-  padding-left: var(--box-sp-16);
+  padding-left: var(--box-unit-16);
 }
 .pad-l-17 {
-  padding-left: var(--box-sp-17);
+  padding-left: var(--box-unit-17);
 }
 .pad-l-18 {
-  padding-left: var(--box-sp-18);
+  padding-left: var(--box-unit-18);
 }
 .pad-l-19 {
-  padding-left: var(--box-sp-19);
+  padding-left: var(--box-unit-19);
 }
 .pad-l-20 {
-  padding-left: var(--box-sp-20);
+  padding-left: var(--box-unit-20);
 }
 .pad-l-21 {
-  padding-left: var(--box-sp-21);
+  padding-left: var(--box-unit-21);
 }
 .pad-l-22 {
-  padding-left: var(--box-sp-22);
+  padding-left: var(--box-unit-22);
 }
 .pad-l-23 {
-  padding-left: var(--box-sp-23);
+  padding-left: var(--box-unit-23);
 }
 .pad-l-24 {
-  padding-left: var(--box-sp-24);
+  padding-left: var(--box-unit-24);
 }
 .pad-l-25 {
-  padding-left: var(--box-sp-25);
+  padding-left: var(--box-unit-25);
 }
 .pad-l-26 {
-  padding-left: var(--box-sp-26);
+  padding-left: var(--box-unit-26);
 }
 .pad-l-27 {
-  padding-left: var(--box-sp-27);
+  padding-left: var(--box-unit-27);
 }
 .pad-l-28 {
-  padding-left: var(--box-sp-28);
+  padding-left: var(--box-unit-28);
 }
 .pad-l-29 {
-  padding-left: var(--box-sp-29);
+  padding-left: var(--box-unit-29);
 }
 .pad-l-30 {
-  padding-left: var(--box-sp-30);
+  padding-left: var(--box-unit-30);
 }
 .pad-l-31 {
-  padding-left: var(--box-sp-31);
+  padding-left: var(--box-unit-31);
 }
 .pad-l-32 {
-  padding-left: var(--box-sp-32);
+  padding-left: var(--box-unit-32);
 }
 
 .pad-r, .pad-r-1 {
-  padding-right: var(--box-sp-1);
+  padding-right: var(--box-unit-1);
 }
 .pad-r-2 {
-  padding-right: var(--box-sp-2);
+  padding-right: var(--box-unit-2);
 }
 .pad-r-3 {
-  padding-right: var(--box-sp-3);
+  padding-right: var(--box-unit-3);
 }
 .pad-r-4 {
-  padding-right: var(--box-sp-4);
+  padding-right: var(--box-unit-4);
 }
 .pad-r-5 {
-  padding-right: var(--box-sp-5);
+  padding-right: var(--box-unit-5);
 }
 .pad-r-6 {
-  padding-right: var(--box-sp-6);
+  padding-right: var(--box-unit-6);
 }
 .pad-r-7 {
-  padding-right: var(--box-sp-7);
+  padding-right: var(--box-unit-7);
 }
 .pad-r-8 {
-  padding-right: var(--box-sp-8);
+  padding-right: var(--box-unit-8);
 }
 .pad-r-9 {
-  padding-right: var(--box-sp-9);
+  padding-right: var(--box-unit-9);
 }
 .pad-r-10 {
-  padding-right: var(--box-sp-10);
+  padding-right: var(--box-unit-10);
 }
 .pad-r-11 {
-  padding-right: var(--box-sp-11);
+  padding-right: var(--box-unit-11);
 }
 .pad-r-12 {
-  padding-right: var(--box-sp-12);
+  padding-right: var(--box-unit-12);
 }
 .pad-r-13 {
-  padding-right: var(--box-sp-13);
+  padding-right: var(--box-unit-13);
 }
 .pad-r-14 {
-  padding-right: var(--box-sp-14);
+  padding-right: var(--box-unit-14);
 }
 .pad-r-15 {
-  padding-right: var(--box-sp-15);
+  padding-right: var(--box-unit-15);
 }
 .pad-r-16 {
-  padding-right: var(--box-sp-16);
+  padding-right: var(--box-unit-16);
 }
 .pad-r-17 {
-  padding-right: var(--box-sp-17);
+  padding-right: var(--box-unit-17);
 }
 .pad-r-18 {
-  padding-right: var(--box-sp-18);
+  padding-right: var(--box-unit-18);
 }
 .pad-r-19 {
-  padding-right: var(--box-sp-19);
+  padding-right: var(--box-unit-19);
 }
 .pad-r-20 {
-  padding-right: var(--box-sp-20);
+  padding-right: var(--box-unit-20);
 }
 .pad-r-21 {
-  padding-right: var(--box-sp-21);
+  padding-right: var(--box-unit-21);
 }
 .pad-r-22 {
-  padding-right: var(--box-sp-22);
+  padding-right: var(--box-unit-22);
 }
 .pad-r-23 {
-  padding-right: var(--box-sp-23);
+  padding-right: var(--box-unit-23);
 }
 .pad-r-24 {
-  padding-right: var(--box-sp-24);
+  padding-right: var(--box-unit-24);
 }
 .pad-r-25 {
-  padding-right: var(--box-sp-25);
+  padding-right: var(--box-unit-25);
 }
 .pad-r-26 {
-  padding-right: var(--box-sp-26);
+  padding-right: var(--box-unit-26);
 }
 .pad-r-27 {
-  padding-right: var(--box-sp-27);
+  padding-right: var(--box-unit-27);
 }
 .pad-r-28 {
-  padding-right: var(--box-sp-28);
+  padding-right: var(--box-unit-28);
 }
 .pad-r-29 {
-  padding-right: var(--box-sp-29);
+  padding-right: var(--box-unit-29);
 }
 .pad-r-30 {
-  padding-right: var(--box-sp-30);
+  padding-right: var(--box-unit-30);
 }
 .pad-r-31 {
-  padding-right: var(--box-sp-31);
+  padding-right: var(--box-unit-31);
 }
 .pad-r-32 {
-  padding-right: var(--box-sp-32);
+  padding-right: var(--box-unit-32);
 }
 
 .pad-all, .pad-all-1 {
-  padding: var(--box-sp-1);
+  padding: var(--box-unit-1);
 }
 .pad-all-2 {
-  padding: var(--box-sp-2);
+  padding: var(--box-unit-2);
 }
 .pad-all-3 {
-  padding: var(--box-sp-3);
+  padding: var(--box-unit-3);
 }
 .pad-all-4 {
-  padding: var(--box-sp-4);
+  padding: var(--box-unit-4);
 }
 .pad-all-5 {
-  padding: var(--box-sp-5);
+  padding: var(--box-unit-5);
 }
 .pad-all-6 {
-  padding: var(--box-sp-6);
+  padding: var(--box-unit-6);
 }
 .pad-all-7 {
-  padding: var(--box-sp-7);
+  padding: var(--box-unit-7);
 }
 .pad-all-8 {
-  padding: var(--box-sp-8);
+  padding: var(--box-unit-8);
 }
 .pad-all-9 {
-  padding: var(--box-sp-9);
+  padding: var(--box-unit-9);
 }
 .pad-all-10 {
-  padding: var(--box-sp-10);
+  padding: var(--box-unit-10);
 }
 .pad-all-11 {
-  padding: var(--box-sp-11);
+  padding: var(--box-unit-11);
 }
 .pad-all-12 {
-  padding: var(--box-sp-12);
+  padding: var(--box-unit-12);
 }
 .pad-all-13 {
-  padding: var(--box-sp-13);
+  padding: var(--box-unit-13);
 }
 .pad-all-14 {
-  padding: var(--box-sp-14);
+  padding: var(--box-unit-14);
 }
 .pad-all-15 {
-  padding: var(--box-sp-15);
+  padding: var(--box-unit-15);
 }
 .pad-all-16 {
-  padding: var(--box-sp-16);
+  padding: var(--box-unit-16);
 }
 .pad-all-17 {
-  padding: var(--box-sp-17);
+  padding: var(--box-unit-17);
 }
 .pad-all-18 {
-  padding: var(--box-sp-18);
+  padding: var(--box-unit-18);
 }
 .pad-all-19 {
-  padding: var(--box-sp-19);
+  padding: var(--box-unit-19);
 }
 .pad-all-20 {
-  padding: var(--box-sp-20);
+  padding: var(--box-unit-20);
 }
 .pad-all-21 {
-  padding: var(--box-sp-21);
+  padding: var(--box-unit-21);
 }
 .pad-all-22 {
-  padding: var(--box-sp-22);
+  padding: var(--box-unit-22);
 }
 .pad-all-23 {
-  padding: var(--box-sp-23);
+  padding: var(--box-unit-23);
 }
 .pad-all-24 {
-  padding: var(--box-sp-24);
+  padding: var(--box-unit-24);
 }
 .pad-all-25 {
-  padding: var(--box-sp-25);
+  padding: var(--box-unit-25);
 }
 .pad-all-26 {
-  padding: var(--box-sp-26);
+  padding: var(--box-unit-26);
 }
 .pad-all-27 {
-  padding: var(--box-sp-27);
+  padding: var(--box-unit-27);
 }
 .pad-all-28 {
-  padding: var(--box-sp-28);
+  padding: var(--box-unit-28);
 }
 .pad-all-29 {
-  padding: var(--box-sp-29);
+  padding: var(--box-unit-29);
 }
 .pad-all-30 {
-  padding: var(--box-sp-30);
+  padding: var(--box-unit-30);
 }
 .pad-all-31 {
-  padding: var(--box-sp-31);
+  padding: var(--box-unit-31);
 }
 .pad-all-32 {
-  padding: var(--box-sp-32);
+  padding: var(--box-unit-32);
 }
 
 .pad-u, .pad-u-1 {
-  padding-bottom: var(--box-sp-1);
-  padding-left: var(--box-sp-1);
-  padding-right: var(--box-sp-1);
+  padding-bottom: var(--box-unit-1);
+  padding-left: var(--box-unit-1);
+  padding-right: var(--box-unit-1);
 }
 .pad-u-2 {
-  padding-bottom: var(--box-sp-2);
-  padding-left: var(--box-sp-2);
-  padding-right: var(--box-sp-2);
+  padding-bottom: var(--box-unit-2);
+  padding-left: var(--box-unit-2);
+  padding-right: var(--box-unit-2);
 }
 .pad-u-3 {
-  padding-bottom: var(--box-sp-3);
-  padding-left: var(--box-sp-3);
-  padding-right: var(--box-sp-3);
+  padding-bottom: var(--box-unit-3);
+  padding-left: var(--box-unit-3);
+  padding-right: var(--box-unit-3);
 }
 .pad-u-4 {
-  padding-bottom: var(--box-sp-4);
-  padding-left: var(--box-sp-4);
-  padding-right: var(--box-sp-4);
+  padding-bottom: var(--box-unit-4);
+  padding-left: var(--box-unit-4);
+  padding-right: var(--box-unit-4);
 }
 .pad-u-5 {
-  padding-bottom: var(--box-sp-5);
-  padding-left: var(--box-sp-5);
-  padding-right: var(--box-sp-5);
+  padding-bottom: var(--box-unit-5);
+  padding-left: var(--box-unit-5);
+  padding-right: var(--box-unit-5);
 }
 .pad-u-6 {
-  padding-bottom: var(--box-sp-6);
-  padding-left: var(--box-sp-6);
-  padding-right: var(--box-sp-6);
+  padding-bottom: var(--box-unit-6);
+  padding-left: var(--box-unit-6);
+  padding-right: var(--box-unit-6);
 }
 .pad-u-7 {
-  padding-bottom: var(--box-sp-7);
-  padding-left: var(--box-sp-7);
-  padding-right: var(--box-sp-7);
+  padding-bottom: var(--box-unit-7);
+  padding-left: var(--box-unit-7);
+  padding-right: var(--box-unit-7);
 }
 .pad-u-8 {
-  padding-bottom: var(--box-sp-8);
-  padding-left: var(--box-sp-8);
-  padding-right: var(--box-sp-8);
+  padding-bottom: var(--box-unit-8);
+  padding-left: var(--box-unit-8);
+  padding-right: var(--box-unit-8);
 }
 .pad-u-9 {
-  padding-bottom: var(--box-sp-9);
-  padding-left: var(--box-sp-9);
-  padding-right: var(--box-sp-9);
+  padding-bottom: var(--box-unit-9);
+  padding-left: var(--box-unit-9);
+  padding-right: var(--box-unit-9);
 }
 .pad-u-10 {
-  padding-bottom: var(--box-sp-10);
-  padding-left: var(--box-sp-10);
-  padding-right: var(--box-sp-10);
+  padding-bottom: var(--box-unit-10);
+  padding-left: var(--box-unit-10);
+  padding-right: var(--box-unit-10);
 }
 .pad-u-11 {
-  padding-bottom: var(--box-sp-11);
-  padding-left: var(--box-sp-11);
-  padding-right: var(--box-sp-11);
+  padding-bottom: var(--box-unit-11);
+  padding-left: var(--box-unit-11);
+  padding-right: var(--box-unit-11);
 }
 .pad-u-12 {
-  padding-bottom: var(--box-sp-12);
-  padding-left: var(--box-sp-12);
-  padding-right: var(--box-sp-12);
+  padding-bottom: var(--box-unit-12);
+  padding-left: var(--box-unit-12);
+  padding-right: var(--box-unit-12);
 }
 .pad-u-13 {
-  padding-bottom: var(--box-sp-13);
-  padding-left: var(--box-sp-13);
-  padding-right: var(--box-sp-13);
+  padding-bottom: var(--box-unit-13);
+  padding-left: var(--box-unit-13);
+  padding-right: var(--box-unit-13);
 }
 .pad-u-14 {
-  padding-bottom: var(--box-sp-14);
-  padding-left: var(--box-sp-14);
-  padding-right: var(--box-sp-14);
+  padding-bottom: var(--box-unit-14);
+  padding-left: var(--box-unit-14);
+  padding-right: var(--box-unit-14);
 }
 .pad-u-15 {
-  padding-bottom: var(--box-sp-15);
-  padding-left: var(--box-sp-15);
-  padding-right: var(--box-sp-15);
+  padding-bottom: var(--box-unit-15);
+  padding-left: var(--box-unit-15);
+  padding-right: var(--box-unit-15);
 }
 .pad-u-16 {
-  padding-bottom: var(--box-sp-16);
-  padding-left: var(--box-sp-16);
-  padding-right: var(--box-sp-16);
+  padding-bottom: var(--box-unit-16);
+  padding-left: var(--box-unit-16);
+  padding-right: var(--box-unit-16);
 }
 .pad-u-17 {
-  padding-bottom: var(--box-sp-17);
-  padding-left: var(--box-sp-17);
-  padding-right: var(--box-sp-17);
+  padding-bottom: var(--box-unit-17);
+  padding-left: var(--box-unit-17);
+  padding-right: var(--box-unit-17);
 }
 .pad-u-18 {
-  padding-bottom: var(--box-sp-18);
-  padding-left: var(--box-sp-18);
-  padding-right: var(--box-sp-18);
+  padding-bottom: var(--box-unit-18);
+  padding-left: var(--box-unit-18);
+  padding-right: var(--box-unit-18);
 }
 .pad-u-19 {
-  padding-bottom: var(--box-sp-19);
-  padding-left: var(--box-sp-19);
-  padding-right: var(--box-sp-19);
+  padding-bottom: var(--box-unit-19);
+  padding-left: var(--box-unit-19);
+  padding-right: var(--box-unit-19);
 }
 .pad-u-20 {
-  padding-bottom: var(--box-sp-20);
-  padding-left: var(--box-sp-20);
-  padding-right: var(--box-sp-20);
+  padding-bottom: var(--box-unit-20);
+  padding-left: var(--box-unit-20);
+  padding-right: var(--box-unit-20);
 }
 .pad-u-21 {
-  padding-bottom: var(--box-sp-21);
-  padding-left: var(--box-sp-21);
-  padding-right: var(--box-sp-21);
+  padding-bottom: var(--box-unit-21);
+  padding-left: var(--box-unit-21);
+  padding-right: var(--box-unit-21);
 }
 .pad-u-22 {
-  padding-bottom: var(--box-sp-22);
-  padding-left: var(--box-sp-22);
-  padding-right: var(--box-sp-22);
+  padding-bottom: var(--box-unit-22);
+  padding-left: var(--box-unit-22);
+  padding-right: var(--box-unit-22);
 }
 .pad-u-23 {
-  padding-bottom: var(--box-sp-23);
-  padding-left: var(--box-sp-23);
-  padding-right: var(--box-sp-23);
+  padding-bottom: var(--box-unit-23);
+  padding-left: var(--box-unit-23);
+  padding-right: var(--box-unit-23);
 }
 .pad-u-24 {
-  padding-bottom: var(--box-sp-24);
-  padding-left: var(--box-sp-24);
-  padding-right: var(--box-sp-24);
+  padding-bottom: var(--box-unit-24);
+  padding-left: var(--box-unit-24);
+  padding-right: var(--box-unit-24);
 }
 .pad-u-25 {
-  padding-bottom: var(--box-sp-25);
-  padding-left: var(--box-sp-25);
-  padding-right: var(--box-sp-25);
+  padding-bottom: var(--box-unit-25);
+  padding-left: var(--box-unit-25);
+  padding-right: var(--box-unit-25);
 }
 .pad-u-26 {
-  padding-bottom: var(--box-sp-26);
-  padding-left: var(--box-sp-26);
-  padding-right: var(--box-sp-26);
+  padding-bottom: var(--box-unit-26);
+  padding-left: var(--box-unit-26);
+  padding-right: var(--box-unit-26);
 }
 .pad-u-27 {
-  padding-bottom: var(--box-sp-27);
-  padding-left: var(--box-sp-27);
-  padding-right: var(--box-sp-27);
+  padding-bottom: var(--box-unit-27);
+  padding-left: var(--box-unit-27);
+  padding-right: var(--box-unit-27);
 }
 .pad-u-28 {
-  padding-bottom: var(--box-sp-28);
-  padding-left: var(--box-sp-28);
-  padding-right: var(--box-sp-28);
+  padding-bottom: var(--box-unit-28);
+  padding-left: var(--box-unit-28);
+  padding-right: var(--box-unit-28);
 }
 .pad-u-29 {
-  padding-bottom: var(--box-sp-29);
-  padding-left: var(--box-sp-29);
-  padding-right: var(--box-sp-29);
+  padding-bottom: var(--box-unit-29);
+  padding-left: var(--box-unit-29);
+  padding-right: var(--box-unit-29);
 }
 .pad-u-30 {
-  padding-bottom: var(--box-sp-30);
-  padding-left: var(--box-sp-30);
-  padding-right: var(--box-sp-30);
+  padding-bottom: var(--box-unit-30);
+  padding-left: var(--box-unit-30);
+  padding-right: var(--box-unit-30);
 }
 .pad-u-31 {
-  padding-bottom: var(--box-sp-31);
-  padding-left: var(--box-sp-31);
-  padding-right: var(--box-sp-31);
+  padding-bottom: var(--box-unit-31);
+  padding-left: var(--box-unit-31);
+  padding-right: var(--box-unit-31);
 }
 .pad-u-32 {
-  padding-bottom: var(--box-sp-32);
-  padding-left: var(--box-sp-32);
-  padding-right: var(--box-sp-32);
+  padding-bottom: var(--box-unit-32);
+  padding-left: var(--box-unit-32);
+  padding-right: var(--box-unit-32);
 }
 
 .pad-ii, .pad-ii-1 {
-  padding-left: var(--box-sp-1);
-  padding-right: var(--box-sp-1);
+  padding-left: var(--box-unit-1);
+  padding-right: var(--box-unit-1);
 }
 .pad-ii-2 {
-  padding-left: var(--box-sp-2);
-  padding-right: var(--box-sp-2);
+  padding-left: var(--box-unit-2);
+  padding-right: var(--box-unit-2);
 }
 .pad-ii-3 {
-  padding-left: var(--box-sp-3);
-  padding-right: var(--box-sp-3);
+  padding-left: var(--box-unit-3);
+  padding-right: var(--box-unit-3);
 }
 .pad-ii-4 {
-  padding-left: var(--box-sp-4);
-  padding-right: var(--box-sp-4);
+  padding-left: var(--box-unit-4);
+  padding-right: var(--box-unit-4);
 }
 .pad-ii-5 {
-  padding-left: var(--box-sp-5);
-  padding-right: var(--box-sp-5);
+  padding-left: var(--box-unit-5);
+  padding-right: var(--box-unit-5);
 }
 .pad-ii-6 {
-  padding-left: var(--box-sp-6);
-  padding-right: var(--box-sp-6);
+  padding-left: var(--box-unit-6);
+  padding-right: var(--box-unit-6);
 }
 .pad-ii-7 {
-  padding-left: var(--box-sp-7);
-  padding-right: var(--box-sp-7);
+  padding-left: var(--box-unit-7);
+  padding-right: var(--box-unit-7);
 }
 .pad-ii-8 {
-  padding-left: var(--box-sp-8);
-  padding-right: var(--box-sp-8);
+  padding-left: var(--box-unit-8);
+  padding-right: var(--box-unit-8);
 }
 .pad-ii-9 {
-  padding-left: var(--box-sp-9);
-  padding-right: var(--box-sp-9);
+  padding-left: var(--box-unit-9);
+  padding-right: var(--box-unit-9);
 }
 .pad-ii-10 {
-  padding-left: var(--box-sp-10);
-  padding-right: var(--box-sp-10);
+  padding-left: var(--box-unit-10);
+  padding-right: var(--box-unit-10);
 }
 .pad-ii-11 {
-  padding-left: var(--box-sp-11);
-  padding-right: var(--box-sp-11);
+  padding-left: var(--box-unit-11);
+  padding-right: var(--box-unit-11);
 }
 .pad-ii-12 {
-  padding-left: var(--box-sp-12);
-  padding-right: var(--box-sp-12);
+  padding-left: var(--box-unit-12);
+  padding-right: var(--box-unit-12);
 }
 .pad-ii-13 {
-  padding-left: var(--box-sp-13);
-  padding-right: var(--box-sp-13);
+  padding-left: var(--box-unit-13);
+  padding-right: var(--box-unit-13);
 }
 .pad-ii-14 {
-  padding-left: var(--box-sp-14);
-  padding-right: var(--box-sp-14);
+  padding-left: var(--box-unit-14);
+  padding-right: var(--box-unit-14);
 }
 .pad-ii-15 {
-  padding-left: var(--box-sp-15);
-  padding-right: var(--box-sp-15);
+  padding-left: var(--box-unit-15);
+  padding-right: var(--box-unit-15);
 }
 .pad-ii-16 {
-  padding-left: var(--box-sp-16);
-  padding-right: var(--box-sp-16);
+  padding-left: var(--box-unit-16);
+  padding-right: var(--box-unit-16);
 }
 .pad-ii-17 {
-  padding-left: var(--box-sp-17);
-  padding-right: var(--box-sp-17);
+  padding-left: var(--box-unit-17);
+  padding-right: var(--box-unit-17);
 }
 .pad-ii-18 {
-  padding-left: var(--box-sp-18);
-  padding-right: var(--box-sp-18);
+  padding-left: var(--box-unit-18);
+  padding-right: var(--box-unit-18);
 }
 .pad-ii-19 {
-  padding-left: var(--box-sp-19);
-  padding-right: var(--box-sp-19);
+  padding-left: var(--box-unit-19);
+  padding-right: var(--box-unit-19);
 }
 .pad-ii-20 {
-  padding-left: var(--box-sp-20);
-  padding-right: var(--box-sp-20);
+  padding-left: var(--box-unit-20);
+  padding-right: var(--box-unit-20);
 }
 .pad-ii-21 {
-  padding-left: var(--box-sp-21);
-  padding-right: var(--box-sp-21);
+  padding-left: var(--box-unit-21);
+  padding-right: var(--box-unit-21);
 }
 .pad-ii-22 {
-  padding-left: var(--box-sp-22);
-  padding-right: var(--box-sp-22);
+  padding-left: var(--box-unit-22);
+  padding-right: var(--box-unit-22);
 }
 .pad-ii-23 {
-  padding-left: var(--box-sp-23);
-  padding-right: var(--box-sp-23);
+  padding-left: var(--box-unit-23);
+  padding-right: var(--box-unit-23);
 }
 .pad-ii-24 {
-  padding-left: var(--box-sp-24);
-  padding-right: var(--box-sp-24);
+  padding-left: var(--box-unit-24);
+  padding-right: var(--box-unit-24);
 }
 .pad-ii-25 {
-  padding-left: var(--box-sp-25);
-  padding-right: var(--box-sp-25);
+  padding-left: var(--box-unit-25);
+  padding-right: var(--box-unit-25);
 }
 .pad-ii-26 {
-  padding-left: var(--box-sp-26);
-  padding-right: var(--box-sp-26);
+  padding-left: var(--box-unit-26);
+  padding-right: var(--box-unit-26);
 }
 .pad-ii-27 {
-  padding-left: var(--box-sp-27);
-  padding-right: var(--box-sp-27);
+  padding-left: var(--box-unit-27);
+  padding-right: var(--box-unit-27);
 }
 .pad-ii-28 {
-  padding-left: var(--box-sp-28);
-  padding-right: var(--box-sp-28);
+  padding-left: var(--box-unit-28);
+  padding-right: var(--box-unit-28);
 }
 .pad-ii-29 {
-  padding-left: var(--box-sp-29);
-  padding-right: var(--box-sp-29);
+  padding-left: var(--box-unit-29);
+  padding-right: var(--box-unit-29);
 }
 .pad-ii-30 {
-  padding-left: var(--box-sp-30);
-  padding-right: var(--box-sp-30);
+  padding-left: var(--box-unit-30);
+  padding-right: var(--box-unit-30);
 }
 .pad-ii-31 {
-  padding-left: var(--box-sp-31);
-  padding-right: var(--box-sp-31);
+  padding-left: var(--box-unit-31);
+  padding-right: var(--box-unit-31);
 }
 .pad-ii-32 {
-  padding-left: var(--box-sp-32);
-  padding-right: var(--box-sp-32);
+  padding-left: var(--box-unit-32);
+  padding-right: var(--box-unit-32);
 }
 
 .pad-tb, .pad-tb-1 {
-  padding-top: var(--box-sp-1);
-  padding-bottom: var(--box-sp-1);
+  padding-top: var(--box-unit-1);
+  padding-bottom: var(--box-unit-1);
 }
 .pad-tb-2 {
-  padding-top: var(--box-sp-2);
-  padding-bottom: var(--box-sp-2);
+  padding-top: var(--box-unit-2);
+  padding-bottom: var(--box-unit-2);
 }
 .pad-tb-3 {
-  padding-top: var(--box-sp-3);
-  padding-bottom: var(--box-sp-3);
+  padding-top: var(--box-unit-3);
+  padding-bottom: var(--box-unit-3);
 }
 .pad-tb-4 {
-  padding-top: var(--box-sp-4);
-  padding-bottom: var(--box-sp-4);
+  padding-top: var(--box-unit-4);
+  padding-bottom: var(--box-unit-4);
 }
 .pad-tb-5 {
-  padding-top: var(--box-sp-5);
-  padding-bottom: var(--box-sp-5);
+  padding-top: var(--box-unit-5);
+  padding-bottom: var(--box-unit-5);
 }
 .pad-tb-6 {
-  padding-top: var(--box-sp-6);
-  padding-bottom: var(--box-sp-6);
+  padding-top: var(--box-unit-6);
+  padding-bottom: var(--box-unit-6);
 }
 .pad-tb-7 {
-  padding-top: var(--box-sp-7);
-  padding-bottom: var(--box-sp-7);
+  padding-top: var(--box-unit-7);
+  padding-bottom: var(--box-unit-7);
 }
 .pad-tb-8 {
-  padding-top: var(--box-sp-8);
-  padding-bottom: var(--box-sp-8);
+  padding-top: var(--box-unit-8);
+  padding-bottom: var(--box-unit-8);
 }
 .pad-tb-9 {
-  padding-top: var(--box-sp-9);
-  padding-bottom: var(--box-sp-9);
+  padding-top: var(--box-unit-9);
+  padding-bottom: var(--box-unit-9);
 }
 .pad-tb-10 {
-  padding-top: var(--box-sp-10);
-  padding-bottom: var(--box-sp-10);
+  padding-top: var(--box-unit-10);
+  padding-bottom: var(--box-unit-10);
 }
 .pad-tb-11 {
-  padding-top: var(--box-sp-11);
-  padding-bottom: var(--box-sp-11);
+  padding-top: var(--box-unit-11);
+  padding-bottom: var(--box-unit-11);
 }
 .pad-tb-12 {
-  padding-top: var(--box-sp-12);
-  padding-bottom: var(--box-sp-12);
+  padding-top: var(--box-unit-12);
+  padding-bottom: var(--box-unit-12);
 }
 .pad-tb-13 {
-  padding-top: var(--box-sp-13);
-  padding-bottom: var(--box-sp-13);
+  padding-top: var(--box-unit-13);
+  padding-bottom: var(--box-unit-13);
 }
 .pad-tb-14 {
-  padding-top: var(--box-sp-14);
-  padding-bottom: var(--box-sp-14);
+  padding-top: var(--box-unit-14);
+  padding-bottom: var(--box-unit-14);
 }
 .pad-tb-15 {
-  padding-top: var(--box-sp-15);
-  padding-bottom: var(--box-sp-15);
+  padding-top: var(--box-unit-15);
+  padding-bottom: var(--box-unit-15);
 }
 .pad-tb-16 {
-  padding-top: var(--box-sp-16);
-  padding-bottom: var(--box-sp-16);
+  padding-top: var(--box-unit-16);
+  padding-bottom: var(--box-unit-16);
 }
 .pad-tb-17 {
-  padding-top: var(--box-sp-17);
-  padding-bottom: var(--box-sp-17);
+  padding-top: var(--box-unit-17);
+  padding-bottom: var(--box-unit-17);
 }
 .pad-tb-18 {
-  padding-top: var(--box-sp-18);
-  padding-bottom: var(--box-sp-18);
+  padding-top: var(--box-unit-18);
+  padding-bottom: var(--box-unit-18);
 }
 .pad-tb-19 {
-  padding-top: var(--box-sp-19);
-  padding-bottom: var(--box-sp-19);
+  padding-top: var(--box-unit-19);
+  padding-bottom: var(--box-unit-19);
 }
 .pad-tb-20 {
-  padding-top: var(--box-sp-20);
-  padding-bottom: var(--box-sp-20);
+  padding-top: var(--box-unit-20);
+  padding-bottom: var(--box-unit-20);
 }
 .pad-tb-21 {
-  padding-top: var(--box-sp-21);
-  padding-bottom: var(--box-sp-21);
+  padding-top: var(--box-unit-21);
+  padding-bottom: var(--box-unit-21);
 }
 .pad-tb-22 {
-  padding-top: var(--box-sp-22);
-  padding-bottom: var(--box-sp-22);
+  padding-top: var(--box-unit-22);
+  padding-bottom: var(--box-unit-22);
 }
 .pad-tb-23 {
-  padding-top: var(--box-sp-23);
-  padding-bottom: var(--box-sp-23);
+  padding-top: var(--box-unit-23);
+  padding-bottom: var(--box-unit-23);
 }
 .pad-tb-24 {
-  padding-top: var(--box-sp-24);
-  padding-bottom: var(--box-sp-24);
+  padding-top: var(--box-unit-24);
+  padding-bottom: var(--box-unit-24);
 }
 .pad-tb-25 {
-  padding-top: var(--box-sp-25);
-  padding-bottom: var(--box-sp-25);
+  padding-top: var(--box-unit-25);
+  padding-bottom: var(--box-unit-25);
 }
 .pad-tb-26 {
-  padding-top: var(--box-sp-26);
-  padding-bottom: var(--box-sp-26);
+  padding-top: var(--box-unit-26);
+  padding-bottom: var(--box-unit-26);
 }
 .pad-tb-27 {
-  padding-top: var(--box-sp-27);
-  padding-bottom: var(--box-sp-27);
+  padding-top: var(--box-unit-27);
+  padding-bottom: var(--box-unit-27);
 }
 .pad-tb-28 {
-  padding-top: var(--box-sp-28);
-  padding-bottom: var(--box-sp-28);
+  padding-top: var(--box-unit-28);
+  padding-bottom: var(--box-unit-28);
 }
 .pad-tb-29 {
-  padding-top: var(--box-sp-29);
-  padding-bottom: var(--box-sp-29);
+  padding-top: var(--box-unit-29);
+  padding-bottom: var(--box-unit-29);
 }
 .pad-tb-30 {
-  padding-top: var(--box-sp-30);
-  padding-bottom: var(--box-sp-30);
+  padding-top: var(--box-unit-30);
+  padding-bottom: var(--box-unit-30);
 }
 .pad-tb-31 {
-  padding-top: var(--box-sp-31);
-  padding-bottom: var(--box-sp-31);
+  padding-top: var(--box-unit-31);
+  padding-bottom: var(--box-unit-31);
 }
 .pad-tb-32 {
-  padding-top: var(--box-sp-32);
-  padding-bottom: var(--box-sp-32);
+  padding-top: var(--box-unit-32);
+  padding-bottom: var(--box-unit-32);
 }
 
 .marg, .marg-1 {
-  margin: var(--box-sp-1);
+  margin: var(--box-unit-1);
 }
 .marg-2 {
-  margin: var(--box-sp-2);
+  margin: var(--box-unit-2);
 }
 .marg-3 {
-  margin: var(--box-sp-3);
+  margin: var(--box-unit-3);
 }
 .marg-4 {
-  margin: var(--box-sp-4);
+  margin: var(--box-unit-4);
 }
 .marg-5 {
-  margin: var(--box-sp-5);
+  margin: var(--box-unit-5);
 }
 .marg-6 {
-  margin: var(--box-sp-6);
+  margin: var(--box-unit-6);
 }
 .marg-7 {
-  margin: var(--box-sp-7);
+  margin: var(--box-unit-7);
 }
 .marg-8 {
-  margin: var(--box-sp-8);
+  margin: var(--box-unit-8);
 }
 .marg-9 {
-  margin: var(--box-sp-9);
+  margin: var(--box-unit-9);
 }
 .marg-10 {
-  margin: var(--box-sp-10);
+  margin: var(--box-unit-10);
 }
 .marg-11 {
-  margin: var(--box-sp-11);
+  margin: var(--box-unit-11);
 }
 .marg-12 {
-  margin: var(--box-sp-12);
+  margin: var(--box-unit-12);
 }
 .marg-13 {
-  margin: var(--box-sp-13);
+  margin: var(--box-unit-13);
 }
 .marg-14 {
-  margin: var(--box-sp-14);
+  margin: var(--box-unit-14);
 }
 .marg-15 {
-  margin: var(--box-sp-15);
+  margin: var(--box-unit-15);
 }
 .marg-16 {
-  margin: var(--box-sp-16);
+  margin: var(--box-unit-16);
 }
 .marg-17 {
-  margin: var(--box-sp-17);
+  margin: var(--box-unit-17);
 }
 .marg-18 {
-  margin: var(--box-sp-18);
+  margin: var(--box-unit-18);
 }
 .marg-19 {
-  margin: var(--box-sp-19);
+  margin: var(--box-unit-19);
 }
 .marg-20 {
-  margin: var(--box-sp-20);
+  margin: var(--box-unit-20);
 }
 .marg-21 {
-  margin: var(--box-sp-21);
+  margin: var(--box-unit-21);
 }
 .marg-22 {
-  margin: var(--box-sp-22);
+  margin: var(--box-unit-22);
 }
 .marg-23 {
-  margin: var(--box-sp-23);
+  margin: var(--box-unit-23);
 }
 .marg-24 {
-  margin: var(--box-sp-24);
+  margin: var(--box-unit-24);
 }
 .marg-25 {
-  margin: var(--box-sp-25);
+  margin: var(--box-unit-25);
 }
 .marg-26 {
-  margin: var(--box-sp-26);
+  margin: var(--box-unit-26);
 }
 .marg-27 {
-  margin: var(--box-sp-27);
+  margin: var(--box-unit-27);
 }
 .marg-28 {
-  margin: var(--box-sp-28);
+  margin: var(--box-unit-28);
 }
 .marg-29 {
-  margin: var(--box-sp-29);
+  margin: var(--box-unit-29);
 }
 .marg-30 {
-  margin: var(--box-sp-30);
+  margin: var(--box-unit-30);
 }
 .marg-31 {
-  margin: var(--box-sp-31);
+  margin: var(--box-unit-31);
 }
 .marg-32 {
-  margin: var(--box-sp-32);
+  margin: var(--box-unit-32);
 }
 
 .marg-t, .marg-t-1 {
-  margin-top: var(--box-sp-1);
+  margin-top: var(--box-unit-1);
 }
 .marg-t-2 {
-  margin-top: var(--box-sp-2);
+  margin-top: var(--box-unit-2);
 }
 .marg-t-3 {
-  margin-top: var(--box-sp-3);
+  margin-top: var(--box-unit-3);
 }
 .marg-t-4 {
-  margin-top: var(--box-sp-4);
+  margin-top: var(--box-unit-4);
 }
 .marg-t-5 {
-  margin-top: var(--box-sp-5);
+  margin-top: var(--box-unit-5);
 }
 .marg-t-6 {
-  margin-top: var(--box-sp-6);
+  margin-top: var(--box-unit-6);
 }
 .marg-t-7 {
-  margin-top: var(--box-sp-7);
+  margin-top: var(--box-unit-7);
 }
 .marg-t-8 {
-  margin-top: var(--box-sp-8);
+  margin-top: var(--box-unit-8);
 }
 .marg-t-9 {
-  margin-top: var(--box-sp-9);
+  margin-top: var(--box-unit-9);
 }
 .marg-t-10 {
-  margin-top: var(--box-sp-10);
+  margin-top: var(--box-unit-10);
 }
 .marg-t-11 {
-  margin-top: var(--box-sp-11);
+  margin-top: var(--box-unit-11);
 }
 .marg-t-12 {
-  margin-top: var(--box-sp-12);
+  margin-top: var(--box-unit-12);
 }
 .marg-t-13 {
-  margin-top: var(--box-sp-13);
+  margin-top: var(--box-unit-13);
 }
 .marg-t-14 {
-  margin-top: var(--box-sp-14);
+  margin-top: var(--box-unit-14);
 }
 .marg-t-15 {
-  margin-top: var(--box-sp-15);
+  margin-top: var(--box-unit-15);
 }
 .marg-t-16 {
-  margin-top: var(--box-sp-16);
+  margin-top: var(--box-unit-16);
 }
 .marg-t-17 {
-  margin-top: var(--box-sp-17);
+  margin-top: var(--box-unit-17);
 }
 .marg-t-18 {
-  margin-top: var(--box-sp-18);
+  margin-top: var(--box-unit-18);
 }
 .marg-t-19 {
-  margin-top: var(--box-sp-19);
+  margin-top: var(--box-unit-19);
 }
 .marg-t-20 {
-  margin-top: var(--box-sp-20);
+  margin-top: var(--box-unit-20);
 }
 .marg-t-21 {
-  margin-top: var(--box-sp-21);
+  margin-top: var(--box-unit-21);
 }
 .marg-t-22 {
-  margin-top: var(--box-sp-22);
+  margin-top: var(--box-unit-22);
 }
 .marg-t-23 {
-  margin-top: var(--box-sp-23);
+  margin-top: var(--box-unit-23);
 }
 .marg-t-24 {
-  margin-top: var(--box-sp-24);
+  margin-top: var(--box-unit-24);
 }
 .marg-t-25 {
-  margin-top: var(--box-sp-25);
+  margin-top: var(--box-unit-25);
 }
 .marg-t-26 {
-  margin-top: var(--box-sp-26);
+  margin-top: var(--box-unit-26);
 }
 .marg-t-27 {
-  margin-top: var(--box-sp-27);
+  margin-top: var(--box-unit-27);
 }
 .marg-t-28 {
-  margin-top: var(--box-sp-28);
+  margin-top: var(--box-unit-28);
 }
 .marg-t-29 {
-  margin-top: var(--box-sp-29);
+  margin-top: var(--box-unit-29);
 }
 .marg-t-30 {
-  margin-top: var(--box-sp-30);
+  margin-top: var(--box-unit-30);
 }
 .marg-t-31 {
-  margin-top: var(--box-sp-31);
+  margin-top: var(--box-unit-31);
 }
 .marg-t-32 {
-  margin-top: var(--box-sp-32);
+  margin-top: var(--box-unit-32);
 }
 
 .marg-b, .marg-b-1 {
-  margin-bottom: var(--box-sp-1);
+  margin-bottom: var(--box-unit-1);
 }
 .marg-b-2 {
-  margin-bottom: var(--box-sp-2);
+  margin-bottom: var(--box-unit-2);
 }
 .marg-b-3 {
-  margin-bottom: var(--box-sp-3);
+  margin-bottom: var(--box-unit-3);
 }
 .marg-b-4 {
-  margin-bottom: var(--box-sp-4);
+  margin-bottom: var(--box-unit-4);
 }
 .marg-b-5 {
-  margin-bottom: var(--box-sp-5);
+  margin-bottom: var(--box-unit-5);
 }
 .marg-b-6 {
-  margin-bottom: var(--box-sp-6);
+  margin-bottom: var(--box-unit-6);
 }
 .marg-b-7 {
-  margin-bottom: var(--box-sp-7);
+  margin-bottom: var(--box-unit-7);
 }
 .marg-b-8 {
-  margin-bottom: var(--box-sp-8);
+  margin-bottom: var(--box-unit-8);
 }
 .marg-b-9 {
-  margin-bottom: var(--box-sp-9);
+  margin-bottom: var(--box-unit-9);
 }
 .marg-b-10 {
-  margin-bottom: var(--box-sp-10);
+  margin-bottom: var(--box-unit-10);
 }
 .marg-b-11 {
-  margin-bottom: var(--box-sp-11);
+  margin-bottom: var(--box-unit-11);
 }
 .marg-b-12 {
-  margin-bottom: var(--box-sp-12);
+  margin-bottom: var(--box-unit-12);
 }
 .marg-b-13 {
-  margin-bottom: var(--box-sp-13);
+  margin-bottom: var(--box-unit-13);
 }
 .marg-b-14 {
-  margin-bottom: var(--box-sp-14);
+  margin-bottom: var(--box-unit-14);
 }
 .marg-b-15 {
-  margin-bottom: var(--box-sp-15);
+  margin-bottom: var(--box-unit-15);
 }
 .marg-b-16 {
-  margin-bottom: var(--box-sp-16);
+  margin-bottom: var(--box-unit-16);
 }
 .marg-b-17 {
-  margin-bottom: var(--box-sp-17);
+  margin-bottom: var(--box-unit-17);
 }
 .marg-b-18 {
-  margin-bottom: var(--box-sp-18);
+  margin-bottom: var(--box-unit-18);
 }
 .marg-b-19 {
-  margin-bottom: var(--box-sp-19);
+  margin-bottom: var(--box-unit-19);
 }
 .marg-b-20 {
-  margin-bottom: var(--box-sp-20);
+  margin-bottom: var(--box-unit-20);
 }
 .marg-b-21 {
-  margin-bottom: var(--box-sp-21);
+  margin-bottom: var(--box-unit-21);
 }
 .marg-b-22 {
-  margin-bottom: var(--box-sp-22);
+  margin-bottom: var(--box-unit-22);
 }
 .marg-b-23 {
-  margin-bottom: var(--box-sp-23);
+  margin-bottom: var(--box-unit-23);
 }
 .marg-b-24 {
-  margin-bottom: var(--box-sp-24);
+  margin-bottom: var(--box-unit-24);
 }
 .marg-b-25 {
-  margin-bottom: var(--box-sp-25);
+  margin-bottom: var(--box-unit-25);
 }
 .marg-b-26 {
-  margin-bottom: var(--box-sp-26);
+  margin-bottom: var(--box-unit-26);
 }
 .marg-b-27 {
-  margin-bottom: var(--box-sp-27);
+  margin-bottom: var(--box-unit-27);
 }
 .marg-b-28 {
-  margin-bottom: var(--box-sp-28);
+  margin-bottom: var(--box-unit-28);
 }
 .marg-b-29 {
-  margin-bottom: var(--box-sp-29);
+  margin-bottom: var(--box-unit-29);
 }
 .marg-b-30 {
-  margin-bottom: var(--box-sp-30);
+  margin-bottom: var(--box-unit-30);
 }
 .marg-b-31 {
-  margin-bottom: var(--box-sp-31);
+  margin-bottom: var(--box-unit-31);
 }
 .marg-b-32 {
-  margin-bottom: var(--box-sp-32);
+  margin-bottom: var(--box-unit-32);
 }
 
 .marg-l, .marg-l-1 {
-  margin-left: var(--box-sp-1);
+  margin-left: var(--box-unit-1);
 }
 .marg-l-2 {
-  margin-left: var(--box-sp-2);
+  margin-left: var(--box-unit-2);
 }
 .marg-l-3 {
-  margin-left: var(--box-sp-3);
+  margin-left: var(--box-unit-3);
 }
 .marg-l-4 {
-  margin-left: var(--box-sp-4);
+  margin-left: var(--box-unit-4);
 }
 .marg-l-5 {
-  margin-left: var(--box-sp-5);
+  margin-left: var(--box-unit-5);
 }
 .marg-l-6 {
-  margin-left: var(--box-sp-6);
+  margin-left: var(--box-unit-6);
 }
 .marg-l-7 {
-  margin-left: var(--box-sp-7);
+  margin-left: var(--box-unit-7);
 }
 .marg-l-8 {
-  margin-left: var(--box-sp-8);
+  margin-left: var(--box-unit-8);
 }
 .marg-l-9 {
-  margin-left: var(--box-sp-9);
+  margin-left: var(--box-unit-9);
 }
 .marg-l-10 {
-  margin-left: var(--box-sp-10);
+  margin-left: var(--box-unit-10);
 }
 .marg-l-11 {
-  margin-left: var(--box-sp-11);
+  margin-left: var(--box-unit-11);
 }
 .marg-l-12 {
-  margin-left: var(--box-sp-12);
+  margin-left: var(--box-unit-12);
 }
 .marg-l-13 {
-  margin-left: var(--box-sp-13);
+  margin-left: var(--box-unit-13);
 }
 .marg-l-14 {
-  margin-left: var(--box-sp-14);
+  margin-left: var(--box-unit-14);
 }
 .marg-l-15 {
-  margin-left: var(--box-sp-15);
+  margin-left: var(--box-unit-15);
 }
 .marg-l-16 {
-  margin-left: var(--box-sp-16);
+  margin-left: var(--box-unit-16);
 }
 .marg-l-17 {
-  margin-left: var(--box-sp-17);
+  margin-left: var(--box-unit-17);
 }
 .marg-l-18 {
-  margin-left: var(--box-sp-18);
+  margin-left: var(--box-unit-18);
 }
 .marg-l-19 {
-  margin-left: var(--box-sp-19);
+  margin-left: var(--box-unit-19);
 }
 .marg-l-20 {
-  margin-left: var(--box-sp-20);
+  margin-left: var(--box-unit-20);
 }
 .marg-l-21 {
-  margin-left: var(--box-sp-21);
+  margin-left: var(--box-unit-21);
 }
 .marg-l-22 {
-  margin-left: var(--box-sp-22);
+  margin-left: var(--box-unit-22);
 }
 .marg-l-23 {
-  margin-left: var(--box-sp-23);
+  margin-left: var(--box-unit-23);
 }
 .marg-l-24 {
-  margin-left: var(--box-sp-24);
+  margin-left: var(--box-unit-24);
 }
 .marg-l-25 {
-  margin-left: var(--box-sp-25);
+  margin-left: var(--box-unit-25);
 }
 .marg-l-26 {
-  margin-left: var(--box-sp-26);
+  margin-left: var(--box-unit-26);
 }
 .marg-l-27 {
-  margin-left: var(--box-sp-27);
+  margin-left: var(--box-unit-27);
 }
 .marg-l-28 {
-  margin-left: var(--box-sp-28);
+  margin-left: var(--box-unit-28);
 }
 .marg-l-29 {
-  margin-left: var(--box-sp-29);
+  margin-left: var(--box-unit-29);
 }
 .marg-l-30 {
-  margin-left: var(--box-sp-30);
+  margin-left: var(--box-unit-30);
 }
 .marg-l-31 {
-  margin-left: var(--box-sp-31);
+  margin-left: var(--box-unit-31);
 }
 .marg-l-32 {
-  margin-left: var(--box-sp-32);
+  margin-left: var(--box-unit-32);
 }
 
 .marg-r, .marg-r-1 {
-  margin-right: var(--box-sp-1);
+  margin-right: var(--box-unit-1);
 }
 .marg-r-2 {
-  margin-right: var(--box-sp-2);
+  margin-right: var(--box-unit-2);
 }
 .marg-r-3 {
-  margin-right: var(--box-sp-3);
+  margin-right: var(--box-unit-3);
 }
 .marg-r-4 {
-  margin-right: var(--box-sp-4);
+  margin-right: var(--box-unit-4);
 }
 .marg-r-5 {
-  margin-right: var(--box-sp-5);
+  margin-right: var(--box-unit-5);
 }
 .marg-r-6 {
-  margin-right: var(--box-sp-6);
+  margin-right: var(--box-unit-6);
 }
 .marg-r-7 {
-  margin-right: var(--box-sp-7);
+  margin-right: var(--box-unit-7);
 }
 .marg-r-8 {
-  margin-right: var(--box-sp-8);
+  margin-right: var(--box-unit-8);
 }
 .marg-r-9 {
-  margin-right: var(--box-sp-9);
+  margin-right: var(--box-unit-9);
 }
 .marg-r-10 {
-  margin-right: var(--box-sp-10);
+  margin-right: var(--box-unit-10);
 }
 .marg-r-11 {
-  margin-right: var(--box-sp-11);
+  margin-right: var(--box-unit-11);
 }
 .marg-r-12 {
-  margin-right: var(--box-sp-12);
+  margin-right: var(--box-unit-12);
 }
 .marg-r-13 {
-  margin-right: var(--box-sp-13);
+  margin-right: var(--box-unit-13);
 }
 .marg-r-14 {
-  margin-right: var(--box-sp-14);
+  margin-right: var(--box-unit-14);
 }
 .marg-r-15 {
-  margin-right: var(--box-sp-15);
+  margin-right: var(--box-unit-15);
 }
 .marg-r-16 {
-  margin-right: var(--box-sp-16);
+  margin-right: var(--box-unit-16);
 }
 .marg-r-17 {
-  margin-right: var(--box-sp-17);
+  margin-right: var(--box-unit-17);
 }
 .marg-r-18 {
-  margin-right: var(--box-sp-18);
+  margin-right: var(--box-unit-18);
 }
 .marg-r-19 {
-  margin-right: var(--box-sp-19);
+  margin-right: var(--box-unit-19);
 }
 .marg-r-20 {
-  margin-right: var(--box-sp-20);
+  margin-right: var(--box-unit-20);
 }
 .marg-r-21 {
-  margin-right: var(--box-sp-21);
+  margin-right: var(--box-unit-21);
 }
 .marg-r-22 {
-  margin-right: var(--box-sp-22);
+  margin-right: var(--box-unit-22);
 }
 .marg-r-23 {
-  margin-right: var(--box-sp-23);
+  margin-right: var(--box-unit-23);
 }
 .marg-r-24 {
-  margin-right: var(--box-sp-24);
+  margin-right: var(--box-unit-24);
 }
 .marg-r-25 {
-  margin-right: var(--box-sp-25);
+  margin-right: var(--box-unit-25);
 }
 .marg-r-26 {
-  margin-right: var(--box-sp-26);
+  margin-right: var(--box-unit-26);
 }
 .marg-r-27 {
-  margin-right: var(--box-sp-27);
+  margin-right: var(--box-unit-27);
 }
 .marg-r-28 {
-  margin-right: var(--box-sp-28);
+  margin-right: var(--box-unit-28);
 }
 .marg-r-29 {
-  margin-right: var(--box-sp-29);
+  margin-right: var(--box-unit-29);
 }
 .marg-r-30 {
-  margin-right: var(--box-sp-30);
+  margin-right: var(--box-unit-30);
 }
 .marg-r-31 {
-  margin-right: var(--box-sp-31);
+  margin-right: var(--box-unit-31);
 }
 .marg-r-32 {
-  margin-right: var(--box-sp-32);
+  margin-right: var(--box-unit-32);
 }
 
 .marg-all, .marg-all-1 {
-  margin: var(--box-sp-1);
+  margin: var(--box-unit-1);
 }
 .marg-all-2 {
-  margin: var(--box-sp-2);
+  margin: var(--box-unit-2);
 }
 .marg-all-3 {
-  margin: var(--box-sp-3);
+  margin: var(--box-unit-3);
 }
 .marg-all-4 {
-  margin: var(--box-sp-4);
+  margin: var(--box-unit-4);
 }
 .marg-all-5 {
-  margin: var(--box-sp-5);
+  margin: var(--box-unit-5);
 }
 .marg-all-6 {
-  margin: var(--box-sp-6);
+  margin: var(--box-unit-6);
 }
 .marg-all-7 {
-  margin: var(--box-sp-7);
+  margin: var(--box-unit-7);
 }
 .marg-all-8 {
-  margin: var(--box-sp-8);
+  margin: var(--box-unit-8);
 }
 .marg-all-9 {
-  margin: var(--box-sp-9);
+  margin: var(--box-unit-9);
 }
 .marg-all-10 {
-  margin: var(--box-sp-10);
+  margin: var(--box-unit-10);
 }
 .marg-all-11 {
-  margin: var(--box-sp-11);
+  margin: var(--box-unit-11);
 }
 .marg-all-12 {
-  margin: var(--box-sp-12);
+  margin: var(--box-unit-12);
 }
 .marg-all-13 {
-  margin: var(--box-sp-13);
+  margin: var(--box-unit-13);
 }
 .marg-all-14 {
-  margin: var(--box-sp-14);
+  margin: var(--box-unit-14);
 }
 .marg-all-15 {
-  margin: var(--box-sp-15);
+  margin: var(--box-unit-15);
 }
 .marg-all-16 {
-  margin: var(--box-sp-16);
+  margin: var(--box-unit-16);
 }
 .marg-all-17 {
-  margin: var(--box-sp-17);
+  margin: var(--box-unit-17);
 }
 .marg-all-18 {
-  margin: var(--box-sp-18);
+  margin: var(--box-unit-18);
 }
 .marg-all-19 {
-  margin: var(--box-sp-19);
+  margin: var(--box-unit-19);
 }
 .marg-all-20 {
-  margin: var(--box-sp-20);
+  margin: var(--box-unit-20);
 }
 .marg-all-21 {
-  margin: var(--box-sp-21);
+  margin: var(--box-unit-21);
 }
 .marg-all-22 {
-  margin: var(--box-sp-22);
+  margin: var(--box-unit-22);
 }
 .marg-all-23 {
-  margin: var(--box-sp-23);
+  margin: var(--box-unit-23);
 }
 .marg-all-24 {
-  margin: var(--box-sp-24);
+  margin: var(--box-unit-24);
 }
 .marg-all-25 {
-  margin: var(--box-sp-25);
+  margin: var(--box-unit-25);
 }
 .marg-all-26 {
-  margin: var(--box-sp-26);
+  margin: var(--box-unit-26);
 }
 .marg-all-27 {
-  margin: var(--box-sp-27);
+  margin: var(--box-unit-27);
 }
 .marg-all-28 {
-  margin: var(--box-sp-28);
+  margin: var(--box-unit-28);
 }
 .marg-all-29 {
-  margin: var(--box-sp-29);
+  margin: var(--box-unit-29);
 }
 .marg-all-30 {
-  margin: var(--box-sp-30);
+  margin: var(--box-unit-30);
 }
 .marg-all-31 {
-  margin: var(--box-sp-31);
+  margin: var(--box-unit-31);
 }
 .marg-all-32 {
-  margin: var(--box-sp-32);
+  margin: var(--box-unit-32);
 }
 
 .marg-u, .marg-u-1 {
-  margin-bottom: var(--box-sp-1);
-  margin-left: var(--box-sp-1);
-  margin-right: var(--box-sp-1);
+  margin-bottom: var(--box-unit-1);
+  margin-left: var(--box-unit-1);
+  margin-right: var(--box-unit-1);
 }
 .marg-u-2 {
-  margin-bottom: var(--box-sp-2);
-  margin-left: var(--box-sp-2);
-  margin-right: var(--box-sp-2);
+  margin-bottom: var(--box-unit-2);
+  margin-left: var(--box-unit-2);
+  margin-right: var(--box-unit-2);
 }
 .marg-u-3 {
-  margin-bottom: var(--box-sp-3);
-  margin-left: var(--box-sp-3);
-  margin-right: var(--box-sp-3);
+  margin-bottom: var(--box-unit-3);
+  margin-left: var(--box-unit-3);
+  margin-right: var(--box-unit-3);
 }
 .marg-u-4 {
-  margin-bottom: var(--box-sp-4);
-  margin-left: var(--box-sp-4);
-  margin-right: var(--box-sp-4);
+  margin-bottom: var(--box-unit-4);
+  margin-left: var(--box-unit-4);
+  margin-right: var(--box-unit-4);
 }
 .marg-u-5 {
-  margin-bottom: var(--box-sp-5);
-  margin-left: var(--box-sp-5);
-  margin-right: var(--box-sp-5);
+  margin-bottom: var(--box-unit-5);
+  margin-left: var(--box-unit-5);
+  margin-right: var(--box-unit-5);
 }
 .marg-u-6 {
-  margin-bottom: var(--box-sp-6);
-  margin-left: var(--box-sp-6);
-  margin-right: var(--box-sp-6);
+  margin-bottom: var(--box-unit-6);
+  margin-left: var(--box-unit-6);
+  margin-right: var(--box-unit-6);
 }
 .marg-u-7 {
-  margin-bottom: var(--box-sp-7);
-  margin-left: var(--box-sp-7);
-  margin-right: var(--box-sp-7);
+  margin-bottom: var(--box-unit-7);
+  margin-left: var(--box-unit-7);
+  margin-right: var(--box-unit-7);
 }
 .marg-u-8 {
-  margin-bottom: var(--box-sp-8);
-  margin-left: var(--box-sp-8);
-  margin-right: var(--box-sp-8);
+  margin-bottom: var(--box-unit-8);
+  margin-left: var(--box-unit-8);
+  margin-right: var(--box-unit-8);
 }
 .marg-u-9 {
-  margin-bottom: var(--box-sp-9);
-  margin-left: var(--box-sp-9);
-  margin-right: var(--box-sp-9);
+  margin-bottom: var(--box-unit-9);
+  margin-left: var(--box-unit-9);
+  margin-right: var(--box-unit-9);
 }
 .marg-u-10 {
-  margin-bottom: var(--box-sp-10);
-  margin-left: var(--box-sp-10);
-  margin-right: var(--box-sp-10);
+  margin-bottom: var(--box-unit-10);
+  margin-left: var(--box-unit-10);
+  margin-right: var(--box-unit-10);
 }
 .marg-u-11 {
-  margin-bottom: var(--box-sp-11);
-  margin-left: var(--box-sp-11);
-  margin-right: var(--box-sp-11);
+  margin-bottom: var(--box-unit-11);
+  margin-left: var(--box-unit-11);
+  margin-right: var(--box-unit-11);
 }
 .marg-u-12 {
-  margin-bottom: var(--box-sp-12);
-  margin-left: var(--box-sp-12);
-  margin-right: var(--box-sp-12);
+  margin-bottom: var(--box-unit-12);
+  margin-left: var(--box-unit-12);
+  margin-right: var(--box-unit-12);
 }
 .marg-u-13 {
-  margin-bottom: var(--box-sp-13);
-  margin-left: var(--box-sp-13);
-  margin-right: var(--box-sp-13);
+  margin-bottom: var(--box-unit-13);
+  margin-left: var(--box-unit-13);
+  margin-right: var(--box-unit-13);
 }
 .marg-u-14 {
-  margin-bottom: var(--box-sp-14);
-  margin-left: var(--box-sp-14);
-  margin-right: var(--box-sp-14);
+  margin-bottom: var(--box-unit-14);
+  margin-left: var(--box-unit-14);
+  margin-right: var(--box-unit-14);
 }
 .marg-u-15 {
-  margin-bottom: var(--box-sp-15);
-  margin-left: var(--box-sp-15);
-  margin-right: var(--box-sp-15);
+  margin-bottom: var(--box-unit-15);
+  margin-left: var(--box-unit-15);
+  margin-right: var(--box-unit-15);
 }
 .marg-u-16 {
-  margin-bottom: var(--box-sp-16);
-  margin-left: var(--box-sp-16);
-  margin-right: var(--box-sp-16);
+  margin-bottom: var(--box-unit-16);
+  margin-left: var(--box-unit-16);
+  margin-right: var(--box-unit-16);
 }
 .marg-u-17 {
-  margin-bottom: var(--box-sp-17);
-  margin-left: var(--box-sp-17);
-  margin-right: var(--box-sp-17);
+  margin-bottom: var(--box-unit-17);
+  margin-left: var(--box-unit-17);
+  margin-right: var(--box-unit-17);
 }
 .marg-u-18 {
-  margin-bottom: var(--box-sp-18);
-  margin-left: var(--box-sp-18);
-  margin-right: var(--box-sp-18);
+  margin-bottom: var(--box-unit-18);
+  margin-left: var(--box-unit-18);
+  margin-right: var(--box-unit-18);
 }
 .marg-u-19 {
-  margin-bottom: var(--box-sp-19);
-  margin-left: var(--box-sp-19);
-  margin-right: var(--box-sp-19);
+  margin-bottom: var(--box-unit-19);
+  margin-left: var(--box-unit-19);
+  margin-right: var(--box-unit-19);
 }
 .marg-u-20 {
-  margin-bottom: var(--box-sp-20);
-  margin-left: var(--box-sp-20);
-  margin-right: var(--box-sp-20);
+  margin-bottom: var(--box-unit-20);
+  margin-left: var(--box-unit-20);
+  margin-right: var(--box-unit-20);
 }
 .marg-u-21 {
-  margin-bottom: var(--box-sp-21);
-  margin-left: var(--box-sp-21);
-  margin-right: var(--box-sp-21);
+  margin-bottom: var(--box-unit-21);
+  margin-left: var(--box-unit-21);
+  margin-right: var(--box-unit-21);
 }
 .marg-u-22 {
-  margin-bottom: var(--box-sp-22);
-  margin-left: var(--box-sp-22);
-  margin-right: var(--box-sp-22);
+  margin-bottom: var(--box-unit-22);
+  margin-left: var(--box-unit-22);
+  margin-right: var(--box-unit-22);
 }
 .marg-u-23 {
-  margin-bottom: var(--box-sp-23);
-  margin-left: var(--box-sp-23);
-  margin-right: var(--box-sp-23);
+  margin-bottom: var(--box-unit-23);
+  margin-left: var(--box-unit-23);
+  margin-right: var(--box-unit-23);
 }
 .marg-u-24 {
-  margin-bottom: var(--box-sp-24);
-  margin-left: var(--box-sp-24);
-  margin-right: var(--box-sp-24);
+  margin-bottom: var(--box-unit-24);
+  margin-left: var(--box-unit-24);
+  margin-right: var(--box-unit-24);
 }
 .marg-u-25 {
-  margin-bottom: var(--box-sp-25);
-  margin-left: var(--box-sp-25);
-  margin-right: var(--box-sp-25);
+  margin-bottom: var(--box-unit-25);
+  margin-left: var(--box-unit-25);
+  margin-right: var(--box-unit-25);
 }
 .marg-u-26 {
-  margin-bottom: var(--box-sp-26);
-  margin-left: var(--box-sp-26);
-  margin-right: var(--box-sp-26);
+  margin-bottom: var(--box-unit-26);
+  margin-left: var(--box-unit-26);
+  margin-right: var(--box-unit-26);
 }
 .marg-u-27 {
-  margin-bottom: var(--box-sp-27);
-  margin-left: var(--box-sp-27);
-  margin-right: var(--box-sp-27);
+  margin-bottom: var(--box-unit-27);
+  margin-left: var(--box-unit-27);
+  margin-right: var(--box-unit-27);
 }
 .marg-u-28 {
-  margin-bottom: var(--box-sp-28);
-  margin-left: var(--box-sp-28);
-  margin-right: var(--box-sp-28);
+  margin-bottom: var(--box-unit-28);
+  margin-left: var(--box-unit-28);
+  margin-right: var(--box-unit-28);
 }
 .marg-u-29 {
-  margin-bottom: var(--box-sp-29);
-  margin-left: var(--box-sp-29);
-  margin-right: var(--box-sp-29);
+  margin-bottom: var(--box-unit-29);
+  margin-left: var(--box-unit-29);
+  margin-right: var(--box-unit-29);
 }
 .marg-u-30 {
-  margin-bottom: var(--box-sp-30);
-  margin-left: var(--box-sp-30);
-  margin-right: var(--box-sp-30);
+  margin-bottom: var(--box-unit-30);
+  margin-left: var(--box-unit-30);
+  margin-right: var(--box-unit-30);
 }
 .marg-u-31 {
-  margin-bottom: var(--box-sp-31);
-  margin-left: var(--box-sp-31);
-  margin-right: var(--box-sp-31);
+  margin-bottom: var(--box-unit-31);
+  margin-left: var(--box-unit-31);
+  margin-right: var(--box-unit-31);
 }
 .marg-u-32 {
-  margin-bottom: var(--box-sp-32);
-  margin-left: var(--box-sp-32);
-  margin-right: var(--box-sp-32);
+  margin-bottom: var(--box-unit-32);
+  margin-left: var(--box-unit-32);
+  margin-right: var(--box-unit-32);
 }
 
 .marg-ii, .marg-ii-1 {
-  margin-left: var(--box-sp-1);
-  margin-right: var(--box-sp-1);
+  margin-left: var(--box-unit-1);
+  margin-right: var(--box-unit-1);
 }
 .marg-ii-2 {
-  margin-left: var(--box-sp-2);
-  margin-right: var(--box-sp-2);
+  margin-left: var(--box-unit-2);
+  margin-right: var(--box-unit-2);
 }
 .marg-ii-3 {
-  margin-left: var(--box-sp-3);
-  margin-right: var(--box-sp-3);
+  margin-left: var(--box-unit-3);
+  margin-right: var(--box-unit-3);
 }
 .marg-ii-4 {
-  margin-left: var(--box-sp-4);
-  margin-right: var(--box-sp-4);
+  margin-left: var(--box-unit-4);
+  margin-right: var(--box-unit-4);
 }
 .marg-ii-5 {
-  margin-left: var(--box-sp-5);
-  margin-right: var(--box-sp-5);
+  margin-left: var(--box-unit-5);
+  margin-right: var(--box-unit-5);
 }
 .marg-ii-6 {
-  margin-left: var(--box-sp-6);
-  margin-right: var(--box-sp-6);
+  margin-left: var(--box-unit-6);
+  margin-right: var(--box-unit-6);
 }
 .marg-ii-7 {
-  margin-left: var(--box-sp-7);
-  margin-right: var(--box-sp-7);
+  margin-left: var(--box-unit-7);
+  margin-right: var(--box-unit-7);
 }
 .marg-ii-8 {
-  margin-left: var(--box-sp-8);
-  margin-right: var(--box-sp-8);
+  margin-left: var(--box-unit-8);
+  margin-right: var(--box-unit-8);
 }
 .marg-ii-9 {
-  margin-left: var(--box-sp-9);
-  margin-right: var(--box-sp-9);
+  margin-left: var(--box-unit-9);
+  margin-right: var(--box-unit-9);
 }
 .marg-ii-10 {
-  margin-left: var(--box-sp-10);
-  margin-right: var(--box-sp-10);
+  margin-left: var(--box-unit-10);
+  margin-right: var(--box-unit-10);
 }
 .marg-ii-11 {
-  margin-left: var(--box-sp-11);
-  margin-right: var(--box-sp-11);
+  margin-left: var(--box-unit-11);
+  margin-right: var(--box-unit-11);
 }
 .marg-ii-12 {
-  margin-left: var(--box-sp-12);
-  margin-right: var(--box-sp-12);
+  margin-left: var(--box-unit-12);
+  margin-right: var(--box-unit-12);
 }
 .marg-ii-13 {
-  margin-left: var(--box-sp-13);
-  margin-right: var(--box-sp-13);
+  margin-left: var(--box-unit-13);
+  margin-right: var(--box-unit-13);
 }
 .marg-ii-14 {
-  margin-left: var(--box-sp-14);
-  margin-right: var(--box-sp-14);
+  margin-left: var(--box-unit-14);
+  margin-right: var(--box-unit-14);
 }
 .marg-ii-15 {
-  margin-left: var(--box-sp-15);
-  margin-right: var(--box-sp-15);
+  margin-left: var(--box-unit-15);
+  margin-right: var(--box-unit-15);
 }
 .marg-ii-16 {
-  margin-left: var(--box-sp-16);
-  margin-right: var(--box-sp-16);
+  margin-left: var(--box-unit-16);
+  margin-right: var(--box-unit-16);
 }
 .marg-ii-17 {
-  margin-left: var(--box-sp-17);
-  margin-right: var(--box-sp-17);
+  margin-left: var(--box-unit-17);
+  margin-right: var(--box-unit-17);
 }
 .marg-ii-18 {
-  margin-left: var(--box-sp-18);
-  margin-right: var(--box-sp-18);
+  margin-left: var(--box-unit-18);
+  margin-right: var(--box-unit-18);
 }
 .marg-ii-19 {
-  margin-left: var(--box-sp-19);
-  margin-right: var(--box-sp-19);
+  margin-left: var(--box-unit-19);
+  margin-right: var(--box-unit-19);
 }
 .marg-ii-20 {
-  margin-left: var(--box-sp-20);
-  margin-right: var(--box-sp-20);
+  margin-left: var(--box-unit-20);
+  margin-right: var(--box-unit-20);
 }
 .marg-ii-21 {
-  margin-left: var(--box-sp-21);
-  margin-right: var(--box-sp-21);
+  margin-left: var(--box-unit-21);
+  margin-right: var(--box-unit-21);
 }
 .marg-ii-22 {
-  margin-left: var(--box-sp-22);
-  margin-right: var(--box-sp-22);
+  margin-left: var(--box-unit-22);
+  margin-right: var(--box-unit-22);
 }
 .marg-ii-23 {
-  margin-left: var(--box-sp-23);
-  margin-right: var(--box-sp-23);
+  margin-left: var(--box-unit-23);
+  margin-right: var(--box-unit-23);
 }
 .marg-ii-24 {
-  margin-left: var(--box-sp-24);
-  margin-right: var(--box-sp-24);
+  margin-left: var(--box-unit-24);
+  margin-right: var(--box-unit-24);
 }
 .marg-ii-25 {
-  margin-left: var(--box-sp-25);
-  margin-right: var(--box-sp-25);
+  margin-left: var(--box-unit-25);
+  margin-right: var(--box-unit-25);
 }
 .marg-ii-26 {
-  margin-left: var(--box-sp-26);
-  margin-right: var(--box-sp-26);
+  margin-left: var(--box-unit-26);
+  margin-right: var(--box-unit-26);
 }
 .marg-ii-27 {
-  margin-left: var(--box-sp-27);
-  margin-right: var(--box-sp-27);
+  margin-left: var(--box-unit-27);
+  margin-right: var(--box-unit-27);
 }
 .marg-ii-28 {
-  margin-left: var(--box-sp-28);
-  margin-right: var(--box-sp-28);
+  margin-left: var(--box-unit-28);
+  margin-right: var(--box-unit-28);
 }
 .marg-ii-29 {
-  margin-left: var(--box-sp-29);
-  margin-right: var(--box-sp-29);
+  margin-left: var(--box-unit-29);
+  margin-right: var(--box-unit-29);
 }
 .marg-ii-30 {
-  margin-left: var(--box-sp-30);
-  margin-right: var(--box-sp-30);
+  margin-left: var(--box-unit-30);
+  margin-right: var(--box-unit-30);
 }
 .marg-ii-31 {
-  margin-left: var(--box-sp-31);
-  margin-right: var(--box-sp-31);
+  margin-left: var(--box-unit-31);
+  margin-right: var(--box-unit-31);
 }
 .marg-ii-32 {
-  margin-left: var(--box-sp-32);
-  margin-right: var(--box-sp-32);
+  margin-left: var(--box-unit-32);
+  margin-right: var(--box-unit-32);
 }
 
 .marg-tb, .marg-tb-1 {
-  margin-top: var(--box-sp-1);
-  margin-bottom: var(--box-sp-1);
+  margin-top: var(--box-unit-1);
+  margin-bottom: var(--box-unit-1);
 }
 .marg-tb-2 {
-  margin-top: var(--box-sp-2);
-  margin-bottom: var(--box-sp-2);
+  margin-top: var(--box-unit-2);
+  margin-bottom: var(--box-unit-2);
 }
 .marg-tb-3 {
-  margin-top: var(--box-sp-3);
-  margin-bottom: var(--box-sp-3);
+  margin-top: var(--box-unit-3);
+  margin-bottom: var(--box-unit-3);
 }
 .marg-tb-4 {
-  margin-top: var(--box-sp-4);
-  margin-bottom: var(--box-sp-4);
+  margin-top: var(--box-unit-4);
+  margin-bottom: var(--box-unit-4);
 }
 .marg-tb-5 {
-  margin-top: var(--box-sp-5);
-  margin-bottom: var(--box-sp-5);
+  margin-top: var(--box-unit-5);
+  margin-bottom: var(--box-unit-5);
 }
 .marg-tb-6 {
-  margin-top: var(--box-sp-6);
-  margin-bottom: var(--box-sp-6);
+  margin-top: var(--box-unit-6);
+  margin-bottom: var(--box-unit-6);
 }
 .marg-tb-7 {
-  margin-top: var(--box-sp-7);
-  margin-bottom: var(--box-sp-7);
+  margin-top: var(--box-unit-7);
+  margin-bottom: var(--box-unit-7);
 }
 .marg-tb-8 {
-  margin-top: var(--box-sp-8);
-  margin-bottom: var(--box-sp-8);
+  margin-top: var(--box-unit-8);
+  margin-bottom: var(--box-unit-8);
 }
 .marg-tb-9 {
-  margin-top: var(--box-sp-9);
-  margin-bottom: var(--box-sp-9);
+  margin-top: var(--box-unit-9);
+  margin-bottom: var(--box-unit-9);
 }
 .marg-tb-10 {
-  margin-top: var(--box-sp-10);
-  margin-bottom: var(--box-sp-10);
+  margin-top: var(--box-unit-10);
+  margin-bottom: var(--box-unit-10);
 }
 .marg-tb-11 {
-  margin-top: var(--box-sp-11);
-  margin-bottom: var(--box-sp-11);
+  margin-top: var(--box-unit-11);
+  margin-bottom: var(--box-unit-11);
 }
 .marg-tb-12 {
-  margin-top: var(--box-sp-12);
-  margin-bottom: var(--box-sp-12);
+  margin-top: var(--box-unit-12);
+  margin-bottom: var(--box-unit-12);
 }
 .marg-tb-13 {
-  margin-top: var(--box-sp-13);
-  margin-bottom: var(--box-sp-13);
+  margin-top: var(--box-unit-13);
+  margin-bottom: var(--box-unit-13);
 }
 .marg-tb-14 {
-  margin-top: var(--box-sp-14);
-  margin-bottom: var(--box-sp-14);
+  margin-top: var(--box-unit-14);
+  margin-bottom: var(--box-unit-14);
 }
 .marg-tb-15 {
-  margin-top: var(--box-sp-15);
-  margin-bottom: var(--box-sp-15);
+  margin-top: var(--box-unit-15);
+  margin-bottom: var(--box-unit-15);
 }
 .marg-tb-16 {
-  margin-top: var(--box-sp-16);
-  margin-bottom: var(--box-sp-16);
+  margin-top: var(--box-unit-16);
+  margin-bottom: var(--box-unit-16);
 }
 .marg-tb-17 {
-  margin-top: var(--box-sp-17);
-  margin-bottom: var(--box-sp-17);
+  margin-top: var(--box-unit-17);
+  margin-bottom: var(--box-unit-17);
 }
 .marg-tb-18 {
-  margin-top: var(--box-sp-18);
-  margin-bottom: var(--box-sp-18);
+  margin-top: var(--box-unit-18);
+  margin-bottom: var(--box-unit-18);
 }
 .marg-tb-19 {
-  margin-top: var(--box-sp-19);
-  margin-bottom: var(--box-sp-19);
+  margin-top: var(--box-unit-19);
+  margin-bottom: var(--box-unit-19);
 }
 .marg-tb-20 {
-  margin-top: var(--box-sp-20);
-  margin-bottom: var(--box-sp-20);
+  margin-top: var(--box-unit-20);
+  margin-bottom: var(--box-unit-20);
 }
 .marg-tb-21 {
-  margin-top: var(--box-sp-21);
-  margin-bottom: var(--box-sp-21);
+  margin-top: var(--box-unit-21);
+  margin-bottom: var(--box-unit-21);
 }
 .marg-tb-22 {
-  margin-top: var(--box-sp-22);
-  margin-bottom: var(--box-sp-22);
+  margin-top: var(--box-unit-22);
+  margin-bottom: var(--box-unit-22);
 }
 .marg-tb-23 {
-  margin-top: var(--box-sp-23);
-  margin-bottom: var(--box-sp-23);
+  margin-top: var(--box-unit-23);
+  margin-bottom: var(--box-unit-23);
 }
 .marg-tb-24 {
-  margin-top: var(--box-sp-24);
-  margin-bottom: var(--box-sp-24);
+  margin-top: var(--box-unit-24);
+  margin-bottom: var(--box-unit-24);
 }
 .marg-tb-25 {
-  margin-top: var(--box-sp-25);
-  margin-bottom: var(--box-sp-25);
+  margin-top: var(--box-unit-25);
+  margin-bottom: var(--box-unit-25);
 }
 .marg-tb-26 {
-  margin-top: var(--box-sp-26);
-  margin-bottom: var(--box-sp-26);
+  margin-top: var(--box-unit-26);
+  margin-bottom: var(--box-unit-26);
 }
 .marg-tb-27 {
-  margin-top: var(--box-sp-27);
-  margin-bottom: var(--box-sp-27);
+  margin-top: var(--box-unit-27);
+  margin-bottom: var(--box-unit-27);
 }
 .marg-tb-28 {
-  margin-top: var(--box-sp-28);
-  margin-bottom: var(--box-sp-28);
+  margin-top: var(--box-unit-28);
+  margin-bottom: var(--box-unit-28);
 }
 .marg-tb-29 {
-  margin-top: var(--box-sp-29);
-  margin-bottom: var(--box-sp-29);
+  margin-top: var(--box-unit-29);
+  margin-bottom: var(--box-unit-29);
 }
 .marg-tb-30 {
-  margin-top: var(--box-sp-30);
-  margin-bottom: var(--box-sp-30);
+  margin-top: var(--box-unit-30);
+  margin-bottom: var(--box-unit-30);
 }
 .marg-tb-31 {
-  margin-top: var(--box-sp-31);
-  margin-bottom: var(--box-sp-31);
+  margin-top: var(--box-unit-31);
+  margin-bottom: var(--box-unit-31);
 }
 .marg-tb-32 {
-  margin-top: var(--box-sp-32);
-  margin-bottom: var(--box-sp-32);
+  margin-top: var(--box-unit-32);
+  margin-bottom: var(--box-unit-32);
 }
 
 .dsp-block {
@@ -2222,42 +2222,228 @@
   margin-top: 0;
 }
 
-.shad-1 {
-  box-shadow: var(--box-shad-1);
+/*placement*/
+.top-0 {
+  top: var(--box-unit-0);
 }
 
-.shad-2 {
-  box-shadow: var(--box-shad-2);
+.top-1 {
+  top: var(--box-unit-1);
 }
 
-.shad-3 {
-  box-shadow: var(--box-shad-3);
+.top-2 {
+  top: var(--box-unit-2);
 }
 
-.shad-4 {
-  box-shadow: var(--box-shad-4);
+.top-3 {
+  top: var(--box-unit-3);
 }
 
-.shad-5 {
-  box-shadow: var(--box-shad-5);
+.top-4 {
+  top: var(--box-unit-4);
+}
+
+.top-5 {
+  top: var(--box-unit-5);
+}
+
+.top-6 {
+  top: var(--box-unit-6);
+}
+
+.top-7 {
+  top: var(--box-unit-7);
+}
+
+.top-8 {
+  top: var(--box-unit-8);
+}
+
+.right-0 {
+  right: var(--box-unit-0);
+}
+
+.right-1 {
+  right: var(--box-unit-1);
+}
+
+.right-2 {
+  right: var(--box-unit-2);
+}
+
+.right-3 {
+  right: var(--box-unit-3);
+}
+
+.right-4 {
+  right: var(--box-unit-4);
+}
+
+.right-5 {
+  right: var(--box-unit-5);
+}
+
+.right-6 {
+  right: var(--box-unit-6);
+}
+
+.right-7 {
+  right: var(--box-unit-7);
+}
+
+.right-8 {
+  right: var(--box-unit-8);
+}
+
+.bottom-0 {
+  bottom: var(--box-unit-0);
+}
+
+.bottom-1 {
+  bottom: var(--box-unit-1);
+}
+
+.bottom-2 {
+  bottom: var(--box-unit-2);
+}
+
+.bottom-3 {
+  bottom: var(--box-unit-3);
+}
+
+.bottom-4 {
+  bottom: var(--box-unit-4);
+}
+
+.bottom-5 {
+  bottom: var(--box-unit-5);
+}
+
+.bottom-6 {
+  bottom: var(--box-unit-6);
 }
 
-.shad-6 {
-  box-shadow: var(--box-shad-6);
+.bottom-7 {
+  bottom: var(--box-unit-7);
 }
 
-.shad-7 {
-  box-shadow: var(--box-shad-7);
+.bottom-8 {
+  bottom: var(--box-unit-8);
 }
 
-.shad-8 {
-  box-shadow: var(--box-shad-8);
+.left-0 {
+  left: var(--box-unit-0);
 }
 
-.shad-9 {
-  box-shadow: var(--box-shad-9);
+.left-1 {
+  left: var(--box-unit-1);
 }
 
-.shad-10 {
-  box-shadow: var(--box-shad-10);
+.left-2 {
+  left: var(--box-unit-2);
+}
+
+.left-3 {
+  left: var(--box-unit-3);
+}
+
+.left-4 {
+  left: var(--box-unit-4);
+}
+
+.left-5 {
+  left: var(--box-unit-5);
+}
+
+.left-6 {
+  left: var(--box-unit-6);
+}
+
+.left-7 {
+  left: var(--box-unit-7);
+}
+
+.left-8 {
+  left: var(--box-unit-8);
+}
+
+/*radius*/
+.radius-tiny {
+  border-radius: 4px;
+}
+.radius-tiny-t {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.radius-tiny-b {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.radius-tiny-l {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.radius-tiny-r {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.radius-small {
+  border-radius: 8px;
+}
+.radius-small-t {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+.radius-small-b {
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+.radius-small-l {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+.radius-small-r {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.radius-medium {
+  border-radius: 16px;
+}
+.radius-medium-t {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+}
+.radius-medium-b {
+  border-bottom-left-radius: 16px;
+  border-bottom-right-radius: 16px;
+}
+.radius-medium-l {
+  border-top-left-radius: 16px;
+  border-bottom-left-radius: 16px;
+}
+.radius-medium-r {
+  border-top-right-radius: 16px;
+  border-bottom-right-radius: 16px;
+}
+
+.shad-1 {
+  box-shadow: var(--box-shad-1);
+}
+
+.shad-2 {
+  box-shadow: var(--box-shad-2);
+}
+
+.shad-3 {
+  box-shadow: var(--box-shad-3);
+}
+
+.shad-4 {
+  box-shadow: var(--box-shad-4);
+}
+
+.shad-5 {
+  box-shadow: var(--box-shad-5);
 }