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;
 }