☠️ RESET for v2

src/style/_variables.scss

@@ -12,36 +12,42 @@ $color-gray: #666;
 $color-lightgray: #999;
 
 // CSS Variables
-// :root {
-// }
+:root {
+    // Sizes
+    --container-width: 1680px;
+
+    // Animation
+    --ease-quart: cubic-bezier(.165, .84, .44, 1);
+    --ease-cubic: cubic-bezier(.785, .135, .15, .86);
+    --ease-inout-quart: cubic-bezier(.76, 0, .24, 1);
+}
 
 
 /* Fonts
 ========================================================================== */
-$base-font-size: 28px;
+$base-font-size: 28px !default;
 
 // Families
 $replacement-sans: "Helvetica, Arial, sans-serif";
 $replacement-serif: "Georgia, serif";
-$font-sans: "G-Regular", #{$replacement-sans};
-$font-sans-sb: "G-Semibold", #{$replacement-sans};
-$font-sans-light: "G-Light", #{$replacement-sans};
-$font-serif: "M-Light", #{$replacement-serif};
-$font-serif-extra: "M-Extralight", #{$replacement-serif};
+$font-sans: "Garnett", #{$replacement-sans};
+$font-serif: "Magnolia", #{$replacement-serif};
 
 
 
 /* Sizes, margins and spacing
 ====================================================================== */
-$base-width: 1600;
+$base-width: 1600 !default;
 
-// Blocks
+// Grid
+$cols-m: 12 !default;
+$cols-d: 32 !default;
 
 
 /* Directories
 ========================================================================== */
-$dir-img: "/img";
-$dir-fonts: "/fonts";
+$dir-img: "/images" !default;
+$dir-fonts: "/fonts" !default;
 
 
 /* Animation
@@ -54,10 +60,14 @@ $ease-inout: ease-in-out;
 
 /* Responsive breakpoints
 ========================================================================== */
-$screen-mob: 450px;
-$screen-xs: 767px;
-$screen-sm: 768px;
-$screen-md: 992px;
-$screen-lg: 1200px;
-$screen-xl: 1440px;
-$screen-xxl: 1600px;
+$breakpoints: (
+    mob: 450px,
+    mob-lg: 550px,
+    xs: 767px,
+    sm: 768px,
+    md: 992px,
+    sd: 1200px,
+    lg: 1440px,
+    xl: 1600px,
+    fhd: 1920px,
+) !default;