@inera/ids-design 5.4.1 → 5.5.1

package/components/header-1177/composite-header-1177.css

@@ -51,34 +51,32 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   margin-right: auto;
   background: var(--IDS-COLOR-PRIMARY-90);
   width: 100%;
-  height: 7.5rem;
   position: relative;
-  margin-left: auto;
-  margin-right: auto;
-  display: grid;
-  grid-template-columns: auto auto 1fr;
-}
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner.ids-header-1177--hide-region-picker, header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner:has(.ids-header-1177__avatar) {
-  grid-template-columns: auto 1fr;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
 }
-@media (max-width: 1024px) {
+@media (min-width: 1024px) {
   header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner {
-    grid-template-columns: auto 1fr auto;
-    height: 3rem;
-  }
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner.ids-header-1177--hide-region-picker, header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner:has(.ids-header-1177__avatar) {
-    grid-template-columns: auto 1fr;
+    min-height: 7.5rem;
   }
 }
+header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__inner-left {
+  display: flex;
+  flex-grow: 1;
+}
+header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__inner-right {
+  display: block;
+  margin-left: auto;
+}
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo {
   background-color: var(--IDS-COLOR-PRIMARY-40);
-  display: grid;
-  grid-column: 1;
-  grid-row: 1;
+  display: flex;
   align-items: center;
-  grid-template-columns: auto auto;
   position: relative;
   height: 100%;
+  min-height: 7.5rem;
   margin-left: 0 !important;
   margin-right: 0;
   padding-left: 0.75rem;
@@ -91,6 +89,7 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   z-index: 0;
   border-radius: 100%;
   right: -0.5625rem;
+  top: 0;
   left: auto;
   top: 50%;
   margin-top: -12.5rem;
@@ -105,9 +104,9 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
 }
 @media (max-width: 1024px) {
   header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo {
-    grid-template-columns: auto;
+    min-height: 3rem;
     padding-left: 1.25rem;
-    padding-right: 0.75rem;
+    padding-right: 1.25rem;
   }
   header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo:after {
     content: "";
@@ -116,11 +115,12 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
     z-index: 0;
     border-radius: 100%;
     right: -0.5625rem;
+    top: 0;
     left: auto;
     display: none;
     top: 0;
     margin-top: -7.81rem;
-    clip: rect(7.8125rem, 18.75rem, 10.8375rem, 18.125rem);
+    clip: rect(7.8125rem, 18.75rem, 10.8125rem, 18.125rem);
     height: 18.75rem;
     width: 18.75rem;
   }
@@ -163,10 +163,9 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
 }
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region {
   display: flex;
+  flex-grow: 1;
   gap: 1rem;
-  grid-column: 2;
   align-items: center;
-  grid-row: 1;
   position: relative;
 }
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:after {
@@ -176,11 +175,12 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   z-index: 0;
   border-radius: 100%;
   right: -0.5625rem;
+  top: 0;
   left: auto;
   display: none;
   top: 0;
   margin-top: -7.81rem;
-  clip: rect(7.8125rem, 18.75rem, 10.8375rem, 18.125rem);
+  clip: rect(7.8125rem, 18.75rem, 10.8125rem, 18.125rem);
   height: 18.75rem;
   width: 18.75rem;
 }
@@ -193,30 +193,41 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region {
     background-color: var(--IDS-COLOR-PRIMARY-40);
     justify-content: space-between;
-    padding-left: 0.5rem;
   }
 }
