1<#if text_color.getData() == "black">
2<style>
3.glasgow.extended-accessibility #wrapper #content-wrapper .arena-columns-1-2-1-2-1 #row-1 .portlet-column .black .hero_text_container p,
4.glasgow.extended-accessibility #wrapper #content-wrapper .arena-columns-1-2-1-2-1 #row-1 .portlet-column .black .hero_text_container h1 { 5 text-shadow: 0 0 20px rgba(255,255,255,0.${hero_text_shadow.getData()}); 6 color: #000;
7}
8</style>
9<div id="hero-container" class="black">
10<#else>
11<style>
12.glasgow.extended-accessibility #wrapper #content-wrapper .arena-columns-1-2-1-2-1 #row-1 .portlet-column .hero.hero_text_container p,
13.glasgow.extended-accessibility #wrapper #content-wrapper .arena-columns-1-2-1-2-1 #row-1 .portlet-column .hero_text_container h1 { 14 text-shadow: 0 0 20px rgba(0,0,0,0.${hero_text_shadow.getData()}); 15}
16</style>
17<div id="hero-container">
18</#if>
19 <picture>
20 <#if image_xxl.getData() != "">
21 <source media="(min-width: 1800px)" srcset="${image_xxl.getData()}"> 22 </#if>
23 <#if image_xl.getData() != "">
24 <source media="(min-width: 1500px)" srcset="${image_xl.getData()}"> 25 </#if>
26 <#if image_l.getData() != "">
27 <source media="(min-width: 1200px)" srcset="${image_l.getData()}"> 28 </#if>
29 <#if image_m.getData() != "">
30 <source media="(min-width: 767px)" srcset="${image_m.getData()}"> 31 </#if>
32 <#if image_s.getData() != "">
33 <source media="(min-width: 500px)" srcset="${image_s.getData()}"> 34 </#if>
35 <img src="${image_s.getData()}" alt="${alt_text.getData()}"> 36 </picture>
37 <#if text_color.getData() == "black">
38 <div class="hero-overlay" style="background: rgba(255, 255, 255, .${hero_bg.getData()})"></div> 39 <#else>
40 <div class="hero-overlay" style="background: rgba(0, 0, 0, .${hero_bg.getData()})"></div> 41 </#if>
42
43 <div class="hero_text_container">
44 <h1 class="hero_header">${hero_header.getData()}</h1> 45 <#if hero_sub_header.getData() != "">
46 <p class="hero_sub">${hero_sub_header.getData()}</p> 47 </#if>
48 </div>
49</div>
