diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css
index 7970c2ece..b6ecc2b77 100644
--- a/components/product/ProductView/ProductView.module.css
+++ b/components/product/ProductView/ProductView.module.css
@@ -61,6 +61,10 @@
   @apply absolute z-30 top-0 right-0;
 }
 
+.relatedProductsGrid {
+  @apply grid grid-cols-2 py-2 gap-2 md:grid-cols-4 md:gap-7;
+}
+
 @screen lg {
   .root {
     @apply grid-cols-12;
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index aafb00fef..c78357eb7 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -160,7 +160,7 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
       <hr className="mt-7 border-accent-2" />
       <section className="py-12 px-6 mb-10">
         <Text variant="sectionHeading">Related Products</Text>
-        <div className="grid grid-cols-2 py-2 gap-2 md:grid-cols-4 md:gap-20">
+        <div className={s.relatedProductsGrid}>
           {relatedProducts.map((p) => (
             <div
               key={p.path}