improve donations images

Author: mgoulao

donations.html

@@ -94,23 +94,21 @@ <h5 class="card-title pt-3 mx-5">{{tier.name}} <br>{{tier.price}}</h5>
     </div>
 </div>
 
-<!-- donation perks section -->
-
-<div class="container mt-4 mb-5">
-    <div class="row text-center w-100">
+<div class="container mt-4 mb-5 p-0">
+    <div class="container p-0 m-0 row text-center w-100">
         <h2 class="text-primary mb-4">Major Donors</h2>
-        <div class="row justify-content-center mb-4">
-            {% for org in site.data.donors %}
-            <div class="col-12 col-sm-6 col-lg-3 mb-4">
-                <div class="">
-                    <a href="{{org.site}}" class="text-decoration-none">
-                        <img src="assets/donors/{{org.image}}" class="mx-auto img-fluid px-3 mb-2"
-                            style="height: 110px;" alt="{{ org.name }}">
-                        <h5 class="text-primary">{{ org.name }}</h5>
+        <div class="col">
+            <div class="row justify-content-center mb-4">
+                {% for org in site.data.donors %}
+                <div class="col-6 col-sm-3 mb-4 h-6">
+                    <a href="{{org.site}}" class="text-decoration-none d-flex flex-column h-100">
+                        <img src="assets/donors/{{org.image}}" class="mx-auto img-fluid px-3 mb-2 flex-fill"
+                        alt="{{ org.name }}" style="object-fit: contain; max-height: 90px;">
+                        <h5 class="text-primary" style="height: 48px">{{ org.name }}</h5>
                     </a>
                 </div>
+                {% endfor %}
             </div>
-            {% endfor %}
         </div>
     </div>
 </div>