Parallax Card in Svelte

<script>
    export let description = '';
    export let imgSrc = '';
    export let title = '';
</script>

<div
    class="bg-slate-50 bg-cover w-72 h-auto flex flex-col items-center p-8 rounded-lg shadow-lg group cursor-pointer"
>
    <div
        class="bg-cover aspect-square w-full -mt-24 bg-center rounded-lg shadow-sm grayscale group-hover:grayscale-0 transition-all duration-500 z-20"
        style:background-image="url({imgSrc}) "
    />
    <div
        id="content-wrapper"
        class="flex flex-col opacity-0 group-hover:opacity-100 invisible group-hover:visible h-0 group-hover:h-full delay-200 z-10"
    >
        <div
            id="content"
            class="flex flex-col items-center -mt-28 group-hover:mt-2 transition-all duration-300 delay-600"
        >
            <h2 class="font-bold font-serif text-2xl tracking-wide text-slate-900 text-center">
                {title}
            </h2>
            <p class="text-center font-sans font-light text-slate-700">
                {@html description}
            </p>
        </div>
    </div>
</div>

<script>
    import Owl from './components/Owl.svelte';
</script>

<div
    class="grid gap-24 items-center justify-center from-slate-700 to-slate-900 bg-gradient-to-br h-screen w-screen"
>
    <Owl
        title="Art"
        description="<b class='text-sm'>Fantastic Art</b>"
        imgSrc="https://picsum.photos/200/300"
    />
    <Owl
        title="Hightlight"
        description="<b class='text-sm'>Product Hightlight</b>"
        imgSrc="https://picsum.photos/200/301"
    />
</div>