How to display 2 images per row on mobile?

Site URL: http://porventura.pt/en/all-collection

Hello everyone,

Need help on this:

I need my summary pages (with all my products) to show 2 images per row on mobile like product pages do.

I've tried to paste some CSS that I've found on the forum, but it doesn't seem to work...

Also, I'd also need the summary pages to have the same hover (2nd image) as the product pages. Is that possible?

This is really important! 

Thank you very much in advance

Add to Design > Custom CSS

/* products 2 columns mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1573716009710_3722 .summary-item-list {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 10px;
}
}

Use this plugin to create hover effect

Thank you very much!! Works fine!