I have been trying to get my images to have the size for sometime now but still can't figure it out. This is the code I have now.

 return (
            <div className='space-y-3 p-5 '>
                  <h2 className=' font-mainfont font-semibold pl-5'>{title}</h2>
                  <div className='flex gap-x-4 scrollbar-hide pt-10 overflow-y-hidden overflow-x-scroll transition-all duration-500 px-5'>
                        {React.Children.toArray(movies.map(movie => (
                              <div className='flex flex-col h-[500px] w-[10rem]'>
                                    <img src={`${base_url}${movie?.poster_path || movie?.backdrop_path}`} alt={movie.name || movie.title} className=" h-[3rem] w-[7rem] rounded-xl object-cover hover:scale-[1.09] transition-all duration-500" />
                                    <h1 className=''>{movie.name || movie.title}</h1>
                              </div>
                        )))}
                  </div>
            </div >

      )

Image size does not even increase again above the height and width above...