<div class="max-w-md lg:max-w-none py-2 px-4 lg:px-0 lg:py-0 lg:col-span-3 lg:flex lg:h-8/12 xl:h-10/12 mt-8 xl:mt-0">
<a class="bg-bkg-white-mix lg:!bg-bkg flex flex-col lg:flex-1 rounded-bl-2xl rounded-tr-2xl transition ease-in-out duration-150 hover:shadow-xl" href="./index.html">
<div class="mb-4 shrink-0">
<picture class="block overflow-hidden rounded-tr-2xl w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-9@1200w.jpg">
</picture>
</div>
<div class="p-6 pt-2 flex flex-col flex-1">
<h2 class="text-button-surface leading-tight mb-3 text-xl font-semibold">Our markets</h2>
<p class="text-body">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor</p>
</div>
</a>
</div>
<div class="max-w-md lg:max-w-none py-2 px-4 lg:px-0 lg:py-0 lg:col-span-3 lg:flex lg:h-8/12 xl:h-10/12 mt-8 xl:mt-0">
<a class="bg-bkg-white-mix lg:!bg-bkg flex flex-col lg:flex-1 rounded-bl-2xl rounded-tr-2xl transition ease-in-out duration-150 hover:shadow-xl" href="{{ url | path}}">
<div class="mb-4 shrink-0">
{% render "@image-frame", { src: image.src, srcSet: image.srcSet, width: 1200, height: 675, frameModifier: 'rounded-tr-2xl' } %}
</div>
<div class="p-6 pt-2 flex flex-col flex-1">
<h2 class="text-button-surface leading-tight mb-3 text-xl font-semibold">{{ heading }}</h2>
<p class="text-body">{{ description }}</p>
</div>
</a>
</div>
{
"siteName": "UCEA",
"url": "./index",
"heading": "Our markets",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
"image": {
"src": "images/test-imagery/example1@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example1@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
No notes defined.