having multipe rows/coloumns of media in mobile version (media grid)

Hi,

I have a grid that has logos of the client we worked with, and I added the people feature (because It was more customizable than just adding a gallery.

Please let me know how I can display 2 columns on the mobile phone, or 2colums and 2 rows in the mobile phone.

I tried editing the grid on CSS, and I was able to add another grid with 1fr 1fr, but it was not showing the next media in that grid.

Here is the link to my website, the password is ABC, and the part I want to edit is in the "Our work" page.

https://collie-bagpipe-xpg8.squarespace.com

Here is a screenshot of the part where I want to show 2 logos instead of only one.

Add to Design > Custom CSS > Then save & reload the site

/* Work Logos */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="63fe320dcf52386665059420"] ul {
    grid-template-columns: repeat(2,1fr) !important;
}
}