şimdi bu son eklediklerini css ile altta yatay olarak düzelt

shop-with-us.html

@@ -31,9 +31,8 @@
             <div class="max-w-4xl mx-auto mb-16">
                 <h2 class="text-2xl font-bold text-primary mb-6">Popular Stores We Work With</h2>
                 <p class="text-lg text-gray-700 mb-8">Shop from these popular international retailers and ship to our warehouses for consolidation and delivery to Qatar.</p>
-                
-                <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-6">
-                    <a href="#" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 border border-gray-100 flex flex-col items-center">
+                <div class="shop-with-us grid">
+<a href="#" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 border border-gray-100 flex flex-col items-center">
                         <img src="http://static.photos/retail/200x200/1" alt="Amazon" class="h-16 w-16 object-contain mb-4">
                         <h3 class="text-lg font-bold text-center text-primary">Amazon</h3>
                         <p class="text-sm text-gray-500 mt-1 text-center">USA, UK, UAE</p>

style.css

@@ -1,3 +1,4 @@
+
 /* Custom CSS for BavulumKatar'da */
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
 
@@ -6,6 +7,33 @@ body {
     line-height: 1.6;
 }
 
+/* Horizontal layout for store cards */
+.shop-with-us .grid {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1.5rem;
+}
+
+.shop-with-us .grid > * {
+    flex: 1 1 200px;
+    max-width: 250px;
+}
+
+@media (max-width: 768px) {
+    .shop-with-us .grid {
+        flex-direction: row;
+        overflow-x: auto;
+        padding-bottom: 1rem;
+        -webkit-overflow-scrolling: touch;
+        scroll-snap-type: x mandatory;
+    }
+    
+    .shop-with-us .grid > * {
+        flex: 0 0 80%;
+        scroll-snap-align: start;
+    }
+}
 /* Custom animations */
 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(20px); }