Logo Size with Media Queries

Hi –

Apologies in advance if this is posted in the wrong place (first time poster here).

Anyway, I am trying to adjust the size of my logo in the upper left corner of my site. It appears that the logo is within a restrictive wrapper. I was able to change the logo size and make the wrapper overflow visible, which worked for full browser size.

However, at the phone size – the visible overflow makes the logo run off the page. I tried writing media queries for the .site-branding-wrapper but nothing has worked so far.

Maybe I’ve gone down a rabbit hole with the media queries and I should be using some other type of code – I’m open to whatever will allow the logo to be bigger than the default size and still be responsive for a tablet and phone.

Here’s how far I got with the code:

@media screen and (min-width: 1200px) {
.site-branding-wrapper {
overflow: visible;
}
}

img.custom-logo {
max-width: 35em;
}

Thanks in advance!

The page I need help with: [log in to see the link]