components/HeroSection.module.css

@@ -6,8 +6,8 @@
 }
 
 .inner {
-  position: relative;
   z-index: 1;
+  position: relative;
   max-width: var(--container-width);
   margin-inline: auto;
   padding-inline: var(--space-4);
@@ -21,10 +21,10 @@
   transform: translate(-50%, -50%);
   width: min(78vw, 360px);
   height: auto;
+  opacity: 0.05;
   pointer-events: none;
   user-select: none;
   z-index: 0;
-  opacity: 0.06;
 }
 
 .content {
@@ -35,6 +35,34 @@
   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);
@@ -46,6 +74,7 @@
     right: 0;
     transform: translateY(-50%);
     width: min(42vw, 420px);
+    opacity: 0.06;
   }
 
   .actions {
@@ -54,7 +83,6 @@
     align-items: center;
     gap: var(--space-6);
   }
-
   .heading {
     max-width: 24ch;
   }
@@ -64,16 +92,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;
   }
 }