Enlarge site logo for mobile view

Hi,
I have a header element with a background pic. I want to enlarge the logo for mobile view. I have the following css.

.header-wrap{
background-image: url(“https://www.hundetraining-mit-roya.at/staging/wp-content/uploads/2023/04/wave_transparent_3.png”);
background-size: 100% 100%;
background-repeat: none;
padding-bottom: 70px;

}

.site-logo.mobile-header-logo a img {
height: 70px;
}

If I increase the height for .site-logo.mobile-header-logo then the background image also increases in height which I don’t want.

I was told to reduce the height of the background image for mobile, how do I do this? And will this solve the issue?

Thanks
Mel