CSS Custom code not working for resizing image block!

I am using this code to reduce the size of 'Amazon, Apple Books & Google Play Badges' images on my Home Index page on the Mobile version of website only (lifedeeperstill.squarespace.com) but nothing seems to be working. I upgraded my plan just to custom code! Would someone be able to check it out? 

#collection-5e26fcabf068c869feaa849f #block-yui_3_17_2_1_1577452920169_13860 {

@media screen and (max-device-width: 640px) {

.sqs-block-content .image-block-outer-wrapper  {

    width: 50%;

    height: 50%;

    margin: auto;        

   }

}

}

edit the code to

@media screen and (max-device-width: 640px) {
#collection-5e26fcabf068c869feaa849f #block-yui_3_17_2_1_1577452920169_13860 {
.sqs-block-content .image-block-outer-wrapper  {

    width: 50%;

    height: 50%;

    margin: auto;        
   }

}

}