Footer image block on hover, flex display problem

Hello There,

Password: not ready yet

I have a little issue with the following css code, whereas it does what I am expecting, however the image on hover does not keep the proper proportions if the browser window is resized (not full screen). Is there a way to have the hover image link to response the same way as the original block-image in term of sizing? Thanks

This is what I have now:

/* Replace ".sqs-block-image" with the class name of your image block */

/* Change the background image of the image block on hover */

   .sqs-block-image:hover img {

     visibility: hidden;

}

.sqs-block-image:hover {

    background-image: url('https://static1.squarespace.com/static/63bc9e4937adc93be7a356ee/t/6414a42fd8042c6b870d5c87/1679074351492/bowes+logo+web.png');

  background-size: 56px;

  background-repeat: no-repeat;

  background-position: center center;

}

worked perfectly, thanks!