Image size and padding in mobile

Site URL: https://www.medizen.es/

Hi!

I need to make smaller the 3 images on the 'Beneficios_home' page of the Home menu for mobile devices.
I tried this CSS but there is a lot of space in the image, very far from the text and off-center:

@media screen and (max-width:640px) {
  div#block-7a7e47bdae5ddd29adf7 img {
    width: 50% !important;
    height: auto !important;
    transform: translateX(-50%);
    left: 50% !important;
}
}

Could you please help me?

Thanks in advance,
Ana

website: www.medizen.es

Pwd (lock page): Medizentecuida

try include this code to your media query code

div#block-7a7e47bdae5ddd29adf7 .image-block-wrapper {
    padding-bottom: 50% !important;
}

Thanks for answering so fast 🙂

I see the right correction in the PC (mobile view), however in the phone the position is no corrected: the image appears cut off and far from the text below.

What can I do?

Thanks

I think maybe I have a solution:

<style>
@media screen and (max-width:640px) {
  div#block-7a7e47bdae5ddd29adf7 img {
    width: 50% !important;
    height: auto !important;
    transform: translateX(-50%);
     transform: translateY(50%);
          left: 25% !important;
}
div#block-7a7e47bdae5ddd29adf7 .image-block-wrapper {
    padding-bottom: 50% !important;
}
  
  }
</style>

is that correct? (i have no idea of css.. it's only test and error...)