improve the images

components/core/EnhancedImage/EnhancedImage.module.css

@@ -1,14 +0,0 @@
-.root {
-  @apply transform transition-transform duration-500;
-  height: 100%;
-  margin: auto;
-
-  &:hover {
-    transform: scale(1.05);
-  }
-
-  & div {
-    height: 100%;
-    margin: auto;
-  }
-}

components/core/EnhancedImage/EnhancedImage.tsx

@@ -1,7 +1,6 @@
 import { FC } from 'react'
 import { useInView } from 'react-intersection-observer'
 import Image from 'next/image'
-import s from './EnhancedImage.module.css'
 
 type Props = Omit<
   JSX.IntrinsicElements['img'],
@@ -34,7 +33,7 @@ const EnhancedImage: FC<Props & JSX.IntrinsicElements['img']> = ({
   })
 
   return (
-    <div ref={ref} className={s.root}>
+    <div ref={ref}>
       <Image {...props} />
     </div>
   )

components/product/ProductCard/ProductCard.module.css

@@ -122,3 +122,11 @@
 .wishlistButton {
   @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold  text-xs leading-6 cursor-pointer;
 }
+
+.product-image {
+  margin: auto;
+
+  & div {
+    margin: auto;
+  }
+}

components/product/ProductCard/ProductCard.tsx

@@ -72,7 +72,7 @@ const ProductCard: FC<Props> = ({
         </div>
         <EnhancedImage
           alt={p.name}
-          className="w-full object-cover"
+          className={cn('w-full object-cover', s['product-image'])}
           src={src}
           width={imgWidth}
           height={imgHeight}