Improve article headline decoration

source/_patterns/01-molecules/02-article-card/article-card.mustache

@@ -14,7 +14,7 @@
     </div>
   </div>
   <div class="card__body">
-    <h1 class="article-card__headline">{{ headline.medium }}</h1>
+    <a href="#"><h1 class="article-card__headline">{{ headline.medium }}</h1></a>
     <p class="article-card__excerpt">{{ excerpt.long }}</p>
 
     <div class="space-x-1 mt-2">

source/_patterns/01-molecules/02-article-card/emphasized-article-card.mustache

@@ -14,7 +14,7 @@
     </div>
   </div>
   <div class="card__body">
-    <h1 class="article-card__headline text-white">{{ headline.medium }}</h1>
+    <a href="#" class="hover:line-white"><h1 class="article-card__headline text-white">{{ headline.medium }}</h1></a>
     <p class="article-card__excerpt text-white">{{ excerpt.long }}</p>
 
     <div class="space-x-1 mt-2">

source/css/molecules/article-card.pcss

@@ -49,7 +49,7 @@
 }
 
 .article-card__headline {
-  @apply head-heavy-xs mb-2;
+  @apply head-heavy-xs mb-2 break-words;
 }
 
 .article-card__excerpt {

tailwind.config.js

@@ -92,8 +92,14 @@ module.exports = {
         xl: '5rem',
       },
     },
+    textDecorationColor: { // defaults to theme => theme('colors')
+      'white': '#fff',
+      'black': '#000',
+    },
+  },
+  variants: {
+    textDecorationColor: ['responsive', 'hover'],
   },
-  variants: {},
   // textStyles: theme => ({ // defaults to {}
   //   heading: {
   //     output: false, // this means there won't be a "heading" component in the CSS, but it can be extended