feat: add new margins

Author: linspw

src/components/atoms/grid/grid-item.vue

@@ -59,7 +59,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '@styles/utils';
+@import '@styles/utils/breakpoints';
 
 .h-grid-item {
   position: relative;

src/components/molecules/toast/toast.vue

@@ -75,7 +75,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '@styles/utils';
+@import '@styles/utils/breakpoints';
 
 .h-toast {
   overflow: hidden;

src/styles/utils/utilitary-classes/utilitary-padding-and-margin.scss

@@ -40,7 +40,6 @@ $sizes:
     padding-right: var(--size-base-#{$size});
     padding-left: var(--size-base-#{$size});
   }
-
   .h-margin--#{$size} {
     margin: var(--size-base-#{$size});
   }
@@ -65,3 +64,27 @@ $sizes:
     margin-left: var(--size-base-#{$size});
   }
 }
+
+.h-margin--auto {
+  margin: auto;
+}
+.h-margin-top--auto {
+  margin-top: auto;
+}
+.h-margin-right--auto {
+  margin-right: auto;
+}
+.h-margin-bottom--auto {
+  margin-bottom: auto;
+}
+.h-margin-left--auto {
+  margin-left: auto;
+}
+.h-margin-vertical--auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.h-margin-horizontal--auto {
+  margin-right: auto;
+  margin-left: auto;
+}