Inline & Poster Image text customisation

Site URL: https://www.peachofmyart.com/work/vivid-magazine

I'm trying to customise the associated text for an image so that it suits both mobile and desktop view.
Squarespace doesn't include any Style adjustment options for Inline Images in the Design section; and for Poster Images, the possible adjustments are not relevant to me.
I have a few options that would look clean but I'm chasing my own tail on my forums search and wasting f-loads of time.  I need you, Brains Trust, I really do.
Looking to know what solution you think is possible/easiest/best & the CSS to input. 

Bear with me.

There are a 3 options for layout I like, but they all need tweaking.

Option 1 - Image Style: Inline with text caption below
Design Problem - In mobile view it destroys the hierarchy of the page.
Could We? - Make it not show up in mobile view? Make it wrap tighter to the image & be smaller just for mobile?

Option 2 - Image Style: Inline with hover text justified at the bottom.
Design Problem - Can't seem to figure out how to change the colour/opacity of the hover bar or the text.
Could We? - Do that? This seems like it'll be the easiest solution.

Option 3 - Image Style: Inline with overlay text
Design Problem - Text is justified to the centre & looks like shit.
Could We? - Justify it to the bottom? And also if possible change the colour of the text?

Please help me so I can go to sleep.

You can do all. Do you still need help on this?

Which option do you want?