Image shrinks in responsive view with tailwind

So I am working on a project with React and Tailwind. I have a component that has an image and text and on small screens I have it laid out like so.

The component is the card under the word "Events". This looks exactly how I want it to look and on larger screens I want it to be more horizontal like so:

So these 2 are exactly how I want. The issue is, when I resize the window, there is a size (maybe between md and sm) where the image shrinks and doesnt fill the card, here is an image of it happening

So you can see the image height only takes up around 2/3 of the height of the card, maybe in this instance I can change the width of the image to be half of the card but I have attempted and cannot do it.

Below is the code for the component:

<div className='flex flex-col w-auto bg-white border border-gray-500 rounded-t-xl overflow-hidden lg:flex-row md:rounded-xl'>
                {/* Image Container */}
                <div className='xs:w-full lg:w-1/4'>
                    <img className='object-cover' src={event.featured_image} alt={event.title} />
                </div>
                {/* Content Container */}
                <div className="flex flex-col justify-between p-2">
                    {/* Content */}
                    <div>
                        <p className='text-xl text-blue-700 font-semibold'>{event.title}</p>
                        <p className='py-2 text-gray-700'>{event.description}</p>
                    </div>
                    <div className='pt-8 sm:pt-0'>
                        <p className='text-sm text-blue-500'>{event.start_date}{event.end_date ? ` - ${event.end_date}` : ''}</p>
                    </div>
                </div>
            </div>