Min images

components/product/ProductCard/ProductCard.module.css

@@ -125,15 +125,11 @@
 }
 
 .imageContainer {
-  & > div {
-    & > div {
-      height: 100%;
-      margin: 0 auto;
-    }
-  }
+  overflow: hidden;
+  @apply flex items-center justify-center;
 }
 
-.product-image {
-  height: 120% !important;
-  top: -10% !important;
+.image {
+  object-fit: cover;
+  transform: scale(1.2);
 }

components/product/ProductCard/ProductCard.tsx

@@ -51,8 +51,8 @@ const ProductCard: FC<Props> = ({
               width={imgWidth}
               height={imgHeight}
               priority={priority}
-              quality="85"
               layout={imgLayout}
+              quality="85"
             />
           </div>
         ) : (
@@ -73,8 +73,8 @@ const ProductCard: FC<Props> = ({
             </div>
             <div className={s.imageContainer}>
               <Image
+                className={s.image}
                 alt={p.name}
-                className={cn('w-full object-cover', s['product-image'])}
                 src={src}
                 width={imgWidth}
                 height={imgHeight}