improve image component styles

components/core/EnhancedImage/EnhancedImage.module.css

@@ -0,0 +1,14 @@
+.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,6 +1,7 @@
 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'],
@@ -33,7 +34,7 @@ const EnhancedImage: FC<Props & JSX.IntrinsicElements['img']> = ({
   })
 
   return (
-    <div ref={ref}>
+    <div ref={ref} className={s.root}>
       <Image {...props} />
     </div>
   )

components/product/ProductCard/ProductCard.module.css

@@ -122,9 +122,3 @@
 .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 {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}

components/product/ProductCard/ProductCard.tsx

@@ -70,17 +70,15 @@ const ProductCard: FC<Props> = ({
             variant={p.variants.edges?.[0]!}
           />
         </div>
-        <div className={cn(s.imageContainer)}>
         <EnhancedImage
           alt={p.name}
-            className={cn('w-full object-cover', s['product-image'])}
+          className="w-full object-cover"
           src={src}
           width={imgWidth}
           height={imgHeight}
           priority={priority}
           quality="90"
         />
-        </div>
       </a>
     </Link>
   )