fix: ff hero blur

src/pages/Home.js

@@ -13,11 +13,12 @@ const Home = () => {
 
   return (
     <>
+      <div className="relative card elevation-10 flex flex-col lg:flex-row lg:items-center my-8 xl:-mx-16 container-padding--zero md:container-padding--auto">
         <div
-        className="card elevation-10 bg-opacity-25 flex flex-col lg:flex-row lg:items-center my-8 xl:-mx-16 container-padding--zero md:container-padding--auto"
+          className="absolute w-full h-full flex bg-blur"
           style={{ backgroundImage: `url(${cfPattern})` }}
-      >
-        <div className="w-full flex items-center justify-center bg-blur text-center lg:text-left p-8 py-16 md:p-16">
+        ></div>
+        <div className="w-full flex items-center justify-center bg-backdrop-blur text-center lg:text-left p-8 py-16 md:p-16">
           <img
             src={cfLogo}
             alt="CF 2022"
@@ -30,7 +31,7 @@ const Home = () => {
               {days} dní a {hours} hodin!
             </h1>
             <Button
-              className="md:text-xl"
+              className="md:text-xl btn--to-blue-300"
               bodyClassName="whitespace-no-wrap"
               color="black"
               routerTo="/registrace"

src/styles.css

-@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
-
 .bg-blur {
-    backdrop-filter: blur(6px);
-    background-color: rgba(255, 255, 255, 0.8);
-  }
+  filter: blur(4px);
+  z-index: -1;
+  opacity: 0.25;
 }