<a href="#" class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
<div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
<img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/84/342/245" alt="" />
</div>
<div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
<div>
<h2 class="mb-3 text-lg font-talke-semibold">
Cetera aetas
</h2>
<h1 class="mb-2 text-2xl uppercase font-talke-semibold">
Capio ultio pauci aequus clibanus tertius
</h1>
<p class="mb-5 text-lg font-talke-regular text-talke-light-blue">
Conduco verus ventosus contabesco capillus vobis thema sonitus. Victus subiungo cetera subseco sodalitas unde.
</p>
</div>
<div class="text-lg underline transition-colors duration-500 group-hover:decoration-inherit font-talke-semibold decoration-transparent">
Facilis
</div>
</div>
</a>
<a href="#"
class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
<div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
<img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105"
src="https://picsum.photos/id/{{imageId}}/342/245"
alt="" />
</div>
<div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
<div>
<h2 class="mb-3 text-lg font-talke-semibold">
{{category}}
</h2>
<h1 class="mb-2 text-2xl uppercase font-talke-semibold">
{{headline}}
</h1>
<p class="mb-5 text-lg font-talke-regular text-talke-light-blue">
{{text}}
</p>
</div>
<div class="text-lg underline transition-colors duration-500 group-hover:decoration-inherit font-talke-semibold decoration-transparent">
{{linkText}}
</div>
</div>
</a>
{
"imageId": 84,
"category": "Cetera aetas",
"headline": "Capio ultio pauci aequus clibanus tertius",
"text": "Conduco verus ventosus contabesco capillus vobis thema sonitus. Victus subiungo cetera subseco sodalitas unde.",
"linkText": "Facilis"
}
No notes defined.