Make home more responsive depending on screen width

resources/views/home/index.blade.php

@@ -28,4 +28,6 @@
     <div class="mx-auto pt-6 sm:px-6 lg:px-8 space-y-6 max-w-[100%] xl:max-w-[95%] 2xl:max-w-[85%] pb-2">
         @include('home.partials.comments')
     </div>
+
+    @vite(['resources/js/responsive.js'])
 </x-app-layout>

resources/views/home/partials/tab/template.blade.php

@@ -5,12 +5,16 @@
         ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6'
         : 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-8';
 
-    $limit = $isThumbnail ? 12 : 16;
+    // Render enough items for largest possible layout
+    $limit = 24;
 
     $view = $isThumbnail ? 'thumbnail' : 'poster';
 @endphp
 
-<div class="grid {{ $gridClasses }}">
+<div
+    class="episode-grid grid {{ $gridClasses }}"
+    data-rows="2"
+>
     @foreach ($episodes->take($limit) as $ep)
         @php
             $episode = isset($popularView)
@@ -18,9 +22,11 @@
                 : $ep;
         @endphp
 
-        <x-episode-cover
-            :episode="$episode"
-            :view="$view"
-        />
+        <div class="episode-item">
+            <x-episode-cover
+                :episode="$episode"
+                :view="$view"
+            />
+        </div>
     @endforeach
 </div>