I want to have a different background image for each breakpoints. i.e mobile, tablet and desktop

below is the default tailwind backgrounds image. I am not sure how to add another other background images for tablet and desktop

<main class="mx-auto">
        <section
            class="min-h-screen bg-cover bg-no-repeat border-b border-gray-50 border-y-gray-300"
            style="margin-top: -56px;
            background-image: url({{url('assets/images/herobanner/testmale.jpeg')}});">

</section>
</main>