diff --git a/source/_patterns/01-molecules/06-banner/color-variants.mustache b/source/_patterns/01-molecules/06-banner/color-variants.mustache
index e0c7e1bef76f478577b2319459d3852cce933b72..4ee8057447b90d09c10f07c635f6db8a25206c06 100644
--- a/source/_patterns/01-molecules/06-banner/color-variants.mustache
+++ b/source/_patterns/01-molecules/06-banner/color-variants.mustache
@@ -1,8 +1,8 @@
 <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>
diff --git a/source/css/molecules/article-card.pcss b/source/css/molecules/article-card.pcss
index 524f738a62b902f542f9f33e8cd395337bc731eb..bdb972aa1211aaa81d4b63d2aaf79947b083360b 100644
--- a/source/css/molecules/article-card.pcss
+++ b/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 {