update

components/HeroSection.module.css

@@ -2,9 +2,12 @@
   position: relative;
   background: var(--color-background-linear);
   padding-block: var(--space-16);
+  overflow: hidden;
 }
 
 .inner {
+  position: relative;
+  z-index: 1;
   max-width: var(--container-width);
   margin-inline: auto;
   padding-inline: var(--space-4);
@@ -14,68 +17,45 @@
   position: absolute;
   top: 50%;
   left: 50%;
+  right: auto;
   transform: translate(-50%, -50%);
-  right: var(--space-4);
-  width: 100%;
-  height: 80%;
-  opacity: 0.08;
+  width: min(78vw, 360px);
+  height: auto;
+  opacity: 0.05;
   pointer-events: none;
   user-select: none;
   z-index: 0;
 }
 
 .content {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: column;
   gap: var(--space-5);
 }
 
-.heading {
-  max-width: 15ch;
-}
-
-.lead {
-  max-width: 40ch;
-}
-
-.actions {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: var(--space-4);
-  margin-top: var(--space-2);
-}
-
-.actions :global(.btn) {
-  width: fit-content;
-  font-weight: var(--font-weight-semibold);
-}
-
-.actions :global(.btn--tertiary) {
-  padding-top: 0;
-  padding-bottom: 0;
-  color: var(--font-body-color);
-}
-
-/* Tablet */
 @media (min-width: 768px) {
   .hero {
     padding-block: var(--space-28);
   }
 
   .heroDecoration {
-    position: absolute;
     top: 50%;
+    left: auto;
+    right: 0;
     transform: translateY(-50%);
-    height: 90%;
-    width: 50%;
+    width: min(42vw, 420px);
+    opacity: 0.06;
   }
+
   .actions {
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--space-6);
   }
+
   .heading {
     max-width: 24ch;
   }
@@ -85,12 +65,17 @@
   }
 }
 
-/* Desktop */
 @media (min-width: 1024px) {
   .hero {
     padding-block: var(--space-36);
   }
+
   .inner {
     padding-inline: var(--space-6);
   }
+
+  .heroDecoration {
+    width: min(44vw, 560px);
+    opacity: 0.08;
+  }
 }