Image Resizing issues

ok so i have been looking to fix a problem i have caused i can revert it but then other problems occur here is a link to our site so far

https://cardtrading.uk/listing-category/pokemon-card-trades/
As you can see on this page all listing pictures are the same size and the way i have achieved this is using the following CSS edits

.hp-listing__image img, .hp-listing__images img {

display: block;
width: 100%;
height:500px;
object-fit: cover;)

now if you look on this link you will see the sizes i have adjusted make the other images on a listing display incorrect

This is my problem and i have worked it out that its something to do with this

.hp-listing__image img, .hp-listing__images img

I’m thinking the one set of CSS information is controlling two fields i have tried to separate them but nothing changes.

I’m basically trying to make all listings on the listing pages 500px high and about 300px wide and have the object-fit set to covered to fill the entire area with the picture . please let me know if you can help i am more than happy to provide you backend access for you to take a look yourself.