diff --git a/styleguide.css b/styleguide.css
index 1445429..a4561d2 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1341,14 +1341,18 @@ section + section {
 }
 
 .sg-portal-header__main {
-  display: flex;
+  display: grid;
   flex: 1 1 auto;
-  flex-direction: column;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    "brand menu"
+    "tabs tabs";
   gap: var(--spacing-large);
   min-width: 0;
 }
 
 .sg-portal-header__brand {
+  grid-area: brand;
   margin: 0;
   padding-left: 0;
   font-size: var(--font-size-portal-header-brand);
@@ -1356,11 +1360,13 @@ section + section {
 }
 
 .sg-portal-header__tabs {
+  grid-area: tabs;
   width: 100%;
 }
 
 .sg-portal-header__menu-wrap {
-  flex: 0 0 auto;
+  grid-area: menu;
+  justify-self: end;
 }
 
 .sg-portal-header-pattern-variant {
@@ -1377,26 +1383,8 @@ section + section {
 
 @media (max-width: calc(var(--layout-object-card-desktop-breakpoint) - 1px)) {
   .sg-portal-header__main {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    grid-template-areas:
-      "brand menu"
-      "tabs tabs";
     gap: var(--spacing-small) var(--spacing-large);
   }
-
-  .sg-portal-header__brand {
-    grid-area: brand;
-  }
-
-  .sg-portal-header__tabs {
-    grid-area: tabs;
-  }
-
-  .sg-portal-header__menu-wrap {
-    grid-area: menu;
-    justify-self: end;
-  }
 }
 
 /* ========================================================= */