make columns more responsive

src/lib/components/PublicationFeed.svelte

@@ -202,8 +202,7 @@
   });
 </script>
 
-<div class="leather">
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 w-full">
     {#if loading && eventsInView.length === 0}
       {#each getSkeletonIds() as id}
         <Skeleton divClass="skeleton-leather w-full" size="lg" />
@@ -244,4 +243,3 @@
       >
     </div>
   {/if}
-</div>

src/lib/components/PublicationHeader.svelte

@@ -57,7 +57,7 @@
 
 {#if title != null && href != null}
   <Card
-    class="ArticleBox card-leather max-w-md h-48 flex flex-row items-center space-x-2"
+    class="ArticleBox card-leather max-w-md h-48 flex flex-row items-center space-x-2 relative overflow-hidden"
   >
     {#if image}
       <div