Hero Srcset Image

<div class="relative bg-black">

    {{!-- Media attribute:
    As the browser looks through the list of source elements, the first source whose media query matches is the one that
    is used. If no media queries match, then the <img> element is used.
    --}}


    <picture>
        <source media="(min-width: 1024px)" srcset="https://source.unsplash.com/DbsCBo3FtwI/2000x900, https://source.unsplash.com/DbsCBo3FtwI/4000x1800 2x">
        <source media="(min-width: 640px)" srcset="https://source.unsplash.com/DbsCBo3FtwI/1024x600, https://source.unsplash.com/DbsCBo3FtwI/2048x1200 2x">
        <source media="(max-width: 639px)" srcset="https://source.unsplash.com/DbsCBo3FtwI/640x900, https://source.unsplash.com/DbsCBo3FtwI/1280x1800 2x">
        <img src="https://source.unsplash.com/DbsCBo3FtwI/2000x900" alt="">
    </picture>

    {{!-- <div class="absolute bottom-0 left-0 right-0 py-6 bg-white bg-opacity-60 flex flex-col items-center justify-center">
        <p class="">TEXT thIS iS</p>
        <p class="text-sm">Subheading</p>
    </div> --}}
</div>