Why isn't "nth-of-type" working for my blog query loop?

Question

I've created a query loop to repeat blog posts but they all look the same. I want them the feature images to all have different sizes, border styles, padding etc. For the sake of simplicity, I'm just working with border radiuses for now.

Here's a screenshot of what I'm seeing. The code is applied to "Blog Loop" and should be impacting "Post Image".

Screenshot

Here's the actual page for anyone who wants to look:
https://bohobrandingco.com.au/absolutes/

Here's my code:

.post-image:nth-of-type(1){
border-radius:500px;
}
.post-image:nth-of-type(2) {
border-radius:10%;
}
.post-image:nth-of-type(3) {
border-radius:0px;
}
.post-image:nth-of-type(4) {
border-radius:200px;
}

I'm trying to create an asymmetrical two-column blog page but all the repeating posts look the same. I need them to look different.

I've tried using "nth-of-type(1)" in every element to see if I'm putting it in the wrong place but nothing has worked.