webseite/frontend/dev/scss/05_modules/_header-main.scss

@@ -1,9 +1,20 @@
 .header-main {
+  position: relative;
+
   width: 100%;
   height: 400px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  .content-box {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: auto;
+    margin: 0 auto;
+    height: 100%;
+    max-width: 360px;
+    max-height: 380px;
+  }
 
   background: $color-3 url('../img/header-image.webp') center no-repeat;
   background-size: cover;
@@ -20,6 +31,39 @@
       }
     }
   }
+
+  .splide {
+    position: absolute;
+    z-index: 1;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    overflow: hidden;
+    .splide__track {
+      height: 100%;
+      .splider-content {
+        &::after {
+          content: '';
+          position: absolute;
+          z-index: 1;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-color: rgba(0, 0, 0, 0.2);
+        }
+
+        height: 100%;
+        padding: 0;
+        img {
+          object-fit: cover;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+
   // .content-box {
   //   figure {
   //     width: 280px;