Why do gallery items overlap on page load?

Question

css

the gallery (see see our works) is pumped with an isotope of filterability for the sake of it.
However, after loading the page, it appears in a bad shape, but if you resize the window, it is immediately corrected.
How to fix this "unheard of self-permissiveness"?
multi2.surge.sh
ps I will take comments on layout, if any.

Answer 1

You need to use this hack with imagesloaded
https://isotope.metafizzy.co/layout.html
At the bottom of this page is the section "imagesLoaded"

Answer 2

Does the isotope work after loading the page immediately? I fully admit that after the render, but before the images are loaded. To check, you can put console.log() before the isotope and in the onload of the html image. Or set img to a fixed size
I didn’t see any comments on the layout, it’s a regular landing page, just everything) The only thing is that in the mobile version on the first slider there are white indents between slides