<section class="hero-section">
    <div class="container">
        <div class="row align-items-end">
            <div class="col-md-11 mx-auto">
                <p class="h6 text-primary">{{ .Params.hero.eyebrow | markdownify }}</p>
                <h1 class="h1 display-3 mb-lg-3" data-aos="fade-in" data-aos-delay="100">{{ .Params.hero.title | markdownify }}</h1>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-12">
                {{ with .Params.hero.image }}
                <div class="hero-image-single" data-aos="fade-up" data-aos-delay="400"
                    style="background-image: url('{{ . | relURL }}');">
                </div>
                {{ end }}
            </div>
        </div>
    </div>
</section>