Banner displaying differently on some mobile pages

Site URL: https://d4ad-nchems.squarespace.com/config/

Site password is D4ADLessons

I have 6 main pages on the site--landing plus 5 pages off of the main navigation.  I swear I have built them all exactly the same, but they do not all display the same on mobile (I am fine with how they look on the desktop).  The Resources page looks like I would like it to.  I have attached what it looks like on desktop and mobile.  However, the other pages only show two of the pics in the banner and have extra space around the text.  I have also attached examples of that.

I don't know why the extra space is on some pages, but not the resources page or why only two pics show on some and four on others.  I would like to eliminate extra space but when I try to change the section height to Small from Medium the text runs over the images.  I would also like to have more of the photos visible, but having at least four is acceptable (if anyone knows how to keep more of the photos visible I would appreciate advice there as well).

Thank you--

Craig

This code for Resources Page

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="610546cf93aa595288a1a51e"] {
    min-height: unset !important;
    height: 20vh;
    margin-top: 0vh;
}
}