fix: article card shouldn't hide sharer box on mobile devices

source/_patterns/01-molecules/06-banner/color-variants.mustache

 <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-6 gap-4" style="min-height: 500px;">
   {{> molecules-banner(color: "bg-black") }}
-  {{> molecules-banner(color: "bg-violet-300") }}
-  {{> molecules-banner(color: "bg-green-200") }}
-  {{> molecules-banner(color: "bg-blue-200") }}
+  {{> molecules-banner(color: "bg-violet-500") }}
+  {{> molecules-banner(color: "bg-red-600") }}
+  {{> molecules-banner(color: "bg-blue-300") }}
   {{> molecules-banner(color: "bg-brands-facebook") }}
   {{> molecules-banner(color: "bg-brands-twitter") }}
 </div>

source/css/molecules/article-card.pcss

@@ -21,15 +21,22 @@
   /* padding shall be kept in sync with general card */
   /* No pointer events to make full article cover clickable */
   @apply absolute left-0 bottom-0 p-4 pointer-events-none;
+
 }
 
 .article-card-sharing {
-  /* Turn on pointer events to make sharer clickable */
-  @apply mb-4 transition duration-200 opacity-0 pointer-events-auto;
+  @apply mb-4 ;
+
+  @screen lg {
+    /* Turn on pointer events to make sharer clickable */
+    @apply transition duration-200 opacity-0 pointer-events-auto;
+  }
 }
 
 .article-card:hover .article-card-sharing {
-  @apply opacity-100;
+  @screen lg {
+    @apply opacity-100;
+  }
 }
 
 .article-card-meta {