From cede435ed39c1679b28e81e46f4e26bfd199575d Mon Sep 17 00:00:00 2001
From: ankitrewar11 <ankitrewar11@gmail.com>
Date: Mon, 22 Jun 2026 06:59:50 +0530
Subject: [PATCH 1/5] fix: resolve card overflow and layout issues in Learn
 page sections

Signed-off-by: ankitrewar11 <ankitrewar11@gmail.com>
---
 .../Learn/LearnPage-Sections/learning-path.js         |  2 +-
 src/sections/Learn/LearnPage-Sections/workshops.js    | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/sections/Learn/LearnPage-Sections/learning-path.js b/src/sections/Learn/LearnPage-Sections/learning-path.js
index ca017c949b90f..851ead69498ee 100644
--- a/src/sections/Learn/LearnPage-Sections/learning-path.js
+++ b/src/sections/Learn/LearnPage-Sections/learning-path.js
@@ -89,7 +89,7 @@ const LearningPaths = () => {
         </div>
         <Row className="learning-path-cards">
           {data.learnPaths.nodes.map((tutorial) => (
-            <Col $sm={6} key={tutorial.id}>
+            <Col $sm={6} $md={4} $lg={4} $xl={4} key={tutorial.id}>
               <CardComponent tutorial={tutorial} path={`/learn/learning-paths/${tutorial.fields.learnpath}`} courseCount={getCoursesOfaLearningPath(tutorial.fields.learnpath).length} />
             </Col>
           ))}
diff --git a/src/sections/Learn/LearnPage-Sections/workshops.js b/src/sections/Learn/LearnPage-Sections/workshops.js
index 463d08ef17dc6..975958ebb8dbb 100644
--- a/src/sections/Learn/LearnPage-Sections/workshops.js
+++ b/src/sections/Learn/LearnPage-Sections/workshops.js
@@ -30,6 +30,8 @@ export const WorkshopsListWrapper = styled.div`
 
     img {
       height: 100%;
+      width: 100%;
+      object-fit: cover;
     }
   }
 
@@ -109,9 +111,10 @@ export const WorkshopsListWrapper = styled.div`
       padding: 8rem 4.5rem;
     }
     .workshops-card {
-      flex: 0 0 50%;
-      max-width: 50%;
-      margin: 1rem auto;
+      --workshop-columns: 3;
+      flex: 0 0 calc(100% / var(--workshop-columns));
+      max-width: calc(100% / var(--workshop-columns));
+      margin: 1rem 0;
     }
 
     .feedback-section {
@@ -253,6 +256,8 @@ const WorkshopsSection = () => {
                 <Col
                   $xs={12}
                   $sm={6}
+                  $md={4}
+                  $lg={4}
                   $xl={4}
                   className="workshops-card"
                   key={index}

From d5e0df1ab68362fe7ab41a4ddba5a588cd8a9dac Mon Sep 17 00:00:00 2001
From: ankitrewar11 <ankitrewar11@gmail.com>
Date: Tue, 23 Jun 2026 15:47:13 +0530
Subject: [PATCH 2/5] fix: prevent thumbnail image cropping and inconsistent
 sizing on workshop cards

Signed-off-by: ankitrewar11 <ankitrewar11@gmail.com>
---
 src/sections/Learn/LearnPage-Sections/workshops.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/sections/Learn/LearnPage-Sections/workshops.js b/src/sections/Learn/LearnPage-Sections/workshops.js
index 975958ebb8dbb..0399a33789c42 100644
--- a/src/sections/Learn/LearnPage-Sections/workshops.js
+++ b/src/sections/Learn/LearnPage-Sections/workshops.js
@@ -30,8 +30,6 @@ export const WorkshopsListWrapper = styled.div`
 
     img {
       height: 100%;
-      width: 100%;
-      object-fit: cover;
     }
   }
 

From e05f5cc01a4486c341394c83b9ac8988aefbb5e9 Mon Sep 17 00:00:00 2001
From: ankitrewar11 <ankitrewar11@gmail.com>
Date: Sat, 27 Jun 2026 23:01:39 +0530
Subject: [PATCH 3/5] fix: prevent thumbnail image cropping and inconsistent
 sizing on workshop cards

Signed-off-by: ankitrewar11 <ankitrewar11@gmail.com>
---
 src/sections/Learn/LearnPage-Sections/learning-path.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sections/Learn/LearnPage-Sections/learning-path.js b/src/sections/Learn/LearnPage-Sections/learning-path.js
index 851ead69498ee..b50746fc0ebdf 100644
--- a/src/sections/Learn/LearnPage-Sections/learning-path.js
+++ b/src/sections/Learn/LearnPage-Sections/learning-path.js
@@ -102,4 +102,4 @@ const LearningPaths = () => {
   );
 };
 
-export default LearningPaths;
\ No newline at end of file
+export default LearningPaths;

From d2e56cdefa148970c832845b0022167a38df57cc Mon Sep 17 00:00:00 2001
From: ankitrewar11 <ankitrewar11@gmail.com>
Date: Mon, 13 Jul 2026 12:59:34 +0530
Subject: [PATCH 4/5] fix: prevent thumbnail image cropping and inconsistent
 sizing on workshop cards

Signed-off-by: ankitrewar11 <ankitrewar11@gmail.com>
---
 src/sections/Learn/LearnPage-Sections/learning-path.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sections/Learn/LearnPage-Sections/learning-path.js b/src/sections/Learn/LearnPage-Sections/learning-path.js
index b50746fc0ebdf..851ead69498ee 100644
--- a/src/sections/Learn/LearnPage-Sections/learning-path.js
+++ b/src/sections/Learn/LearnPage-Sections/learning-path.js
@@ -102,4 +102,4 @@ const LearningPaths = () => {
   );
 };
 
-export default LearningPaths;
+export default LearningPaths;
\ No newline at end of file

From a1fbf0ee34be93e0a860a8f30193e566cb31caeb Mon Sep 17 00:00:00 2001
From: ankitrewar11 <ankitrewar11@gmail.com>
Date: Wed, 15 Jul 2026 14:22:21 +0530
Subject: [PATCH 5/5] fix: expand learning path cards to utilize full desktop
 width

Signed-off-by: ankitrewar11 <ankitrewar11@gmail.com>
---
 .../Learn/LearnPage-Sections/learning-path.js | 52 +++++++++++++++----
 1 file changed, 41 insertions(+), 11 deletions(-)

diff --git a/src/sections/Learn/LearnPage-Sections/learning-path.js b/src/sections/Learn/LearnPage-Sections/learning-path.js
index 851ead69498ee..b48d5942cde2d 100644
--- a/src/sections/Learn/LearnPage-Sections/learning-path.js
+++ b/src/sections/Learn/LearnPage-Sections/learning-path.js
@@ -18,15 +18,45 @@ const LearningPathsWrapper = styled.div`
     .learn-subtitle {
         text-align: center;
     }
-    .learning-path-cards{
+    .custom-container {
+        max-width: 1440px;
+        width: 100%;
+        margin: 0 auto;
+        padding: 0 2rem;
+    }
+
+    .learning-path-cards {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 2rem;
         margin: auto;
-        justify-content: center;
-        padding: 6rem 0;
+        padding: 4rem 0;
 
-        @media(max-width:500px){
-            padding: 6rem 2rem;
+        @media (max-width: 992px) {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+        @media (max-width: 768px) {
+            grid-template-columns: repeat(1, minmax(0, 1fr));
         }
     }
+
+    .card-item-wrapper {
+        display: flex;
+        width: 100%;
+        height: 100%;
+
+        > div {
+            max-width: none;
+            width: 100%;
+            margin: 0;
+            height: 100%;
+        }
+
+        .card-parent {
+            height: 100%;
+        }
+    }
+
     .see-more-button {
       text-align: center;
     }
@@ -82,22 +112,22 @@ const LearningPaths = () => {
 
   return (
     <LearningPathsWrapper>
-      <Container>
+      <div className="custom-container">
         <h1 className="learn-path-heading">Learning Paths</h1>
         <div className="learn-subtitle">
           <h3>Learn DevOps and platform engineering</h3>
         </div>
-        <Row className="learning-path-cards">
+        <div className="learning-path-cards">
           {data.learnPaths.nodes.map((tutorial) => (
-            <Col $sm={6} $md={4} $lg={4} $xl={4} key={tutorial.id}>
+            <div key={tutorial.id} className="card-item-wrapper">
               <CardComponent tutorial={tutorial} path={`/learn/learning-paths/${tutorial.fields.learnpath}`} courseCount={getCoursesOfaLearningPath(tutorial.fields.learnpath).length} />
-            </Col>
+            </div>
           ))}
-        </Row>
+        </div>
         <div className="see-more-button">
           <Button $primary title="Checkout all learning paths" $url="/learn/learning-paths" />
         </div>
-      </Container>
+      </div>
     </LearningPathsWrapper>
   );
 };