WIP

src/style/tools/_functions.scss

@@ -7,6 +7,22 @@
 }
 
 
+/* PX to VW
+========================================================================== */
+@function pxVW ($value, $base: $base-width) {
+    @if $value == 0 { @return 0; }
+    @return ($value / $base) * 100 + vw;
+}
+
+
+/* VW to PX
+========================================================================== */
+@function vwPX ($value, $base: $base-width) {
+    @if $value == 0 { @return 0; }
+    @return ($value * $base) / 100 + px;
+}
+
+
 /* Headings
 ========================================================================== */
 @function headings ($from: 1, $to: 6) {

src/style/tools/_helpers.scss

@@ -22,7 +22,7 @@
 ========================================================================== */
 // Wrap (global)
 .wrap {
-    max-width: 1424px;
+    max-width: 1648px;
     margin: 0 auto;
     padding: 0 24px;
 
@@ -32,18 +32,21 @@
     @include breakpoint (md) {
         padding: 0 128px;
     }
-    @include breakpoint (1600px) {
-        padding: 0 48px;
+    @include breakpoint (xxl) {
+        // padding: 0 48px;
     }
 }
 
 // Wrapper (inside and more spaced)
 .wrapper {
-    margin: 0 auto;
     max-width: calc(892px + 28vw);
-    padding: 0 8vw;
-    
+    margin: 0 auto;
+    padding: 0 pxVW(128);
+
     @include breakpoint (sm) {
-        padding: 0 14vw;
+        padding: 0 pxVW(224);
+    }
+    @include breakpoint (xxl) {
+        padding: 0 224px;
     }
 }

src/style/tools/_mixins.scss

@@ -69,6 +69,9 @@
     @else if ($size == xl) {
         @media (min-width: $screen-xl) { @content; }
     }
+    @else if ($size == xxl) {
+        @media (min-width: $screen-xxl) { @content; }
+    }
     @else {
         @media (min-width: $size) { @content; }
     }