How to change height + centring of text over images on mobile view?

Maybe this is a two part question:

1. I'm trying to figure out how to change the height of my index banners on mobile view (I've tried several things that don't work).

2. When I change the height of image (and probably the index banners too) the text over the images stops being vertically centred over the images. Is there an easy way to solve this with CSS? or even an example of how to do it with one image so I'll duplicate it for the others.

Thank you in advance for your help!

The site url is https://lily-smilodon-gzzc.squarespace.com/
And it's currently getting linked to http://www.moveintowellbeing.co.nz/ (private until finished pw: temporary)

My images on mobile are too small i want to increase the size of images only in mobile can u help me.

@JacquiNZ Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
figure img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
figure.Index-page-image.loaded {
    top: 0 !important;
}
.Parallax-item {
    top: 0 !important;
}
}