2 SQUARE images in a grid and text over it

Hello. This really starts bugging me!
What’s happening?

I have a section with a grid inside. 2 columns, 0 rows.
I also have 2 square images, one is a gif, the other png which I want to insert in the grid.
Gif goes right, png goes left on a desktop, on mobile png goes above, the gif below.
I need it to stay centered and always to go to the borders of the screen, total left, total right, and centered.

Then I need a text over png, ie. left png image.
How do I do that??

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @Nikola_snoopy and welcome As this forum is great source of solutions feel free to use search input field to find answers to your questions before you post new request. As your request is related to CSS here is link to article you can read to understand how to and after apply your knowledge in WF. Another great source of informations how to work with this platform is Webflow university