1<#assign instanceId="bullet-point-" + .vars["reserved-article-id"].data>
2 <!--Layout desktop padrão-->
3 <div class="d-none d-lg-block">
4 <div class="row mt-7">
5 <div class="col-6 bullet-point-main-img">
6 <h2 class="title title-size-1">
7 ${bulletPointTitle.getData()} 8 </h2>
9 </div>
10 <div class="col-6 d-flex align-items-center">
11 <span>
12 ${bulletPointSectionText.getData()} 13 </span>
14 </div>
15 </div>
16 <div class="row mt-7">
17 <div class="col-6 bullet-point-two-columns__main-img">
18 <img loading="lazy" class="h-100" alt="${bulletPointImage.getAttribute('alt')}" data-fileentryid="${bulletPointImage.getAttribute('fileEntryId')}" src="${bulletPointImage.getData()}" /> 19 </div>
20 <div class="col-6 d-flex flex-column justify-content-between">
21 <#if bulletPointFieldSet.getSiblings()?has_content>
22 <#list bulletPointFieldSet.getSiblings() as cur_bulletPointFieldSet>
23 <#if cur_bulletPointFieldSet_index==0>
24 <div class="row">
25 <#else>
26 <div class="row mt-5">
27 </#if>
28 <div class="col-1 px-0">
29 <#if (cur_bulletPointFieldSet.bulletPointItemIcon.getData())?? && cur_bulletPointFieldSet.bulletPointItemIcon.getData() !="">
30 <img src="${cur_bulletPointFieldSet.bulletPointItemIcon.getData()}" alt="Imagem meramente ilustrativa" loading="lazy" /> 31 </#if>
32 </div>
33 <div class="col">
34 <h3 class="mb-2 title-size-4 bullet-item-title">
35 ${cur_bulletPointFieldSet.bulletPointItemTitle.getData()} 36 </h3>
37 <p>
38 ${cur_bulletPointFieldSet.bulletPointItemText.getData()} 39 </p>
40 </div>
41 </div>
42 </#list>
43 </#if>
44 </div>
45 </div>
46 </div>
47 <!--Layout mobile-->
48 <div class="d-block d-lg-none">
49 <h2 class="title title-size-1 px-6 mb-4">
50 ${bulletPointTitle.getData()} 51 </h2>
52 <div class="bullet-point-component__mobile js-card-bullet-component text text-size-base mb-4">
53 <div class="px-4 mb-2">
54 <span>
55 ${bulletPointSectionText.getData()} 56 </span>
57 </div>
58 <#if bulletPointFieldSet.getSiblings()?has_content>
59 <div class="row">
60 <div class="col-12 px-4">
61 <div class="overflow-hidden">
62 <div class="d-flex js-card-bullet-component-mobile-caroussel card-bullet-component__wrapper-mobile">
63 <#list bulletPointFieldSet.getSiblings() as cur_bulletPointFieldSet>
64 <div class="card-bullet-component__card-mobile">
65 <div class="p-4 d-flex flex-column justify-content-start h-100">
66 <div class="mb-6">
67 <#if (cur_bulletPointFieldSet.bulletPointItemIcon.getData())?? && cur_bulletPointFieldSet.bulletPointItemIcon.getData() !="">
68 <img src="${cur_bulletPointFieldSet.bulletPointItemIcon.getData()}" alt="Imagem meramente ilustrativa" loading="lazy" /> 69 </#if>
70 </div>
71 <h3 class="title title-size-4 mb-2">
72 ${cur_bulletPointFieldSet.bulletPointItemTitle.getData()} 73 </h3>
74 <p class="text">
75 ${cur_bulletPointFieldSet.bulletPointItemText.getData()} 76 </p>
77 </div>
78 </div>
79 </#list>
80 </div>
81 </div>
82 </div>
83 </div>
84 </#if>
85 </div>
86 <div class="mobile-bullet-point-image">
87 <img class="h-auto" loading="lazy" alt="${bulletPointImageMobile.getAttribute('alt')}" data-fileentryid="${bulletPointImageMobile.getAttribute('fileEntryId')}" src="${bulletPointImageMobile.getData()}" /> 88 </div>
89 </div>
90 <style>
91 bullet-point-two-columns__main-img { 92 border-radius: 16px;
93 object-fit: cover;
94 object-position: center;
95 }
96
97 .bullet-item-title { 98 font-weight: 500;
99 }
100
101 .bullet-item { 102 border-bottom: 1px solid #EAEDF0;
103 height: 105px;
104 display: flex;
105 align-items: center;
106 }
107
108 .mobile-bullet-point-image img { 109 border-radius: 24px;
110 }
111
112 .bullet-point-component__mobile .card-bullet-component__card-mobile { 113 scroll-snap-align: start;
114 flex: 0 0 80%;
115 max-width: 80%;
116 margin-right: 10px;
117 }
118 </style>
