    ---
const { row, flipped, image, alt } = Astro.props;
---

<div class={`rows-start-${row} row-span-1 h-full w-full`}>
    <div class="grid grid-cols-3 h-full w-full gap-4">
        {
            flipped ? (
                <>
                    <div class="bg-accentRed/65 rounded-lg col-start-0 col-span-2 ultrashort:col-span-3 hover:bg-accentRed/85 ">
                        <slot />
                    </div>
                    <div class="h-full rounded-lg col-start-3 bg-no-repeat bg-cover ultrashort:hidden" style={`background-image: url(${image})`} />
                </>
            ) : (
                <>
                    <div class="h-full rounded-lg col-start-0 bg-no-repeat bg-cover ultrashort:hidden" style={`background-image: url(${image})`} />
                    <div class="bg-accentRed/65 rounded-lg col-start-2 col-span-2 hover:bg-accentRed/85 ultrashort:col-span-3">
                        <slot />
                    </div>
                </>
            )
        }
    </div>
</div>
