update

src/components/ProductImage/index.js

@@ -10,20 +10,21 @@ const ProductImage = ({ images }) => {
   return (
     <section className="bg-white m-10 border-2 border-gray-300 p-4 rounded-lg">
       <div className="w-4/12	flex flex-row h-72">
-        <div className="flex flex-col items-center justify-between ml-4 w-20 h-full bg-red-500">
+        <div className="flex flex-col items-center justify-between ml-4 w-16  bg-red-500">
           {images.slice(0, 4).map((image, index) => (
             <div className="relative">
               <img
                 key={index}
                 src={productImg}
                 alt=""
-                className={`rounded-sm`}
-                style={{ height: "calc(100% - 8px)" }}
+                className={`rounded-sm h-full`}
+                // style={{ height: "calc(100% - 8px)" }}
+                // style={{ height: "calc(100% - 8px)" }}
               />
               {/* این خط پایین که نوشتم برای این است که ایندکس که جنسش استرینگ است رو به نامبر تبدیل کند */}
               {Number(index) === 3 && (
-                <div className="absolute w-full h-full bg-black bg-opacity-40 left-0 top-0 flex justify-center items-center text-white">
-                  <strong>{images.length - 3}</strong>
+                <div className="absolute w-full h-full bg-black bg-opacity-30 left-0 top-0 flex justify-center items-center text-white">
+                  <strong>+ {images.length - 3}</strong>
                 </div>
               )}
             </div>