feat: 💄 add gradient box shadow to main elements

src/components/profile.webc

@@ -40,6 +40,9 @@
     padding-block: var(--sidebar-padding);
     padding-inline: var(--sidebar-padding);
 
+    transform: translate(0);
+    transform-style: preserve-3d;
+
     @media (min-width: 64em) {
       --sidebar-position: sticky;
       --sidebar-padding: 1.5rem;
@@ -50,6 +53,28 @@
     }
   }
 
+  :host::before {
+    --shadow-inset: -0.5em -0.5em 0.5em 0.5em;
+
+    content: '';
+    position: absolute;
+    inset: var(--shadow-inset);
+
+    background: linear-gradient(
+      to right,
+      oklch(from var(--clr-gradient-box-shadow) calc(l + 0.1) c h),
+      oklch(from var(--clr-gradient-box-shadow) calc(l - 0.2) c h)
+    );
+
+    border-radius: inherit;
+
+    transform: translate3d(0, 0, -1px);
+
+    @media (min-width: 64em) {
+      --shadow-inset: 1em 1em -1em -1.5em;
+    }
+  }
+
   :host .avatar {
     grid-area: avatar;
     justify-self: center;