<div class="container mt-12 text-xl font-light"> {% for grid in grids %} <div class="md:flex"> {% if loop.index is odd %} <div class="md:w-1/2"> <img src="{{ imageCache('/' ~ grid.getFullImagePath, 'cropResize', 1200, 800) }}" width="685" height="460" alt="{{ grid.title }}" loading="lazy" /> </div> {% endif %} {% if loop.index is even %} <div class="md:hidden md:w-1/2"> <img src="{{ imageCache('/' ~ grid.getFullImagePath, 'cropResize', 1200, 800) }}" width="685" height="440" alt="{{ grid.title }}" loading="lazy" /> </div> {% endif %} <div class="md:w-1/2 flex flex-col justify-center cms-area py-12 {{ loop.index is odd ? 'md:pl-12' }} {{ loop.index is even ? 'md:pr-12' }}"> <p><strong>{{ grid.subtitle }}</strong></p> <h2>{{ grid.title }}</h2> <div>{{ grid.content|raw }}</div> {% if grid.image2 or grid.image3 or grid.image4 %} <div class="flex space-x-2 mt-8"> {% if grid.image2 %} <img src="{{ imageCache('/' ~ grid.getFullImage2Path, 'scaleResize', 240, 160) }}" height="80" width="120" alt="{{ grid.title }}" loading="lazy" /> {% endif %} {% if grid.image3 %} <img src="{{ imageCache('/' ~ grid.getFullImage3Path, 'scaleResize', 240, 160) }}" height="80" width="120" alt="{{ grid.title }}" loading="lazy" /> {% endif %} {% if grid.image4 %} <img src="{{ imageCache('/' ~ grid.getFullImage4Path, 'scaleResize', 240, 160) }}" height="80" width="120" alt="{{ grid.title }}" loading="lazy" /> {% endif %} </div> {% endif %} </div> {% if loop.index is even %} <div class="hidden md:block md:w-1/2"> <img src="{{ imageCache('/' ~ grid.getFullImagePath, 'cropResize', 1200, 800) }}" width="685" height="440" alt="{{ grid.title }}" loading="lazy" /> </div> {% endif %} </div> {% endfor %}</div>