Help with custom CSS for Logo resizing on Transparent header

Hi there,

I'm new to Squarespace and working on my new site: http://stefandavidson.com

I used some custom CSS for the header/logo in the "About" and "Contact" pages so the logo could be transparent and work with the photo backgrounds.  However the logo in both of those pages is too large for desktop viewing, but ok with mobile. Looking for some help with CSS for making the logo smaller. I think the other pages look ok on both desktop/mobile, but I'm very open to some feedback/suggestions.

Thanks so much,

Stefan 

Change this code to Page Header Injection

.header-title-logo a {
  content: url("https://static1.squarespace.com/static/66cb289b5d8573139eab60b8/t/66dca2645e74a84e10241aa1/1725735524914/Black+on+transparent2_small1500.png")}

to this code

.header-title-logo a {
  content: url("https://static1.squarespace.com/static/66cb289b5d8573139eab60b8/t/66dca2645e74a84e10241aa1/1725735524914/Black+on+transparent2_small1500.png");
max-height: 100px;
}