From c1797eeebd3296b56057d2e43f005aa8ece74f42 Mon Sep 17 00:00:00 2001
From: Hager Eldakroury <hagerdakroury@gmail.com>
Date: Mon, 27 May 2024 14:44:57 +0000
Subject: [PATCH] fix(SLB-306): update grid layout

---
 .../ui/src/components/Organisms/PageContent/BlockInfoGrid.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/Organisms/PageContent/BlockInfoGrid.tsx b/packages/ui/src/components/Organisms/PageContent/BlockInfoGrid.tsx
index cbd7d6df0..2995132af 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockInfoGrid.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockInfoGrid.tsx
@@ -11,13 +11,13 @@ export function BlockInfoGrid(props: BlockInfoGridFragment) {
       <div className="container-content">
         <div
           className={
-            'flex flex-col md:flex-row flex-wrap justify-center gap-12 lg:gap-16 items-center md:items-start'
+            'flex flex-col md:grid md:grid-cols-2 lg:grid-cols-3 flex-wrap justify-center gap-12 items-center md:items-start'
           }
         >
           {props.gridItems.map((item, index) => (
             <div
               key={index}
-              className="flex flex-col items-center justify-start gap-4 px-3 md:px-4 text-center md:max-w-[20rem] lg:max-w-[24rem]"
+              className="flex flex-col items-center justify-start gap-4 px-3 md:px-4 text-center"
             >
               {item?.icon && iconMap[item?.icon]}
               <div className="flex flex-col items-center justify-center gap-3">