Update logo label sizing to match the design

src/components/site-header/site-header.scss

@@ -70,7 +70,7 @@
       width: 90%;
       z-index: 100;
 
-      @include breakpoint($medium) {
+      @include breakpoint($narrow) {
         width: 400px;
       }
     }
@@ -112,13 +112,8 @@
 
       svg {
         height: 24px;
-        margin-left: 4px;
         width: 24px;
 
-        @include breakpoint($narrow) {
-          margin-left: 8px;
-        }
-
         @include breakpoint($medium) {
           width: 20px;
         }

src/components/site-header/site-logo/site-logo.scss

@@ -27,6 +27,13 @@ a {
     margin-left: 8px;
     max-width: 100%;
     text-transform: uppercase;
+    max-width: 90px;
+
+    .hy-site-header__logo-container & {
+      @include breakpoint($narrow) {
+        max-width: none;
+      }
+    }
 
     @include breakpoint($narrow) {
       @include font-size(15px, 16px);

src/components/site-header/site-logo/site-logo.tsx

@@ -4,7 +4,7 @@ import {ColorVariant, SiteLogoSize} from '../../../utils/utils';
 @Component({
   tag: 'hy-site-logo',
   styleUrl: 'site-logo.scss',
-  shadow: true,
+  shadow: false,
 })
 export class SiteLogo {
   @Prop() color: ColorVariant = ColorVariant.black;

src/components/site-header/site-search/site-search.scss

@@ -33,16 +33,16 @@
   &__label {
     @include font-size(14px, 14px);
     @include font-weight($bold);
-
     color: var(--site-logo-color);
     display: none;
+    display: none;
     font-family: var(--main-font-family);
     letter-spacing: -0.9px;
     margin-left: 4px;
+    visibility: hidden;
 
     @include breakpoint($narrow) {
       @include font-size(15px, 16px);
-      display: block;
       margin-left: 4px;
       margin-right: 8px;
       text-transform: uppercase;
@@ -50,8 +50,10 @@
 
     @include breakpoint($wide) {
       @include font-size(14px);
+      display: block;
       font-weight: 600;
       text-transform: none;
+      visibility: visible;
     }
 
     @include breakpoint($extrawide) {