Working more with the article feature layout..

public/components/section/blog/article/FeaturedArticleSection.scss

@@ -7,37 +7,72 @@
  */
 @import '~@styles/global';
 
-$c-featured-article--background: rgba(0,0,0,0.5);
-$c-featured-article--color: white;
-$c-featured-article--padding: 15px;
+$c-featured-article--overlay: rgba(black, 0.3);
 
 .c-featured-article {
   position: relative;
 
-  &__image {
-    display: block;
-    width: 100%;
-    min-height: 75vh;
-    object-fit: cover;
+  &__header,
+  &__body {
+    position: absolute;
+    z-index: 2;
+    right: 1.5em;
+    bottom: 0.5em;
   }
 
+  &__body { display: none; }
+
   &__title,
   &__description {
-    position: absolute;
+    display: inline-block;
     margin: 0;
-    padding: 0.25em;
-    color: $c-featured-article--color;
-    background: $c-featured-article--background;
   }
 
-  &__title {
-    top: 2.5em;
-    left: 0.25em;
+  &:after {
+    //content: "";
+    @include t-absolute-fill();
+    background: $c-featured-article--overlay;
+    transition: all 1s $s-animation--ease-out;
+    z-index: 1;
   }
 
-  &__description {
-    bottom: 0.5em;
-    right: 0.5em;
-    max-width: 250px;
+  @include t-media-query($s-xsmall-up) {
+    &__header {
+      right: 5em;
+      bottom: 3em;
+    }
+  }
+
+  @include t-media-query($s-small-up) {
+    &__header {
+      left: 2em;
+      top: 7em;
+      bottom: auto;
+      right: auto;
+    }
+  }
+
+  @include t-media-query($s-medium-up) {
+    &__header {
+      left: 4em;
+      top: 8em;
+    }
+
+    &__body {
+      display: block;
+      bottom: 1.5em;
+      right: 2.5em;
+    }
+  }
+
+  @include t-media-query($s-large-up) {
+    &__header {
+      top: 11em;
+    }
+
+    &__body {
+      bottom: 5em;
+      right: 0em;
+    }
   }
 }