Hover effect not working for all elements in the same CSS code... 🙃

Site URL: https://hen-jaguar-t9ny.squarespace.com/

Hello ! I'm trying to create a hover effect on buttons. 

Weirdly, it works on one element in the list (the card image button) but not the newsletter button nor the classic medium button... This is what I added in the CSS panel :

.sqs-block-button-element--medium, .newsletter-block .newsletter-form-button, .sqs-block-image .design-layout-card .image-button a {
  box-shadow: 6px 6px #D66BA0;
  transition: all ease-in .05s;}

.newsletter-block .newsletter-form-button a:hover, .sqs-block-image .design-layout-card .image-button a:hover, .sqs-block-button-element--medium a:hover {
  box-shadow: none;
  transform: translateY(4px) !important;
  transition: all ease-in .05s;}

The box shadow is working nicely. But no hover effect on the medium button or the newsletter button...

Does the above CSS code look correct to you guys ? If not, could you please point out what to change ?

Thank you so much for your help !

Laura 

Your site is private. Can you setup password? We can check easier