In the Five theme, how to change css of blogpost thumbnails?

In my blog post excerpts, all the thumbnails are squares:

I'd like to tweak them in the following ways:

1. Change these into circles
2. Give them drop shadows

So the css is something like this:

img {
 border-radius: 50%;
 width: 150px;
 -webkit-filter: drop-shadow(5px 5px 5px #222);
 filter: drop-shadow(5px 5px 5px #222);
}

I just don't know the proper selector to give so that it will only affect the blog thumbnails and not all images.

Also, if possible... is there any way to make them smaller and scale better with page resizes? They're kind of clunky at the moment, e.g. sometimes thumbnails are way too big for the text at a certain zoom!

@msollami try this code. If it doesn't work, please share url to check exact code.

.collection-type-blog.view-list article img {
      border-radius: 50%;
      width: 150px;
      -webkit-filter: drop-shadow(5px 5px 5px #222);
      filter: drop-shadow(5px 5px 5px #222);
    }

Thanks @tuanphan, it almost works! Here's the link with your css:

https://mikesollami.squarespace.com/ideas

I think your code needs a small edit, because now the shadow gets cutoff in a square and some of the images are stretched:

More examples from https://mikesollami.squarespace.com/code:

@msollami

.collection-type-blog.view-list article img {
   border-radius: 50%;
   -webkit-filter: drop-shadow(5px 5px 5px #222);
   filter: drop-shadow(5px 5px 5px #222);
   left: 0 !important;
   width: 100% !important;
   height: 100% !important;
}
.view-list article .excerpt-thumb .intrinsic .excerpt-image {
   display: block;
   height: 100%;
   overflow: unset !important;
}

Almost there, the only issues left is that the images aspect ratios are changed:

And I'd like to avoid the restyling for the one timeline post above, where it is meant to be a full width image...

@msollami YOu can remove width:100% height:100% and insert width:150px again :-D

Ok, @tuanphan but using this code:

/* CUSTOM CSS */
.collection-type-blog.view-list article img {
    border-radius: 50%;
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
    left: 0 !important;
    height:150px;
    width:150px;
}
.view-list article .excerpt-thumb .intrinsic .excerpt-image {
    display: block;
    width:150px;
    height:150px;
    overflow: unset !important;
}

Still gives these overflow issues:

@tuanphan I tried removing the width:100% height:100% and inserting width:150px. But is there a way to avoid the overflow issue I'm showing below:

/* CUSTOM CSS */
.collection-type-blog.view-list article img {
     border-radius: 50%;
     -webkit-filter: drop-shadow(5px 5px 5px #222);
     filter: drop-shadow(5px 5px 5px #222);
     left: 0 !important;
     height:100% !important;
     width:100% !important;
}
 .view-list article .excerpt-thumb .intrinsic .excerpt-image {
     display: block;
     width:150px;
     height:150px;
     overflow: unset !important;
 }