Social Proof Section using Next.js and Tailwind

To achieve the "staggering" effect on reviews and cards elements I just passed some styles conditionally like this, is there a better way?

<div className="flex w-full flex-col items-center gap-4 md:items-end">
    {reviews.map((review, i) => (
        <div
            className={clsx("w-full", {
                "lg:mr-[80px]": i === 0,
                "lg:mr-[40px]": i === 1,
                "lg:mr-0": i === 2,
            })}
            key={i}
        >
            <SocialProofReviewSummary {...review} />
        </div>
    ))}
</div>