Remove margin between two widgets with CSS

Hi,

There is a “margin-bottom: 30px” I would like to remove that exist between a SiteOrigin Image Widget and a SiteOrigin Headline widget inserted into one row, the image widget on top and the headline widget below that, by using custom CSS.

<div class="so-panel widget widget_sow-image panel-first-child" id="panel-297-0-0-0" data-index="0"><div class="so-widget-sow-image so-widget-sow-image-default-1c389ca87c1a"></div>

So far only the following works:

#panel-297-0-0-0.so-panel.widget.widget_sow-image.panel-first-child {
margin-bottom: 0;
}

However, there are 20 or more similar widgets, and it’s a bit time consuming, plus what happens when the panel id’s change?

I tried adding a custom class to the SiteOrigin Image Widget but there is no effect.

Is there perhaps a better way?

Kind regards
Duncan