Tailwind CSS centering a NexJS <Image /> component on a popup

I'm trying to get my MapBoxGL popup content to have some styling. I'm trying to get the text styling above the image to be on the left and then the image below to be centered on the popup. See below for image. I got here because I'm converting all of my <img> components to next.js <Image /> components and it seems to be a struggle. I wish the docs had more examples.

Anyways, here is my current code below. I've tried a multitude of things trying to figure it out. To my knowledge, I should have an outer flex flex-col parent, and then the text should be either justify-start or items-start and then the div parent of the <Image /> should have flex justify-center or justify-items-center or something along those lines.

I also can't figure out why my popup is so much wider than my content when i only have w-full in the parent div and my <Image /> is the only thing that specifies exact width.

Any and all help is appreciated!

const popupContent = (
    <div className='test w-full h-full flex flex-col space-y-4'>
        {/*<div className='flex flex-row w-full h-full'>*/}
        <div className='flex flex-col items-start'>
            <Link
                href={`/listings/${listing.id}`}
                className="text-blue-500 hover:underline focus:outline-none">
                <h3>
                    {listing.title}
                </h3>
            </Link>
            <p>{listing.activity_type}</p>
            <p>{listing.mount_type}</p>
        </div>
        {/*<div className="relative w-full h-full">*/}
        <div className="relative w-3/4 h-full flex justify-center">
            {/*<div className="relative w-36 h-64">*/}
            <Image
                src={listing.primary_image_url}
                alt="Listing"
                // fill={true}
                object-Fit='fill'
                // width="100%"
                // className='justify-items-center'

                // className="object-cover w-full h-full"
                width='300'
                height='600'
                /*object-Fit='contain'
                fill={false}
                className='w-full'*/
            />
        </div>
    </div>
);

By setting the image's parent <div> to mx-auto will sort out the issue. It stands for margin: 0 auto which will push the div into the middle on the vertical axis.