fix: update CategoryCard styles and snapshots for improved image height responsiveness

Author: Kevin Koech

apps/trustlab/src/components/CategoryCard/CategoryCard.js

@@ -43,7 +43,11 @@ const CategoryCard = forwardRef(function CategoryCard(props, ref) {
             component="img"
             image={image.src}
             alt={image.alt ?? title}
-            sx={{ borderRadius: "10px", objectFit: "cover", height: 200 }}
+            sx={{
+              borderRadius: "10px",
+              objectFit: "cover",
+              height: { xs: 380, sm: 220 },
+            }}
           />
           <Box
             className="overlay"

apps/trustlab/src/components/CategoryCard/CategoryCard.snap.js

@@ -11,7 +11,7 @@ exports[`<CategoryCard /> renders unchanged 1`] = `
   >
     <img
       alt="Test image"
-      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1ev1ed9-MuiCardMedia-root"
+      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1tsuscl-MuiCardMedia-root"
       src="/test-image.jpg"
     />
     <div
@@ -94,7 +94,7 @@ exports[`<CategoryCard /> renders without link 1`] = `
   >
     <img
       alt="Test image"
-      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1ev1ed9-MuiCardMedia-root"
+      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1tsuscl-MuiCardMedia-root"
       src="/test-image.jpg"
     />
     <div

apps/trustlab/src/components/CategoryList/ResearchCategoryList.snap.js

@@ -21,7 +21,7 @@ exports[`<CategoryList /> renders unchanged 1`] = `
         >
           <img
             alt="Test image 1"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1ev1ed9-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1tsuscl-MuiCardMedia-root"
             src="/test-image-1.jpg"
           />
           <div
@@ -77,7 +77,7 @@ exports[`<CategoryList /> renders unchanged 1`] = `
         >
           <img
             alt="Test image 2"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1ev1ed9-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1tsuscl-MuiCardMedia-root"
             src="/test-image-2.jpg"
           />
           <div
@@ -133,7 +133,7 @@ exports[`<CategoryList /> renders unchanged 1`] = `
         >
           <img
             alt="Test image 3"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1ev1ed9-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1tsuscl-MuiCardMedia-root"
             src="/test-image-3.jpg"
           />
           <div

apps/trustlab/src/components/ToolkitList/ToolkitList.snap.js

@@ -28,7 +28,7 @@ exports[`ToolkitList renders initial toolkits 1`] = `
               >
                 <img
                   alt="A"
-                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1ev1ed9-MuiCardMedia-root"
+                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-17gpfwt-MuiCardMedia-root"
                   src="/img/a.jpg"
                 />
                 <div
@@ -78,7 +78,7 @@ exports[`ToolkitList renders initial toolkits 1`] = `
               >
                 <img
                   alt="B"
-                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1ev1ed9-MuiCardMedia-root"
+                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-17gpfwt-MuiCardMedia-root"
                   src="/img/b.jpg"
                 />
                 <div