<section class="hero-section py-5 my-lg-5">
    <div class="container">
        <div class="row align-items-end">
            <div class="col-lg-7">
                <h1 class="display-3 mb-4 mb-lg-5" data-aos="fade-in" data-aos-delay="100">{{ .Params.hero.title | markdownify }}</h1>
                
                <div class="d-none d-lg-block" data-aos="fade-right" data-aos-delay="600">
                    <a href="{{ .Params.hero.cta_link | relURL }}" class="btn btn-cta">
                        {{ .Params.hero.cta_text }}
                    </a>
                </div>
            </div>
            
            <div class="col-lg-5">
                <p class="border-start ps-4" data-aos="fade-in" data-aos-delay="100">
                    {{ .Params.hero.subtitle | markdownify }}
                </p>

                <div class="d-lg-none mt-4">
                    <a href="{{ .Params.hero.cta_link | relURL }}" class="btn btn-cta">
                        {{ .Params.hero.cta_text }}
                    </a>
                </div>
            </div>
        </div>
        
        <div class="row mt-4 mt-lg-5">
            <div class="col-12">
                {{ with .Params.hero.image }}
                <div class="hero-image-dynamic" data-aos="fade-up" data-aos-delay="400"
                    style="background-image: url('{{ . | relURL }}');">
                </div>
                {{ end }}
            </div>
        </div>
    </div>
</section>