gap between two rows in responsive mobile version

Hi,

I have the following problem:
If a have a 2 column layout with 2 pictures in each column and this
layout collapses to the mobile version (so that the pictures are vertically under each other noch beside each
other like in desktop rendering) I will have a gap of 30px vertically between these two pictures.
The gap is produced by this code:
@media (max-width: 780px)
#pgc-7-2-0, #pgc-7-3-1, #pgc-7-6-1, #pgc-7-10-0, #pgc-7-16-0, #pgc-7-16-1, #pgc-7-16-2, #pgc-7-18-0 {
margin-bottom: 30px;
}

I have no idea why this gap ist there and how to remove it.

You can check that on https://int.magped.com
I put black frames around the pictures so that it is easy to see what happens.
If you open that page on your desktop browser and then reduce the with of the browser-window
until the layout collapses to mobile version you can see that there is this 30pix gap between the pictures.

Thanks for your help

:: Paul