add hero section background

src/styles/_hero.scss

@@ -7,21 +7,47 @@
   padding-block: var(--space-12);
   overflow: hidden;
 
+  background-image: url('/src/assets/bg_1280.webp');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+
+  @media (min-width: 1920px) {
+    background-image: url('/src/assets/bg_2560.webp');
+  }
+  @media (min-width: 1280px) and (max-width: 1919px) {
+    background-image: url('/src/assets/bg_1920.webp');
+  }
+  @media (min-width: 768px) and (max-width: 1279px) {
+    background-image: url('/src/assets/bg_1280.webp');
+  }
+  @media (min-width: 480px) and (max-width: 767px) {
+    background-image: url('/src/assets/bg_768.webp');
+  }
+  @media (max-width: 479px) {
+    background-image: url('/src/assets/bg_480.webp');
+  }
+
   &::before {
     content: '';
     position: absolute;
     inset: 0;
     background:
+      linear-gradient(180deg, rgb(250 246 239 / 0.87) 0%, rgb(250 246 239 / 0.81) 60%, rgb(250 246 239 / 0.91) 100%),
       radial-gradient(60% 60% at 85% 15%, rgb(217 108 63 / 0.16), transparent 70%),
       radial-gradient(50% 50% at 10% 90%, rgb(46 107 79 / 0.18), transparent 70%);
-    z-index: -1;
+    z-index: 0;
   }
 
   h1 {
+    position: relative;
+    z-index: 1;
     margin-bottom: var(--space-4);
   }
 
   p {
+    position: relative;
+    z-index: 1;
     font-size: 1.15rem;
     color: var(--text);
     max-width: 60ch;
@@ -29,10 +55,14 @@
 }
 
 .hero__inner {
+  position: relative;
+  z-index: 1;
   max-width: 720px;
 }
 
 .hero__actions {
+  position: relative;
+  z-index: 1;
   display: flex;
   gap: var(--space-3);
   margin-top: var(--space-6);

src/styles/_layout.scss

@@ -32,6 +32,8 @@
 }
 
 .eyebrow {
+  position: relative;
+  z-index: 1;
   display: inline-block;
   font-size: 0.8rem;
   font-weight: 600;