add blog photo and blog landing banner

_blogs/pif-fellows-reflect-on-experiences.md

@@ -1,7 +1,7 @@
 ---
 id: pif-fellows-reflect-on-experiences
 title: 'PIF Fellows Reflect On Experiences'
-image: /assets/images/logo/pif-logo--dark.png
+image: /assets/images/blogs/PIF_Experiences_Blog.png
 author: Presidential Innovation Fellows alumni
 published_at: "2024-12-13"
 summary: "Former Presidential Innovation Fellows reflect on their experiences within the program and how it has helped them to continue their careers in public service."

_layouts/blog-landing.html

@@ -6,23 +6,16 @@
 
 <!-- BANNER -->
 <section class="blogs">
-    <div class="usa-hero">
-      <div class="usa-hero__callout">
-        <div class="grid-container">
-          <div class="grid-row">
-            <div class="grid-col">
-              <h1 class="usa-hero__heading">Presidential Innovation Fellows Blog</h1>
-            </div>
-          </div>
-          <div class="grid-row display-flex flex-row flex-align-end height-full">
-            <div class="grid-col-12">
-              <p>U.S. Digital Corps Fellows work at agencies across the government on projects that make a
-                difference for the American public.</p>
-            </div>
+    <div class="usa-hero usa-hero--short">
+        <div class="usa-hero__overlay"></div>
+        <div class="usa-hero__overlay-content">
+          <div class="grid-container display-flex flex-column flex-justify-center height-full">
+            <h1 class="usa-hero__heading display display--inverted">
+              Blog
+            </h1>
           </div>
         </div>
       </div>
-    </div>
     <hr/>
   </section>
 

_sass/uswds-overrides/_hero.scss

@@ -84,7 +84,7 @@
 }
 .blogs .usa-hero {
   @include hero-short;
-  background-image: url($baseurl + "/assets/images/banners/banner-nasa.jpg");
+  background-image: url($baseurl + "/assets/images/banners/blog-header.png");
 }
 .usa-hero.project {
   @include hero-short;