adding spacing

src/scss/helpers/_colors.scss

@@ -1,3 +1,11 @@
+/**
+ *
+ *
+ *
+ *
+ *
+ */
+
 @each $name, $color in $plain-ui__colors {
     .text-color-#{$name} {
         color: var(#{$color});

src/scss/helpers/_core.scss

@@ -5,14 +5,6 @@
  *
  */
 
-@mixin plain-ui__helpers__core()
-{
-    /**
-     *  borders
-     *
-     *
-     */
-
 .border {
     border: $plain-ui__border !important;
 }
@@ -121,14 +113,6 @@
     }
 }
 
-    /**
-     *  colors
-     *
-     *
-     */
-
-
-
 /**
  *  floating
  *
@@ -211,4 +195,3 @@
 .object-fit-cover {
     object-fit: cover;
 }
-}

src/scss/helpers/_spacing.scss

@@ -5,8 +5,8 @@ $plain-ui__spacing-direction: (
     'right'
 ) !default;
 
-$plain-ui__helpers__spacing-gap: 0.25 !default;
-$plain-ui__helpers__spacing-steps: 10 !default;
+$plain-ui__spacing-gap: 0.25 !default;
+$plain-ui__spacing-steps: 10 !default;
 
 /**
  *
@@ -19,24 +19,64 @@ $plain-ui__helpers__spacing-steps: 10 !default;
     }
 }
 
-@each $direction in $plain-ui__spacing-direction {
-
+@each $direction in $plain-ui__spacing-direction
+{
     @include spacing('m', 'margin', $direction, 0, 0);
     @include spacing('m', 'margin', $direction, 1, 1px);
 
-    @for $i from 2 through $plain-ui__helpers__spacing-steps {
-        $value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
+    @for $i from 2 through $plain-ui__spacing-steps {
+        $value: $plain-ui__spacing-gap * factor($i - 1) * 1rem;
         @include spacing('m', 'margin', $direction, $i, $value);
+
+        @include plain-ui__media-xs() {
+            @include spacing('m', 'margin', $direction, 'xs-' + $i, $value);
         }
+
+        @include plain-ui__media-sm() {
+            @include spacing('m', 'margin', $direction, 'sm-' + $i, $value);
+        }
+
+        @include plain-ui__media-md() {
+            @include spacing('m', 'margin', $direction, 'md-' + $i, $value);
         }
 
-@each $direction in $plain-ui__spacing-direction {
+        @include plain-ui__media-lg() {
+            @include spacing('m', 'margin', $direction, 'lg-' + $i, $value);
+        }
+
+        @include plain-ui__media-xlg() {
+            @include spacing('m', 'margin', $direction, 'xlg-' + $i, $value);
+        }
+    }
+}
 
+@each $direction in $plain-ui__spacing-direction
+{
     @include spacing('p', 'padding', $direction, 0, 0);
     @include spacing('p', 'padding', $direction, 1, 1px);
 
-    @for $i from 0 through $plain-ui__helpers__spacing-steps {
-        $value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
+    @for $i from 0 through $plain-ui__spacing-steps {
+        $value: $plain-ui__spacing-gap * factor($i - 1) * 1rem;
         @include spacing('p', 'padding', $direction, $i, $value);
+
+        @include plain-ui__media-xs() {
+            @include spacing('p', 'padding', $direction, 'xs-' + $i, $value);
+        }
+
+        @include plain-ui__media-sm() {
+            @include spacing('p', 'padding', $direction, 'sm-' + $i, $value);
+        }
+
+        @include plain-ui__media-md() {
+            @include spacing('p', 'padding', $direction, 'md-' + $i, $value);
+        }
+
+        @include plain-ui__media-lg() {
+            @include spacing('p', 'padding', $direction, 'lg-' + $i, $value);
+        }
+
+        @include plain-ui__media-xlg() {
+            @include spacing('p', 'padding', $direction, 'xlg-' + $i, $value);
+        }
     }
 }

src/scss/layout/_masonry.scss

@@ -23,17 +23,18 @@ $plain-ui__masonry_sizes: (
 
 $plain-ui__masonry_height: 200px !default;
 $plain-ui__masonry_height--sm: 300px !default;
+$plain-ui__masonry_gap: 15px !default;
+$plain-ui__masonry_gap-offset: 10px !default;
 
 .masonry {
     display: flex;
     width: 100%;
     flex-flow: row wrap;
+    gap: $plain-ui__masonry_gap;
 
     &__item {
         width: 100%;
         height: $plain-ui__masonry_height;
-        padding-left: 1px;
-        padding-bottom: 1px;
 
         @include plain-ui__media-sm() {
             height: $plain-ui__masonry_height--sm;
@@ -41,7 +42,7 @@ $plain-ui__masonry_height--sm: 300px !default;
             // add width from data
             @each $index, $size in $plain-ui__masonry_sizes {
                 &:nth-child(4n+#{$index}) {
-                    width: #{$size};
+                    width: calc(#{$size} - #{$plain-ui__masonry_gap-offset});
                 }
             }
         }

src/scss/plain-ui.scss

@@ -31,8 +31,6 @@
     'helpers/spacing',
     'helpers/colors';
 
-@include plain-ui__helpers__core();
-
 @include plain-ui__component__media();
 @include plain-ui__component__table();
 @include plain-ui__component__slider();