<div class="container mt-12 mb-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-4">{% 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>