Resizing Image in Code Block with CSS

Site URL: https://parrot-coconut-lrey.squarespace.com/

Hey there, 

I'm looking to display a logo at a specific size in my footer, however when I have resized it outside of Squarespace it keeps on showing up blurry so I'm looking for a workaround with a JPG which is crisp but too big.

I have inserted a HTML Code Block in the footer with the following code: 

<a href="www.artscouncil.org.uk" class="arts-council-logo"><img src="https://static1.squarespace.com/static/6036247f4f16d770dff790e6/t/603683bfc100495c1d604681/1614185408740/lottery_Logo_Black+RGB.jpg" alt="Arts Council Logo"/></a>

And I have used the following CSS, but it has not effected the image at all.

.arts-council-logo {
  height: 70px;
  width: 100%;
}

Might be being really stupid here but I appreciate the time anyone takes to respond 🙂

Hi. What is password?

Try:

.arts-council-logo img{
  height: 70px;
  width: 100%;
}