Modified order of blocks in Family part in mobile and desktop (final)

src/components/Family/Family.astro

@@ -1,25 +1,14 @@
 ---
-import family1 from '../../assets/images/family/family_1.png';
+import current_mems from '../../assets/images/family/current_mems.png';
-import family2 from '../../assets/images/family/family_2.png';
+import notable_mems from '../../assets/images/family/notable_mems.png';
-import family3 from '../../assets/images/family/family_3.png';
+import execomm from '../../assets/images/family/execomm.png';
 ---
 
 <section class="family-section" id="people">
   <h2>UP IECEP Family</h2>
   <div class="members-panel">
     
-    <!-- Mobile Popup 1 (Retains arrow) -->
+    <!-- PANEL: Executive Committee Text -->
-    <div class="image-panel">
-      <img src={family3.src} alt="" />
-      <div class="image-panel-popup">
-        <a href="/executive-committee" style="color: inherit; text-decoration: none;">
-          <h3>Executive Committee &rarr;</h3>
-        </a>
-        <p>A bit information about the current heads of each committee</p>
-      </div>
-    </div>
-    
-    <!-- Desktop Panel 1: Executive Committee -->
     <div class="text-panel">
       <a href="/executive-committee" class="cover" style="color: inherit; text-decoration: none;">
         <div class="title-group">
@@ -32,37 +21,10 @@ import family3 from '../../assets/images/family/family_3.png';
         <strong>A bit information about the current heads of each committee</strong>
       </a>
     </div>
-    
+
-    <!-- Mobile Popup 2 (Retains arrow) -->
+    <!-- PANEL: Current Members Image -->
     <div class="image-panel">
-      <img src={family2.src} alt="" />
+      <img src={current_mems.src} alt="" />
-      <div class="image-panel-popup">
-        <a href="#people" style="color: inherit; text-decoration: none;">
-          <h3>Notable Members &rarr;</h3>
-        </a>
-        <p>
-          Some of UP IECEP's most well respected and accomplished individuals
-        </p>
-      </div>
-    </div>
-    
-    <!-- Desktop Panel 2: Current Members -->
-    <div class="text-panel">
-      <a href="/current-members" class="cover" style="color: inherit; text-decoration: none;">
-        <div class="title-group">
-          <h3>Current Members</h3>
-          <span class="action-hint">View list</span>
-        </div>
-      </a>
-      <a href="/current-members" class="under" style="color: inherit; text-decoration: none;">
-        <h3>Current Members</h3>
-        <strong>A short list of all the current members of UP IECEP</strong>
-      </a>
-    </div>
-    
-    <!-- Mobile Popup 3 (Retains arrow) -->
-    <div class="image-panel">
-      <img src={family1.src} alt="" />
       <div class="image-panel-popup">
         <a href="/current-members" style="color: inherit; text-decoration: none;">
           <h3>Current Members &rarr;</h3>
@@ -70,8 +32,8 @@ import family3 from '../../assets/images/family/family_3.png';
         <p>A short list of all the current members of UP IECEP</p>
       </div>
     </div>
-    
+
-    <!-- Desktop Panel 3: Notable Members -->
+    <!-- PANEL: Notable Members Text -->
     <div class="text-panel">
       <a href="#people" class="cover" style="color: inherit; text-decoration: none;">
         <div class="title-group">
@@ -84,6 +46,42 @@ import family3 from '../../assets/images/family/family_3.png';
         <strong>Some of UP IECEP's most well respected and accomplished individuals</strong>
       </a>
     </div>
+
+    <!-- PANEL: Executive Committee Image -->
+    <div class="image-panel">
+      <img src={execomm.src} alt="" />
+      <div class="image-panel-popup">
+        <a href="/executive-committee" style="color: inherit; text-decoration: none;">
+          <h3>Executive Committee &rarr;</h3>
+        </a>
+        <p>A bit information about the current heads of each committee</p>
+      </div>
+    </div>
+
+    <!-- PANEL: Current Members Text -->
+    <div class="text-panel">
+      <a href="/current-members" class="cover" style="color: inherit; text-decoration: none;">
+        <div class="title-group">
+          <h3>Current Members</h3>
+          <span class="action-hint">View list</span>
+        </div>
+      </a>
+      <a href="/current-members" class="under" style="color: inherit; text-decoration: none;">
+        <h3>Current Members</h3>
+        <strong>A short list of all the current members of UP IECEP</strong>
+      </a>
+    </div>
+
+    <!-- PANEL: Notable Members Image -->
+    <div class="image-panel">
+      <img src={notable_mems.src} alt="" />
+      <div class="image-panel-popup">
+        <a href="#people" style="color: inherit; text-decoration: none;">
+          <h3>Notable Members &rarr;</h3>
+        </a>
+        <p>Some of UP IECEP's most well respected and accomplished individuals</p>
+      </div>
+    </div>
     
   </div>
 </section>

src/components/Family/family.scss

@@ -48,15 +48,9 @@
       aspect-ratio: 25.375 / 18.125;
       position: relative;
 
-      &:nth-of-type(2) {
+      &:nth-of-type(1),
-        .cover,
+      &:nth-of-type(3),
-        .under {
+      &:nth-of-type(5) {
-          background-color: $secondary;
-        }
-      }
-
-      &:nth-of-type(4),
-      &:nth-of-type(6) {
         .cover,
         .under {
           background-color: $secondary;
@@ -266,12 +260,9 @@
           }
         }
 
-        &:nth-of-type(1) {
+        &:nth-of-type(1) { order: 2; }
-          order: 1;
+        &:nth-of-type(3) { order: 3; }
-        }
+        &:nth-of-type(5) { order: 1; }
-        &:nth-of-type(3) {
-          order: 2;
-        }
       }
     }
   }