{% macro sectionBanner(componentName, componentVariant, title = '', content, showCta = 'false', mainBtnText, styleVariantion, path, backgroundImage = '') %}
<div {% if componentVariant != '' %}id="{{componentVariant}}"{% endif %} class="{{componentName}} {% if componentVariant != '' %}{{componentName}}--{{componentVariant}}{% endif %} {% if showCta == 'true' %}{{componentName}}--hasCTA{% endif %}{% if styleVariantion == 'dark_mode' %} has-darkContentMode {% elif styleVariantion == 'light_mode' %} has-lightContentMode {% endif %}">
    {% if backgroundImage != '' %}
        <style>
            :root {
                --{{componentVariant}}-bgImage: url({{path}}/{{backgroundImage}});
            }
        </style>
    {% endif %}

    <div class="container-xl">
        {% if title != '' %}
            <h3 class="{{componentName}}__title">{{title}}</h3>
        {% endif %}

        <p class="{{componentName}}__content">
            {{content}}
        </p>

        {% if showCta == 'true' %}
            {% from "../_CTABtn/_CTABtn.html" import CTA %}
                {{ CTA (
                    wrapCTA= 'false',
                    ctaID= '',
                    ctaLink= '',
                    ctaTarget= '',
                    dataParam= 'false',
                    ctaParam= 'false',
                    ctaClass= '',
                    ctaText= mainBtnText,
                    hasIcon = global.mainBtn_hasIcon
                ) 
            }}
        {% endif %}
    </div>
</div>
{% endmacro %}