Update pictures.md

Author: lenis2000

geolab/pictures.md

@@ -3,12 +3,82 @@ title: Pictures
 layout: geolab_page
 permalink: /geolab/pictures/
 ---
-<img src="{{site.url}}/geolab/images/Group1.JPG" class="centerImage" width="100%" alt="GL - Group 1">
 
-<img src="{{site.url}}/geolab/images/Market1.jpeg" class="centerImage" style="cermax-width:100%;max-height:300px;height:auto;width:auto" class="mb-3" alt="GL - Market 1"> <img src="{{site.url}}/geolab/images/Market4.JPG" class="centerImage" style="cermax-width:100%;max-height:300px;height:auto;width:auto" class="mb-3" alt="GL - Market 4">
+<style>
+  .img-container {
+    height: 300px;
+    overflow: hidden;
+  }
+  .img-container img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .img-container-contain img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+</style>
 
-<img src="{{site.url}}/geolab/images/Art2.jpeg" class="centerImage" width="33%" alt="GL - Art 2"> <img src="{{site.url}}/geolab/images/Art1.jpeg" class="centerImage" width="33%" alt="GL - Art 1"> <img src="{{site.url}}/geolab/images/Art3.png" class="centerImage" width="33%" alt="GL - Art 3">
-
-<img src="{{site.url}}/geolab/images/Market3.JPG" class="centerImage" width="50%" alt="GL - Market 3"> <img src="{{site.url}}/geolab/images/Fair.jpeg" class="centerImage" width="50%" alt="GL - Fair">
-
-<img src="{{site.url}}/geolab/images/Group4.JPG" class="centerImage" width="50%" alt="GL - Group 4"> 
+<div class="container">
+  <div class="row mb-4">
+    <div class="col-12">
+      <div class="img-container">
+        <img src="{{site.url}}/geolab/images/Group1.JPG" alt="GL - Group 1">
+      </div>
+    </div>
+  </div>
+  
+  <div class="row mb-4">
+    <div class="col-md-6">
+      <div class="img-container">
+        <img src="{{site.url}}/geolab/images/Market1.jpeg" alt="GL - Market 1">
+      </div>
+    </div>
+    <div class="col-md-6">
+      <div class="img-container">
+        <img src="{{site.url}}/geolab/images/Market4.JPG" alt="GL - Market 4">
+      </div>
+    </div>
+  </div>
+  
+  <div class="row mb-4">
+    <div class="col-md-4">
+      <div class="img-container-contain">
+        <img src="{{site.url}}/geolab/images/Art2.jpeg" alt="GL - Art 2">
+      </div>
+    </div>
+    <div class="col-md-4">
+      <div class="img-container-contain">
+        <img src="{{site.url}}/geolab/images/Art3.png" alt="GL - Art 3">
+      </div>
+    </div>
+    <div class="col-md-4">
+      <div class="img-container-contain">
+        <img src="{{site.url}}/geolab/images/Art1.jpeg" alt="GL - Art 1">
+      </div>
+    </div>
+  </div>
+  
+  <div class="row mb-4">
+    <div class="col-md-6">
+      <div class="img-container">
+        <img src="{{site.url}}/geolab/images/Market3.JPG" alt="GL - Market 3">
+      </div>
+    </div>
+    <div class="col-md-6">
+      <div class="img-container">
+        <img src="{{site.url}}/geolab/images/Fair.jpeg" alt="GL - Fair">
+      </div>
+    </div>
+  </div>
+  
+  <div class="row">
+    <div class="col-12">
+      <div class="img-container">
+        <img src="{{site.url}}/geolab/images/Group4.JPG" alt="GL - Group 4">
+      </div>
+    </div>
+  </div>
+</div>