Grid alignment inconsistency

function PeoplesGrid() {
    const peoplesData: PeopleData[] = [ ... ];

    return (
        <div className="grid grid-cols-4 gap-3 mt-18">
            {peoplesData.map((person) => (
                <div key={person.title} className="flex flex-col">
                    <img src={person.image} alt="" />

                    <div className="bg-neutral-950 flex gap-x-4 p-5">
                        <img src={person.icon} alt="" className="size-7" />
                        <div>
                            <p className="text-lg font-medium text-white">{person.title}</p>
                            <p className="text-neutral-400 mt-1">{person.description}</p>
                        </div>
                    </div>
                </div>
            ))}
        </div>
    );
}

function PeoplesGrid() {
    const peoplesData: PeopleData[] = [ ... ];

    return (
        <div className="grid grid-cols-4 gap-3 mt-18">
            {peoplesData.map((person) => (
                <div key={person.title} className="flex flex-col">
                    <img src={person.image} alt="" />

                    <div className="bg-neutral-950 flex gap-x-4 p-5">
                        <img src={person.icon} alt="" className="size-7" />
                        <div>
                            <p className="text-lg font-medium text-white">{person.title}</p>
                            <p className="text-neutral-400 mt-1">{person.description}</p>
                        </div>
                    </div>
                </div>
            ))}
        </div>
    );
}