using backdrop filter for faster rendering

src/components/main/Header/style.scss

@@ -1,10 +1,39 @@
+.wrap {
+  height: 64px;
+  z-index: 5;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  box-sizing: border-box;
+  transition: background-color 0.5s;
+
+  @include tablet {
+    height: 64px;
+  }
+
+  &.is_scrolled {
+    background: transparentize($content_bg, 0.05);
+
+    @include can_backdrop {
+      background: transparentize($content_bg, 0.25);
+      -webkit-backdrop-filter: blur(5px);
+      backdrop-filter: blur(5px);
+    }
+  }
+}
+
 .container {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   font-weight: 500;
-  height: 120px;
-  z-index: 5;
+  // padding: $gap;
+  box-sizing: border-box;
+  flex: 0 1 $content_width;
 }
 
 .spacer {
@@ -56,6 +85,14 @@
       // display: none;
       // }
     }
+
+    @include tablet {
+      padding: $gap / 2;
+
+      &::after {
+        margin-left: $gap;
+      }
+    }
   }
 }