Dashboard: Company

<div class="w-full relative">
    <div class="absolute w-full h-[75%] bg-primary/10"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 pt-20 relative">
        <div class="grid sm:grid-cols-2 gap-6">
            <h1 class="text-5xl sm:text-4xl lg:text-5xl font-bold text-secondary sm:mb-16 lg:max-w-md">Welcome Brett to Kinetic+</h1>
            <div class="row-span-2 flex flex-col justify-end">
                <div class="rounded flex flex-col overflow-hidden relative aspect-square sm:aspect-auto sm:h-full">
                    <picture class="">
                        <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/640/480?random&#x3D;2 800w, https://picsum.photos/640/480?random&#x3D;2 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/640/480?random&#x3D;2">
                    </picture>
                    <div class="absolute w-full h-full bg-gradient-to-t from-black/75"></div>
                    <div class="flex-1 flex flex-col justify-end p-6 sm:p-10 md:p-26 space-y-8 text-light relative">
                        <div class="">
                            <div class="text-lg">04/02/22</div>
                            <h3 class="text-3xl lg:text-4xl font-bold text-shadow-md mb-4">Staff communication</h3>
                            <a href="#" class="text-lg font-bold underline underline-offset-2 hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-light">Read more</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex flex-col justify-between">
                <div class="rounded flex flex-col overflow-hidden relative aspect-[4/3] sm:aspect-[16/9]">
                    <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 class="absolute w-full h-full bg-gradient-to-t from-black/75"></div>
                    <div class="flex-1 flex flex-col justify-end p-6 sm:p-10 md:p-26 space-y-8 text-light relative">
                        <div class="">
                            <h3 class="text-3xl lg:text-4xl font-bold text-shadow-md mb-4">Health and wellbeing calendar</h3>
                            <a href="#" class="text-lg font-bold underline underline-offset-2 hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-light">View the calendar</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>