First draft

src/components/bits/SlideContainer.astro

@@ -0,0 +1,34 @@
+---
+interface Props {
+  anchorLink: string;
+  background?: string;
+  bgImageUrl?: string;
+}
+
+const { anchorLink, background, bgImageUrl } = Astro.props;
+
+const backgroundColor =background ?? "transparent";
+const backgroundImage = bgImageUrl ? `url(${bgImageUrl})` : "none";
+---
+
+<section class="slide-container" id={"slide-" + anchorLink}>
+    <slot name="main-slide" />
+    <slot />
+</section>
+
+<style define:vars={{ backgroundColor, backgroundImage }}>
+    .slide-container {
+        background-color: var(--backgroundColor);
+        background-image: var(--backgroundImage);
+        width: 100dvw;
+        height: 100dvh;
+        display: flex;
+        flex-direction: row;
+        align-items: start;
+        justify-content: start;
+        scroll-snap-type: x mandatory;
+		scroll-snap-align: start;
+        overflow-x: auto;
+		flex-shrink: 0;
+    }
+</style>