WIP React > Svelte

Put most of the developed design into Svelte

src/style/tools/_helpers.scss

@@ -20,9 +20,30 @@
 
 /* Containers
 ========================================================================== */
-.container {
-
-}
+// Wrap (global)
 .wrap {
+    max-width: 1424px;
+    margin: 0 auto;
+    padding: 0 24px;
 
+    @include breakpoint (sm) {
+        padding: 0 60px;
+    }
+    @include breakpoint (md) {
+        padding: 0 128px;
+    }
+    @include breakpoint (1600px) {
+        padding: 0 48px;
+    }
+}
+
+// Wrapper (inside and more spaced)
+.wrapper {
+    margin: 0 auto;
+    max-width: calc(892px + 28vw);
+    padding: 0 8vw;
+    
+    @include breakpoint (sm) {
+        padding: 0 14vw;
+    }
 }

src/style/tools/_mixins.scss

@@ -52,7 +52,7 @@
 // Reponsive breakpoints
 @mixin breakpoint ($size) {
     @if ($size == m) {
-        @media (min-width: $screen-m) { @content; }
+        @media (min-width: $screen-mob) { @content; }
     }
     @else if ($size == xs) {
         @media (max-width: $screen-xs) { @content; }