Center related products using flexbox instead of grid

src/components/product/ProductDetail.tsx

@@ -414,17 +414,16 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
                 {locale === "EN" ? "Similar Products" : "Slični proizvodi"}
               </h2>
             </div>
-            <div className="flex justify-center">
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
+            <div className="flex flex-wrap justify-center gap-6 lg:gap-8">
               {relatedProducts.filter(p => p && p.id).slice(0, 4).map((relatedProduct, index) => (
+                <div key={relatedProduct.id} className="w-full sm:w-[calc(50%-12px)] lg:w-[calc(25%-18px)]">
                   <ProductCard 
-                    key={relatedProduct.id} 
                     product={relatedProduct} 
                     index={index}
                     locale={locale}
                   />
-                ))}
                 </div>
+              ))}
             </div>
           </div>
         </section>