Art Gallery [VanillaJS | TailwindCSS]

Hola community :)

Glad to figure out a way to make the position: absolute element on the hero section of the desktop width centered using a grid on the parent div and a large gap making each children align end and start respectively:

<div
class="lg: grid lg: gap-[16rem] absolute
lg:grid-cols-[1fr,1fr] lg:left-[0] lg:right-0 lg:top-[11.5rem] "
>
<h1  class="lg:justify-self-end">MODERN <br/> ART GALLERY</h1>
<div  class="lg:justify-self-start">
<p>The arts in the collection...</p>
<button></button>
</div>

Beyond that, I wonder if there's a better way to switch between images on TailwindCSS depending on the screen's width. I put all the options of each image type and swapped them with display: none and display: block though I believe there's a better way to do so. Can you help me out on that, please?