Shopify Atelier Responsive Banner Setup

I’m working with the Atelier theme on Shopify and want to show one set of hero-banner images on desktop and a different set on mobile. All the artwork is ready to go—I already have separate, optimised files for each screen size.

The task is limited to the homepage only. Rather than a single slider that swaps images automatically, I’d prefer two clearly defined banner sections: one that renders exclusively on larger screens, and a second that appears only on mobile devices.

Please update the theme code (or create a custom section/snippet) so that:
• the desktop banner never loads on mobile, and vice-versa—keeping page weight low
• both banners remain fully editable from the Shopify Customiser, just like any built-in section
• image focal points and overlay text, if any, stay responsive and centred

Once the change is in place, I’ll test across common breakpoints. I’ll consider the job complete when I can swap images in the Customiser and see the correct version on each device without affecting site speed or layout.