Different index-page thumbnail sizes on mobile

I want to have different sized thumbnail images on my index pages when visitors use a mobile.

Ideally the thumbnail images would scale down width and height at the same time as the size scaled down, instead of only scaling horizontally.

My website: www.leeburnett.co.uk

Thanks

Lee

Add to Home > Design > Custom CSS

@media screen and (max-width:900px) {
.homepage figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
.homepage article.index-item.has-item-image {
    height: 30vh;
}
}
@media screen and (max-width:640px) {
.homepage article.index-item.has-item-image {
    height: 22vh;
}
}