I found a bug when clicking on each card: the card overlaps the navbar when the transition changes. I tried to fix it by adjusting the z-index, but it didn’t work. I have also tried removing the view transitions from the layout and the bug disappears, but obviously I want to keep the view transitions.

This is the bug

---
import Layout from "../../layouts/Layout.astro"
---

<Layout title="Productos" description="Productos AGR">
    <main class="mt-36 flex flex-col items-center justify-center">
        <h2
            class="bg-gradient-to-tl from-red-800 via-yellow-500 to-zinc-400 bg-clip-text text-center font-krona text-[2.4rem] font-black text-transparent md:text-5xl"
        >
            SOFT BAITS
        </h2>
        <div class="relative w-[20rem] sm:w-[40rem] md:w-[50rem] xl:w-[70rem]">
            <div
                class="absolute left-0 top-0 h-0.5 w-full bg-gradient-to-r from-transparent via-[#efae78] to-transparent"
            >
            </div>
        </div>

        <div
            class="mt-6 flex max-w-[70rem] flex-col items-center justify-center gap-2 md:mt-12 lg:grid lg:grid-cols-2"
        >
            <a
                transition:name="stillworm"
                class="z-10 m-5 transform shadow-2xl transition-transform hover:scale-105"
                href="/productos/stillworm"
            >
                <div class="col-span-1 m-auto w-full rounded-lg bg-[#fffde94b] p-3 dark:bg-slate-900">
                    <h2
                        transition:name="1"
                        class="mt-3 w-full text-center font-cutted text-[3rem] text-primary md:text-6xl"
                    >
                        Still Worm
                    </h2>
                    <img
                        src="/Images/STILL_WORM_CROP/STW-portada.webp"
                        width="500"
                        height="500"
                        loading="eager"
                        alt="Señuelo Akira"
                    />
                </div>
            </a>
            <a
                transition:name="akira"
                class="z-10 m-5 transform shadow-2xl transition-transform hover:scale-105"
                href="productos/akira"
            >
                <div class="col-span-1 m-auto w-full rounded-lg bg-[#fffde94b] p-3 dark:bg-slate-900">
                    <h2
                        transition:name="2"
                        class="mt-3 w-full text-center font-cutted text-[3rem] text-primary md:text-6xl"
                    >
                        Akira
                    </h2>
                    <img
                        src="/Images/AKIRA_CROP/AkiraPortada1.webp"
                        width="500"
                        height="500"
                        loading="eager"
                        alt="Señuelo Akira"
                    />
                </div>
            </a>
            <div class="z-10 col-span-2 m-5 transform shadow-2xl transition-transform hover:scale-105">
                <div
                    transition:name="lethalcraw"
                    class="m-auto flex w-full flex-col items-center justify-center rounded-lg bg-[#fffde94b] p-3 dark:bg-slate-900"
                >
                    <a href="productos/lethalcraw">
                        <h2
                            transition:name="3"
                            class="mt-3 w-full text-center font-cutted text-[3rem] text-primary md:text-6xl"
                        >
                            Lethal Craw
                        </h2>
                        <img
                            src="/Images/LETHAL_CRAW_CROP/LTH-portada.webp"
                            width="500"
                            height="500"
                            loading="eager"
                            alt="Señuelo Akira"
                        />
                    </a>
                </div>
            </div>
        </div>
    </main>
</Layout>