Editing Hero Image to Resize for Mobile Version

Developer help
1

My site URL is https://weact.chat/ and I am using the Penang theme on the Digital Ocean server. Awhile ago I edited the CSS to customize the hero image so that it could span the length of the screen. The original post is here Editing hero image in css - #8 by saleheen

Now the image does not resize for the mobile version and looks pretty awful as you can see.

IMG_0465.PNG
IMG_0465.PNG828×1792 165 KB

Currently this is what the code injection looks like:

<style>
.c-hero {
    padding: 48px 0;
    height: 750px;
    background-image: url(/content/images/2020/09/weact-header3.png);
    background-position: center;
    background-size: cover;
}
.c-hero-image {
    visibility: hidden;
} 
</style>

<style> div.c-hero__content {  display:none; } </style>

Please advise on how to solve! Thank you.