<!-- image left -->
<div class="border-y border-dark/10 flex flex-col md:flex-row overflow-hidden relative mb-10">
<div class="aspect-[16/9] md:aspect-auto w-full md:h-full md:w-1/2 relative md:absolute">
<picture class="">
<img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/640/480?random=1 800w, https://picsum.photos/640/480?random=1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/640/480?random=1">
</picture>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 flex justify-end">
<div class="md:w-1/2 p-8 sm:p-16 space-y-8">
<h3 class="text-4xl sm:text-4xl font-bold">Time to talk</h3>
<div class="text-xl">Facing mental health problems is hard enough. Don’t face them alone. Find out more about Time to Talk Day here.
</div>
<a href="#" class="link link-lg">Find out more</a>
</div>
</div>
</div>
<!-- image right -->
<div class="border-y border-dark/10 flex flex-col md:flex-row overflow-hidden relative mb-10">
<div class="aspect-[16/9] md:aspect-auto w-full md:h-full md:w-1/2 relative md:absolute right-0">
<picture class="">
<img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/640/480?random=1 800w, https://picsum.photos/640/480?random=1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/640/480?random=1">
</picture>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 flex justify-start">
<div class="md:w-1/2 p-8 sm:p-16 space-y-8">
<h3 class="text-4xl font-bold">Time to talk</h3>
<div class="text-xl">Facing mental health problems is hard enough. Don’t face them alone. Find out more about Time to Talk Day here.
</div>
<a href="#" class="link link-lg">Find out more</a>
</div>
</div>
</div>
{{#if left}}
<!-- image left -->
<div class="border-y border-dark/10 flex flex-col md:flex-row overflow-hidden relative mb-10">
<div class="aspect-[16/9] md:aspect-auto w-full md:h-full md:w-1/2 relative md:absolute">
<picture class="">
<img class="absolute w-full h-full object-cover" srcset="{{image}} 800w, {{image}} 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="{{image}}">
</picture>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 flex justify-end">
<div class="md:w-1/2 p-8 sm:p-16 space-y-8">
<h3 class="text-4xl sm:text-4xl font-bold">Time to talk</h3>
<div class="text-xl">Facing mental health problems is hard enough. Don’t face them alone. Find out more about Time to Talk Day here.
</div>
<a href="#" class="link link-lg">Find out more</a>
</div>
</div>
</div>
{{/if}}
{{#if right}}
<!-- image right -->
<div class="border-y border-dark/10 flex flex-col md:flex-row overflow-hidden relative mb-10">
<div class="aspect-[16/9] md:aspect-auto w-full md:h-full md:w-1/2 relative md:absolute right-0">
<picture class="">
<img class="absolute w-full h-full object-cover" srcset="{{image}} 800w, {{image}} 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="{{image}}">
</picture>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 flex justify-start">
<div class="md:w-1/2 p-8 sm:p-16 space-y-8">
<h3 class="text-4xl font-bold">Time to talk</h3>
<div class="text-xl">Facing mental health problems is hard enough. Don’t face them alone. Find out more about Time to Talk Day here.
</div>
<a href="#" class="link link-lg">Find out more</a>
</div>
</div>
</div>
{{/if}}
{
"image": "https://picsum.photos/640/480?random=1",
"left": true,
"right": true
}
No notes defined.