4 files changed, 23 insertions, 14 deletions

diff --git a/index-en.html b/index-en.html
index 299dfa8..5fbd3ee 100644
--- a/index-en.html
+++ b/index-en.html
@@ -123,7 +123,7 @@
         </div>
 
         <!-- reverse order class for smaller screen sizes -->
-        <div class="project-container reverse-order">
+        <div class="project-container">
           <div class="text-container">
             <h3 class="subtitle">All In Trips</h3>
             <p>
diff --git a/index.html b/index.html
index 0b7fbf9..bb844c2 100644
--- a/index.html
+++ b/index.html
@@ -125,7 +125,7 @@
         </div>
 
         <!-- reverse order class for smaller screen sizes -->
-        <div class="project-container reverse-order">
+        <div class="project-container">
           <div class="text-container">
             <h3 class="subtitle">All In Trips</h3>
             <p>
diff --git a/sass/components/_project-container.scss b/sass/components/_project-container.scss
index 0bb8940..ae4b841 100644
--- a/sass/components/_project-container.scss
+++ b/sass/components/_project-container.scss
@@ -3,17 +3,18 @@
 .project-container {
   @include flex-sp-around-center;
   gap: 2rem;
-}
 
-// mobile to smaller laptop screen sizes
-@media screen and (max-width: 1400px) {
-  .project-container {
+  // mobile to smaller laptop screen sizes
+  @include responsive(laptop) {
     @include flex-column-center;
     gap: 5rem;
-  }
 
-  // for second project, otherwise screenshot below text-container
-  .reverse-order {
-    flex-direction: column-reverse;
+    /* 
+    important for second project, otherwise screenshot below text-container;
+    could be done with separate class for 2nd project and flex-dir: col-reverse for media query too
+    */
+    & > img {
+      order: -1;
+    }
   }
 }
diff --git a/style.css b/style.css
index b291c75..2dbe1fe 100644
--- a/style.css
+++ b/style.css
@@ -52,7 +52,11 @@ body {
 }
 
 body {
-  background: linear-gradient(45deg, rgba(2, 48, 89, 0.89) 0%, rgba(9, 61, 94, 0.84) 100%);
+  background: linear-gradient(
+    45deg,
+    rgba(2, 48, 89, 0.89) 0%,
+    rgba(9, 61, 94, 0.84) 100%
+  );
   background-repeat: no-repeat;
   background-size: cover;
   box-sizing: border-box;
@@ -343,7 +347,6 @@ footer .big-icon {
   justify-content: space-around;
   gap: 2rem;
 }
-
 @media screen and (max-width: 1400px) {
   .project-container {
     display: flex;
@@ -351,11 +354,16 @@ footer .big-icon {
     align-items: center;
     justify-content: center;
     gap: 5rem;
+    /* 
+    important for second project, otherwise screenshot below text-container;
+    could be done with separate class for 2nd project and flex-dir: col-reverse for media query too
+    */
   }
-  .reverse-order {
-    flex-direction: column-reverse;
+  .project-container > img {
+    order: -1;
   }
 }
+
 .project-screenshot {
   border-radius: 10px;
   outline: 5px solid #e79759;