From 16dee50536dfb2a4282e9b80000ccd21f846383a Mon Sep 17 00:00:00 2001
From: Aditya-Prakash14 <ap312038@gmail.com>
Date: Tue, 14 Jan 2025 09:05:05 +0530
Subject: [PATCH 1/2] Fix: Adjust case studies grid for different number of
 cards

---
 components/CaseStudyCard.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/CaseStudyCard.tsx b/components/CaseStudyCard.tsx
index 7b6bad8dadb2..bea1831ad7f5 100644
--- a/components/CaseStudyCard.tsx
+++ b/components/CaseStudyCard.tsx
@@ -18,12 +18,20 @@ export default function CaseStudyCard({ studies = [] }: ICaseStudyCardProps) {
     return null;
   }
 
+  let gridClass = 'lg:grid-cols-3'; // Default to 3 columns for larger screens
+
+  if (studies.length === 1) {
+    gridClass = 'lg:grid-cols-1';
+  } else if (studies.length === 2) {
+    gridClass = 'lg:grid-cols-2';
+  }
+
   return (
-    <div className='flex flex-wrap pt-10 lg:grid lg:grid-cols-3 lg:gap-8 lg:text-center'>
+    <div className={`mx-auto flex max-w-screen-lg flex-wrap gap-4 pt-10 lg:grid lg:gap-8 lg:text-center ${gridClass}`}>
       {studies.map((study, index) => (
-        <a key={index} href={`casestudies/${study.id}`}>
+        <a key={index} href={`casestudies/${study.id}`} className='w-full grow'>
           <div
-            className='max-w-sm overflow-hidden rounded-md border border-gray-200 bg-white p-4'
+            className='min-h-[300px] overflow-hidden rounded-md border border-gray-200 bg-white p-4 sm:p-6 md:p-8'
             data-testid='CaseStudyCard-main'
           >
             <span className='mr-2'>

From 783e97bb613cca9421807849754d04f8fc986415 Mon Sep 17 00:00:00 2001
From: Aditya-Prakash14 <ap312038@gmail.com>
Date: Tue, 14 Jan 2025 16:36:00 +0530
Subject: [PATCH 2/2] Use flexbox for case study cards and fix layout issues

---
 components/CaseStudyCard.tsx | 38 ++++++++++++++----------------------
 1 file changed, 15 insertions(+), 23 deletions(-)

diff --git a/components/CaseStudyCard.tsx b/components/CaseStudyCard.tsx
index bea1831ad7f5..3c9d4be2d2b6 100644
--- a/components/CaseStudyCard.tsx
+++ b/components/CaseStudyCard.tsx
@@ -18,31 +18,23 @@ export default function CaseStudyCard({ studies = [] }: ICaseStudyCardProps) {
     return null;
   }
 
-  let gridClass = 'lg:grid-cols-3'; // Default to 3 columns for larger screens
-
-  if (studies.length === 1) {
-    gridClass = 'lg:grid-cols-1';
-  } else if (studies.length === 2) {
-    gridClass = 'lg:grid-cols-2';
-  }
-
   return (
-    <div className={`mx-auto flex max-w-screen-lg flex-wrap gap-4 pt-10 lg:grid lg:gap-8 lg:text-center ${gridClass}`}>
-      {studies.map((study, index) => (
-        <a key={index} href={`casestudies/${study.id}`} className='w-full grow'>
-          <div
-            className='min-h-[300px] overflow-hidden rounded-md border border-gray-200 bg-white p-4 sm:p-6 md:p-8'
-            data-testid='CaseStudyCard-main'
-          >
-            <span className='mr-2'>
+    <div className='mx-auto max-w-screen-lg pt-10'>
+      <div className='flex flex-row justify-center gap-4 overflow-x-auto lg:gap-8'>
+        {studies.map((study, index) => (
+          <a key={index} href={`casestudies/${study.id}`} className='w-[350px] shrink-0 px-4'>
+            <div
+              className='flex h-full flex-col items-center justify-center overflow-hidden rounded-md border border-gray-200 bg-white p-4 text-center sm:p-6 md:p-8'
+              data-testid='CaseStudyCard-main'
+            >
               <img className='m-auto h-16' src={study.company.logo} alt={study.company.name} />
-            </span>
-            <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4'>
-              {study.company.description}
-            </Paragraph>
-          </div>
-        </a>
-      ))}
+              <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4'>
+                {study.company.description}
+              </Paragraph>
+            </div>
+          </a>
+        ))}
+      </div>
     </div>
   );
 }