5 files changed, 38 insertions, 12 deletions
diff --git a/sass/abstracts/_mixins.scss b/sass/abstracts/_mixins.scss
index 3495b1b..f50cc17 100644
--- a/sass/abstracts/_mixins.scss
+++ b/sass/abstracts/_mixins.scss
@@ -25,10 +25,6 @@
   justify-content: center;
 }
 
-@mixin narrow-container {
-  margin: 3rem auto;
-}
-
 @mixin wide-container {
   margin: 10rem auto;
   width: 80%;
@@ -38,11 +34,15 @@
   }
 }
 
-@mixin mobile-container {
+@mixin medium-container {
   margin: 8rem auto;
   width: 80%;
 }
 
+@mixin mobile-container {
+  margin: 3rem auto;
+}
+
 // media queries
 @mixin responsive($breakpoint) {
   @if $breakpoint == phone {
diff --git a/sass/base/_base.scss b/sass/base/_base.scss
index 545dce7..608f7c2 100644
--- a/sass/base/_base.scss
+++ b/sass/base/_base.scss
@@ -40,6 +40,10 @@ main {
   & * {
     animation: fade-in 2s ease-out;
   }
+
+  @include responsive(phone) {
+    margin: 2rem 0.5rem;
+  }
 }
 
 ::selection {
diff --git a/sass/components/_text-container.scss b/sass/components/_text-container.scss
index 6cd1457..ea3a2fc 100644
--- a/sass/components/_text-container.scss
+++ b/sass/components/_text-container.scss
@@ -14,6 +14,10 @@
     width: auto;
   }
 
+  @include responsive(phone) {
+    padding: 1rem;
+  }
+
   // margin between paragraphs but not below the last paragraph
   & p:not(:last-child) {
     margin-bottom: 1.5rem;
diff --git a/sass/layout/_main-sections.scss b/sass/layout/_main-sections.scss
index aec49e5..190d020 100644
--- a/sass/layout/_main-sections.scss
+++ b/sass/layout/_main-sections.scss
@@ -2,11 +2,15 @@
 
 .about-section {
   @include flex-sp-around-center;
-  @include narrow-container;
+  @include mobile-container;
 
   // mobile to smaller laptop screen sizes
   @include responsive(laptop) {
     @include flex-column-center;
+    @include medium-container;
+  }
+
+  @include responsive(phone) {
     @include mobile-container;
   }
 }
@@ -14,13 +18,17 @@
 .welcome-section {
   @include standard-grid;
   gap: 8rem;
-  @include narrow-container;
+  @include mobile-container;
   width: 60%;
 
   // mobile to smaller laptop screen sizes
   @include responsive(laptop) {
     @include flex-column-center;
     gap: 4rem;
+    @include medium-container;
+  }
+
+  @include responsive(phone) {
     @include mobile-container;
   }
 
@@ -34,14 +42,20 @@
 .projects-section {
   @include wide-container;
 
+  // less margin between h2 and the 2nd child = first project-container
+  & > div:not(:nth-child(2)) {
+    margin-top: 10rem;
+  }
+
   // mobile to smaller laptop screen sizes
   @include responsive(laptop) {
-    @include mobile-container;
+    @include medium-container;
   }
 
-  // less margin between h2 and the 2nd child = first project-container
-  & > div:not(:nth-child(2)) {
-    margin-top: 10rem;
+  @include responsive(phone) {
+    @include flex-column-center;
+    margin: 8rem 0;
+    width: 100%;
   }
 }
 
@@ -50,6 +64,10 @@
 
   // mobile to smaller laptop screen sizes
   @include responsive(laptop) {
+    @include medium-container;
+  }
+
+  @include responsive(phone) {
     @include mobile-container;
   }
 }
diff --git a/sass/layout/_nav.scss b/sass/layout/_nav.scss
index e2d462e..88fc320 100644
--- a/sass/layout/_nav.scss
+++ b/sass/layout/_nav.scss
@@ -24,7 +24,7 @@ nav {
     @include responsive(tablet) {
       @include flex-column-center;
       gap: 1rem;
-      padding: 0;
+      padding: 1.5rem 0;
     }
   }