<section class="hero-section py-5 my-lg-5">
    <div class="container">
        <div class="row align-items-end mx-lg-5 px-lg-4">
            <div class="col-lg-7">
                <h1 class="display-3 mb-4 mb-lg-5">{{ .Params.hero.title | markdownify }}</h1>
                
                <div class="d-none d-lg-block">
                    <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="lead mb-2">
                    {{ .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" 
                    style="background-image: url('{{ . | relURL }}');">
                </div>
                {{ end }}
            </div>
        </div>
    </div>
</section>