isotope image overlapping with footer

Hi I am trying to use Isotope filter as following. :

    @extends('frontend.layouts._main2')
    @section('title', 'About Us')
    @section('content')

    
    
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>

    

    <div class="container "style="margin:300px">
    <div class="row">
        <div class="col-md-12">
        <div class="filters">
            <ul>
            <li class="is-checked" data-filter="*">All</li>
            @foreach($subProducts as $subProduct)
            <li data-filter=".{{$subProduct->id}}">{{$subProduct->title}}</li>
            
            @endforeach
            </ul>
        </div>
        </div>
        
        <div class=" grid">
            
            @foreach($subProducts2 as $subProducts22)


            <div class=" grid-item {{$subProducts22->id}}" data-category="{{$subProducts22->id}}">
            <img src="{{asset('uploads/images/subproducts/'.$subProducts22->image)}}" alt="" style="
        z-index: 10000000000000000;
    ">
            </div>
            @endforeach

    
        </div>
        </div>
        
    </div>
    </div>
    <script>
        var $grid = $('.grid').isotope({
    // options
    itemSelector: '.grid-item',
    layoutMode: 'fitRows',
    });

    // change is-checked class on buttons
    var $buttonGroup = $('.filters');
    $buttonGroup.on( 'click', 'li', function( event ) {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    var $button = $( event.currentTarget );
    $button.addClass('is-checked');
    var filterValue = $button.attr('data-filter');
    $grid.isotope({ filter: filterValue });
    });
        </script>

        @stop

The problem is that. the images go behind the footer although i increase the z-index I put margin padding the problem is still there. When i remove the layout, it works but i need to put it within the layout.