Masonry with Tailwind and NextJS Image

feed-wrapper.jsx

<div className="w-full lg:columns-3 sm:columns-2 gap-12">
  {posts.length
    ? posts.map((item, index) => {
        return (
          <FeedItem
            textColor={"text-gray-500"}
            post={item}
            index={index}
            author={item?.attributes?.author?.data?.attributes}
            key={`col1_${index}`}
          />
        );
      })
    : null}
</div>

feedItem.jsx

<Link href={`/post/${slug}`}>
    <div className="cursor-pointer py-6 px-1 inline-block w-full group">
      <figure className={`relative h-64 ${index % 2 == 0 ? "md:h-96" : "md:h-64"} w-full hidden md:block mb-3 sm:mb-0 mr-6 border border-gray-100 overflow-hidden rounded-lg transform group-hover:translate-x-0 group-hover:shadow group-hover:translate-y-0 transition duration-700 ease-out overflow-hidden`}>
        <div className="absolute w-full h-full object-cover rounded-lg transform group-hover:scale-105 transition duration-700 ease-out cursor-pointer">
          <Image
            objectFit="cover"
            className="rounded-lg contrast-115"
            layout="fill"
            src={featuredImage}
          />
        </div>
      </figure>

      <h4 className="text-black-1 font-semibold text-lg leading-normal mt-2">
        <Link href={`/post/${slug}`}>
          <a>{title}</a>
        </Link>
      </h4>
      <div className="mt-3">
        <Author textColor={"text-gray-500"} author={author} />
      </div>
    </div>
  </Link>