adds additiona vf-header--inlay, moves some CSS changes to here as it makes more sense

components/vf-header/vf-header--inlay.njk

+<style>
+:root {
+  /* These CSS properties are theming variables. If used, add to your HTML
+     after the VF CSS for vf-masthead and before the HTML for vf-masthead. */
+  --vf-masthead__bg-image: url('{{ '/assets/vf-masthead/assets/group-bg_2d4155.png' | path }}');
+}
+</style>
+
+<header class="vf-header vf-header--inlay">
+
+  {% render '@vf-masthead--inlay' %}
+  {% render '@vf-navigation--main' %}
+
+</header>

components/vf-header/vf-header.njk

@@ -3,11 +3,7 @@
   {% render '@vf-global-header' %}
 
   {% render '@vf-masthead' %}
-  <div class="vf-header__navigation vf-header__navigation--main">
   {% render '@vf-navigation--main' %}
-  </div>
-  <div class="vf-header__navigation vf-header__navigation--additional">
   {% render '@vf-navigation--additional' %}
-  </div>
 
 </header>

components/vf-header/vf-header.scss

@@ -9,17 +9,14 @@
   grid-template-columns: minmax(var(--page-grid-gap), auto) minmax(auto, $global-page-max-width) minmax(var(--page-grid-gap), auto);
 }
 
-.vf-header > .vf-global-header {
-  margin-bottom: -1px;
-}
-
-.vf-header__navigation {
-  display: grid;
-  grid-column: 1 / -1;
-  grid-template-columns: minmax(var(--page-grid-gap), auto) minmax(auto, $global-page-max-width) minmax(var(--page-grid-gap), auto);
-  & > * {
+.vf-header {
+  .vf-navigation--main {
     grid-column: 2 / -2;
   }
+  .vf-navigation--additional {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
 }
 
 .vf-header__navigation--site {
@@ -33,3 +30,19 @@
   background-color: set-color(vf-color-gray-dark);
   grid-row: 2;
 }
+
+.vf-header > .vf-global-header {
+  margin-bottom: -1px;
+}
+
+.vf-header--inlay {
+  grid-column: 2 / -2;
+
+  .vf-masthead__heading {
+    padding: 0 1rem;
+  }
+
+  .vf-navigation {
+    grid-column: 1 / -1;
+  }
+}