---
import Section from "../Section.astro"

const { Backdrop="/src/images/wp/wafi-img-data=backdrop_gedung.png", ...rest } = Astro.props;
---

<Section Classes="single-hero-section" {...rest}>
    <slot />
    <div class="overlay"></div>
    <img src={Backdrop} alt="backdrop image" class="backdrop-img" />
</Section>

<style type="text/css" define:vars={{Backdrop}}>
    .single-hero-section {
        min-height: 40dvh;
        height: 100%;

        .backdrop-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-position: center;
            z-index: 1;
            overflow: hidden;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #fafafadd;
            z-index: 2;
        }

        .wrapper {
            z-index: 5;
        }
    }
</style>