News

<div class="w-full h-[300px] relative">
    <picture class="">
        <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
    </picture>
    <div class="absolute w-full h-full bg-gradient-to-t from-black/75"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-10 h-full flex items-end relative">
        <h1 class="text-5xl font-bold text-white text-shadow-md">Mental health</h1>
    </div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 space-y-16 mt-16">

    <!-- 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/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?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">
        <div class="border border-dark/10 rounded flex flex-col overflow-hidden">
            <a href="#" class="aspect-[16/9] sm:aspect-auto sm:h-[280px] relative bg-dark\10" tabindex="-1">
                <picture class="">
                    <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                </picture>
            </a>
            <div class="flex-1 p-8 space-y-4">
                <h4 class="text-2xl font-bold">I'm feeling more anxious or down than usual</h4>
                <div class="hidden sm:block text-lg">If you’re finding that your stress and worry is getting in the way, it’s time to access these wellbeing services.</div>
                <a href="#" class="link">Find out more</a>
            </div>
        </div>
        <div class="border border-dark/10 rounded flex flex-col overflow-hidden">
            <a href="#" class="aspect-[16/9] sm:aspect-auto sm:h-[280px] relative bg-dark\10" tabindex="-1">
                <picture class="">
                    <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                </picture>
            </a>
            <div class="flex-1 p-8 space-y-4">
                <h4 class="text-2xl font-bold">I'm feeling more anxious or down than usual</h4>
                <div class="hidden sm:block text-lg">If you’re finding that your stress and worry is getting in the way, it’s time to access these wellbeing services.</div>
                <a href="#" class="link">Find out more</a>
            </div>
        </div>
        <div class="border border-dark/10 rounded flex flex-col overflow-hidden">
            <a href="#" class="aspect-[16/9] sm:aspect-auto sm:h-[280px] relative bg-dark\10" tabindex="-1">
                <picture class="">
                    <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                </picture>
            </a>
            <div class="flex-1 p-8 space-y-4">
                <h4 class="text-2xl font-bold">I'm feeling more anxious or down than usual</h4>
                <div class="hidden sm:block text-lg">If you’re finding that your stress and worry is getting in the way, it’s time to access these wellbeing services.</div>
                <a href="#" class="link">Find out more</a>
            </div>
        </div>
        <div class="border border-dark/10 rounded flex flex-col overflow-hidden">
            <a href="#" class="aspect-[16/9] sm:aspect-auto sm:h-[280px] relative bg-dark\10" tabindex="-1">
                <picture class="">
                    <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                </picture>
            </a>
            <div class="flex-1 p-8 space-y-4">
                <h4 class="text-2xl font-bold">I'm feeling more anxious or down than usual</h4>
                <div class="hidden sm:block text-lg">If you’re finding that your stress and worry is getting in the way, it’s time to access these wellbeing services.</div>
                <a href="#" class="link">Find out more</a>
            </div>
        </div>
        <div class="border border-dark/10 rounded flex flex-col overflow-hidden">
            <a href="#" class="aspect-[16/9] sm:aspect-auto sm:h-[280px] relative bg-dark\10" tabindex="-1">
                <picture class="">
                    <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                </picture>
            </a>
            <div class="flex-1 p-8 space-y-4">
                <h4 class="text-2xl font-bold">I'm feeling more anxious or down than usual</h4>
                <div class="hidden sm:block text-lg">If you’re finding that your stress and worry is getting in the way, it’s time to access these wellbeing services.</div>
                <a href="#" class="link">Find out more</a>
            </div>
        </div>
        <div class="border border-dark/10 rounded flex flex-col overflow-hidden">
            <a href="#" class="aspect-[16/9] sm:aspect-auto sm:h-[280px] relative bg-dark\10" tabindex="-1">
                <picture class="">
                    <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                </picture>
            </a>
            <div class="flex-1 p-8 space-y-4">
                <h4 class="text-2xl font-bold">I'm feeling more anxious or down than usual</h4>
                <div class="hidden sm:block text-lg">If you’re finding that your stress and worry is getting in the way, it’s time to access these wellbeing services.</div>
                <a href="#" class="link">Find out more</a>
            </div>
        </div>
        <div class="border border-dark/10 rounded flex flex-col overflow-hidden">
            <a href="#" class="aspect-[16/9] sm:aspect-auto sm:h-[280px] relative bg-dark\10" tabindex="-1">
                <picture class="">
                    <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                </picture>
            </a>
            <div class="flex-1 p-8 space-y-4">
                <h4 class="text-2xl font-bold">I'm feeling more anxious or down than usual</h4>
                <div class="hidden sm:block text-lg">If you’re finding that your stress and worry is getting in the way, it’s time to access these wellbeing services.</div>
                <a href="#" class="link">Find out more</a>
            </div>
        </div>
        <div class="border border-dark/10 rounded flex flex-col overflow-hidden">
            <a href="#" class="aspect-[16/9] sm:aspect-auto sm:h-[280px] relative bg-dark\10" tabindex="-1">
                <picture class="">
                    <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                </picture>
            </a>
            <div class="flex-1 p-8 space-y-4">
                <h4 class="text-2xl font-bold">I'm feeling more anxious or down than usual</h4>
                <div class="hidden sm:block text-lg">If you’re finding that your stress and worry is getting in the way, it’s time to access these wellbeing services.</div>
                <a href="#" class="link">Find out more</a>
            </div>
        </div>
        <div class="border border-dark/10 rounded flex flex-col overflow-hidden">
            <a href="#" class="aspect-[16/9] sm:aspect-auto sm:h-[280px] relative bg-dark\10" tabindex="-1">
                <picture class="">
                    <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                </picture>
            </a>
            <div class="flex-1 p-8 space-y-4">
                <h4 class="text-2xl font-bold">I'm feeling more anxious or down than usual</h4>
                <div class="hidden sm:block text-lg">If you’re finding that your stress and worry is getting in the way, it’s time to access these wellbeing services.</div>
                <a href="#" class="link">Find out more</a>
            </div>
        </div>
    </div>

    <div class="flex-1 flex items-center justify-center">
        <nav class="relative inline-flex font-bold text-blue space-x-1" aria-label="Pagination">
            <a href="#" class="relative inline-flex justify-center items-center h-8 w-8 hover:text-pink focus:outline-blue">
                <span class="sr-only">Previous</span>
                <i class="fas fa-chevron-left fa-lg"></i>
            </a>
            <a href="#" aria-current="page" tabindex="-1" class="bg-blue rounded text-light relative inline-flex justify-center items-center h-8 w-8"> 1 </a>
            <a href="#" class="relative inline-flex justify-center items-center h-8 w-8 hover:text-pink focus:outline-blue"> 2 </a>
            <a href="#" class="relative inline-flex justify-center items-center h-8 w-8 hover:text-pink focus:outline-blue"> 3 </a>
            <span class="relative inline-flex justify-center items-center h-8 w-8"> ... </span>
            <a href="#" class="relative inline-flex justify-center items-center h-8 w-8 hover:text-pink focus:outline-blue"> 8 </a>
            <a href="#" class="relative inline-flex justify-center items-center h-8 w-8 hover:text-pink focus:outline-blue"> 9 </a>
            <a href="#" class="relative inline-flex justify-center items-center h-8 w-8 hover:text-pink focus:outline-blue"> 10 </a>
            <a href="#" class="relative inline-flex justify-center items-center h-8 w-8 hover:text-pink focus:outline-blue">
                <span class="sr-only">Next</span>
                <i class="fas fa-chevron-right fa-lg"></i>
            </a>
        </nav>
    </div>

</div>