changed list into grid

components/userRatingBaseHotList/page.tsx

@@ -25,15 +25,15 @@ export const ChunithmHotPlays: FC<ChunithmProfileHotPlays> = ({
   chuniProfileHotPlays,
 }) => {
   return (
-    <div>
+    <div className="grid grid-cols-1 gap-2 md:grid-cols-8">
       {chuniProfileHotPlays.hotRating.map((playerHotRatingList, index) => {
         const jacketPath = playerHotRatingList.jacketPath?.replace(
           ".dds",
           ".png",
         );
         return (
-          <div key={index} className="center flex p-2">
-            <div className="m-4 font-bold">{index + 1}.</div>
+          <div key={index} className="flex flex-col items-center p-2">
+            <div className="m-4 font-bold"></div>
             {jacketPath && (
               <img
                 src={`/JacketArt/${jacketPath}`}
@@ -42,7 +42,7 @@ export const ChunithmHotPlays: FC<ChunithmProfileHotPlays> = ({
               />
             )}
             <div>
-              <ul className="pl-2">
+              <ul className="mt-2 text-center">
                 <li>
                   <strong>Title: </strong> {playerHotRatingList.title}
                 </li>