How can I change the page title (logo) in the mobile version for individual pages?

Hi folks, I have the following concern.

I have colored the title logo differently on some subpages of my website, using the following code (where I always inserted the corresponding 'collection').

#collection-6595797ec3b950376c30d202
{div.header-title-logo a {
content:url("my_colored_logo_title_version") !important;     
max-width: 100px;
margin-left: auto;
margin-right: auto;
}}

It works well on the desktop version, but unfortunately, it doesn't change in the mobile version. How can I fix this? Appreciate your help!

Site: https://maltemartenmethod.squarespace.com/
Pword: maltemartenmethod2023

You can use this new code.

To change on one page, just edit that page > Add a Block > Choose Code > Use this code

<style>
  header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/07/04/10/30/dragon-fly-8105990_1280.jpg);
  }
</style>

Thank you @tuanphan, that works. What about pages where I can't add a code block, like the shopping cart, checkout, or other shop pages? Is there a solution for that too? As I mentioned, the method I described above works for desktop, but unfortunately not for mobile.

With Shop Page, you can add code to Shop Page Header Code Injection

With Cart Page, use this code to Custom CSS box

 body#cart, body#Cart {
header#header img {
  	content: url(https://cdn.pixabay.com/photo/2023/07/04/10/30/dragon-fly-8105990_1280.jpg);
  }}

With Checkout, it is not possible, SS blocked code on this page for security reason.