using backdrop filter for faster rendering

src/components/containers/BlurWrapper/index.tsx

@@ -1,10 +1,9 @@
 import React, { AllHTMLAttributes, FC } from 'react';
 import * as styles from './styles.scss';
+import classNames from 'classnames';
 
 type IProps = AllHTMLAttributes<HTMLDivElement> & { is_blurred: boolean };
 
 export const BlurWrapper: FC<IProps> = ({ children, is_blurred }) => (
-  <div className={styles.blur} style={{ filter: `blur(${is_blurred ? 15 : 0}px)` }}>
-    {children}
-  </div>
+  <div className={classNames(styles.blur, { [styles.is_blurred]: is_blurred })}>{children}</div>
 );

src/components/containers/BlurWrapper/styles.scss

@@ -2,7 +2,17 @@
   filter: blur(0);
   transition: filter 0.25s;
   will-change: filter;
-  // max-height: 100vh;
-  // width: 100vw;
-  // overflow: visible auto;
+  padding-top: 100px + $gap;
+
+  @include tablet {
+    padding-top: 64px + $gap;
+  }
+
+  &.is_blurred {
+    filter: blur(15px);
+
+    @include can_backdrop {
+      filter: blur(0);
+    }
+  }
 }