fix: puts posters in 2 columns on mobile

templates/components/Poster.html.twig

@@ -9,6 +9,6 @@
         mediaType: mediaType,
         imdbId: imdbId
     }) }}">
-        <h3 class="text-center text-white text-xl md:text-base md:max-w-[16ch]">{{ title }}</h3>
+        <h3 class="text-center text-white md:text-xl md:text-base md:max-w-[16ch]">{{ title }}</h3>
     </a>
 </div>

templates/index/index.html.twig

@@ -20,7 +20,7 @@
             </twig:Card>
         </div>
         <div class="flex flex-col gap-4">
-            <twig:Card title="Popular Movies" contentClass="flex flex-col gap-4 md:flex-row md:justify-between w-full">
+            <twig:Card title="Popular Movies" contentClass="grid grid-cols-2 gap-4 md:flex md:flex-row md:justify-between w-full">
                 {% for movie in popular_movies %}
                     <twig:Poster imdbId="{{ movie.imdbId }}"
                                  tmdbId="{{ movie.tmdbId }}"
@@ -32,7 +32,7 @@
                     />
                 {% endfor %}
             </twig:Card>
-            <twig:Card title="Popular TV Shows" contentClass="flex flex-col md:flex-row justify-between w-full">
+            <twig:Card title="Popular TV Shows" contentClass="grid grid-cols-2 gap-4 md:flex flex-col md:flex-row justify-between w-full">
                 {% for movie in popular_tvshows %}
                     <twig:Poster imdbId="{{ movie.imdbId }}"
                                  tmdbId="{{ movie.tmdbId }}"