How can I make my liquid code responsive for all devices?

Store Design
1

Hi!

I have this code "

.image-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .image-container img { max-width: 100%; height: auto; }

{% assign max_width = 100 %}
{% assign images = “https://cdn.shopify.com/s/files/1/0632/8942/6171/files/2-removebg-preview.png?v=1677321161, https://cdn.shopify.com/s/files/1/0632/8942/6171/files/1-removebg-preview.png?v=1677321161” | split: ", " %}

{% for image in images %} max_width %}width="{{ max_width }}"{% endif %}> {% endfor %}
"

It contains two images which I want to show above product description: https://planetjunior.pk/products/magical-water-painting-markers-set-with-spoon

you can see the URL for reference. The first question is where to put it and second is that this code isn;t well optimized and responsive. Can anyone plz make it responsive to devices ?

want to achieve something like this interms of responsiveness. It should remain like this in all devices:

planetjuniorseo_0-1677323504068.png
planetjuniorseo_0-1677323504068.png631×500 78.2 KB

Here is the URL:https://kiddiewink.pk/products/parrot