UX headache

Hi, I have those tow galleries. And When you click on a small img, the big img gets replaced with the img you clicked on. The problem is that it also has a text and the small imgs are off-screen on MOBILE. It feels kinda bad for the user experience and I don’t know what to do to make it feel better.
I was thinking to add a scroll element to scroll up to the big img when you click on the small one but I don’t how to do that in JS but also I don’t know how to cancel that effect on desktop.

Here is the page: https://relaxed-swirles-9b73a7.netlify.com/design.html

Also in #JavaScript _↴