Add MovieCard component for displaying movie details with image, title, overview, release date, and popularity; update global styles to use utility classes for column layout.

src/app/globals.css

@@ -1,5 +1,4 @@
 @import "tailwindcss";
-@import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));
 
@@ -38,53 +37,9 @@
     flex-wrap: wrap;
     margin: 0 -15px;
   }
-
-  .col-12 {
-    width: 100%;
-    padding: 0 15px;
-  }
-  .col-11 {
-    width: 91.6666666667%;
-    padding: 0 15px;
-  }
-  .col-10 {
-    width: 83.3333333333%;
-    padding: 0 15px;
-  }
-  .col-9 {
-    width: 75%;
-    padding: 0 15px;
-  }
-  .col-8 {
-    width: 66.6666666667%;
-    padding: 0 15px;
-  }
-  .col-7 {
-    width: 58.3333333333%;
-    padding: 0 15px;
-  }
-  .col-6 {
-    width: 50%;
-    padding: 0 15px;
-  }
-  .col-5 {
-    width: 41.6666666667%;
-    padding: 0 15px;
-  }
-  .col-4 {
-    width: 33.3333333333%;
-    padding: 0 15px;
-  }
-  .col-3 {
-    width: 25%;
-    padding: 0 15px;
-  }
-  .col-2 {
-    width: 16.6666666667%;
-    padding: 0 15px;
-  }
-  .col-1 {
-    width: 8.3333333333%;
-    padding: 0 15px;
-  }
+}
+
+@utility col-* {
+  width: calc(--value(integer) / 0.12 * 1%);
+  padding: 0 15px;
 }

src/components/atoms/MovieCard/index.tsx

@@ -0,0 +1,58 @@
+import { FC } from "react";
+import { ReadMore } from "../ReadMore";
+
+type Props = {
+  title: string;
+  overview: string;
+  releaseDate: string;
+  popularity: number;
+  imagePath: string;
+};
+
+export const MovieCard: FC<Props> = ({
+  title,
+  releaseDate,
+  popularity,
+  overview,
+  imagePath,
+}) => {
+  return (
+    <div className="flex w-full shadow-md rounded-lg overflow-hidden mx-auto">
+      <div className="overflow-hidden rounded-xl relative movie-item text-white movie-card">
+        <div className="absolute inset-0 z-10 bg-gradient-to-t from-black via-gray-900 to-transparent"></div>
+        <div className="relative cursor-pointer group z-10 p-6 space-y-6 h-full">
+          <div className="align-self-end w-full h-full flex flex-col">
+            <div className="h-64"></div>
+            <div className="flex flex-col space-y-2 inner mb-4">
+              <h3
+                className="text-lg leading-[1.3] font-bold text-white line-clamp-1"
+                title={title}
+              >
+                {title}
+              </h3>
+              <div className="text-xs text-gray-400">
+                <ReadMore text={overview} />
+              </div>
+            </div>
+            <div className="flex flex-row justify-between mt-auto">
+              <div className="flex flex-col datos_col">
+                <div className="text-sm text-gray-400">Popularity:</div>
+                <div className="popularity">{popularity}</div>
+              </div>
+              <div className="flex flex-col datos_col">
+                <div className="text-sm text-gray-400">Release date:</div>
+                <div className="release">{releaseDate}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <figure className="absolute inset-0 w-full bottom-[20%]">
+          <img
+            className="w-full h-96 object-cover"
+            src={`http://image.tmdb.org/t/p/w342/${imagePath}`}
+          />
+        </figure>
+      </div>
+    </div>
+  );
+};