Refactor MovieList component to support multiple movie categories with sorting and filtering options; update Home page to display categorized movie lists; enhance global styles for grid layout.

src/app/globals.css

@@ -43,3 +43,7 @@
   width: calc(--value(integer) / 0.12 * 1%);
   padding: 0 15px;
 }
+
+@utility grid-auto-cols-* {
+  grid-template-columns: repeat(auto-fill, --value(integer));
+}

src/app/page.tsx

@@ -5,7 +5,15 @@ export default async function Home() {
   return (
     <main>
       <SearchMovies />
-      <MovieList />
+      <MovieList
+        heading="Upcoming"
+        onlyUpcoming
+        sort="releaseDate"
+        sortDirection="desc"
+      />
+      <MovieList heading="My Watchlist" onlyReleased showFilters />
+      <MovieList heading="Seen" onlySeen />
+      <MovieList heading="Favorites" onlyFavorites />
     </main>
   );
 }