Hide main header image only on mobile version

Site URL: http://www.clairedupreez.com

Hi,

Can somebody help me optimise my mobile site version? I want to hide the header image only on the mobile version as it impacts readability. 

I'm also looking for help on how to reduce logo sizes on the mobile version (make them display next to each other (maybe 2 per row) so they don't take up so much scroll time on mobile. 

Thanks in advance!!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* hide first section homepage image */
.homepage #page section:first-child .section-background img {
    visibility: hidden;
}
/* 3 logos per row */
.homepage .gallery-grid-wrapper {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}
}