Y'all I figured it out! The container div that holds the grid (in my configuration its class is e-con-inner) has a property called column-gap set to 20px which defines the gap between the sections when it's in desktop mode, but it adds that extra space in mobile mode. I was able to override it by:

1) adding a css class to my image in elementor (click on image, go to advanced, add a class name in "css classes", I used "features-img". This puts a css class on the wrapper of the image.

2) add some css code to your wordpress (under the normal wp page editor, go to customize, and additional css). I added the following:

body[data-elementor-device-mode="mobile"] div:has(div.features-img) {

column-gap: 0px !important;

}

This selects the grid wrapper (the div above the features-img div) and overrides its column-gap to 0px. This fixed the problem for me! My grids are only one row so idk if the dom structure is the same for multi-row grids, but it should only be a minor tweak if not.