Category Blog layout with float image left and text to right?

I found another post and added this CSS and the layout is what I was looking for...

.article-list .article .article-intro-image,
.article-list .article .article-featured-video,
.article-list .article .article-featured-audio,
.article-list .article .article-feature-gallery {
margin: 0;
}
.article-list .article-body {
display: contents;
}
.article-list .article {
display: grid;
grid-template-columns: .5fr 1fr;
gap: 0 20px;
}
.article-list .article > a,
.article-featured-audio,
.article-featured-video,
.article-feature-gallery {
grid-row: 2/6;
}
.article-header {
grid-row: 1/2;
grid-column: 1/-1;
}
.readmore {
grid-row: 5/6;
justify-self: end;
}

What CSS would I need to add to adjust the size of the images by 50%?

Right now the images are sized at 600pb; but, within the Category layout they are sized at 400px within the layout. Ideally I'd like them sized around 250px roughly.

Thanks
Trey

I ended up adding this to pull the introtext over to the left...

.article-introtext { margin-left: -155px!important; }

When I look at the page on a mobile phone the image is small and out of place when viewed.

Why is that happening and what is the solution to fix it?

Trey

Thanks Paul...

I was making it far more complicated than it should be...after sleeping on it I just decided to utilize bootstrap classes for columns...

{col-lg-2 col-sm-6} and {col-lg-10 col-sm-6} within the article.