Need to change the homepage logo on mobile only.

Site URL: https://the-social-foundry.squarespace.com/

Hi, 

I need to change the logo on the homepage for mobile only to the lighter version of the logo. I have managed to do it for desktop but it's still not working on the mobile.

I have tried to use this code: 

/**mobile logo**/
@media screen and (max-width:767px) {
#collection-62fb227fa851d622757b00d8 .header-display-mobile .header-title-logo img {
content: url('https://static1.squarespace.com/static/62d489a72f708047f088a254/t/63167e1e74c45411df316e4d/1662418462966/SF_LINEN-15.png') !important;
max-height: !important;
  }
}

See screen recording below. 

Website: https://the-social-foundry.squarespace.com/
Password: social 

Thanks

Use this code for mobile logo

.header-mobile-logo img {
    content: url(https://static1.squarespace.com/static/62d489a72f708047f088a254/t/63167e1e74c45411df316e4d/1662418462966/SF_LINEN-15.png);;
}