Blurry Images when using code to convert mobile gallery to single column

I am trying to achieve the following for my galleries- 2 images per column on the desktop, and one image per column (stacked) for mobile view.

I had to get a code to convert the mobile view to one column.

However, the code makes the images blurry. Here is the code-

@media screen and (max-width:767px) {
 .gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
}
}

Any thoughts?

Thank you!

Maybe image too small, if make it 1 columns will make images blurry, you try changing to 2 or 3 columns