Basic blog template layout (incomplete)

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

@@ -9,6 +9,7 @@
 @import '~@styles/global';
 
 .c-article-grid {
+
   &__grid {
     display: flex;
     flex-wrap: wrap;
@@ -19,15 +20,22 @@
     width: 100%;
   }
 
-  @include t-media-query($s-xsmall-up) {
+  @include t-media-query($s-small-up) {
+    &__grid {
+      padding: 1em 0;
+    }
+
     &__article {
       width: 50%;
-    }
-  }
+      padding: 1em 2em;
 
-  @include t-media-query($s-small-up) {
-    &__article {
-      width: (100%/3);
+      &:nth-child(odd) {
+        padding-right: 1em;
+      }
+
+      &:nth-child(even) {
+        padding-left: 1em;
+      }
     }
   }
 }

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

@@ -25,7 +25,7 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 
 import { withLanguage } from '@public/language/Language';
-import BannerImageSection from '@sections/image/banner/BannerImageSection';
+import Section from '@sections/Section';
 import { PageBoundary } from '@components/page/Page';
 
 import Image from '@objects/image/Image';
@@ -39,26 +39,29 @@ export default withLanguage(props => {
   let { article, lang } = props;
 
   return (
-    <BannerImageSection
-      className="c-featured-article"
-      src={ article.image } alt={ article.title } loadable
-    >
-      <PageBoundary className="c-featured-article__content" full>
+    <Section>
+      <PageBoundary>
+        <article role="article" itemScope itemType="http://schema.org/Article" className="c-featured-article">
+          <ContentBox box className="c-featured-article__content">
+            <NavLink to={ article.url } className="c-featured-article__box is-image">
+              <Image src={ article.image } className="c-featured-article__image" maxWidth="800" />
+            </NavLink>
 
-        <ContentBox box className="c-featured-article__header">
-          <Title className="c-featured-article__title">
-            <NavLink to={ article.url } children={ article.title} />
-          </Title>
-        </ContentBox>
-
-        <ContentBox box className="c-featured-article__body">
-          <Paragraph className="c-featured-article__description">
-            { article.shortDescription }&nbsp;
-            <NavLink to={ article.url } children={ lang.blog.article.readMore } />
-          </Paragraph>
-        </ContentBox>
+            <div className="c-featured-article__box is-content">
+              <ContentBox box className="c-featured-article__heading">
+                <NavLink to={ article.url }>
+                  <Title itemProp="name" className="c-featured-article__title">
+                    { article.title }
+                  </Title>
+                </NavLink>
+              </ContentBox>
 
+              <Paragraph itemProp="description" children={ article.description } />
+              <NavLink itemProp="sameAs" to={ article.url } children={ lang.blog.article.readMore } />
+            </div>
+          </ContentBox>
+        </article>
       </PageBoundary>
-    </BannerImageSection>
+    </Section>
   );
 });

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;
     }
   }
 }