<script lang="ts">
    export let title: string,
        marginBottom = false
</script>

<section id="pageHeadline">
    <div
        class="wrapper"
        class:marginBottom={marginBottom}
    >
        <slot name="above" />
        <h1>{title}</h1>
        <slot name="below" />
    </div>
</section>

<style lang="less">
    #pageHeadline {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--bg-100);
        width: 100%;
        padding: 2.4rem 0px;

        .wrapper {
            gap: 12px;
            max-width: var(--normal-max-width);
            color: var(--text-100);

            margin: 0px var(--horizontal-default-margin);
            h1 {
                padding: 0px;
                margin-bottom: 12px;
            }
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            &.marginBottom {
                margin-bottom: 2.4rem;
            }
        }
    }
    :global #pageHeadline p {
        color: var(--text-100);
    }
</style>
