Why is isotop/masonry not working properly with pictures?

Question

JavaScript

Initially, I need to do this:
Task:
1) arrange the pictures as shown initially;
2) when changing the scale of the page, simultaneously reduce the images while maintaining 100%;
3) hover effect when hovering the mouse over pictures.
I have included jquery-3.4.1.min.js , imagesloaded.pkgd.js , isotope.pkgd.min.js and added the function in my main.js file:

var $grid = $('.grid').imagesLoaded( function() {
            // init Isotope after all images have loaded
            $grid.isotope({
                layoutMode: 'fitRows',
                itemSelector: '.grid-item',
                percentPosition: true,
                masonry: {
                    columnWidth: '.grid-sizer'
                }
            });
        });

It turned out like this (incorrect):

When the browser page was reduced, it turned out like this (images retain 100% appearance):

What am I doing wrong? Maybe something superfluous registered in SCSS? All of my pictures are unsized. In CodePen, I specified a fixed width and height.
I tried to display the code in CodePen , it turned out a little crooked: https://codepen.io/aptyyyp/pen/RmBpom