Hello i have a image that need to be sized like i want for mobile device the problem is that when i put the size i want for mobile device ( smaller device ) the size apply for large device too as the screen show

]

[

here is my code

import { Outlet, Navigate } from 'react-router-dom';
import { motion } from "framer-motion"
import { MouseParallaxChild, MouseParallaxContainer } from "react-parallax-mouse";

const AuthLayout = () => {
  const IsAuthenthicated = false;
  return (
    <>
      {IsAuthenthicated ? (
        <Navigate to ="/" />
      ) : (
        <>
          <section className="flex flex-1 justify-center items-center flex-col py-10">
            <Outlet />
          </section>

          {/* Utilisation de l'image en tant que fond d'écran */}
          <div
            className="wall1 hover-blur sm:63 xl:block h-screen w-screen object-cover bg-no-repeat absolute top-0 left-0 z-0"
            style={{ backgroundImage: `url("/assets/images/wall1.png")`  }}
          />

          {/* Votre contenu ici */}
        </>
      )}
    </>
  )
}

export default AuthLayout