Flatiron Template - is it possible to reduce size of index page thumbnail images?

Is it possible to reduce size of index page thumbnail images?

I've managed to alter the grid (using code I found elsewhere in the forum - see below) and it made the images smaller (for mobile only) , which looks nice. Ideally, I'd have 3x columns for Desktop/Tablet, and 2x for mobile - OR - reduce the thumbnail image sizes with some code. 

Anyone know how to do so?

@media only screen and (max-width: 640px) {
    #grid {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
   .item {
        height: auto!important;
    }
    .item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block !important;
        padding: 0px!important;
        box-sizing: border-box;
        top: unset !important;
    }

    .item img {
        height: 100%!important;
          width: 100%!important;
    }
}
 

To change on tablet, desktop, use this code under

@media only screen and (min-width:641px) {
    #grid {
        columns: 3;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
   .item {
        height: auto!important;
    }
    .item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block !important;
        padding: 0px!important;
        box-sizing: border-box;
        top: unset !important;
    }

    .item img {
        height: 100%!important;
          width: 100%!important;
    }
}

@tuanphan For mobile and tablet your code works fine but desktop it looks messed up. I deleted all the code and used just the code you provided and it has the same results. See attached

It doesn't seem to work passed 2099px. At 2100px it breaks

If you want to make code run on mobile + tablet only, use this new code

@media only screen and (max-width:1024px) {
    #grid {
        columns: 3;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
   .item {
        height: auto!important;
    }
    .item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block !important;
        padding: 0px!important;
        box-sizing: border-box;
        top: unset !important;
    }

    .item img {
        height: 100%!important;
          width: 100%!important;
    }
}