<div class="overflow-x-hidden"> <div class="container"> {% for study in studies %} <div class="row flex"> <div class="{% if loop.index is odd %}lg:col-7 lg:order-1{% else %}lg:col-7 lg:order-2{% endif %} p-0 relative flex min-h-[200px]"> <div class="casestudy-image casestudy-image-{{ loop.index }} {% if loop.index is even %}casestudy-image-r{% endif %}"> <style scoped> .casestudy-image-{{ loop.index }}:after { background-image:url('{{ imageCache('/' ~ study.getFullImagePath, 'zoomCrop', 1500, 675) }}'); } @media screen and (min-width: 767px) { .casestudy-image-{{ loop.index }}:after { background-image:url('{{ imageCache('/' ~ study.getFullImagePath, 'zoomCrop', 3200, 1440) }}'); } } </style> </div> </div> <div class="{% if loop.index is odd %}lg:col-5 lg:order-2{% else %}lg:col-5 lg:order-1{% endif %} p-0 h-full"> <div class="bg-black black-full {% if loop.index is even %}black-full-l{% endif %} h-full text-white py-12 lg:py-32 xl:py-48"> <div class="casestudy-content {% if loop.index is odd %}pl-[15px] lg:pl-12{% else %}pr-[15px] lg:pr-12{% endif %}"> <img class="max-w-[50%] md:max-w-[30%] lg:max-w-[50%] max-h-[70px] h-auto mb-6" src="{{ imageCache('/' ~ study.client.getFullImagePath, 'cropResize', 380, 190) }}" loading="lazy" /> <h3 class="mb-0">{{ study.title }}</h3> <p>{{ study.scope }}</p> <a class="btnlink btnlink-dark mt-6" href="{{ generatePath( app.request, study.linkedPageId, {'study_slug' : study.slug } ) }}">Read More</a> </div> </div> </div> </div> {% else %} <div class="row py-12"> <div class="col-12"> <p>No case studies found</p> </div> </div> {% endfor %} </div> </div>