How do i modify the div in my swiperslide to use the cardcontiner with in the following example: "use client";

import Image from "next/image";
import React from "react";
import { CardBody, CardContainer, CardItem } from "../ui/3d-card";

export function ThreeDCardDemo() {
  return (
    <CardContainer className="inter-var">
      <CardBody className="bg-gray-50 relative group/card  dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border  ">
        <CardItem
          translateZ="50"
          className="text-xl font-bold text-neutral-600 dark:text-white"
        >
          Make things float in air
        </CardItem>
        <CardItem
          as="p"
          translateZ="60"
          className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300"
        >
          Hover over this card to unleash the power of CSS perspective
        </CardItem>
        <CardItem translateZ="100" className="w-full mt-4">
          <Image
            src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            height="1000"
            width="1000"
            className="h-60 w-full object-cover rounded-xl group-hover/card:shadow-xl"
            alt="thumbnail"
          />
        </CardItem>
        <div className="flex justify-between items-center mt-20">
          <CardItem
            translateZ={20}
            as="button"
            className="px-4 py-2 rounded-xl text-xs font-normal dark:text-white"
          >
            Try now →
          </CardItem>
          <CardItem
            translateZ={20}
            as="button"
            className="px-4 py-2 rounded-xl bg-black dark:bg-white dark:text-black text-white text-xs font-bold"
          >
            Sign up
          </CardItem>
        </div>
      </CardBody>
    </CardContainer>
  );
}
 My actual code : import Image from "next/image";
import Link from "next/link";
import { BsArrowRight } from "react-icons/bs";
import { Pagination, Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";

import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/pagination";
import "swiper/css/navigation";

const workSlides = {
  slides: [
    {
      images: [
        {
          title: "Contact Website",
          path: "/contact.png",
          link: "https://contactvyc.netlify.app",
        },
        {
          title: "SEO Website",
          path: "/seo.png",
          link: "https://seovyc.netlify.app",
        },
        {
          title: "Porfolio Website",
          path: "/portfolio.png",
          link: "https://portfoliovyc.netlify.app",
        },
        {
          title: "Podcast Website",
          path: "/pod.png",
          link: "https://podcastvyc.netlify.app",
        },
        {
          title: "NFT Website",
          path: "/nft.png",
          link: "https://nftvyc.netlify.app",
        },
        {
          title: "Gaming Website",
          path: "/gaming.png",
          link: "https://gamingvyc.netlify.app",
        },
      ],
    },
    {
      images: [
        {
          title: "Personal Blog",
          path: "/brief.png",
          link: "https://biovyc.netlify.app",
        },
        {
          title: "Dashboard Design",
          path: "/dashboard.png",
          link: "https://dashboardvyc.netlify.app",
        },
        {
          title: "Cyrptocurrency Website",
          path: "/crypto.png",
          link: "https://crytpovyc.netlify.app",
        },
        {
          title: "Ecommerce Website",
          path: "/ecommerce.png",
          link: "https://ecommercevyc.netlify.app",
        },
        {
          title: "Ageny Website",
          path: "/agency.png",
          link: "https://agencyvyc.netlify.app",
        },
        {
          title: "Blog Website",
          path: "/blogy.png",
          link: "https://blogyvyc.netlify.app",
        },
      ],
    },
    {
      images: [
        {
          title: "3D Portfolio",
          path: "/3d-portfolio.png",
          link: "https://threejs-3-d-portfolio.vercel.app/",
        },
        {
          title: "3D Product",
          path: "/3d-product.png",
          link: "https://3d-product-page.netlify.app/",
        },
        {
          title: "Personal Blog",
          path: "/brief.png",
          link: "https://biovyc.netlify.app",
        },
      ],
    },
  ],
};

const WorkSlider = () => {
  return (
    <Swiper
      spaceBetween={10}
      pagination={{
        clickable: true,
      }}
      modules={[Pagination, Navigation]}
      className="h-[100%] sm:h-[110%]"
      style={{
        "--swiper-pagination-color": "#FFBA08",
        "--swiper-pagination-bullet-inactive-color": "#999999",
        "--swiper-pagination-bullet-inactive-opacity": "0.3",
        "--swiper-pagination-bullet-size": "15px",
        "--swiper-pagination-bullet-horizontal-gap": "6px",
      }}
    >
      {workSlides.slides.map((slide, i) => (
        <SwiperSlide key={i}>
          <div className="grid grid-cols-2 grid-rows-3 gap-4">
            {slide.images.map((image, imageI) => (
              <div
                className="relative rounded-2xl overflow-hidden flex items-center justify-center group"
                key={imageI}
              >
                <div className="flex items-center justify-center relative overflow-hidden group">
                  {/* image */}
                  <Image
                    src={image.path}
                    alt={image.title}
                    width={500}
                    height={300}
                  />

                  {/* overlay gradient */}
                  <div
                    className="absolute inset-0 bg-gradient-to-l from-transparent via-[#000] to-[#f13024] opacity-0 group-hover:opacity-80 transition-all duration-700"
                    aria-hidden
                  />

                  {/* title */}
                  <div className="absolute rounded-3xl bottom-0 translate-y-full group-hover:-translate-y-10 group-hover:xl:-translate-y-20 transition-all duration-300">
                    <Link
                      href={image.link}
                      target="_blank"
                      rel="noreferrer noopener"
                      className="flex items-center gap-x-2 text-[13px] tracking-[0.2em]"
                    >
                      <div className="projContainer">
                        <div className="projContainer1">
                          <div className="delay-1 text-xl">{image.title}</div>
                        </div>
                        <div className="projContainer2" style={{ color: '#f13024', fontWeight: 'bold' }}>
                          <div className="delay-100 text-lg font-bold">LIVE</div>
                            {/* title part 2 */}
                            <div className="translate-y-[500%] group-hover:translate-y-0 transition-all duration-300 delay-150 text-lg font-bold">
                              PREVIEW
                            </div>
                            {/* icon */}
                            <div className="text-xl translate-y-[500%] group-hover:translate-y-0 transition-all duration-300 delay-150">
                          </div>
                        </div>
                      </div>
                    </Link>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

export default WorkSlider;