Basic blog template layout (incomplete)

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

@@ -7,72 +7,52 @@
  */
 @import '~@styles/global';
 
-$c-featured-article--overlay: rgba(black, 0.3);
-
 .c-featured-article {
-  position: relative;
+  display: block;
+  width: 100%;
 
-  &__header,
-  &__body {
-    position: absolute;
-    z-index: 2;
-    right: 1.5em;
-    bottom: 0.5em;
+  &__content {width: 100%;}
+
+  &__box {}
+
+  &__image {
+    display: block;
+    width: 100%;
   }
 
-  &__body { display: none; }
+  &__heading {
+    transform: translateY(-60%);
+    margin-bottom: -2em;
+    overflow: visible;
+  }
 
-  &__title,
-  &__description {
-    display: inline-block;
+  &__title {
     margin: 0;
   }
 
-  &:after {
-    //content: "";
-    @include t-absolute-fill();
-    background: $c-featured-article--overlay;
-    transition: all 1s $s-animation--ease-out;
-    z-index: 1;
-  }
-
-  @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;
+    padding: 1em;
+
+    &__content { display: flex; }
+
+    &__heading {
+      transform: translate(-10%, -60%);
+    }
+
+    &__box {
+      width: 40%;
+      padding: 0.5em;
+
+      &.is-image{order:2;width: 60%;}
     }
   }
 
   @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;
+    padding: 2em;
+    &__box {
+      width: 50%;
+      &.is-image {width: 50%;}
+      padding: 2em;
     }
   }
 }