calc() CSS problem on Mansory Gallery [ELEMENTOR]

Question

Im working on a mansory gallery from a custom field in an Elementor product page. I need to display that same images on mobile but 50% bigger so the text on them could be read.

So, as a begginer I inspected the code and come up with this:

@media only screen and (max-width: 1024px){
    
.e-gallery-image {
  padding-bottom: calc(var(--item-height) * 1.5) !important;}

.e-gallery-item {
    /*position: abosulte !important;*/
    top: calc(var(--percent-height) * 1.5) !important;}
}

But now the images exceed the gallery container downward and I've been days without reaching a solution.

Can anyone help me fix it or has a workarround for what I'm trying to achieve?

Here's the link: https://www.new.sonoffargentina.com/producto/sonoff-dw2-wifi/

Thanks!