{% if soundBanner.background_image and soundBanner.background_image != '' %}
    <style>
        :root {
            --soundBanner_bgimg: url({{global.path}}/{{soundBanner.background_image}});
        }
    </style>
{% endif %}

<section class="sound-banner">
    <div class="container-md">
        {% if soundBanner.hasSpeakerIcons == 'true' %}
        <svg class='icon icon--speaker icon--left'>
            <use xlink:href='svg/sprite.svg?rel={{timestamp}}#SPEAKER' />
        </svg>
        {% endif %}
        <h4 class="sound-banner__title">{{soundBanner.leftText}}</h4>
        {% if soundBanner.hasSpeakerIcons == 'true' %}
        <svg class='icon icon--speaker icon--right'>
            <use xlink:href='svg/sprite.svg?rel={{timestamp}}#SPEAKER' />
        </svg>
        {% endif %}
        <p class="sound-banner__content">{{soundBanner.rightText}}</p>
    </div>
</section>