Portfolio thumbs & data-big="3" make layout shift.

Hello,

I use portfolio images as above the fold content. But it makes layout shift. Also data-big not loading as big image at first. after loading all images, the image convert to big, this also cause layout shift. I'm using latest version of canvas template. here is my code sample:

        <div class="w-100 mb-5 masonry-thumbs grid-container grid-6 bottommargin-lg" data-big="3" data-lightbox="gallery">
            <a class="grid-item" href="{{ asset('images/services/jewelry-retouching/engagement-ring.webp')}}" data-lightbox="gallery-item"><img class="lazy" data-src="{{ asset('images/services/jewelry-retouching/thumb/engagement-ring.webp')}}" alt="Engagement Ring Retouching"></a>
            <a class="grid-item" href="{{ asset('images/services/jewelry-retouching/wedding-ring.webp')}}" data-lightbox="gallery-item"><img class="lazy" data-src="{{ asset('images/services/jewelry-retouching/thumb/wedding-ring.webp')}}" alt="Wedding Ring Retouching"></a>
            <a class="grid-item" href="{{ asset('images/services/jewelry-retouching/pre-engagement-ring.webp')}}" data-lightbox="gallery-item"><img class="lazy" data-src="{{ asset('images/services/jewelry-retouching/thumb/pre-engagement-ring.webp')}}" alt="Pre-Engagement Ring Retouching"></a>
            <a class="grid-item" href="{{ asset('images/services/jewelry-retouching/necklace.webp')}}" data-lightbox="gallery-item"><img class="lazy" data-src="{{ asset('images/services/jewelry-retouching/thumb/necklace.webp')}}" alt="Necklace Retouching"></a>
            <a class="grid-item" href="{{ asset('images/services/jewelry-retouching/ring.webp')}}" data-lightbox="gallery-item"><img class="lazy" data-src="{{ asset('images/services/jewelry-retouching/thumb/ring.webp')}}" alt="Ring Retouch"></a>
            <a class="grid-item" href="{{ asset('images/services/jewelry-retouching/chain-bracelete.webp')}}" data-lightbox="gallery-item"><img class="lazy" data-src="{{ asset('images/services/jewelry-retouching/thumb/chain-bracelete.webp')}}" alt="Chain Bracelete Retouching"></a>
            <a class="grid-item" href="{{ asset('images/services/jewelry-retouching/pearl-earrings.webp')}}" data-lightbox="gallery-item"><img class="lazy" data-src="{{ asset('images/services/jewelry-retouching/thumb/pearl-earrings.webp')}}" alt="Pearl Earrings Retouching"></a>
            <a class="grid-item" href="{{ asset('images/services/jewelry-retouching/wed-ring.webp')}}" data-lightbox="gallery-item"><img class="lazy" data-src="{{ asset('images/services/jewelry-retouching/thumb/wed-ring.webp')}}" alt="Wed Ring Retouching"></a>
            <a class="grid-item" href="{{ asset('images/services/jewelry-retouching/womens-bracelets.webp')}}" data-lightbox="gallery-item"><img class="lazy" data-src="{{ asset('images/services/jewelry-retouching/thumb/womens-bracelets.webp')}}" alt="Womens Bracelets Retouching"></a>
            <a class="grid-item" href="{{ asset('images/services/jewelry-retouching/gold-pearl-ring.webp')}}" data-lightbox="gallery-item"><img class="lazy" data-src="{{ asset('images/services/jewelry-retouching/thumb/gold-pearl-ring.webp')}}" alt="Retouch Ring Photo"></a>
            <a class="grid-item" href="{{ asset('images/services/jewelry-retouching/platinum-engagement-ring.webp')}}" data-lightbox="gallery-item"><img class="lazy" data-src="{{ asset('images/services/jewelry-retouching/thumb/platinum-engagement-ring.webp')}}" alt="Ring Retouching"></a>
            <a class="grid-item" href="{{ asset('images/services/jewelry-retouching/beads-necklace.webp')}}" data-lightbox="gallery-item"><img class="lazy" data-src="{{ asset('images/services/jewelry-retouching/thumb/beads-necklace.webp')}}" alt="Beads Necklace Retouching"></a>
            <a class="grid-item" href="{{ asset('images/services/jewelry-retouching/simple-engagement-gold-ring.webp')}}" data-lightbox="gallery-item"><img class="lazy" data-src="{{ asset('images/services/jewelry-retouching/thumb/simple-engagement-gold-ring.webp')}}" alt="Simple Engagement Ring Retouching"></a>
            <a class="grid-item" href="{{ asset('images/services/jewelry-retouching/diamond-earring.webp')}}" data-lightbox="gallery-item"><img class="lazy" data-src="{{ asset('images/services/jewelry-retouching/thumb/diamond-earring.webp')}}" alt="Diamond Earring Retouching"></a>
            <a class="grid-item" href="{{ asset('images/services/jewelry-retouching/promise-ring.webp')}}" data-lightbox="gallery-item"><img class="lazy" data-src="{{ asset('images/services/jewelry-retouching/thumb/promise-ring.webp')}}" alt="Jewelry Retouching"></a>
        </div>