Need different Custom Social Icon on Web vs. Mobile Navigation

I'm coming across an issue with separating the custom social icon code out for the web version vs the mobile navigation.  I am using different themes across different pages, so I am using a custom social icon code on specific pages that, say, need a black Google icon as opposed to the general white icon that I've coded in the custom CSS.  I put that code in the advanced section of each page, but I don't want it to affect the mobile navigation.  I can't find the code to separate them out.  I need that custom icon to stay white on all mobile pages.

This is the code I am using on the individual pages:

<style>

// Change color of social media icons on single page //

.sqs-svg-icon--list a:nth-of-type(4),
.header-actions-action--social a:nth-of-type(4),
.social-accounts .header-menu-actions-action:nth-child(4)
{
  svg {      
    display:none;   
  }   
  background-image: url(https:////static1.squarespace.com/static/65d7f5ef44cb2a472910d11d/t/65f1f37a5f09575737bea890/1710355322428/Google+Favicon+Black.png);   
  background-size: 95%;   
  background-repeat: no-repeat;   
}
  
.header-actions-action--social a:nth-of-type(4),
.social-accounts .header-menu-actions-action:nth-child(4)
{
  background-image: url(https://static1.squarespace.com/static/65d7f5ef44cb2a472910d11d/t/65f1f37a5f09575737bea890/1710355322428/Google+Favicon+Black.png) !important;   
  background-size: 95%;   
  background-repeat: no-repeat; 
  color : black;
}

  }

}
</style>

Site is https://dearjanesla.com

Thanks in advance for your help!

4 hours ago, Sam0smith said:

Please add this code : 

.social-accounts .header-menu-actions-action.mobile:nth-child(4) {
    background-image: url(https://static1.squarespace.com/static/65d7f5ef44cb2a472910d11d/t/65f1f43c5f09575737bef5e9/1710355516228/Google+Favicon+White.png) !important;
}

It will fix your issue on mobile device. 

AMAZING!  Thank you so much.  I've been unsuccessfully trying to attempt this for weeks now.