diff --git a/app/[locale]/product/[handle]/page.tsx b/app/[locale]/product/[handle]/page.tsx
index b34f4ccea..760ecd6c7 100644
--- a/app/[locale]/product/[handle]/page.tsx
+++ b/app/[locale]/product/[handle]/page.tsx
@@ -221,7 +221,7 @@ async function RelatedProducts({ id }: { id: string }) {
               className="relative block h-full w-full transition-opacity duration-150 hover:opacity-90"
               href={`/product/${product.handle}`}
             >
-              <div className="relative block aspect-square overflow-hidden">
+              <div className="relative z-10 block aspect-square overflow-hidden">
                 <GridTileImage
                   alt={product.title}
                   label={{
diff --git a/components/grid/product-grid.tsx b/components/grid/product-grid.tsx
index 39c36ea3d..28317363d 100644
--- a/components/grid/product-grid.tsx
+++ b/components/grid/product-grid.tsx
@@ -11,8 +11,8 @@ function ProductGridItem({ item, priority }: { item: Product; priority?: boolean
 
   return (
     <div className={clsx('col-span-1 row-span-1 md:col-span-2 md:row-span-1')}>
-      <Link className="w-full bg-black/30" href={`/product/${item.handle}`}>
-        <div className="relative block aspect-square overflow-hidden ">
+      <Link className="block w-full pb-12" href={`/product/${item.handle}`}>
+        <div className="relative block aspect-square overflow-hidden">
           <GridTileImage
             src={item.featuredImage.url}
             fill
@@ -28,7 +28,7 @@ function ProductGridItem({ item, priority }: { item: Product; priority?: boolean
             currencyCode={item.priceRange.maxVariantPrice.currencyCode}
             size={size?.value}
           />
-          <div className="line-clamp-4 pt-2 font-extralight">{item?.summary?.value}</div>
+          <div className="line-clamp-4 pt-2 text-sm font-extralight">{item?.summary?.value}</div>
         </div>
       </Link>
     </div>