Need help formatting a custom watermark for both Desktop and Mobile

Hello – I'm currently designing a site for a client who has requested that a watermark appears on all images in gallery blocks (it's a photography scholarship website so they would like to protect the work against screenshots, etc.). I have followed this tutorial and have successfully added a watermark to all of my Slideshow Galleries and Simple Grid Galleries (we use both on this site). However, despite my best efforts, I have not been able to format it how I would like. Ideally, it would sit in the bottom left-hand corner of every image it's applied to (currently it is bottom-center). Because the galleries feature both horizontal and vertical imagery, it's a little tricky but I think I have it sorted for desktop. Mobile is a mess because it sits in a fixed position (in relation to the gallery block I suppose) but there are many instances where it's off of the image, fading into the background, etc. 

Is it possible to make this watermark responsive to the actual images inside the gallery as opposed to the block? 

Page that hosts all of the individual gallery pages: https://tuatara-quillfish-agra.squarespace.com/recipients
Password for the site is: bucharest23

This is what my code looks like for mobile, but if there's a way to make it responsive on desktop too that would be amazing. 

Help me Squarespacers – you're my only hope!

// * watermark for mobile * //

@media only screen and (max-width: 767px) {.gallery-grid-item-wrapper{
    position: realtive!important}

.gallery-grid-item-wrapper:after{
    content: " ";
    display: block;
    background-image: url(https://static1.squarespace.com/static/63b8358e8a934c02f382193f/t/63ef57a074c0413092600b04/1676629920466/Ian+Parry%2C+Secondary+Logo+B%2C+RGB%2C+Small+Watermark.png)!important;
    background-size: contain;
    position: absolute;
    width: 90px;
    height: 20px;
    left: .5rem;
    bottom: 0.2rem !important;
    opacity: .4
}

.gallery-slideshow-item-wrapper{
    position: realtive!important}

.gallery-slideshow-item-wrapper:after{
    content: " ";
    display: block;
    background-image: url(https://static1.squarespace.com/static/63b8358e8a934c02f382193f/t/63ef57a074c0413092600b04/1676629920466/Ian+Parry%2C+Secondary+Logo+B%2C+RGB%2C+Small+Watermark.png)!important;
    background-size: contain;
    position: absolute;
    width: 21.3px;
    height: 19.8px;
      repeat: none;
      position: center;
    bottom: 4rem !important;
    opacity: .4
}


.gallery-lightbox-item-wrapper{
    position: relative!important}

.gallery-lightbox-item-wrapper:after{
    content: " ";
    display: block;
    background-image: url(https://static1.squarespace.com/static/63b8358e8a934c02f382193f/t/63ef57a074c0413092600b04/1676629920466/Ian+Parry%2C+Secondary+Logo+B%2C+RGB%2C+Small+Watermark.png)!important;
    background-size: contain;
    position: absolute;
    width: 150px;
    height: 62.25px;
    bottom: 1rem !important;
    opacity: .4
}
  
}

Can you share the website URL and this gallery page? Thanks!

Yes of course! 

This is an example of one of the gallery pages: https://tuatara-quillfish-agra.squarespace.com/recipients/2021-emre-cakmak
Password for the site is bucharest23 

I would probably try changing the section height to S rather than M. I don't think that would have much impact on the desktop, but it will reduce the padding on mobile which should help the positioning.

Alternatively, if you get rid of this line it will center the watermark:

bottom: 1rem !important;

I'm not sure this is useful to you, but disabling right click and an overlay watermark like this is window dressing in terms of protecting content, it's a 2 second job to find the URL and download the image without the watermark. The only way to protect the image is to downscale it beyond usage and photoshop a large watermark across the entire image (but no doubt AI will render that useless too in the near future!).

Hi Ziggy – thanks so much for this.

I just changed the section height to S and removed the bottom: 1rem !important; line of code but it doesn't center the watermark? I had tried this before and I wonder if another piece of code is overriding the positioning? 

I do agree with you about the ability for people to save images – it's something we'd discussed with the client but at the very least, we wanted to take a few precautionary steps. But of course, any savvy internet users will know exactly how to access the images! 

3 minutes ago, D_Efinger said:

removed the bottom: 1rem !important; line of code but it doesn't center the watermark?

That's rather odd, it immediately jumped up in dev tools when I removed it. It does seem to be in there twice.

Yeah there are 2-3 different watermarks for mobile because it has to apply to the slideshow gallery, grid gallery and also on any lightbox images (clicked on from the grid gallery). So perhaps Squarespace is getting a little confused? Should I put each of the instances in its own:

@media only screen and (max-width: 767px) {.gallery-grid-item-wrapper{
    position: realtive!important}

... kind of boxes? Or is that overcomplicating things?