navbar change font size

src/components/Navbar/Navbar.jsx

             mt:1,
             color: "black",
             fontWeight: "100",
+            fontSize: {
+              xs: "0.65rem",
+              sm: "0.65rem",
+              md: "0.75rem",
+            },
           }}
         >
           {colletion?.title?.toUpperCase()}
                 <Typography variant="body2"
                   className="navItem"
                   sx={{
-                    fontSize: "0.95rem",
-                    fontWeight: "400",
+                    fontSize: {
+                      xs: "0.65rem",
+                      sm: "0.65rem",
+                      md: "0.75rem",
+                    },
                     color: (isAtTop) ? "white" : "black",
                     transition: "all 0.3s ease-in-out",
                     ":hover": {

src/components/Navbar/components/MobileNav/MobileNav.jsx

       <Grid
         size={6}
         className="animate__animated animate__fadeIn animate__fast"
-        sx={{
-          padding:5,
-          backgroundImage: `url(${colletion?.image?.url})`,
-          backgroundSize: "cover",
-          backgroundRepeat: "no-repeat",
-          backgroundPosition: "center center",
-          height: "100%",
-          paddingTop: "45%",
-          position: "relative",
-          cursor: "pointer",
-          transition: "transform 0.3s ease",
-          ":hover": {
-            transform: "scale(1.1)"
-          }
-        }}
-        onClick={() => {
-          sessionStorage.setItem('amber-select-collection', JSON.stringify(colletion))
-          window.location.href = `/products`;
-        }}
+        sx={{pr:1, pb:1}}
       >
+        <Box
+          sx={{
+            backgroundImage: `url(${colletion?.image?.url})`,
+            backgroundSize: "cover",
+            backgroundRepeat: "no-repeat",
+            backgroundPosition: "center center",
+            paddingTop: "80%",
+            position: "relative",
+            cursor: "pointer",
+            mb:1,
+            transition: "transform 0.3s ease",
+            ":hover": {
+              transform: "scale(1.1)"
+            }
+          }}
+          onClick={() => {
+            sessionStorage.setItem('amber-select-collection', JSON.stringify(colletion))
+            window.location.href = `/products`;
+          }}
+        >
+        </Box>
         <Typography
-          variant="body1"
+          variant="body2"
           sx={{
-            color: "white",
-            fontWeight: "bolder",
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)"
+            color: "black",
+            fontSize: {
+              xs: "0.65rem",
+              sm: "0.65rem",
+              md: "0.75rem",
+            },
           }}
         >
           {colletion?.title?.toUpperCase()}
         </Typography>
       </Grid>
+
     )
 
   }
               if (collection?.length == 0) {
                 window.location.href = `/products`;
                 sessionStorage.removeItem('amber-select-collection')
-              } 
+              }
             }}
             sx={{
               backgroundColor: "rgba(0,0,0,0)",
               aria-controls="panel1-content"
               id="panel1-header"
             >
-              <Typography 
+              <Typography
                 onClick={() => {
                   sessionStorage.setItem('amber-select-product-type', productType)
                   window.location.href = `/products`;
                   sessionStorage.removeItem('amber-select-collection')
-                }} 
-                variant="body1" 
-                sx={{ fontWeight: "500" }}
+                }}
+                variant="body1"
+                sx={{
+                  fontSize: {
+                    xs: "0.65rem",
+                    sm: "0.65rem",
+                    md: "0.75rem",
+                  },
+                }}
               >
                 {productType?.toUpperCase()}
               </Typography>
             </AccordionSummary>
             <AccordionDetails>
               {(collection?.length > 0) &&
-                <Grid container sx={{maxHeight:"1000px", overflow:"scroll", overflowX:"hidden"}}>
+                <Grid container sx={{ maxHeight: "1000px", overflow: "scroll", overflowX: "hidden" }}>
                   {collection?.map((colletion) => {
                     return renderCollectionDisplay(colletion)
                   })}