diff --git a/src/components/atoms/book-tile.astro b/src/components/atoms/book-tile.astro
index 279dd53..ed14810 100644
--- a/src/components/atoms/book-tile.astro
+++ b/src/components/atoms/book-tile.astro
@@ -13,7 +13,7 @@ const {
 } = Astro.props;
 ---
 
-<a href={url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
+<a href={url} class="flex w-full max-w-[200px] flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Image
     class="rounded-lg shadow-md aspect-[3/4] object-cover"
     format="webp"
diff --git a/src/components/atoms/media-tile.astro b/src/components/atoms/media-tile.astro
index 6327ad7..a478809 100644
--- a/src/components/atoms/media-tile.astro
+++ b/src/components/atoms/media-tile.astro
@@ -13,7 +13,7 @@ const {
 } = Astro.props;
 ---
 
-<a href={url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
+<a href={url} class="flex w-full max-w-[120px] flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Image
     class="rounded-lg shadow-md aspect-square object-cover"
     fit="cover"
diff --git a/src/components/atoms/person-tile.astro b/src/components/atoms/person-tile.astro
index 44038b9..4e0b0a8 100644
--- a/src/components/atoms/person-tile.astro
+++ b/src/components/atoms/person-tile.astro
@@ -13,7 +13,7 @@ const {
 } = Astro.props;
 ---
 
-<a href={url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
+<a href={url} class="flex w-full max-w-[120px] flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Image
     class="rounded-lg shadow-md transition duration-300 aspect-square object-cover"
     format="webp"
diff --git a/src/components/atoms/video-tile.astro b/src/components/atoms/video-tile.astro
index 68b5b1a..9c35492 100644
--- a/src/components/atoms/video-tile.astro
+++ b/src/components/atoms/video-tile.astro
@@ -16,7 +16,7 @@ const id = url.split('/').pop();
 const thumbnail = `https://img.youtube.com/vi/${id}/0.jpg`;
 ---
 
-<a href={url} class="flex w-full flex-col gap-3 transition duration-300 hover:translate-y-2">
+<a href={url} class="flex w-full max-w-[240px] flex-col gap-3 transition duration-300 hover:translate-y-2">
   <Image
     class="rounded-lg shadow-md aspect-video object-cover"
     format="webp"
diff --git a/src/components/sections/favorites-section.astro b/src/components/sections/favorites-section.astro
index 6e05004..9409443 100644
--- a/src/components/sections/favorites-section.astro
+++ b/src/components/sections/favorites-section.astro
@@ -35,28 +35,28 @@ interface FavoritesSubsection<T extends SubsectionData> {
 
 const booksSubsection: FavoritesSubsection<Book> = {
   name: 'books',
-  columnsLayout: 'grid-cols-4',
+  columnsLayout: 'grid-cols-fluid200',
   Component: BookTile,
   ...books,
 };
 
 const mediasSubsection: FavoritesSubsection<Media> = {
   name: 'medias',
-  columnsLayout: 'grid-cols-6',
+  columnsLayout: 'grid-cols-fluid120',
   Component: MediaTile,
   ...medias,
 };
 
 const peopleSubsection: FavoritesSubsection<Person> = {
   name: 'people',
-  columnsLayout: 'grid-cols-6',
+  columnsLayout: 'grid-cols-fluid120',
   Component: PersonTile,
   ...people,
 };
 
 const videosSubsection: FavoritesSubsection<Video> = {
   name: 'videos',
-  columnsLayout: 'grid-cols-3',
+  columnsLayout: 'grid-cols-fluid240',
   Component: VideoTile,
   ...videos,
 };
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 7adee83..2f5f563 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -16,6 +16,11 @@ module.exports = {
       spacing: {
         22: '5.5rem',
       },
+      gridTemplateColumns: {
+        fluid120: 'repeat(auto-fit, minmax(120px, 1fr))',
+        fluid200: 'repeat(auto-fit, minmax(200px, 1fr))',
+        fluid240: 'repeat(auto-fit, minmax(240px, 1fr))',
+      },
     },
   },
   plugins: [],