Estoy tratando de recorrer un archivo JSON mientras uso EJS y estilo cada objeto como una tarjeta, pero sigue apareciendo como un elemento secundario dentro de cada objeto que se recorre antes.

Aquí está mi código EJS actual

 <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>

Actualmente estoy recibiendo esto:

mientras intentaba que pareciera tarjetas separadas:

He intentado jugar con el uso de una cuadrícula con la clase de grid y la clase listing-item , pero sigue diseñándolas dentro de las demás.