<div class="container">
 <div class="grid-container align-items-center">
 <% items.forEach(function(item) { %>
 <div class="grid-item">
 <div class="image-container"
 style="max-width: 100%; overflow: hidden;">
 <img alt="Banner Image"
 class="img-fluid"
 src="<%= item.image_url %>"
 style="width: 100%;
 object-fit: cover;">
 </div>
 <h2 class="mt-3" inline-edit="text" ><%= item.title %></h2>
 <div>
 <p class="mb-0" inline-edit="text" ><%= item.text %></p>
 </div>
 </div>
 <% }); %>
 </div>
</div>

<style>

.grid-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
 gap: 2rem;
 padding: 1rem;
 overflow-x: auto;
 justify-content: center;
}

.grid-item {
 width: 100%;
 text-align: start; /* Changed from center to start */
}

.grid-item img {
 margin: 0 auto;
 display: block; /* This keeps images centered while text aligns to start */
}
</style>