Modified Executive Committee page

src/styles/executive-committee.scss

@@ -18,8 +18,8 @@
 
   .banner-container {
     width: 100%;
-    max-width: 1200px; /* Prevents the banner from getting absurdly wide */
-    margin: 0 auto 4rem auto; /* Centers the banner and keeps the bottom gap */
+    max-width: 1200px;
+    margin: 0 auto 4rem auto;
     border-radius: 1.5rem;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
@@ -37,6 +37,7 @@
     gap: 2rem;
     
     .photo-card {
+      cursor: pointer; // Show pointer to indicate clickable
       width: 100%;
       border-radius: 1rem;
       overflow: hidden;
@@ -58,14 +59,45 @@
   }
 }
 
+/* Modal Styles */
+.image-modal {
+  display: none; 
+  position: fixed;
+  z-index: 9999;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.9);
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+
+  .modal-content {
+    max-width: 90%;
+    max-height: 90%;
+    border-radius: 8px;
+    box-shadow: 0 0 20px rgba(255,255,255,0.1);
+  }
+
+  .close-modal {
+    position: absolute;
+    top: 30px;
+    right: 40px;
+    color: #f1f1f1;
+    font-size: 60px;
+    font-weight: bold;
+    cursor: pointer;
+    line-height: 1;
+  }
+}
+
 /* --- Responsive Adjustments --- */
 
 @media screen and (max-width: 1024px) {
-  .execomm-section {
-    .photo-grid {
-      grid-template-columns: repeat(2, 1fr);
-      gap: 1.5rem;
-    }
+  .execomm-section .photo-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem;
   }
 }
 
@@ -85,13 +117,18 @@
       border-radius: 1rem;
     }
   }
+
+  .image-modal .close-modal {
+    top: 20px;
+    right: 25px;
+    font-size: 50px;
+  }
 }
 
 @media screen and (max-width: 480px) {
-  .execomm-section {
-    .photo-grid {
-      grid-template-columns: repeat(1, 1fr);
-      gap: 1.5rem;
-    }
+  .execomm-section .photo-grid {
+    /* MAINTAINED 2 COLUMNS ON PHONE */
+    grid-template-columns: repeat(2, 1fr); 
+    gap: 1rem;
   }
 }