---
import NavbarLayout from "./NavbarLayout.astro";
import BackgroundImage from "../components/BackgroundImage.astro";

const { title, description, wide = false } = Astro.props;
---

<NavbarLayout title={title} description={description}>
    <slot name="head" slot="head" />
    <div class="h-screen w-screen fixed -z-10">
        <BackgroundImage />
    </div>
    <div
        class="mx-auto p-8 rounded-b-md border-x-gray-100 shadow-md pt-14 relative
            text-white backdrop-blur-3xl"
        style={wide ? "width: clamp(80%, 75em, 100%);" : "width: min(100%, 75em);"}
    >
        <slot />
    </div>
</NavbarLayout>