hav_ery

Thank you A LOT @tuanphan

That worked perfectly! You're amazing 😄

I'll just add the two codes back to back to mark this as the solution :
// PORTFOLIO IMG NAV // body:not(.header--menu-open) .header .header-nav-wrapper .header-nav-item> a[href*="/portfolio"] { background-image: url(https://images.squarespace-cdn.com/content/61c1cab0cf9b832f2ffc6ae7/0ec7276c-0e6e-409d-945d-b90e5271be5b/PORTFOLIO+homebar.png?content-type=image%2Fpng); // change to your image link here background-position: center center; background-size: contain; background-repeat: no-repeat; color: transparent; height: 40px!important } nav.header-nav-list { align-items: center; } // PORTFOLIO IMG MOBILE // div.container.header-menu-nav-item [href="/portfolio"] { background-image: url(https://images.squarespace-cdn.com/content/61c1cab0cf9b832f2ffc6ae7/0ec7276c-0e6e-409d-945d-b90e5271be5b/PORTFOLIO+homebar.png?content-type=image%2Fpng); background-position: center center; background-size: contain; background-repeat: no-repeat; color: transparent !important; height: 40px!important; }  

With mobile, you can use this
div.container.header-menu-nav-item [href="/portfolio"] { background-image: url(https://images.squarespace-cdn.com/content/61c1cab0cf9b832f2ffc6ae7/0ec7276c-0e6e-409d-945d-b90e5271be5b/PORTFOLIO+homebar.png?content-type=image%2Fpng); background-position: center center; background-size: contain; background-repeat: no-repeat; color: transparent !important; height: 40px!important; }

Add height: 90px; to your code

you will have

add this CSS code to align Portfolio - Services item
nav.header-nav-list { align-items: center; }

try this line
background-size: cover; to
background-size: contain;  

You can try the following Css code to set the image for navigator
body:not(.header--menu-open) .header .header-nav-wrapper .header-nav-item> a[href*="/portfolio"] { background-image: url(https://images.unsplash.com/photo-1717445122373-7127aca71aee?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); // change to your image link here background-position: center center; background-size: cover; background-repeat: no-repeat; color: transparent; } Let me know how it works on your site

Once again, the Squarespace Wizard @Ziggy did it.
Thank you so much 🙂 

Scratch that, try this instead:
@media only screen and (max-width:767px) { .sqs-gallery-design-strip-slide { height: 200% !important; padding-bottom:100% !important; } .sqs-gallery-design-strip { height: 200% !important; top:-50%; } }

The WebMagician nailed it, once again!

Thank you @Ziggy ! 😄 

Yes we, can target just that block with this addition to the code:
#block-yui_3_17_2_1_1690790463207_390758 { .sqs-gallery-design-grid-slide { filter: grayscale(0); transition:ease-in-out 300ms; &:hover { filter: grayscale(1); } } }

Try this Custom CSS:
.sqs-gallery-design-grid-slide { filter: grayscale(0); transition:ease-in-out 300ms; &:hover {     filter: grayscale(1); } }

No problem, you too!

Thank you so much dear !  It worked !  🤩

Have a nice day ! 😄