CTA: PREVIEW

<!-- 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&#x3D;1 800w, https://picsum.photos/640/480?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/640/480?random&#x3D;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&#x3D;1 800w, https://picsum.photos/640/480?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/640/480?random&#x3D;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>

<div class="max-w-7xl mx-auto px-4 sm:px-6 space-y-20 mt-20">

    <!-- image left -->
    <div class="border border-dark/10 rounded flex flex-col md:flex-row overflow-hidden mb-10">
        <div class="aspect-[16/9] md:aspect-auto w-full md:w-1/2 relative">
            <picture class="">
                <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/640/480?random&#x3D;1 800w, https://picsum.photos/640/480?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/640/480?random&#x3D;1">
            </picture>
        </div>
        <div class="flex-1 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>
    <!-- image right -->
    <div class="border border-dark/10 rounded flex flex-col md:flex-row overflow-hidden mb-10">
        <div class="aspect-[16/9] md:aspect-auto w-full md:w-1/2 relative md:order-last">
            <picture class="">
                <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/640/480?random&#x3D;1 800w, https://picsum.photos/640/480?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/640/480?random&#x3D;1">
            </picture>
        </div>
        <div class="flex-1 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 class="grid sm:grid-cols-2 md:grid-cols-3 gap-8 lg:gap-16 mb-10">

        <div class="bg-pink rounded flex flex-col overflow-hidden">
            <div class="flex-1 p-6 sm:p-10 space-y-6 text-center text-light">
                <h3 class="text-3xl font-bold">Time to talk</h3>
                <div class="text-lg">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-cta">Find out more</a>
            </div>
        </div>
        <div class="bg-green rounded flex flex-col overflow-hidden">
            <div class="flex-1 p-6 sm:p-10 space-y-6 text-center text-light">
                <h3 class="text-3xl font-bold">Time to talk</h3>
                <div class="text-lg">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-cta">Find out more</a>
            </div>
        </div>
        <div class="bg-secondary rounded flex flex-col overflow-hidden">
            <div class="flex-1 p-6 sm:p-10 space-y-6 text-center text-light">
                <h3 class="text-3xl font-bold">Time to talk</h3>
                <div class="text-lg">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-cta">Find out more</a>
            </div>
        </div>
    </div>

    <div class="grid sm:grid-cols-2 gap-8 lg:gap-16 mb-10">

        <div class="bg-blue rounded flex flex-col overflow-hidden">
            <div class="flex-1 p-6 sm:p-10 space-y-6 text-center text-light">
                <h3 class="text-3xl font-bold">Time to talk</h3>
                <div class="text-lg">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-cta">Find out more</a>
            </div>
        </div>
        <div class="bg-primary rounded flex flex-col overflow-hidden">
            <div class="flex-1 p-6 sm:p-10 space-y-6 text-center text-light">
                <h3 class="text-3xl font-bold">Time to talk</h3>
                <div class="text-lg">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-cta">Find out more</a>
            </div>
        </div>
    </div>

    <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-8 lg:gap-16 mb-10">
        <div class="border border-dark/10 rounded flex flex-col overflow-hidden">
            <div class="flex-1 p-6 sm:p-10 space-y-6 text-center text-dark">
                <h3 class="text-3xl font-bold">Kinetic Halo</h3>
                <div class="text-lg">Get 24/7 access to a team of experts for confidential support when you need it. Call 0800 123456.
                </div>
            </div>
            <a href="#" class="bg-primary flex px-6 py-5 text-light text-lg font-bold justify-center hover:bg-opacity-90 focus:outline-none focus:ring-0 focus:underline focus:underline-offset-4">Visit kinetic-halo.co.uk</a>
        </div>
        <div class="border border-dark/10 rounded flex flex-col overflow-hidden">
            <div class="flex-1 p-6 sm:p-10 space-y-6 text-center text-dark">
                <h3 class="text-3xl font-bold">Kinetic Halo</h3>
                <div class="text-lg">Get 24/7 access to a team of experts for confidential support when you need it. Call 0800 123456.
                </div>
            </div>
            <a href="#" class="bg-blue flex px-6 py-5 text-light text-lg font-bold justify-center hover:bg-opacity-90 focus:outline-none focus:ring-0 focus:underline focus:underline-offset-4">Visit kinetic-halo.co.uk</a>
        </div>
        <div class="border border-dark/10 rounded flex flex-col overflow-hidden">
            <div class="flex-1 p-6 sm:p-10 space-y-6 text-center text-dark">
                <h3 class="text-3xl font-bold">Kinetic Halo</h3>
                <div class="text-lg">Get 24/7 access to a team of experts for confidential support when you need it. Call 0800 123456.
                </div>
            </div>
            <a href="#" class="bg-secondary flex px-6 py-5 text-light text-lg font-bold justify-center hover:bg-opacity-90 focus:outline-none focus:ring-0 focus:underline focus:underline-offset-4">Visit kinetic-halo.co.uk</a>
        </div>
    </div>

    <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-8 lg:gap-16 mb-10">
        <div class="rounded flex flex-col overflow-hidden relative bg-dark">
            <picture class="opacity-60">
                <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/640/480?random&#x3D;1 800w, https://picsum.photos/640/480?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/640/480?random&#x3D;1">
            </picture>
            <div class="flex-1 py-20 px-16 sm:px-20 space-y-8 text-center text-light relative">
                <h3 class="text-4xl font-bold text-shadow-md">Gift a coffee</h3>
                <div class="text-xl text-shadow-md">Why not check-in with a co-worker over a coffee?</div>
                <a href="#" class="btn btn-light">Redeem a voucher</a>
            </div>
        </div>
    </div>

</div>