
<div class= "text-{{alignment}}">
    <!-- tablet/desktop -->
    <div class = "d-none d-md-block 
                {{#ifCond enableBottomArrow '==' 'true'}} triangle-down {{/ifCond}} 
                {{#ifCond heightPaddingMarginDeskMargin '!==' 'custom'}}{{heightPaddingMarginDeskMargin}}{{/ifCond}}" 
         style ="{{#ifCond bgcolorimageStyle '==' 'color'}}background-color:    {{bgcolorimageBackgroundColor}};{{/ifCond}}
                {{#ifCond bgcolorimageStyle '==' 'image'}}background-image: url('{{bgcolorimageDesktopImage.src}}'); background-size: cover;background-position: center;{{/ifCond}}
                {{#ifCond enableParallax '==' 'true'}}background-attachment: fixed; {{/ifCond}}
                {{#ifCond heightPaddingMarginDeskMargin '==' 'custom'}}margin: {{heightPaddingMarginDeskMarginPix}}px;{{/ifCond}}
                {{#ifCond heightPaddingMarginLeftRightMarginDisable '==' 'true'}} 
                    margin-left:0!important; 
                    margin-right:0!important; 
                {{/ifCond}}">    
        {{#if link}} 
            <a href= "{{link}}{{#if anchor}}#{{anchor}}{{/if}}" target="{{target}}">
        {{/if}} 
    
       <div class= "overlay" style="background-color: {{overlayColor}};">

             <{{#if text }}{{type}}{{else}}p {{/if}}
                class="{{#ifCond heightPaddingMarginDeskPadding '!==' 'custom'}}{{heightPaddingMarginDeskPadding}}{{/ifCond}}"
                style="{{#ifCond heightPaddingMarginDeskPadding '==' 'custom'}}padding:{{heightPaddingMarginDeskPaddingPix}}px; {{/ifCond}}
                    {{#ifCond heightPaddingMarginDeskHeight  '==' 'custom'}}height:{{heightPaddingMarginDeskHeightPix}}px; {{/ifCond}}
                    {{#if textSize}} font-size: {{textSize}}rem; {{/if}}
                    {{#if textColor}}color:{{textColor}};{{/if}}"> 
                    
                    {{#if text }} {{text}} {{/if}}

            </{{#if text}}{{type}}{{else}}p{{/if}}>

            {{#ifCond enableBottomArrow '==' "true"}}<div style = "height: 15px;"></div>{{/ifCond}}

       </div>

        {{#if link}}    
            </a> 
        {{/if}}
    
    </div>

    <!-- mobile  -->
         
    {{#ifCond hideDividerMobile '==' "false"}}
    
    <div class = "d-block d-md-none                 
                {{#ifCond enableBottomArrow '==' 'true'}} triangle-down {{/ifCond}} 
                {{#ifCond heightPaddingMarginMobileMargin '!==' 'custom'}}{{heightPaddingMarginMobileMargin}}{{/ifCond}}" 
         style ="{{#ifCond bgcolorimageStyle '==' 'color'}}background-color:    {{bgcolorimageBackgroundColor}};{{/ifCond}}
                {{#ifCond bgcolorimageStyle '==' 'image'}}background-image: url('{{bgcolorimageMobileImage.src}}'); background-size: cover;background-position: center;{{/ifCond}}
                {{#ifCond enableParallax '==' 'true'}}background-attachment: fixed; {{/ifCond}}
                {{#ifCond heightPaddingMarginMobileMargin '==' 'custom'}}margin: {{heightPaddingMarginMobileMarginPix}}px;{{/ifCond}}
                {{#ifCond heightPaddingMarginLeftRightMarginDisable '==' 'true'}} 
                    margin-left:0!important; 
                    margin-right:0!important; 
                {{/ifCond}}"> 
    
        {{#if link}} 
            <a href= "{{link}}{{#if anchor}}#{{anchor}}{{/if}}" target="{{target}}">
        {{/if}} 

       <div class= "overlay" style="background-color: {{overlayColor}};">

           <{{#if text }}{{type}}{{else}}p {{/if}}
                class="{{#ifCond heightPaddingMarginMobilePadding '!==' 'custom'}}{{heightPaddingMarginMobilePadding}}{{/ifCond}}"               
                style="{{#ifCond heightPaddingMarginMobilePadding '==' 'custom'}}padding:{{heightPaddingMarginMobilePaddingPix}}px; {{/ifCond}}
                    {{#ifCond heightPaddingMarginMobileHeight  '==' 'custom'}}height:{{heightPaddingMarginMobileHeightPix}}px; {{/ifCond}}
                    {{#if textSize}} font-size: {{textSize}}rem; {{/if}}
                    {{#if textColor}}color:{{textColor}};{{/if}}"> 
                    
                    {{#if text }} {{text}} {{/if}}

            </{{#if text}}{{type}}{{else}}p{{/if}}>
                    
            {{#ifCond enableBottomArrow '==' "true"}}<div style = "height: 15px;"></div>{{/ifCond}}

       </div>

        {{#if link}}    
            </a> 
        {{/if}}
    
    </div>
    {{/ifCond}}
</div>
