استایل این قسمت را درست کردم: این کالاها برای خرید به شما پیشنهام می دهیم |15

src/components/ProductSuggestion/index.js

@@ -26,12 +26,12 @@ const ProductSuggestion = ({ isDark, getSimilar, book, similarList }) => {
     }
   }, [similarList]);
   return (
-    <section className="mt-10 border-2 border-gray-300 py-10 rounded-lg bg-grayF9">
+    <section className="mt-10 border-2  border-gray-300 py-10 rounded-lg bg-grayF9">
       <h2 className="text-center text-lg font-bold text-productPrice">
         {window.t("این کالاها برای خرید به شما پیشنهام می دهیم")}
       </h2>
       {/* product design */}
-      <div className="flex flex-row flex-wrap items-center justify-center mt-5 w-full gap-5">
+      <div className="flex flex-row flex-wrap items-center justify-center mt-5 w-full gap-10">
         {similarList.map((book, index) => (
           <div
             className="flex flex-row mb-7 justify-center relative"
@@ -39,9 +39,10 @@ const ProductSuggestion = ({ isDark, getSimilar, book, similarList }) => {
             key={index}
           >
             <div
-              className={`flex flex-col items-center border rounded-md border-gray-300 p-5 cursor-pointer bg-white
+              className={`flex flex-col items-center  rounded-md  p-5 cursor-pointer bg-white
                ${selectedProduct === book ? "bg-white" : ""}`}
               onClick={() => setSelectedProduct(book)}
+              style={{ border: "solid 1px #ddd" }}
             >
               <img
                 src={`https://dnvn.ir/api/v1/file/${book?.book?.fileIds}`}
@@ -67,7 +68,7 @@ const ProductSuggestion = ({ isDark, getSimilar, book, similarList }) => {
               <img
                 src={plus}
                 alt=""
-                className="w-5 absolute -left-2.5 top-1/2 transform -translate-y-1/2 -translate-x-1/2 z-20"
+                className="w-5 absolute -left-5 top-1/2 transform -translate-y-1/2 -translate-x-1/2 z-20"
               />
             )}
           </div>