remove feature on mobile screen

src/pages/Products/Product.jsx

 
 
       <SocialMedia />
+      <Box sx={{
+        display:{
+          xs:"none",
+          sm:"none",
+          md:"block"
+        }
+      }}>
       <Feature />
+      </Box>
+      
     </Box>
 
   )

src/pages/Products/index.jsx

-import {useEffect, useState} from 'react'
+import { useEffect, useState } from 'react'
 import PageTitle from '../../components/PageTitle'
 import Filter from '../../components/Filter'
 import ProductList from '../../components/ProductList'
 
   const [collection, setCollection] = useState(null)
 
-  useEffect(()=>{
-    
+  useEffect(() => {
+
     // if user come from select collection
-    if(sessionStorage.getItem('amber-select-product-type')){
+    if (sessionStorage.getItem('amber-select-product-type')) {
 
-      if(sessionStorage.getItem('amber-select-collection')){
+      if (sessionStorage.getItem('amber-select-collection')) {
         let selectCollection = JSON.parse(sessionStorage.getItem('amber-select-collection'))
         setCollection(selectCollection)
       }
-      
-    }else{
+
+    } else {
       window.location.href = '/'
     }
 
-  },[])
+  }, [])
 
   return (
     <>
       <Box sx={{
-        mt:10,
+        mt: 10,
         px: {
           xs: 2,
           md: 5,
           lg: 10
         }
       }}>
-        {collection && <PageTitle title={collection?.title} image={collection?.image?.url} /> }
+        {collection && <PageTitle title={collection?.title} image={collection?.image?.url} />}
         <ProductList />
         <SocialMedia />
-        <Feature />
+        <Box sx={{
+          display: {
+            xs: "none",
+            sm: "none",
+            md: "block"
+          }
+        }}>
+          <Feature />
+        </Box>
       </Box>
     </>
   )