upd notion pics

docs/.vuepress/components/Contribution.vue

@@ -165,9 +165,9 @@
           <a href="https://curvy-caribou-2c5.notion.site/iGEM-Notion-11010f1720c0805d8e12f4e8b2943349?pvs=4" target="_blank">Click here to view the Notion template</a>.
           </p>
           <!-- Display three images side by side -->
-        <div class="image-row">
+        <div class="image-column">
         <img src="https://static.igem.wiki/teams/5306/notion-template/screenshot-2024-09-30-at-00-42-12.webp" alt="Screenshot 1 of Notion template" class="image-item" />
-        <img src="https://static.igem.wiki/teams/5306/notion-template/screenshot-2024-09-30-at-00-43-14.webp" class="image-item" />
+        <img src="https://static.igem.wiki/teams/5306/notion-template/screenshot-2024-09-30-at-00-43-14.webp" alt="Screenshot 2 of Notion template" class="image-item" />
         <img src="https://static.igem.wiki/teams/5306/notion-template/screenshot-2024-09-30-at-00-44-44-2.webp" alt="Screenshot 3 of Notion template" class="image-item" />
         </div>
         </div>
@@ -268,16 +268,15 @@ h1, h3 {
   margin-top: 10px;
 }
 
-.image-row {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 1em;
+.image-column {
+  /* This class can be omitted as images will stack vertically by default */
+  margin-top: 1em; /* Optional: Adds spacing above the images */
 }
 
 .image-item {
-  width: 30%; /* Adjust this to control the image size */
-  height: auto;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+  width: 100%; /* Make images full width of the container */
+  height: auto; /* Maintain aspect ratio */
+  margin-bottom: 1em; /* Adds spacing between images */
+  border: 1px solid #ccc; /* Optional: Add border for visual separation */
 }
 </style>