+header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected {
+  margin-left: -4px;
+}
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-picker button {
   display: flex;
   justify-content: end;
 }
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected:before {
+header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-icon {
+  min-height: 7.5rem;
+  padding-right: 2rem;
+}
+header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-icon:before {
   content: "";
   position: absolute;
   z-index: 1;
   left: -1.875rem;
   width: 0.063rem;
-  height: 4rem;
+  min-height: 4rem;
   background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
 @media (max-width: 1024px) {
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected:before {
+  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-icon:before {
     left: 0;
-    height: 2rem;
+    top: 50%;
+    transform: translateY(-50%);
+    min-height: 2rem;
   }
 }
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-icon {
-  padding-right: 2rem;
+@media (max-width: 1024px) {
+  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-icon {
+    min-height: 3rem;
+    max-width: 6rem;
+  }
 }
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-picker__text {
   font-size: 1rem;
@@ -226,6 +237,9 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
     display: none;
   }
 }
+header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-picker {
+  min-width: 7rem;
+}
 @media (max-width: 1024px) {
   header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-picker button:before {
     content: "";
@@ -233,33 +247,42 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
     z-index: 1;
     left: -1.875rem;
     width: 0.063rem;
-    height: 4rem;
+    min-height: 4rem;
     background-color: var(--IDS-COLOR-NEUTRAL-100);
   }
 }
 @media (max-width: 1024px) and (max-width: 1024px) {
   header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-picker button:before {
     left: 0;
-    height: 2rem;
+    top: 50%;
+    transform: translateY(-50%);
+    min-height: 2rem;
   }
 }
 @media (max-width: 1024px) {
   header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-icon {
     display: none;
   }
+  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-icon:before {
+    display: none;
+  }
 }
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon {
   background-color: var(--IDS-COLOR-PRIMARY-40);
-  display: grid;
+  display: flex;
   position: relative;
+  align-items: center;
   height: 100%;
   align-items: center;
 }
+header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon .ids-icon {
+  display: block !important;
+}
 @media (max-width: 1024px) {
   header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon {
     background-color: var(--IDS-COLOR-PRIMARY-40);
     justify-content: space-between;
-    padding-left: 0.5rem;
+    padding-left: 1rem;
     height: auto;
     align-items: normal;
   }
@@ -271,6 +294,7 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   z-index: 0;
   border-radius: 100%;
   right: -0.5625rem;
+  top: 0;
   left: auto;
   top: 50%;
   margin-top: -12.5rem;
@@ -284,12 +308,14 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   }
 }
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon slot {
-  display: grid;
+  display: flex;
+  align-items: center;
 }
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon ::slotted([slot=region]),
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon .ids-header-1177__region-logo {
+  min-height: 2.813rem;
+  height: 2.813rem;
   max-height: 2.813rem;
-  max-width: 12.5rem;
   display: flex;
 }
 @media (max-width: 1024px) {
@@ -303,7 +329,8 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   align-items: center;
   position: relative;
   height: inherit;
-  margin-left: 1.5rem;
+  padding: 0 0.5rem;
+  margin: 0 -0.4375rem 0 0.5rem;
 }
 @media (max-width: 1024px) {
   header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker {
@@ -333,6 +360,8 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   font-size: 0.875rem;
   color: var(--IDS-COLOR-PRIMARY-35);
   align-items: center;
+  padding: 0 0.5rem;
+  margin: 0 -0.5rem;
 }
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker button:focus {
   outline: var(--IDS-FOCUS__OUTLINE);
@@ -341,8 +370,9 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
 @media (max-width: 1024px) {
   header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker button {
     inset: 0;
-    padding-right: 1rem;
+    padding-right: 0.75rem;
     padding-left: 0.75rem;
+    margin-right: 1px;
     position: absolute;
     justify-content: space-between;
     color: var(--IDS-COLOR-NEUTRAL-100);
@@ -353,19 +383,14 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   }
 }
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__items {
-  justify-self: end;
-  display: grid;
-  grid-row: 1;
-  grid-column: 3;
-  align-items: center;
-  grid-auto-flow: column;
+  display: flex;
   gap: 1.25rem;
   margin-right: 1.25rem;
   margin-left: 1rem;
+  align-items: center;
 }
 @media (max-width: 1024px) {
   header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__items {
-    gap: 0;
     margin-left: 1rem;
     margin-right: 0.5rem;
   }
@@ -433,25 +458,27 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
   margin-right: auto;
   background: var(--IDS-COLOR-PRIMARY-90);
   width: 100%;
-  height: 7.5rem;
   position: relative;
-  margin-left: auto;
-  margin-right: auto;
-  display: grid;
-  grid-template-columns: auto auto 1fr;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
 }
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner.ids-header-1177--hide-region-picker, header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner:has(.ids-header-1177__avatar) {
-  grid-template-columns: auto 1fr;
+header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__inner-left {
+  display: flex;
+  flex-grow: 1;
+}
+header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__inner-right {
+  display: block;
+  margin-left: auto;
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo {
   background-color: var(--IDS-COLOR-PRIMARY-40);
-  display: grid;
-  grid-column: 1;
-  grid-row: 1;
+  display: flex;
   align-items: center;
-  grid-template-columns: auto auto;
   position: relative;
   height: 100%;
+  min-height: 7.5rem;
   margin-left: 0 !important;
   margin-right: 0;
   padding-left: 0.75rem;
@@ -464,6 +491,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
   z-index: 0;
   border-radius: 100%;
   right: -0.5625rem;
+  top: 0;
   left: auto;
   top: 50%;
   margin-top: -12.5rem;
@@ -490,10 +518,9 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region {
   display: flex;
+  flex-grow: 1;
   gap: 1rem;
-  grid-column: 2;
   align-items: center;
-  grid-row: 1;
   position: relative;
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:after {
@@ -503,40 +530,52 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
   z-index: 0;
   border-radius: 100%;
   right: -0.5625rem;
+  top: 0;
   left: auto;
   display: none;
   top: 0;
   margin-top: -7.81rem;
-  clip: rect(7.8125rem, 18.75rem, 10.8375rem, 18.125rem);
+  clip: rect(7.8125rem, 18.75rem, 10.8125rem, 18.125rem);
   height: 18.75rem;
   width: 18.75rem;
 }
+header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected {
+  margin-left: -4px;
+}
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-picker button {
   display: flex;
   justify-content: end;
 }
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected:before {
+header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-icon {
+  min-height: 7.5rem;
+  padding-right: 2rem;
+}
+header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-icon:before {
   content: "";
   position: absolute;
   z-index: 1;
   left: -1.875rem;
   width: 0.063rem;
-  height: 4rem;
+  min-height: 4rem;
   background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-icon {
-  padding-right: 2rem;
-}
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-picker__text {
   font-size: 1rem;
 }
+header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-picker {
+  min-width: 7rem;
+}
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon {
   background-color: var(--IDS-COLOR-PRIMARY-40);
-  display: grid;
+  display: flex;
   position: relative;
+  align-items: center;
   height: 100%;
   align-items: center;
 }
+header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon .ids-icon {
+  display: block !important;
+}
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon:after {
   content: "";
   background-color: var(--IDS-COLOR-PRIMARY-40);
@@ -544,6 +583,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
   z-index: 0;
   border-radius: 100%;
   right: -0.5625rem;
+  top: 0;
   left: auto;
   top: 50%;
   margin-top: -12.5rem;
@@ -552,12 +592,14 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
   width: 25rem;
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon slot {
-  display: grid;
+  display: flex;
+  align-items: center;
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon ::slotted([slot=region]),
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon .ids-header-1177__region-logo {
+  min-height: 2.813rem;
+  height: 2.813rem;
   max-height: 2.813rem;
-  max-width: 12.5rem;
   display: flex;
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker {
@@ -565,7 +607,8 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
   align-items: center;
   position: relative;
   height: inherit;
-  margin-left: 1.5rem;
+  padding: 0 0.5rem;
+  margin: 0 -0.4375rem 0 0.5rem;
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker button {
   min-width: 1.5rem;
@@ -587,21 +630,19 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
   font-size: 0.875rem;
   color: var(--IDS-COLOR-PRIMARY-35);
   align-items: center;
+  padding: 0 0.5rem;
+  margin: 0 -0.5rem;
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker button:focus {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: 0.125rem !important;
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__items {
-  justify-self: end;
-  display: grid;
-  grid-row: 1;
-  grid-column: 3;
-  align-items: center;
-  grid-auto-flow: column;
+  display: flex;
   gap: 1.25rem;
   margin-right: 1.25rem;
   margin-left: 1rem;
+  align-items: center;
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobile {
   display: none;
@@ -793,14 +834,13 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
 }
 
 .ids-header-1177--unresponsive .ids-header-1177__avatar {
-  grid-column: 3;
-  justify-self: end;
-  display: grid;
+  align-self: flex-end;
+  display: flex;
   align-items: center;
+  flex-wrap: wrap;
 }
 .ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box {
-  display: grid;
-  grid-template-columns: auto auto;
+  display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
@@ -813,12 +853,14 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
 }
 .ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-icon {
   display: flex;
+  min-width: 1rem;
+  min-height: 1rem;
   max-width: 2.25rem;
   max-height: 2.75rem;
 }
 .ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
-  display: grid;
-  grid-template-rows: 1fr 1fr;
+  display: flex;
+  flex-direction: column;
 }
 .ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name {
   text-align: start;
@@ -846,14 +888,13 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
 }
 
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar {
-  grid-column: 3;
-  justify-self: end;
-  display: grid;
+  align-self: flex-end;
+  display: flex;
   align-items: center;
+  flex-wrap: wrap;
 }
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box {
-  display: grid;
-  grid-template-columns: auto auto;
+  display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
@@ -877,23 +918,22 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
 }
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-icon {
   display: flex;
+  min-width: 1rem;
+  min-height: 1rem;
   max-width: 2.25rem;
   max-height: 2.75rem;
 }
 @media (max-width: 1024px) {
   .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-icon {
-    width: 1.25rem;
-    height: 1.25rem;
+    min-width: 1rem;
+    min-height: 1rem;
+    max-width: 1.25rem;
+    max-height: 1.25rem;
   }
 }
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
-  display: grid;
-  grid-template-rows: 1fr 1fr;
-}
-@media (max-width: 1024px) {
-  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
-    grid-template-rows: 1fr;
-  }
+  display: flex;
+  flex-direction: column;
 }
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name {
   text-align: start;
@@ -931,14 +971,13 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
 }
 
 :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) {
-  grid-column: 3;
-  justify-self: end;
-  display: grid;
+  align-self: flex-end;
+  display: flex;
   align-items: center;
+  flex-wrap: wrap;
 }
 :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box {
-  display: grid;
-  grid-template-columns: auto auto;
+  display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
@@ -962,23 +1001,22 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
 }
 :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-icon {
   display: flex;
+  min-width: 1rem;
+  min-height: 1rem;
   max-width: 2.25rem;
   max-height: 2.75rem;
 }
 @media (max-width: 1024px) {
   :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-icon {
-    width: 1.25rem;
-    height: 1.25rem;
+    min-width: 1rem;
+    min-height: 1rem;
+    max-width: 1.25rem;
+    max-height: 1.25rem;
   }
 }
 :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
-  display: grid;
-  grid-template-rows: 1fr 1fr;
-}
-@media (max-width: 1024px) {
-  :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
-    grid-template-rows: 1fr;
-  }
+  display: flex;
+  flex-direction: column;
 }
 :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name {
   text-align: start;
@@ -1015,14 +1053,13 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   margin-right: 0.5rem;
 }
 :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive {
-  grid-column: 3;
-  justify-self: end;
-  display: grid;
+  align-self: flex-end;
+  display: flex;
   align-items: center;
+  flex-wrap: wrap;
 }
 :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box {
-  display: grid;
-  grid-template-columns: auto auto;
+  display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
@@ -1035,12 +1072,14 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
 }
 :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-icon {
   display: flex;
+  min-width: 1rem;
+  min-height: 1rem;
   max-width: 2.25rem;
   max-height: 2.75rem;
 }
 :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
-  display: grid;
-  grid-template-rows: 1fr 1fr;
+  display: flex;
+  flex-direction: column;
 }
 :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name {
   text-align: start;
@@ -1075,6 +1114,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   max-width: var(--IDS__MAX-WIDTH);
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   margin-top: 0;
   margin-bottom: 0;
   margin-left: auto;
@@ -1090,6 +1130,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   max-width: var(--IDS__MAX-WIDTH);
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   margin-top: 0;
   margin-bottom: 0;
   margin-left: auto;
@@ -1118,6 +1159,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   max-width: var(--IDS__MAX-WIDTH);
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   margin-top: 0;
   margin-bottom: 0;
   margin-left: auto;
@@ -1141,6 +1183,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   max-width: var(--IDS__MAX-WIDTH);
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   margin-top: 0;
   margin-bottom: 0;
   margin-left: auto;
@@ -1592,7 +1635,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   border-right: none !important;
 }
 .ids-header-1177__nav-mobile__menu .ids-hamburger {
-  transition: 0.2s;
+  transition: all 0.2s;
   cursor: pointer;
   user-select: none;
   position: relative;
@@ -1601,7 +1644,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   display: block;
   width: 1.3125rem;
   border-radius: 0.125rem;
-  transition: 0.2s;
+  transition: all 0.2s;
   background-color: var(--IDS-COLOR-PRIMARY-35);
   position: relative;
   height: 0.188rem;
@@ -1612,7 +1655,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   display: inline-block;
   width: 1.3125rem;
   border-radius: 0.125rem;
-  transition: 0.2s;
+  transition: all 0.2s;
   background-color: var(--IDS-COLOR-PRIMARY-35);
   position: absolute;
   left: 0;
@@ -1636,10 +1679,6 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
 .ids-header-1177__nav-mobile__menu .ids-hamburger__lines:after {
   top: -0.5rem;
 }
-.ids-header-1177__nav-mobile__menu[aria-expanded=true] .ids-hamburger {
-  -webkit-transform: scale3d(0.8, 0.8, 0.8);
-  transform: scale3d(0.8, 0.8, 0.8);
-}
 .ids-header-1177__nav-mobile__menu[aria-expanded=true] .ids-hamburger .ids-hamburger__lines {
   background: transparent;
 }
@@ -1648,8 +1687,8 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   -webkit-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
   top: 0;
-  width: 2rem;
-  left: -0.313rem;
+  width: 1.5rem;
+  left: -0.1rem;
 }
 .ids-header-1177__nav-mobile__menu[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before {
   -ms-transform: rotate(45deg);