magento2 – Using different background images for desktop/mobile display on blocks – widgets

I created a block and a widget in magento 2.4 page top to display as a banner promotion, but i want a different display for desktops and different for mobile.

what i have tried:

<div style="padding: 14px; text-align: center;  background-image: url('https://s1.gifyu.com/images/desktop.gif'); background-image: center center; background-image: cover; background-image: no-repeat; background-image: fixed; color: #fff; font-weight: bold; font-size: 20px; border-top: 3px solid #f28d49;">Children's Day Sale. Get 5% OFF for <a style="color: #fff; text-decoration: underline;" href="https://tucsons.ng/index.php/fashion/children.html">ALL Children's wears</a>. Shop Now! <span style="text-decoration: underline;">Children's Day 2021</span></div>

The above code does not display well on mobile.

my question how do i define a different background image for mobile or tablets…….???

what i tried:

@media (min-width: 481px) and (max-width: 1024px) {
    body {<div style="padding: 14px; text-align: center; background-image: url('https://s1.gifyu.com/images/nivea.gif'); background-image: center center; background-image: cover; background-image: no-repeat; background-image: fixed; color: #fff; font-weight: bold; font-size: 20px; border-top: 3px solid #f28d49;">Children's Day Sale. Get 5% OFF for <a style="color: #fff; text-decoration: underline;" href="https://tucsons.ng/index.php/fashion/children.html">ALL Children's wears</a>. Shop Now! <span style="text-decoration: underline;">Children's Day 2021</span></div>
    }