Try adding mt-[-50%] instead of -top-28. Top work with position property like relative and absolute. You can also use -top-28 but you have to add relative or absolute class.

Are you sure you need -top-28? Try it without the dash top-28

<div className="border text-white h-[226px] w-auto mb-[389px] bg-brand-quaternary border-brand-primary rounded-lg place-items-center grid grid-cols-4 top-28">

I took if from here- https://tailwindcss.com/docs/top-right-bottom-left#basic-usage