---
export interface Props {
    title: string;
    subtitle: string;
    image: string;
    link: string;
}

const { title, subtitle, image, link } = Astro.props;
---


<div class="rounded-lg transition ease-in-out hover:scale-105">
    <a href={link}>
        <div class="my-2 flex flex-col sm:flex-col md:flex-col lg:flex-row xl:flex-row 2xl:flex-row w-11/12 mx-auto">
            <img class="h-44 lg:h-28 xl:h-28 my-2 aspect-video object-cover rounded-lg" src={image} alt="">
            <div class="lg:ml-4 xl:ml-4 2xl:ml-4 grow">
                <p class="mt-2 font-semibold text-2xl py-2 sm:text-2xl md:text-2xl lg:text-3xl xl:text-3xl 2xl:text-3xl">{title}</p>
                <p>{subtitle}</p>
            </div>
        </div>
    </a>
</div>