I am trying to loop through a JSON file while using EJS and style each object like a card, but it keeps coming out looking like a child element inside each object looped through before it.

Here is my current EJS code

<section class="job-list">

    <% if (job.length > 0) { %>
        <div class="grid">
            <%for(var i = 0; i < job.length; i++){ %> 
                <article class="card listing-item">
                    <header class="card__header">
                        <img src="<%= job[i].logo %>" alt="">

                    </header>
                    <div class="card__content">
                        <div class="card_content_top">
                            <p class="position_postedAt"><%= job[i].postedAt %></p>
                            <p class="position_contract"><%= job[i].contract %></p>
                        </div>
                        <div class="card_content_bottom">
                            <h1 class="position__position"><%= job[i].position %></h1>
                            <h3 class="position__company">$<%= job[i].company %></h3>
                            <p class="position__location"><%= job[i].location %></p>

                        </div>

                    </div>
                    
            <% } %>        
        </div>
    <% } else { %>
        <h1>No Jobs found today!</h1>    
        <% } %>

</section>

I am currently getting this:

while trying to make it look like seperate cards:

I have tried playing around with using a grid with the grid class and the listing-item class, but it keeps styling them inside the others.