add folders

dist/css/main.css

@@ -1,24 +1,71 @@
-*, ::before, ::after {
-  padding: 0;
+/*
+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
+*/
+*,
+*::after,
+*::before {
   margin: 0;
-  box-sizing: border-box; }
+  padding: 0;
+  box-sizing: inherit; }
 
 html {
-  font-size: 16px; }
+  font-size: 100%; }
+
+body {
+  box-sizing: border-box; }
+  @media only screen and (max-width: 56.25em) {
+    body {
+      padding: 0; } }
 
 .bg-green {
-  background-color: #3BB78F;
-  background: linear-gradient(90deg, #3BB78F 0%, #0bab64 35%, #3bb78f 100%); }
+  background-color: #3bb78f;
+  background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%); }
 
-.banner_heading_4 {
+.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_top_14 {
   padding-top: 14rem; }
 
+.vh-85 {
+  height: 85vh; }
+
+.vh-15 {
+  height: 15vh; }
+
+.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; }
+
 .photo_dual {
   width: 40rem; }
 
@@ -28,22 +75,5 @@ html {
 .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; }
-
-