Merge branch 'development'

src/components/heading/heading.scss

@@ -302,16 +302,25 @@ h2 {
   @include font-weight($bold);
   letter-spacing: -0.52px;
 
-  @include breakpoint($wide) {
-    // > 960px
+  @include breakpoint($narrow) {
     @include font-size(30px, 36px);
     letter-spacing: -0.6px;
   }
 
-  @include breakpoint($extrawide) {
-    // > 1200px
-    @include font-size(34px, 40px);
-    letter-spacing: -0.68px;
+  // with Sidebar
+  .hy-heading__container__common & {
+    @include breakpoint($xlarge) {
+      @include font-size(34px, 40px);
+      letter-spacing: -0.68px;
+    }
+  }
+
+  // without Sidebar
+  .hy-heading__container__large & {
+    @include breakpoint($extrawide) {
+      @include font-size(34px, 40px);
+      letter-spacing: -0.68px;
+    }
   }
 }
 

src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss

@@ -62,7 +62,7 @@
       &:hover {
         border: 1px solid var(--brand-main);
         margin: -1px;
-        margin-left: 4px;
+        margin-left: 7px;
         text-decoration: underline;
         cursor: pointer;
 

src/components/navigation/menu-sidebar/menu-sidebar.scss

@@ -106,7 +106,10 @@
     max-width: calc(320px - 16px); // Should be in the wrapper.
 
     &[aria-hidden='false'] {
+      padding-right: 12px;
       min-height: var(--minHeight);
+      width: 20vw;
+
       .hy-menu-item-sidebar.hy-menu-item-sidebar--sidenav.hy-menu-item--level-1.is-parent {
         border-bottom: 1px solid var(--brand-main-light) !important;
       }