Mirror Masonry Grid desktop display on mobile with CSS

Site URL: https://www.morganedeschaetzen.com/

Hi everyone, I use gallery section on my portfolio; masonry grids with three columns, and would like the mobile view to match the desktop view exactly. I have tried several CSS codes found on the forum but none work to match both views perfectly. 

The following code is the closest I could get to achieving the same layout on mobile:

/* Masonry to grid mobile */
@media screen and (max-width:768px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(3,1fr) !important;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: 100% !important;
      width: 100% !important;
}
}

But the proportions are off (it's cropping both end of the gallery) and the images aren't fitting together as they do on desktop, the spacing is different too. I've attached screenshots so you can see both versions. 

Anyone here knows how to fix this? 

@mdeschaetzen Remove your code & use this new code

@media only screen and (max-width: 767px) {
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 3;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 1.5px!important;
        box-sizing: border-box;
    }

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

Hey @tuanphan thank you for your help, this is much better. Although it changes the order in which the images are presented (see screenshot) , is there any additional code I could use to keep the same arrangement? 

I don't have other code to fix this problem.