diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 60ebe5d03..924585bc1 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -12,8 +12,8 @@ interface Props {
   children?: ReactNode[] | Component[] | any[]
   product: ProductNode
   variant?: 'slim' | 'simple'
-  imgWidth: number
-  imgHeight: number
+  imgWidth: number | string
+  imgHeight: number | string
   priority?: boolean
 }
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 44a93c1d7..5304f691e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -80,8 +80,8 @@ export default function Home({
             key={node.path}
             product={node}
             // The first image is the largest one in the grid
-            imgWidth={i === 0 ? 1600 : 820}
-            imgHeight={i === 0 ? 1600 : 820}
+            imgWidth={i === 0 ? '65vw' : '30vw'}
+            imgHeight={i === 0 ? '45vw' : '22vw'}
             priority
           />
         ))}