Added Sidenote Component

src/components/Page/Menu/MenuArea/MenuArea.module.css

@@ -60,7 +60,8 @@
     --area-bg-animation-keyframe: none;
     --area-bg--animation-duration: 0s;
     --area-bg--animation-timing: linear;
-    --area-bg-filter: grayscale(100%) contrast(150) brightness(150);
+    --area-bg-filter: grayscale(100%) contrast(10) brightness(250);
+    --area-bg-blendmode: color-dodge;
 
     position: absolute;
     z-index: -1;
@@ -70,6 +71,7 @@
 
     object-fit: cover;
     filter: var(--area-bg-filter);
+    mix-blend-mode: var(--area-bg-blendmode);
 
     @media screen and (--bp-tablet-down) {
       display: none;
@@ -93,27 +95,10 @@
         --subtitle-transition: all 0.3s ease-in-out;
         --title-transition: color 0.3s ease-in-out;
 
-        &::before {
-          content: "";
-
-          position: absolute;
-          z-index: -1;
-
-          width: 100%;
-          height: 100%;
-
-          opacity: 0;
-          background: alpharize(var(--grid-bg), 0.66);
-        }
-
         &:hover {
           --divider-color: var(--color-tertiary);
           --title-color: var(--color-tertiary);
           --subtitle-color: var(--color-tertiary);
-
-          &::before {
-            opacity: 1;
-          }
         }
       }
     }