row span class doesn't work

[Chandler-Zhu]

I was trying to create a layout where the image is on the left and everything else on the right, but it didn't work out as expected, here is my code:

<div className="container w-full h-screen pt-6 ">
      <Meta title={movie.title} />
      <div className="px-3 h-screen gap-x-3 grid grid-cols-[6fr_4fr] grid-rows-[2fr_4fr_1fr_1fr_3fr] content-start">
        <Image
          src={`https://image.tmdb.org/t/p/original${movie.backdrop_path}`}
          width={8000}
          height={480}
          className="rounded-md col-start-1 mr-3 row-span-5 "
          alt={movie.title}
        />
        <h1 className="font-bold text-2xl mt-2 col-start-2">{movie.title}</h1>
        <p className="text-gray-600 text-md mt-4 col-start-2">
          {movie.overview}
        </p>
        <p className="mt-5 text-gray-600 text-sm col-start-2">
          Genres:{' '}
          <span className="font-bold">
            {movie.genres.map((genre) => genre.name).join(', ')}
          </span>
        </p>
        <p className="text-gray-600 text-sm col-start-2">
          Release Date: <span className="font-bold">{movie.release_date}</span>
        </p>
      </div>
    </div>

the result:

it seems like the image is only taking up one row even though I am using row-span-5 to tell it to span across all 5 rows, I am using next/image component here