add folders

scss/_variables.scss

@@ -1,6 +0,0 @@
-$primary-color: steelblue;
-$secondary-color: skyblue;
-$light-color: #f4f4f4;
-$dark-color: #333;
-$font-stack: Arial, Helvetica, sans-serif;
-

scss/abstracts/_mixins.scss

@@ -0,0 +1,41 @@
+
+@mixin absCenter {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+
+// MEDIA QUERY MANAGER
+/*
+0 - 600px:      Phone
+600 - 900px:    Tablet portrait
+900 - 1200px:   Tablet landscape
+[1200 - 1800] is where our normal styles apply
+1800px + :      Big desktop
+
+$breakpoint arguement choices:
+- phone
+- tab-port
+- tab-land
+- big-desktop
+
+ORDER: Base + typography > general layout + grid > page layout > components
+
+1em = 16px
+*/
+@mixin respond($breakpoint) {
+    @if $breakpoint == phone {
+        @media only screen and (max-width: 37.5em) { @content };    //600px
+    }
+    @if $breakpoint == tab-port {
+        @media only screen and (max-width: 56.25em) { @content };     //900px
+    }
+    @if $breakpoint == tab-land {
+        @media only screen and (max-width: 75em) { @content };    //1200px
+    }
+    @if $breakpoint == big-desktop {
+        @media only screen and (min-width: 112.5em) { @content };    //1800
+    }
+}

scss/abstracts/_variables.scss

@@ -0,0 +1,2 @@
+// $primary-color: steelblue;
+

scss/base/_base.scss

@@ -0,0 +1,21 @@
+*,
+*::after,
+*::before {
+    margin: 0;
+    padding: 0;
+    box-sizing: inherit;
+}
+
+html {
+   font-size: 100%;
+}
+
+body {
+    box-sizing: border-box;
+  
+
+    @include respond(tab-port) {
+        padding: 0;
+    }
+}
+

scss/base/_utilities.scss

@@ -0,0 +1,42 @@
+// colors
+.bg-green {
+  background-color: #3bb78f;
+  background: linear-gradient(90deg, #3bb78f 0%, rgba(11, 171, 100, 1) 35%, rgba(59, 183, 143, 1) 100%);
+}
+
+// font size
+.font-3 {
+  font-size: 3rem;
+}
+.font-1_5 {
+  font-size: 2rem;
+}
+
+.subtitle_1 {
+  font-size: 1.5rem;
+}
+
+.gap-1 {
+  gap: 0.7rem;
+}
+
+.banner_heading_4 {
+  font-size: 3rem;
+}
+
+
+// padding
+
+.padding_top_14 {
+  padding-top: 14rem;
+}
+
+// heights
+
+.vh-85 {
+  height: 85vh;
+}
+
+.vh-15 {
+  height: 15vh;
+}

scss/components/__button.scss

@@ -0,0 +1,8 @@
+// button
+.button_dark{
+    clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
+    padding-right: 1.7rem;
+    padding-bottom: 0.6rem;
+    padding-top: 0.6rem;
+    border-radius: 10px;
+}

scss/main.scss

@@ -1,74 +1,14 @@
-@import 'variables';
-@import 'functions';
+@import "abstracts/functions";
+@import "abstracts/mixins";
+@import "abstracts/variables";
 
-*,::before,::after{
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  
-}
+@import "base/base";
+@import "base/typography";
+@import "base/utilities";
 
-html{
-  font-size: 16px;
-}
 
-.bg-green{
-  background-color:#3BB78F;
-  background: linear-gradient(90deg, #3BB78F 0%, rgba(11,171,100,1) 35%, rgba(59,183,143,1) 100%);
-}
+// components
+@import "components/_button";
 
-.banner_heading_4{
-  font-size: 3rem;
-}
-
-.subtitle_1{
-  font-size: 1.5rem;
-}
-
-.padding_top_14{
-  padding-top: 14rem;
-}
-
-.photo_dual{
-  width:40rem;
-}
-
-.price_footer{
-  background-color:#52cba5;
-}
-
-.boxImgContainer{
-  width: 4rem;
-
-}
-
-.vh-85{
-  height: 85vh;
-}
-
-.vh-15{
-  height: 15vh;
-}
-
-.font-3{
-  font-size: 3rem;
-}
-.font-1_5{
-  font-size: 2rem;
-}
-
-.gap-1{
-  font-size: 0.7rem;
-}
-
-.priceCut_multi{
-  font-size: .7rem;
-}
-// button
-.button_dark{
-  clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
-  padding-right: 1.7rem;
-  padding-bottom: 0.6rem;
-  padding-top: 0.6rem;
-  border-radius: 10px;
-}
+// pages
+@import "pages/productOverview.scss";

scss/pages/productOverview.scss

@@ -0,0 +1,19 @@
+.photo_dual{
+    width:40rem;
+  }
+  
+  .price_footer{
+    background-color:#52cba5;
+  }
+  
+  .boxImgContainer{
+    width: 4rem;
+  
+  }
+  
+  
+  
+  .priceCut_multi{
+    font-size: .7rem;
+  }
+