Keep images at a proper visible scale on mobile

Hi,

Page: https://ellipse-teal-dl5w.squarespace.com/
Pass: 04

I have a awards section that looks great on desktop at its smallest width, still readable and spaced nice.

But on mobile phones it looks like this, which is too small and the spacing is too much.

How can I control the size and spacing of the award pictures when it gets to mobile, so that its not tiny. Maybe restrict it to a certain percentage?

Cheers,
Mac

Here is the code the section is using 

===================================
   GALLERY AWARDS CODE
===================================
*/

/* Gallery awards  - Desktop */
@media screen and (min-width: 1100px) {
    section[data-section-id="65c04f34561f77483f011ccb"] .gallery-grid-wrapper {
        grid-template-columns: repeat(7, 1fr) !important;
      
        padding-top: 13px !important; 
        padding-bottom: 40px !important; 
    }

    section[data-section-id="65c04f34561f77483f011ccb"] .gallery-grid-item:hover img {
        /* Reset or remove scale transformation on hover */
        transform: none !important;
    }
}
/* Gallery logos - Mobile */
@media screen and (max-width: 900px) {
    section[data-section-id="65c04f34561f77483f011ccb"] .gallery-grid-wrapper {
        grid-template-columns: repeat(5, 1fr) !important; 
      gap: 40px !important;
        padding-top: 13px !important; 
        padding-bottom: 40px !important; 
    }

    section[data-section-id="65c04f34561f77483f011ccb"] .gallery-grid-item:hover img {
        /* Reset or remove scale transformation on hover */
        transform: none !important;
    }
}
/* Gallery logos - Mobile */
@media screen and (max-width: 767px) {
    section[data-section-id="65c04f34561f77483f011ccb"] .gallery-grid-wrapper {
        grid-template-columns: repeat(4, 1fr) !important; 
      gap: 80px !important;
        padding-top: 13px !important; 
        padding-bottom: 40px !important; 
    }

    section[data-section-id="65c04f34561f77483f011ccb"] .gallery-grid-item:hover img {
        /* Reset or remove scale transformation on hover */
        transform: none !important;
    }
}



/*

Looks great thankyou