{data.map((item, index) => (
              <div key={index} className=" overflow-hidden w-[50%] sm:w-1/2 md:w-1/3 lg:w-1/4">
                {item.image_url  && (
                  <div 
                    className="w-[300px] relative h-56 bg-cover bg-center rounded-2xl before:bg-black/30 before:rounded-2xl before:absolute before:inset-0 before:content-['']" 
                    style={{ backgroundImage: `url(${item.image_url})` }}
                    aria-label={item.title}
                  >
                    <div className="absolute bottom-0 right-0 p-4  flex justify-end items-end text-white w-full h-full ">
                      <p className="hover:underline font-semibold">{item.title}</p>
                    </div>
                  </div>
                )}
               
              </div>
            ))}