changes in image format for results

style.css

@@ -235,20 +235,37 @@ a:hover {
   }
 
   /* Style for images in a row */
-  .bottom-images {
+  /* Center container for single top image */
+.image-single {
     display: flex;
-    justify-content: space-between;
-    gap: 20px;
-    margin-top: 20px;
+    justify-content: center;
+    margin-bottom: 20px;
   }
 
-  /* Specific size adjustments for Force Trend and Failure Mode images */
+  /* Common styling for all images */
+  .image-case {
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* Center-aligns images */
+    text-align: center;
+    margin: 0 auto; /* Centers the container within its parent */
+  }
+
+  .image-case img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 5px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+    margin-bottom: 10px; /* Space between image and caption */
+  }
+
+  /* Specific scaling for Force Trend and Failure Mode images */
   .large-image {
-    width: 80%; /* Adjust this percentage as needed for a larger size */
+    width: 80%; /* Scales larger image to 80% of container */
   }
 
   .small-image {
-    width: 20%; /* Adjust this percentage as needed for a smaller size */
+    width: 20%; /* Scales smaller image to 70% of container */
   }
 
   /* Styling for captions */
@@ -258,16 +275,24 @@ a:hover {
     margin-top: 5px;
   }
 
-  /* Responsive adjustments */
+  /* Force row styling for two and three images */
+  .bottom-images {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 20px;
+  }
+
+  /* Adjust for mobile responsiveness */
   @media (max-width: 768px) {
     .bottom-images {
       flex-direction: column;
       align-items: center;
     }
     .large-image,
-    .small-image {
-      width: 80%; /* Adjust as needed for mobile scaling */
+    .small-image,
+    .image-case img {
+      width: 80%; /* Adjusts size for smaller screens */
     }
   }
-