How do I resize this blue banner for mobile?

Site URL: https://giraffe-carnation-cfwm.squarespace.com/

Password - urbana

How can I make this blue section smaller on mobile?

The second banner! "COFFEE ROASTED WITH LOVE"

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1606741826112_8576 {
    padding: 0 !important;
}
[data-section-id="5fc4f3f4fa04221c71bb1e9a"] {
    min-height: 1vh !Important;
}
}

Also, I see your footer on tablet doesn't look good.

You can resize theme. If you want this, add to Home > Design > custom CSS

/* resize footer text tablet */
@media screen and (max-width:991px) and (min-width:768px) {
footer.sections p * {
    font-size: 12px;
}
}