Twenty Twelve: Site Title Image on Mobile

This is the CSS I am using right now:

.site-header h1 a {
background: url(‘https://minorshomesteadhoa.com/wp-content/uploads/2016/09/minors-homestead-site-title.png’) left center no-repeat;
height: 120px;
width: 70%;
color: rgba(0,0,0,0);
}

.site-header h1 a:hover {
color: rgba(0,0,0,0);
}

I would be fine with implementing CSS that reverts to the site title with no image on mobile too if there is no way to have that image fit within the site title element on mobile.