[GoDaddy Stout Theme] Header Image not Scaling on Mobile

I’m just starting my site, and as I was viewing the mobile version, I noticed that the header image was not scaling properly. The image shows up fully on the desktop version, but it is being cut off on mobile.

I’m using the stout theme provided by GoDaddy Managed WordPress. I think this is the bit of code that will need to be modified to solve the problem, but I haven’t been able to figure it out on my own.

Any help would be greatly appreciated!

.hero {
color: #ffffff;
margin-top: -100px;
min-height: 300px;
width: 100%;
padding-top: 100px;
-webkit-background-size: cover;
background-size: cover;
background-position: center top;
background-repeat: no-repeat; }
.hero .hero-inner {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
margin: 0 auto;
padding: 9% 2em; }
.hero .hero-inner:after {
content: ” “;
display: block;
clear: both; }
@media screen and (max-width: 900px) {
.hero .hero-inner {
max-width: none; } }
.hero .page-title {
margin-bottom: 0; }
.hero .widget {
margin-bottom: 1em;
padding-right: 30%;
font-size: 2em;
font-weight: 300; }
.hero .widget:last-child {
margin-bottom: 0; }
@media screen and (max-width: 900px) {
.hero .widget {
font-size: 1.5em;
padding-right: 0; } }
.hero .widget .widget-title {
font-size: 4rem;
margin-bottom: .1rem; }
@media screen and (min-width: 40.063em) {
.hero .widget .widget-title {
font-size: 7rem; } }
.hero .widget ul, .hero .widget ol {
padding-left: 0; }
.hero .widget ul li, .hero .widget ol li {
list-style: none; }
.hero .widget input, .hero .widget select, .hero .widget textarea {
color: #252f31; }
.hero label, .hero input, .hero select, .hero textarea {
display: inline;
width: auto; }