<div class="container"> <div class="row"> {% for study in studies %} <div class="md:col-6"> <a class="block mb-12 img-hover" href="{{ generatePath(app.request, study.linkedPageId, { 'caseStudy_slug': study.slug }) }}"> <div class="article-img"> <img class="max-w-full h-auto mb-8" src="{{ imageCache('/' ~ study.getFullImage5Path, 'zoomCrop', 1040, 720) }}" width="670" height="464" alt="{{ study.clientName }}"> </div> <div class="flex justify-between items-stretch"> {% if study.image %} <div class="w-1/2"> <img class="h-auto max-h-[60px] w-auto max-w-full mb-3" src="{{ imageCache('/'~ study.getFullImagePath, "cropResize", 200, 200) }}" height="100" width="100" alt="{{ study.clientName }}" loading="lazy" /> </div> {% endif %} <div class="{% if study.image %}w-1/2 border-l border-dark pl-4 {% else %}w-full{% endif %} flex flex-col justify-center"> <p class="text-sm mb-0 text-secondary"><strong>Project</strong></p> <h3 class="capitalize text-dark mt-0 mb-0">{{ study.projectName }}</h3> {% if study.createdAt %} <p class="text-sm text-dark mb-0">{{ study.createdAt|date('d F Y') }}</p> {% endif %} </div> </div> </a> </div> {% else %} <div class="col-12"> <p>No case studies found</p> </div> {% endfor %} </div></div>{{ knp_pagination_render(studies) }}