feat(item-list): fix card grid to put elements on start and center th…

…e grid

app/components/items/cards/item-card.tsx

@@ -44,7 +44,7 @@ function ItemCard({
   album,
 }: ItemCard.Props) {
   return (
-    <Card className="flex flex-col gap-3 rounded-lg bg-neutral-800 p-4">
+    <Card className="flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4">
       <ItemImage images={images ?? album} alt={name} size={200} />
 
       <div

app/components/items/list/items-list.tsx

@@ -61,7 +61,7 @@ function ItemsList({
   if (isTop) sortedItems.splice(0, 2, sortedItems[1], sortedItems[0])
 
   return (
-    <div className={cn('flex flex-col gap-8', className)}>
+    <div className={cn('align-center flex flex-col gap-8', className)}>
       {isTop && (
         <>
           <div className="mt-16 hidden w-full flex-col items-center justify-center gap-4 self-center pt-4 md:flex md:flex-row md:items-start lg:mt-24">
@@ -95,7 +95,7 @@ function ItemsList({
       <div
         className={cn(
           isCard
-            ? 'flex w-full flex-wrap justify-center gap-4'
+            ? 'grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4'
             : 'flex flex-col'
         )}
       >

app/sections/default-section.tsx

@@ -19,7 +19,7 @@ function DefaultSection({
   ...props
 }: DefaultSection.Props) {
   return (
-    <section className="flex flex-col gap-4">
+    <section className="flex flex-col gap-6">
       <header className="flex items-center justify-between">
         <h2 className="text-4xl">{title}</h2>
 

tailwind.config.ts

@@ -1,6 +1,6 @@
 import { type Config } from 'tailwindcss'
-import plugin from 'tailwindcss/plugin'
 import TailwindCSSAnimate from 'tailwindcss-animate'
+import plugin from 'tailwindcss/plugin'
 
 export default {
   darkMode: ['class'],