How do I Optimize Mobile Layout on MÉRIDA?

Site URL: https://theunapologetictraveler.co

My blog pages look perfect on mobile, as I have activated AMP. But the landing page on the Merida template is not optimized. 

The horizontal images on the landing page are not responsive on mobile, so they look chopped up. Is there a way for me to optimize it for mobile. The same images look great on the actual blog post, but not on the landing page. I'm attaching the screengrabs of what it currently looks like.

I'd really appreciate your help. Thank you.

This is my blog:

https://www.theunapologetictraveler.co/

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: unset;
    height: 40vh;
}
}

@tuanphan thank you for this. It worked for the first image. But there's one more horizontal image in the middle of the landing page, and that one is still the same. 

Is there a different solution for that? Please let me know. Thank you so much.

@tuanphan I checked again, and it messed up the rest of the posts on the landing page. There is a note in there that says, CSS doesn't work for cover pages.

Problem solved!!!

The wonderful Squarespace Team sent me this message, and it worked like magic. Thank you Squarespace! 

I thought I'd share their message here, in case someone needs the same solution:

"I see that you're having some trouble with the appearance of background images on your homepage on mobile. 

I've had a look and I see what you mean there. With background images, there will always be some degree of cropping, particularly on mobile devices. Having said that, there are some options that may help here. 

For example, adjusting the section height for the page sections where the background images can help to minimise cropping. I've shown an example in this video:

https://share.squarespace.com/geuqxl1g

You can also adjust the focal point for the images to control what area of the image displays, as shown at the end of the video.

We have some more information on those options in these guides:

Changing section heights - http://sqsp.link/thZuB3

Setting focal points - http://sqsp.link/f82cTI

The following guide also includes tips for troubleshooting cropping issues that may be helpful:

https://support.squarespace.com/hc/en-us/articles/223016508