1<section class="main-content">
2 <div class="container gig-banner-container">
3 <div class="banner-text" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="600">
4 <h1 class="header">
5 ${headerTitle.getData()}
6 </h1>
7 <p class="tag-line-text">${subTitle.getData()}</p>
8 <div class="banner-cards-wrapper ">
9 <#if productCardRepeatable.getSiblings() ? has_content>
10 <#list productCardRepeatable.getSiblings() as item>
11 <#assign productCardImage = item.getChild("productCardImage") />
12 <#assign productCardImageSvg = productCardImage.getChild("productImageSvg") />
13 <#assign cardTitle = item.getChild("cardTitle") />
14 <#assign cardDescription = item.getChild("cardDescription") />
15 <#assign cardShortInformation = item.getChild("cardShortInformation") />
16 <#assign styleClass = item.getChild("styleClass") />
17 <#assign productCardLink = item.getChild("productCardLink") />
18 <a data-cta data-senna-off="true" href="${productCardLink.getData()}" class="banner-content-card ${styleClass.getData()}">
19 <#if productCardImageSvg.getData()?? && productCardImageSvg.getData() != "">
20 ${productCardImageSvg.getData()}
21 <#elseif productCardImage.getData()?? && productCardImage.getData() != "">
22 <img alt='${productCardImage.getAttribute("description")}' data-fileentryid='${productCardImage.getAttribute("fileEntryId")}' src="${productCardImage.getData()}" loading="lazy" />
23 </#if>
24 <h4 class="header">
25 ${cardTitle.getData()}
26 </h4>
27 <p>
28 ${cardDescription.getData()}
29 </p>
30 <span class="special-text">${cardShortInformation.getData()}</span>
31 </a>
32 </#list>
33 </#if>
34 </div>
35
36 <div class="banner-head-wrapper">
37 <#if otherProductCardRepeatable.getSiblings() ? has_content>
38 <#list otherProductCardRepeatable.getSiblings() as item>
39 <#assign otherProductCardImage = item.getChild("otherProductCardImage") />
40 <#assign otherProductCardImageSvg = otherProductCardImage.getChild("otherProductCardImageSvg") />
41 <#assign otherProductCardText = item.getChild("otherProductCardText") />
42 <#assign otherProductLink = item.getChild("otherProductLink") />
43 <#assign otherProductStyleClass = item.getChild("otherProductStyleClass") />
44 <a data-cta data-senna-off="true" href="${otherProductLink.getData()}" class="banner-content-card single-text ${otherProductStyleClass.getData()}">
45 <h4 class="header mb-0">
46 <#if otherProductCardImageSvg.getData()?? && otherProductCardImageSvg.getData() != "">
47 ${otherProductCardImageSvg.getData()}
48 <#elseif otherProductCardImage.getData()?? && otherProductCardImage.getData() != "">
49 <img alt='${otherProductCardImage.getAttribute("description")}' data-fileentryid='${otherProductCardImage.getAttribute("fileEntryId")}' src="${otherProductCardImage.getData()}" loading="lazy" />
50 </#if>
51 ${otherProductCardText.getData()}
52 </h4>
53 </a>
54 </#list>
55 </#if>
56 </div>
57
58 <div class="btn-container-section">
59 <#if backgroundImage.getData()?? && backgroundImage.getData() != "">
60 <#assign imgSrc = backgroundImage.getData()?replace(r".*/documents/", "/documents/") />
61 <img alt='${backgroundImage.getAttribute("description")}' data-fileentryid='${backgroundImage.getAttribute("fileEntryId")}' src="${imgSrc}" class="banner-img" fetchPriority="high" />
62 </#if>
63 </div>
64 </div>
65</section>
66<style>
67 .gig-banner-container{
68 position:relative;
69 }
70 .main-content .banner-text h1.header {
71 z-index: 3;
72 position: relative;
73 }
74 @media screen and (min-width: 960px){
75 .main-content .banner-text .banner-content-card {
76 width: 250px;
77 z-index:1;
78 }
79 }
80 .main-content .banner-img {
81 z-index: 0 !important;
82 }
83 .rtl .main-content .banner-img ,.rtl .main-content .banner-text .banner-content-card.travel-card .special-text {
84 right: initial;
85 }
86 .rtl .main-content .banner-img {
87 height: auto !important;
88 }
89 @media screen and (max-width: 960px) {
90 .main-content .banner-text h1.header {
91 padding-top: 41px;
92 }
93 .main-content {
94 padding-top: 0px;
95 }
96 .main-content .banner-text .tag-line-text {
97 width: 91%;
98 }
99 }
100
101 .main-content .banner-text .banner-content-card.show-special-text {
102 position: relative;
103 }
104
105 .main-content .banner-text .banner-content-card .special-text {
106 border-radius: 35px 0px 0px 35px;
107 font-family: "Source Sans Pro";
108 font-weight: 600;
109 font-style: normal;
110 font-size: 12px;
111 position: absolute;
112 top: 14px;
113 right: 0;
114 line-height: 21px;
115 padding-left: 12px !important;
116 padding-right: 6px;
117 }
118 .main-content .banner-text .banner-content-card.show-special-text .special-text {
119 height: 21px;
120 background: var(--sp-bg, #cd8c66);
121 color: #fff;
122 }
123
124 .main-content .banner-text .banner-content-card.show-special-text.new {
125 --sp-bg: #36cd8f !important;
126 }
127
128 @media screen and (max-width: 960px) {
129 .main-content .banner-text .banner-content-card.show-special-text .special-text {
130 border-radius: 0;
131 width: 75%;
132 top: -9px;
133 margin: 0 auto;
134 left: 0;
135 border-radius: 10px;
136 }
137 }
138 @media screen and (min-width: 960px) {
139 .main-content .banner-text .banner-content-card.single-text.bc-seeall-new {
140 width: 87.5%;
141 text-align: center;
142 justify-content: center;
143 }
144 .main-content .banner-text .banner-head-wrapper {
145 flex-wrap: wrap;
146 width: 75%;
147 }
148 }
149
150 @media screen and (max-width: 960px) {
151 .main-content .banner-text .banner-content-card.single-text.bc-health , .main-content .banner-text .banner-content-card.single-text.home-card{
152 height: 87px;
153 }
154 .main-content .banner-text .banner-head-wrapper .bc-seeall-new {
155 flex: 0 0 100%;
156 text-align: center;
157 }
158 }
159
160</style>
