Untitled

const FeatureCards = () => {
  return (
    <Swiper
      className="mb-6 lg:mb-0"
      modules={[Navigation, Pagination, Scrollbar, A11y]}
      spaceBetween={20}
      slidesPerView={1}
      freeMode={true}
      scrollbar={{ draggable: true }}
      breakpoints={{
        640: {
          slidesPerView: 1,
        },
        768: {
          slidesPerView: 2,
        },
        1024: {
          slidesPerView: 3,
        },
      }}
    >
      {cards.map((card, i) => {
        return (
          <div key={i}>
            <SwiperSlide>
              <div
                className={`${card.gradient} relative mb-8 overflow-hidden rounded-[3.125rem] border border-ep-lighter-gray px-10 py-9 transition-all duration-200 dark:border-ep-darker-gray dark:hover:border-darkmode-white/75 lg:mb-0`}
              >
                <a
                  href={card.link}
                  target={`${card.externalLink ? '_blank' : ''}`}
                  className="cursor-pointer"
                >
                  {/* <Link
                  href={card.link}
                  rel={`${card.externalLink ? 'noopener noreferrer' : ''}`}
                  target={`${card.externalLink ? '_blank' : ''}`}
                > */}
                  {/* Pretty messy implementation to get all of the cards of equal height within the slider - couldn't get a better solution working */}
                  <div className="relative z-20 grid grid-rows-[3.5rem_6.5rem_auto] gap-1 sm:grid-rows-[2.4rem_5.5rem_auto] md:sm:grid-rows-[4.1rem_7.8rem_auto] lg:sm:grid-rows-[5.4rem_9.1rem_auto] xl:sm:grid-rows-[auto_7.9rem_auto]">
                    <h4 className="mb-3.5 text-sm font-semibold dark:text-darkmode-white md:text-base">
                      {card.title}
                    </h4>
                    <div className="mb-6 text-sm dark:text-darkmode-white">
                      {card.body}
                    </div>
                    <a
                      className="text-sm font-semibold text-ep-blue underline dark:text-darkmode-links"
                      href={card.link}
                      target={`${card.externalLink ? '_blank' : ''}`}
                    >
                      {card.linkText}
                    </a>
                  </div>
                  <Image
                    className={`absolute ${card.imagePosition} z-10 dark:hidden`}
                    src={card.image}
                    alt="Decorative star image"
                  />
                  <Image
                    className={`absolute ${card.imagePosition} z-10 hidden dark:flex`}
                    src={card.imageDark}
                    alt="Decorative star image"
                  />
                  {/* </Link> */}
                </a>
              </div>
            </SwiperSlide>
          </div>
        )
      })}
    </Swiper>
  )
}