adding responsive illustration for smaller screens

components/ContentSection.tsx

@@ -267,7 +267,7 @@ const ContentSection = () => {
                   </div>
 
                   <div className="grid grid-cols-1 md:grid-cols-7 lg:grid-cols-7 grid-rows-2 gap-6 mb-16 mx-auto">
-                    <div className="col-span-1 md:col-span-3 lg:col-span-3 p-5 bg-bkg-3 border border-bkg-4 rounded-xl h-auto w-auto z-10 shadow-md bg-risk-one bg-contain bg-right-bottom bg-no-repeat">
+                    <div className="col-span-1 md:col-span-3 lg:col-span-3 p-5 bg-bkg-3 border border-bkg-4 rounded-xl h-auto w-auto z-10 shadow-md bg-risk-two md:bg-risk-one lg:bg-risk-one bg-contain bg-right-bottom bg-no-repeat">
                       <h3 className="text-white font-semibold text-xl tracking-wide my-2">
                       Unaudited smart contracts.  
                       </h3>

tailwind.config.js

@@ -18,17 +18,13 @@ module.exports = {
         'feature-three': "url('../public/img/feature3.png')",
         'feature-four': "url('../public/img/feature4.png')",
         'bg-texture': "url('../public/img/bgtexture.png')",
-        'bg-wave': "url('../public/img/bg-wave.png')",
         'risk-one': "url('../public/img/risk1.png')",
+        'risk-two': "url('../public/img/risk2.png')",
 
       }),
       height: {
         575: '575px',
         650: '650px',
-        675: '675px',
-        700: '700px',
-        750: '750px',
-        1750: '1750px',
       },
       cursor: {
         help: 'help',