Bedford - Hide Banner Images on Mobile Only Site-Wide

Site URL: https://mattie-courtright.squarespace.com/kennedy-school

Hi There, I'm working on a site with banner images that have embedded text. This proposes an issue when viewed on mobile devices, as it crops the banner image.

It would be ideal if I could hide site-wide the banner images when viewed on a mobile device. Specifically I'm trying to hide the banners on mobile for a group of pages within a folder, but am fine with hiding them site-wide if that is easier to implement. 

// Additionally I might need to know how to code the hamburger menu to become black so it is still viewable on the white background pages.

Template: Bedford
Site: https://mattie-courtright.squarespace.com/kennedy-school
Goal: Hide banner images on mobile view, site-wide

* Example of current mobile view of cropped page banner attached

Add to Home > design > Custom CSS

@media screen and (max-width:640px) {
.banner-thumbnail-wrapper img {
    opacity: 0;
}
}