front page main section drft 1

front-page.php

@@ -152,7 +152,41 @@
     </section>
 
     <!-- FLAT HORIZONTAL SECTION HERE -->
+    <section class="st-article-section st-article-section-wide">
+        <h2 class="st-article-section-title">Gravel <a href="<?php echo home_url() . '/articles'; ?>" class="st-article-section-category-link">></a></h2>
+        <?php
+            $section_category = 'Gravel';
+            $post_section_three_featured_args = array(
+                'showposts' => 4,
+                'category_name' => $section_category,
+                'orderby'     => 'post_date',
+                'order'       => 'DESC',
+                'post_type'   => 'post',
+                'post_status' => 'publish'
+            );
+            query_posts($post_section_three_featured_args);
+            if (have_posts()) : while (have_posts()) : the_post();
+                $category = get_the_category()[0];
+                $author = get_userdata( $post->post_author );
+        ?>
+            <article class="st-article-section-wide-article">
+                <a href="<?php the_permalink(); ?>" class="st-article-section-wide-article__image-link">
+                    <?php the_post_thumbnail(); ?>
+                </a>
+                <div class="st-article-section-wide-article__text-container">
+                    <a href="<?php echo home_url($category->slug); ?>" class="st-article-section-wide-article__category-link"><?php echo $category->name; ?></a>
+                    <a class="st-article-section-wide-article__title" href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>
+                    <p class="st-article-section-wide-article__excerpt"><?php the_excerpt(); ?></p>
+                </div>
+                </a>
+            </article>
+        <?php
+            endwhile;
+            endif;
 
+            wp_reset_postdata();
+        ?>
+    </section>
     <!-- LATEST SECTION -->
     <section class="st-article-section-grid">
         <section class="st-article-section st-article-section-highlight">
@@ -312,7 +346,42 @@
             <!-- MORE STUFF HERE -->
         </section>
     </section>
+    <!-- FLAT HORIZONTAL SECTION HERE -->
+    <section class="st-article-section st-article-section-wide">
+        <h2 class="st-article-section-title">Race Reports <a href="<?php echo home_url() . '/articles'; ?>" class="st-article-section-category-link">></a></h2>
+        <?php
+            $section_category = 'race-reports';
+            $post_section_three_featured_args = array(
+                'showposts' => 4,
+                'category_name' => $section_category,
+                'orderby'     => 'post_date',
+                'order'       => 'DESC',
+                'post_type'   => 'post',
+                'post_status' => 'publish'
+            );
+            query_posts($post_section_three_featured_args);
+            if (have_posts()) : while (have_posts()) : the_post();
+                $category = get_the_category()[0];
+                $author = get_userdata( $post->post_author );
+        ?>
+            <article class="st-article-section-wide-article">
+                <a href="<?php the_permalink(); ?>" class="st-article-section-wide-article__image-link">
+                    <?php the_post_thumbnail(); ?>
+                </a>
+                <div class="st-article-section-wide-article__text-container">
+                    <a href="<?php echo home_url($category->slug); ?>" class="st-article-section-wide-article__category-link"><?php echo $category->name; ?></a>
+                    <a class="st-article-section-wide-article__title" href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>
+                    <p class="st-article-section-wide-article__excerpt"><?php the_excerpt(); ?></p>
+                </div>
+                </a>
+            </article>
+        <?php
+            endwhile;
+            endif;
 
+            wp_reset_postdata();
+        ?>
+    </section>
 </main>
 
 <?php get_footer() ?>

style.css

@@ -395,6 +395,16 @@ SECTIONS
     .st-article-section-main-article__bottom {
         display: none;
     }
+
+    .st-article-section-wide {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1em;
+    }
+
+    .st-article-section-wide .st-article-section-title {
+        grid-column: 1 / span 2;
+    }
 }
 
 @media (min-width: 1200px) {
@@ -418,6 +428,14 @@ SECTIONS
     .st-article-section-bottom {
         grid-area: article-secondary;
     }
+
+    .st-article-section-wide {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    .st-article-section-wide .st-article-section-title {
+        grid-column: 1 / span 4;
+    }
 }
 
 /* ad section */
@@ -436,7 +454,7 @@ SECTIONS
         justify-content: flex-start;
         border-bottom: none;
         padding-left: 1em;
-        border-left: 1px #cec9c2 solid;
+        border-left: 1px #0b4fa0 solid;
         margin-bottom: 0;
     }
 }
@@ -586,6 +604,56 @@ COMPONENTS
     }
 }
 
+/* sub article wide card */
+
+.st-article-section-wide-article {
+    display: flex;
+    flex-direction: column;
+    margin-top: 1em;
+}
+
+.st-article-section-wide-article__image-link img {
+    max-width: 100%;
+    height: auto;
+    aspect-ratio: 1.5;
+    object-fit: cover;
+    object-position: center;
+    border-radius: 5px;
+}
+
+.st-article-section-wide-article__category-link {
+    text-decoration: none;
+    color: #fff;
+    padding: .3em .75em;
+    background: #0b4fa0;
+    font-size: .8rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 600;
+}
+
+.st-article-section-wide-article__title {
+    text-decoration: none;
+    color: #454545;
+    font-size: 1.2rem;
+    line-height: 1.2;
+}
+
+.st-article-section-wide-article__title h3 {
+    margin: .25em 0;
+}
+
+.st-article-section-wide-article__excerpt {
+    font-size: .75em;
+    margin: 0;
+}
+
+.st-article-section-wide-article__author-link {
+    text-decoration: none;
+    color: #8b8680;
+    font-size: .5em;
+}
+
 /* chips */
 
 .st-chip {