fix: resolve card overflow and layout issues in Learn page sections

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>
           ))}
@@ -102,4 +102,4 @@ const LearningPaths = () => {
   );
 };
 
-export default LearningPaths;
+export default LearningPaths;

src/sections/Learn/LearnPage-Sections/workshops.js

@@ -109,9 +109,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 +254,8 @@ const WorkshopsSection = () => {
                 <Col
                   $xs={12}
                   $sm={6}
+                  $md={4}
+                  $lg={4}
                   $xl={4}
                   className="workshops-card"
                   key={index}