How to display SiteOrigin Image widgets side-by-side on mobile

I have a row of four SiteOrigin Image widgets that by default switches to one full width image for mobile below 780px width. I would like this to display two Image widgets side by side on mobile instead of one full width, could you please help me do this?

I currently have this in custom CSS:

@media (max-width: 780px){
#pgc-28-2-0 {
max-width: 50% !important;
}
#pgc-28-2-1 {
max-width: 50% !important;
}
#pgc-28-2-2 {
max-width: 50% !important;
}
#pgc-28-2-3 {
max-width: 50% !important;
}
}

I am using the North theme.

Thank you.