Gallery | One Version for desktop and one for mobile

Hi there, 

my goal is to show a gallery on my homepage that has the same width as the summary blocks that follow. And when I then check my homepage on mobile, I'd want the gallery image to fill the display. (see images). 

I've learnt from Tuan that I need to create two galleries for that and that there are cool css codes for hiding a gallery on desktop and mobile. However it hasn't quite worked out yet. 

Also I would want to have either arrows shown left and right in the gallery or even better show "dots" as shown in the screenshots below. In the desktop version it shows the dots right below the gallery image, in the mobile version it is in the bottom, though inside the image. 

Any idea of 

- what kind of galleries I need to have in place on my homepage ?

- and what kind of code to add?

Or if you can recommend me a coder, I'd be very happy to receive recommendations.