section 9: images do some small

index.html

@@ -481,7 +481,7 @@
         <div class="relative overflow-hidden h-48">
           <img src="https://huggingface.co/spaces/vlcsolutions/erp-flow-masters/resolve/main/images/Questions-1.png" 
                alt="Essential Questions to Ask" 
-               class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
+               class="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105" style="padding: 1rem">
 </div>
         <div class="p-6">
           <div class="flex items-center mb-2">
@@ -502,7 +502,7 @@
         <div class="relative overflow-hidden h-48">
           <img src="https://huggingface.co/spaces/vlcsolutions/erp-flow-masters/resolve/main/images/Migration-2.png" 
                alt="Migration from GP to Business Central" 
-               class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
+               class="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105" style="padding: 1rem">
 </div>
         <div class="p-6">
           <div class="flex items-center mb-2">
@@ -524,7 +524,7 @@
         <div class="relative overflow-hidden h-48">
           <img src="https://huggingface.co/spaces/vlcsolutions/erp-flow-masters/resolve/main/images/Enhance-3.png" 
                alt="Cloud ERP Benefits" 
-               class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
+               class="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105" style="padding: 1rem">
 </div>
         <div class="p-6">
           <div class="flex items-center mb-2">
@@ -546,7 +546,7 @@
         <div class="relative overflow-hidden h-48">
           <img src="https://huggingface.co/spaces/vlcsolutions/erp-flow-masters/resolve/main/images/Make-4.png" 
                alt="Business Intelligence" 
-               class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
+               class="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105" style="padding: 1rem">
 </div>
         <div class="p-6">
           <div class="flex items-center mb-2">

style.css

@@ -13,16 +13,21 @@
   width: 100%;
   overflow: hidden;
   background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f8fafc;
 }
 .resource-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 20px 40px -10px rgba(0, 32, 96, 0.2);
 }
 .resource-card img {
-  width: 100%;
-  height: 100%;
+  width: 80%;
+  height: 80%;
   object-fit: contain;
   object-position: center;
+  transition: all 0.3s ease;
 }
 .resource-card .btn-primary {
   transition: all 0.3s ease;