{% if productBanner.title != '' %}    
    <section class="productBanner {% if productBanner.styling_options.selected == 'Original Version' %}productBanner--v01{% endif %}">
        {% if productBanner.background_image.image_desktop or (productBanner.banner_type_options.selected == 'special_offer' or productBanner.banner_type_options.selected == 'appearing') and productBanner.background_image.image_desktop %}
            <style>
                :root {
                    --productBanner_image_d: url({{global.path}}/{{productBanner.background_image.image_desktop}});
                    --productBanner_image_t: url({{global.path}}/{{productBanner.background_image.image_tablet}});
                    --productBanner_image_m: url({{global.path}}/{{productBanner.background_image.image_mobile}});
                }           
            </style>
        {% endif %}

        <div class="container-lg">
            <h2 class="productBanner__title">
                {{productBanner.title}}
            </h2>
        </div>
    </section>
{% endif %}