Update file home.html

wiki/pages/home.html

@@ -29,7 +29,6 @@
       max-width: 1200px;
       margin: 100px auto 0; 
       min-height: calc(100vh - 210px);
-      justify-content: center;
     }
 
     #first-block {
@@ -38,10 +37,7 @@
       padding: 40px;
       background-color: transparent;
       box-shadow: none;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
+      text-align: center;
     }
 
     #first-block h2, #first-block p {
@@ -49,7 +45,6 @@
       color: #fa8072;
       opacity: 0;
       transition: opacity 1s ease-in-out;
-      text-align: center;
       font-style: italic;
     }
 
@@ -80,11 +75,15 @@
       box-shadow: 0 6px 12px rgba(0,0,0,0.15);
     }
 
-    .card img {
-      width: 45%;
+    .card-image {
+      flex: 0 0 45%;
+      margin-right: 20px;
+    }
+
+    .card-image img {
+      width: 100%;
       height: auto;
       border-radius: 5px;
-      margin-right: 20px;
     }
 
     .card-content {
@@ -102,7 +101,7 @@
 
     .full-content {
       display: none;
-      padding-top: 20px;
+      margin-top: 20px;
     }
 
     .loader-container {
@@ -139,7 +138,9 @@
     </div>
 
     <div class="card">
-      <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic1.png" alt="IBD Patient Story 1">
+      <div class="card-image">
+        <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic1.png" alt="IBD Patient Story 1">
+      </div>
       <div class="card-content">
         <h2>A patient's journey through IBD diagnosis and treatment</h2>
         <p>In 2002, when few in China understood what Inflammatory Bowel Disease (IBD) was, my doctor told me it was colon cancer...</p>
@@ -151,7 +152,9 @@
     </div>
 
     <div class="card">
-      <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic2.png" alt="IBD Patient Story 2">
+      <div class="card-image">
+        <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic2.png" alt="IBD Patient Story 2">
+      </div>
       <div class="card-content">
         <h2>An animation director's struggle with IBD</h2>
         <p>My symptoms began in 2017, with stomach cramps that left me too ill to perform every couple of months...</p>
@@ -163,7 +166,9 @@
     </div>
 
     <div class="card">
-      <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic3.png" alt="IBD Patient Story 3">
+      <div class="card-image">
+        <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic3.png" alt="IBD Patient Story 3">
+      </div>
       <div class="card-content">
         <h2>A fortunate IBD patient's story of remission and personal growth</h2>
         <p>I consider myself a fortunate IBD patient, as I've remained in remission. Unlike many others on strict diets...</p>
@@ -176,7 +181,9 @@
     </div>
 
     <div class="card">
-      <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic4.png" alt="IBD and Tuberculosis Patient Story">
+      <div class="card-image">
+        <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/pic4.png" alt="IBD and Tuberculosis Patient Story">
+      </div>
       <div class="card-content">
         <h2>A patient battling both IBD and tuberculosis</h2>
         <p>What could be worse than having IBD? Having both IBD and tuberculosis...</p>