Made pickleballs responsive to their respective devices

Author: Pattyee

src/components/board/pickleballs.tsx

@@ -5,20 +5,12 @@ import Pickleball2 from "@/public/bg-ball-2.svg";
 export default function Pickleballs() {
   return (
     <>
-      <div className="absolute top-[-10%] right-[-10%] w-[40vw] sm:w-[30vw] md:w-[25vw] lg:w-[20vw] z-[-1]">
-        <Image
-          src={Pickleball1}
-          alt="pickleball 1"
-          className="w-full h-auto"
-        />
+      <div className="absolute top-[-10%] right-[-10%] z-[-1] w-[40vw] sm:w-[30vw] md:w-[25vw] lg:w-[20vw]">
+        <Image src={Pickleball1} alt="pickleball 1" className="h-auto w-full" />
       </div>
 
-      <div className="absolute bottom-[-10%] left-[-10%] w-[40vw] sm:w-[30vw] md:w-[25vw] lg:w-[20vw] z-[-1]">
-        <Image
-          src={Pickleball2}
-          alt="pickleball 2"
-          className="w-full h-auto"
-        />
+      <div className="absolute bottom-[-10%] left-[-10%] z-[-1] w-[40vw] sm:w-[30vw] md:w-[25vw] lg:w-[20vw]">
+        <Image src={Pickleball2} alt="pickleball 2" className="h-auto w-full" />
       </div>
     </>
   );