diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index 47b11a583..faf635560 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/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); } diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 12db7c705..238a2e7b2 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -51,8 +51,8 @@ const ProductCard: FC = ({ width={imgWidth} height={imgHeight} priority={priority} - quality="85" layout={imgLayout} + quality="85" /> ) : ( @@ -73,8 +73,8 @@ const ProductCard: FC = ({
{p.name} ))} @@ -125,8 +125,8 @@ export default function Home({ key={node.path} product={node} // The second image is the largest one in the grid - imgWidth={i === 1 ? 1280 : 820} - imgHeight={i === 1 ? 1280 : 820} + imgWidth={i === 1 ? 1080 : 540} + imgHeight={i === 1 ? 1080 : 540} /> ))}