fix(app-blog-featured): update feature blog style to look less awkward for medium and small spacing

Author: PaulPaulDevelops

src/components/app-blog-featured/app-blog-featured.scss

@@ -9,9 +9,22 @@
     }
   }
 
+  .featured-title {
+    h2 {
+      color: $gray-dark;
+      margin-bottom: 2rem;
+    }
+
+    h4 {
+      @include media-breakpoint-down(sm) {
+        margin-top: 4rem;
+      }
+    }
+  }
+
   .featured-image {
     border-collapse: separate;
-    display: inline-block;
+    display: flex;
     height: 100%;
     width: 100%;
 
@@ -26,25 +39,6 @@
     }
   }
 
-  .info {
-    h2 {
-      color: black;
-      &:hover {
-        text-decoration: underline black;
-      }
-
-      @include media-breakpoint-down(sm) {
-        margin-top: 2rem;
-      }
-    }
-
-    h4 {
-      @include media-breakpoint-down(sm) {
-        display: none;
-      }
-    }
-  }
-
   .summary {
     margin-top: 25px;
   }

src/components/app-blog-featured/app-blog-featured.tsx

@@ -19,19 +19,21 @@ export class AppBlogFeatured {
       <div class="blog-featured">
         <div class="container">
           <div class="row">
-            <div class="blog-featured-image-wrapper col-md-6 order-md-2">
-              <div class="featured-image">
+            <div class="col-12 featured-title">
+              <h4>What's New in Our Blog</h4>
                 <stencil-route-link url={`/blog/${this.blogPost.slug}`}>
-                  <img src={this.blogPost.featured_image} />
+                  <h2>{this.blogPost.title}</h2>
                 </stencil-route-link>
-              </div>
             </div>
-            <div class="info col-md-6 order-md-1">
-              <h4>What's New in Our Blog</h4>
+          </div>
+
+          <div class="row">
+            <div class="col-md-6 order-md-2 featured-image">
               <stencil-route-link url={`/blog/${this.blogPost.slug}`}>
-                <h2>{this.blogPost.title}</h2>
+                <img src={this.blogPost.featured_image} />
               </stencil-route-link>
-
+            </div>
+            <div class="col-md-6 order-md-1 info ">
               <div class="summary">{this.blogPost.summary}</div>
               <p class="date">{formatDate(publishDate)}</p>
               <div class="author">