Improve mobile gallery styling

src/lib/components/Catalog.svelte

@@ -16,7 +16,7 @@
       <div class="sm:block flex-col flex">
         <Button outline color="red" class="float-right" on:click={onClear}>Clear catalog</Button>
       </div>
-      <div class="flex flex-row gap-5 flex-wrap">
+      <div class="flex sm:flex-row flex-col gap-5 flex-wrap justify-center sm:justify-start">
         {#each $catalog as { id, manga } (id)}
           <CatalogItem {manga} />
         {/each}

src/lib/components/CatalogItem.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <a href={volumeName} on:click={onClick}>
-  <div class="flex flex-col gap-[5px] text-center">
+  <div class="flex flex-col gap-[5px] text-center items-center">
     {mokuroData.title}
     {#if files}
       <img

src/lib/components/VolumeItem.svelte

@@ -12,13 +12,13 @@
 </script>
 
 <a href={`${$page.params.manga}/${volumeName}`} on:click={onClick}>
-  <div class="flex flex-col gap-[5px] text-center">
+  <div class="flex flex-col gap-[5px] text-center items-center">
     {volumeName}
     {#if files}
       <img
         src={URL.createObjectURL(Object.values(files)[0])}
         alt="img"
-        class="object-contain w-[250px] h-[350px] bg-black border-gray-900 border"
+        class="object-contain sm:w-[250px] h-[350px] bg-black border-gray-900 border"
       />
     {/if}
   </div>

src/routes/[manga]/+page.svelte

@@ -38,7 +38,7 @@
   <div class="sm:block flex-col flex">
     <Button outline color="red" class="float-right" on:click={onDelete}>Delete manga</Button>
   </div>
-  <div class="flex flex-row gap-5 flex-wrap">
+  <div class="flex sm:flex-row flex-col justify-center sm:justify-start gap-5 flex-wrap">
     {#if manga}
       {#each manga as volume}
         <VolumeItem {volume} />