Infobox: Image

<div class="bg-teal rounded flex flex-col overflow-hidden">
    <div class="aspect-[16/9] sm:aspect-auto sm:h-[400px] 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 pt-9 sm:p-12 relative text-light">
        <div class="bg-light rounded-full w-24 h-24 border-8 border-teal absolute -top-12 right-4 sm:right-10 flex justify-center items-center text-teal scale-75 sm:scale-100">
            <i class="fas fa-heartbeat fa-3x"></i>
        </div>
        <h4 class="text-3xl font-bold mb-10 mr-20">Physical health</h4>
        <div class="text-lg mr-10">Your body is your temple. Here, you’ll find details on your medical and dental cover as well as other useful resources to help you to take care of your physical health.</div>
        <a href="#" class="btn btn-light mt-6">More about physical health</a>
    </div>
    <div class="flex flex-col divide-y divide-light/10 border-t border-light/10">
        <a href="#" class="flex justify-between items-center px-8 sm:px-12 py-5 text-light group focus:outline-none hover:bg-light/10">
            <span class="font-bold text-lg group-focus:underline underline-offset-2 pr-4">Private health insurance</span>
            <i class="fas fa-arrow-right fa-lg"></i>
        </a>
        <a href="#" class="flex justify-between items-center px-8 sm:px-12 py-5 text-light group focus:outline-none hover:bg-light/10" target="_blank" rel="noopener">
            <span class="font-bold text-lg group-focus:underline underline-offset-2 pr-4">Dental discounts</span>
            <i class="fas fa-arrow-right fa-lg -rotate-45"></i>
        </a>
        <a href="#" class="flex justify-between items-center px-8 sm:px-12 py-5 text-light group focus:outline-none hover:bg-light/10">
            <span class="font-bold text-lg group-focus:underline underline-offset-2 pr-4">Kinetic Clinic</span>
            <i class="fas fa-arrow-right fa-lg"></i>
        </a>
        <a href="#" class="flex justify-between items-center px-8 sm:px-12 py-5 text-light group focus:outline-none hover:bg-light/10">
            <span class="font-bold text-lg group-focus:underline underline-offset-2 pr-4">Kinetic GP</span>
            <i class="fas fa-arrow-right fa-lg"></i>
        </a>
    </div>
</div>