How do I get hero image to resize on mobile?

Hi there,

I'd like my hero image to crop less on mobile. How can I get it to resize more appropriately?

Link to the site I'm working on: https://ellipsoid-roadrunner-h6t7.squarespace.com/

Thank you!

Try adding to Design > Custom CSS

/* resize mobile banner */
@media screen and (max-width:640px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
section#hero-image-foster {
    height: 220px;
}
}