@sc-360-v2/storefront-cms-library 0.4.73 → 0.4.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/brand-basic-elements.scss +292 -292
  2. package/dist/builder.js +1 -1
  3. package/dist/builderLite.js +1 -1
  4. package/dist/cart.scss +14 -0
  5. package/dist/cartDropdownOverlay.scss +1 -1
  6. package/dist/category-groups-element.scss +138 -138
  7. package/dist/gallery-slider-temp.scss +1238 -1234
  8. package/dist/image-temp.scss +9 -9
  9. package/dist/layouter.scss +10 -0
  10. package/dist/map.scss +976 -962
  11. package/dist/product-basic-elements.scss +4 -1
  12. package/dist/quantity-selector.scss +6 -5
  13. package/dist/repeater-embla-controls.scss +14 -12
  14. package/dist/repeater.scss +10 -0
  15. package/dist/types/builder/tools/element-edit/gallery-slider.d.ts +1 -0
  16. package/package.json +1 -1
package/dist/map.scss CHANGED
@@ -1,962 +1,976 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
-
4
- $tpgp: 20px;
5
- $bm: 30px;
6
- $ics: -1px;
7
-
8
- $data: (
9
- leftTop: (
10
- transform: translate(calc(-100% - #{$tpgp}), calc(-100% + #{$bm})),
11
- icon: (
12
- bottom: #{$bm},
13
- right: 0px,
14
- transform: translate(calc(100% + #{$ics}), calc(50% + (#{$ics} * 1.25))),
15
- border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
16
- ),
17
- ),
18
- leftCenter: (
19
- transform: translate(calc(-100% - #{$tpgp}), calc(-50% + 0px)),
20
- icon: (
21
- top: 50%,
22
- right: 0px,
23
- transform: translate(calc(100% + #{$ics}), calc(-50% + (0px * 1.75))),
24
- border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
25
- ),
26
- ),
27
- leftBottom: (
28
- transform: translate(calc(-100% - #{$tpgp}), calc(0% - #{$bm})),
29
- icon: (
30
- top: #{$bm},
31
- right: 0px,
32
- transform: translate(calc(100% + #{$ics}), calc(-100% + (#{$ics} * 1.75))),
33
- border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
34
- ),
35
- ),
36
- topLeft: (
37
- transform: translate(calc(-100% + #{$bm}), calc(-100% - #{$tpgp})),
38
- icon: (
39
- bottom: 0px,
40
- right: #{$bm},
41
- transform: translate(calc(50% + (#{$ics} * 1.75)), calc(100% + #{$ics})),
42
- border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
43
- ),
44
- ),
45
- topCenter: (
46
- transform: translate(calc(-50% - #{$ics}), calc(-100% - #{$tpgp})),
47
- icon: (
48
- bottom: 0px,
49
- right: 50%,
50
- transform: translate(calc(50% + (#{$ics} * 1.75)), calc(100% + #{$ics})),
51
- border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
52
- ),
53
- ),
54
- topRight: (
55
- transform: translate(calc(-1 * #{$bm}), calc(-100% - #{$tpgp})),
56
- icon: (
57
- bottom: 0px,
58
- left: #{$bm},
59
- transform: translate(calc(-100% + (#{$ics} * 1.25)), calc(100% + #{$ics})),
60
- border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
61
- ),
62
- ),
63
- rightTop: (
64
- transform: translate(calc(0% + #{$tpgp}), calc(-100% + #{$bm})),
65
- icon: (
66
- top: 100%,
67
- left: 0px,
68
- transform: translate(calc(-100% - #{$ics}), calc(50% - (#{$bm} * 1.25))),
69
- border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
70
- ),
71
- ),
72
- rightCenter: (
73
- transform: translate(calc(0% + #{$tpgp}), calc(-50% + #{$ics})),
74
- border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
75
- icon: (
76
- bottom: 50%,
77
- left: 0px,
78
- transform: translate(calc(-100% - #{$ics}), calc(50% + (0px * 1.75))),
79
- border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
80
- ),
81
- ),
82
- rightBottom: (
83
- transform: translate(calc(0% + #{$tpgp}), calc(0% - #{$bm})),
84
- border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
85
- icon: (
86
- top: 100%,
87
- left: 0,
88
- transform: translate(calc(-100% - #{$ics}), calc(-100% - (#{$bm} * 2.05))),
89
- border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
90
- ),
91
- ),
92
- bottomLeft: (
93
- transform: translate(calc(-100% + #{$bm}), calc(-50% + (#{$bm} * 2.7))),
94
- border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
95
- icon: (
96
- right: #{$bm},
97
- top: 0%,
98
- transform: translate(calc(50% + (#{$ics} * 0.75)), calc(-100% - #{$ics})),
99
- border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
100
- ),
101
- ),
102
- bottomCenter: (
103
- transform: translate(calc(-50% - #{$ics}), calc(-50% + (#{$bm} * 2.7))),
104
- border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
105
- icon: (
106
- right: 50%,
107
- top: 0,
108
- transform: translate(calc(0% + (#{$ics} * 2.75)), calc(-100% - #{$ics})),
109
- border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
110
- ),
111
- ),
112
- bottomRight: (
113
- transform: translate(calc(0% - #{$bm}), calc(-50% + (#{$bm} * 2.7))),
114
- border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
115
- icon: (
116
- left: 30px,
117
- top: 0,
118
- transform: translate(calc(-50% - (#{$ics} * 1.25)), calc(-100% - #{$ics})),
119
- border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
120
- ),
121
- ),
122
- );
123
-
124
- [data-div-type="element"] {
125
- &[data-element-type="map"] {
126
- &[data-hotspot-position] {
127
- @each $key, $value in $data {
128
- &[data-hotspot-position="#{$key}"] {
129
- .hotspot__tooltip {
130
- @each $prop, $val in $value {
131
- @if ($prop != icon) {
132
- #{$prop}: #{$val};
133
- } @else {
134
- @each $key2, $value2 in $val {
135
- &:after {
136
- #{$key2}: #{$value2};
137
- }
138
- }
139
- }
140
- }
141
- }
142
- }
143
- }
144
- }
145
- }
146
- }
147
- [data-div-type="element"] {
148
- &[data-element-type="map"] {
149
- // width: var(--_lt-wh);
150
- // height: var(--_lt-ht);
151
- // margin: var(--_lt-mn);
152
- // padding: var(--_lt-pg);
153
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
154
- width: var(
155
- --_sf-el-wh-st-mx,
156
- calc(
157
- 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
158
- )
159
- );
160
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
161
-
162
- --_aspect-ratio: calc(
163
- 1 *
164
- (
165
- var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
166
- var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
167
- )
168
- );
169
-
170
- & > .wrapper {
171
- width: 100%;
172
- // height: 100%;
173
- }
174
- &[data-show-shadow="false"] {
175
- --_show-shadow: none;
176
- }
177
- &[data-hotspot-position="topLeft"] {
178
- --_show-shadow: none;
179
- .hotspot__tooltip {
180
- border-style: var(--_ctm-dn-tp-dn-br-se);
181
- border-color: var(--_ctm-dn-tp-dn-br-cr);
182
- border-width: var(--_ctm-dn-tp-dn-br-wh);
183
- border-radius: var(--_ctm-dn-tp-dn-br-rs);
184
- }
185
- }
186
-
187
- &[data-hotspot-image-style-show-border="true"] {
188
- .imageHotspot-element {
189
- border-style: var(--_ctm-dn-ie-se-br-se);
190
- border-color: var(--_ctm-dn-ie-se-br-cr);
191
- border-width: var(--_ctm-dn-ie-se-br-wh);
192
- border-radius: var(--_ctm-dn-ie-se-br-rs);
193
- }
194
- }
195
- &[data-hotspot-tooltip-style-show-border="true"] {
196
- .hotspot__tooltip {
197
- border-style: var(--_ctm-dn-tp-dn-br-se);
198
- border-color: var(--_ctm-dn-tp-dn-br-cr);
199
- border-width: var(--_ctm-dn-tp-dn-br-wh);
200
- border-radius: var(--_ctm-dn-tp-dn-br-rs);
201
- }
202
- }
203
- &[data-hotspot-tooltip-style-show-shadow="true"] {
204
- .hotspot__tooltip {
205
- box-shadow: var(--_ctm-dn-tp-dn-sw-ae) var(--_ctm-dn-tp-dn-sw-br) var(--_ctm-dn-tp-dn-sw-sd)
206
- var(--_ctm-dn-tp-dn-sw-cr);
207
- }
208
- }
209
- &[data-hotspot-tooltip-image-style-show-border="true"] {
210
- .tooltip__image {
211
- border-style: var(--_ctm-dn-tp-ie-dn-br-se);
212
- border-color: var(--_ctm-dn-tp-ie-dn-br-cr);
213
- border-width: var(--_ctm-dn-tp-ie-dn-br-wh);
214
- border-radius: var(--_ctm-dn-tp-ie-dn-br-rs);
215
- }
216
- }
217
- &[data-hotspot-tooltip-image-style-show-shadow="true"] {
218
- .tooltip__image {
219
- box-shadow: var(
220
- --_show-shadow,
221
- var(--_ctm-dn-tp-ie-dn-sw-ae) var(--_ctm-dn-tp-ie-dn-sw-br) var(--_ctm-dn-tp-ie-dn-sw-sd)
222
- var(--_ctm-dn-tp-ie-dn-sw-cr)
223
- );
224
- }
225
- }
226
- &[data-hotspot-style-show-shadow="true"] {
227
- .hotspot {
228
- box-shadow: var(--_ctm-dn-ht-se-sw-ae) var(--_ctm-dn-ht-se-sw-br) var(--_ctm-dn-ht-se-sw-sd)
229
- var(--_ctm-dn-ht-se-sw-cr);
230
- }
231
- }
232
- &[data-hotspot-style-show-border="true"] {
233
- .hotspot {
234
- border-style: var(--_ctm-dn-ht-se-br-se);
235
- border-color: var(--_ctm-dn-ht-se-br-cr);
236
- border-width: var(--_ctm-dn-ht-se-br-wh);
237
- border-radius: var(--_ctm-dn-ht-se-br-rs);
238
- }
239
- }
240
- .map-element {
241
- --text-high-contrast-rgb-value: 49, 49, 49;
242
- --detail-medium-contrast: rgb(234, 234, 234);
243
- --text-body: rgb(54, 49, 61);
244
-
245
- position: relative;
246
- background-color: var(
247
- --_ctm-mob-dn-mp-wt-bd-cr,
248
- var(--_ctm-tab-dn-mp-wt-bd-cr, var(--_ctm-dn-mp-wt-bd-cr))
249
- );
250
-
251
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
252
-
253
- display: flex;
254
- flex-direction: column;
255
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
256
-
257
- gap: var(
258
- --_ctm-mob-dn-mp-wt-lt-mp-ad-tt-cr-sg,
259
- var(--_ctm-tab-dn-mp-wt-lt-mp-ad-tt-cr-sg, var(--_ctm-dn-mp-wt-lt-mp-ad-tt-cr-sg))
260
- );
261
- align-content: var(
262
- --_ctm-mob-dn-mp-wt-lt-mp-ad-tt-cr-sg,
263
- var(--_ctm-tab-dn-mp-wt-lt-mp-ad-tt-cr-sg, center)
264
- );
265
-
266
- width: 100%;
267
- height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
268
-
269
- border-color: var(
270
- --_ctm-mob-dn-mp-wt-br-cr,
271
- var(--_ctm-tab-dn-mp-wt-br-cr, var(--_ctm-dn-mp-wt-br-cr))
272
- );
273
-
274
- border-style: var(
275
- --_ctm-mob-dn-mp-wt-br-se,
276
- var(--_ctm-tab-dn-mp-wt-br-se, var(--_ctm-dn-mp-wt-br-se))
277
- );
278
-
279
- border-width: var(
280
- --_ctm-mob-dn-mp-wt-br-wh,
281
- var(--_ctm-tab-dn-mp-wt-br-wh, var(--_ctm-dn-mp-wt-br-wh))
282
- );
283
-
284
- border-radius: var(
285
- --_ctm-mob-dn-mp-wt-br-rs,
286
- var(--_ctm-tab-dn-mp-wt-br-rs, var(--_ctm-dn-mp-wt-br-rs))
287
- );
288
-
289
- box-shadow: var(
290
- --_show-shadow,
291
- var(--_ctm-mob-dn-mp-wt-sw-ae, var(--_ctm-tab-dn-mp-wt-sw-ae, var(--_ctm-dn-mp-wt-sw-ae)))
292
- var(--_ctm-mob-dn-mp-wt-sw-br, var(--_ctm-tab-dn-mp-wt-sw-br, var(--_ctm-dn-mp-wt-sw-br)))
293
- var(--_ctm-mob-dn-mp-wt-sw-sd, var(--_ctm-tab-dn-mp-wt-sw-sd, var(--_ctm-dn-mp-wt-sw-sd)))
294
- var(--_ctm-mob-dn-mp-wt-sw-cr, var(--_ctm-tab-dn-mp-wt-sw-cr, var(--_ctm-dn-mp-wt-sw-cr)))
295
- );
296
-
297
- .gallery-header {
298
- text-align: var(
299
- --_ctm-mob-dn-gy-lt-an,
300
- var(--_ctm-tab-dn-gy-lt-an, var(--_ctm-dn-gy-lt-an))
301
- );
302
-
303
- // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg));
304
- display: flex;
305
- flex-direction: column;
306
-
307
- gap: var(
308
- --_ctm-mob-dn-mp-wt-tt-cr-lt-te-ad-dn-sg,
309
- var(--_ctm-tab-dn-mp-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-mp-wt-tt-cr-lt-te-ad-dn-sg))
310
- );
311
- padding-block: var(
312
- --_ctm-mob-dn-mp-wt-tt-cr-lt-tt-vl-pg,
313
- var(--_ctm-tab-dn-mp-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-mp-wt-tt-cr-lt-tt-vl-pg))
314
- );
315
- padding-inline: var(
316
- --_ctm-mob-dn-mp-wt-tt-cr-lt-tt-hl-pg,
317
- var(--_ctm-tab-dn-mp-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-mp-wt-tt-cr-lt-tt-hl-pg))
318
- );
319
- background-color: var(
320
- --_ctm-mob-dn-mp-wt-tt-cr-lt-tt-cr-bd-cr,
321
- var(--_ctm-tab-dn-mp-wt-tt-cr-lt-tt-cr-bd-cr, var(--_ctm-dn-mp-wt-tt-cr-lt-tt-cr-bd-cr))
322
- );
323
-
324
- width: 100%;
325
- border-color: var(
326
- --_ctm-mob-dn-mp-wt-tt-cr-dn-br-cr,
327
- var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-cr, var(--_ctm-dn-mp-wt-tt-cr-dn-br-cr))
328
- );
329
- border-style: var(
330
- --_ctm-mob-dn-mp-wt-tt-cr-dn-br-se,
331
- var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-se, var(--_ctm-dn-mp-wt-tt-cr-dn-br-se))
332
- );
333
- border-width: var(
334
- --_ctm-mob-dn-mp-wt-tt-cr-dn-br-wh,
335
- var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-wh, var(--_ctm-dn-mp-wt-tt-cr-dn-br-wh))
336
- );
337
- border-radius: var(
338
- --_ctm-mob-dn-mp-wt-tt-cr-dn-br-rs,
339
- var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-rs, var(--_ctm-dn-mp-wt-tt-cr-dn-br-rs))
340
- );
341
- box-shadow: var(
342
- --_show-shadow,
343
- var(
344
- --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-ae,
345
- var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-ae))
346
- )
347
- var(
348
- --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-br,
349
- var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-br, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-br))
350
- )
351
- var(
352
- --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-sd,
353
- var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-sd))
354
- )
355
- var(
356
- --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-cr,
357
- var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-cr))
358
- )
359
- );
360
-
361
- & h3 {
362
- color: var(
363
- --_ctm-mob-dn-mp-wt-cr,
364
- var(--_ctm-tab-dn-mp-wt-cr, var(--_ctm-dn-mp-wt-cr, var(--_tst-dn-mp-wt-cr)))
365
- );
366
- font-family: var(
367
- --_ctm-mob-dn-mp-wt-ft-fy,
368
- var(--_ctm-tab-dn-mp-wt-ft-fy, var(--_ctm-dn-mp-wt-ft-fy, var(--_tst-dn-mp-wt-ft-fy)))
369
- );
370
- font-size: var(
371
- --_ctm-mob-dn-mp-wt-ft-se,
372
- var(--_ctm-tab-dn-mp-wt-ft-se, var(--_ctm-dn-mp-wt-ft-se, var(--_tst-dn-mp-wt-ft-se)))
373
- );
374
- font-weight: var(
375
- --_ctm-mob-dn-mp-wt-ft-wt,
376
- var(--_ctm-tab-dn-mp-wt-ft-wt, var(--_ctm-dn-mp-wt-ft-wt, var(--_tst-dn-mp-wt-ft-wt)))
377
- );
378
- font-style: var(
379
- --_ctm-mob-dn-mp-wt-ft-se-ic,
380
- var(
381
- --_ctm-tab-dn-mp-wt-ft-se-ic,
382
- var(--_ctm-dn-mp-wt-ft-se-ic, var(--_tst-dn-mp-wt-ft-se-ic))
383
- )
384
- );
385
- text-align: var(
386
- --_ctm-mob-dn-mp-wt-tt-an,
387
- var(--_ctm-tab-dn-mp-wt-tt-an, var(--_ctm-dn-mp-wt-tt-an, var(--_tst-dn-mp-wt-tt-an)))
388
- );
389
- letter-spacing: var(
390
- --_ctm-mob-dn-mp-wt-lr-sg,
391
- var(--_ctm-tab-dn-mp-wt-lr-sg, var(--_ctm-dn-mp-wt-lr-sg, var(--_tst-dn-mp-wt-lr-sg)))
392
- );
393
- line-height: var(
394
- --_ctm-mob-dn-mp-wt-le-ht,
395
- var(--_ctm-tab-dn-mp-wt-le-ht, var(--_ctm-dn-mp-wt-le-ht, var(--_tst-dn-mp-wt-le-ht)))
396
- );
397
- text-decoration: var(
398
- --_ctm-mob-dn-mp-wt-ue,
399
- var(--_ctm-tab-dn-mp-wt-ue, var(--_ctm-dn-mp-wt-ue, var(--_tst-dn-mp-wt-ue)))
400
- );
401
- }
402
-
403
- & p {
404
- color: var(
405
- --_ctm-mob-dn-mp-wt-cr-dc,
406
- var(--_ctm-tab-dn-mp-wt-cr-dc, var(--_ctm-dn-mp-wt-cr-dc, var(--_tst-dn-mp-wt-cr-dc)))
407
- );
408
- font-family: var(
409
- --_ctm-mob-dn-mp-wt-ft-fy-dc,
410
- var(
411
- --_ctm-tab-dn-mp-wt-ft-fy-dc,
412
- var(--_ctm-dn-mp-wt-ft-fy-dc, var(--_tst-dn-mp-wt-ft-fy-dc))
413
- )
414
- );
415
- font-size: var(
416
- --_ctm-mob-dn-mp-wt-ft-se-dc,
417
- var(
418
- --_ctm-tab-dn-mp-wt-ft-se-dc,
419
- var(--_ctm-dn-mp-wt-ft-se-dc, var(--_tst-dn-mp-wt-ft-se-dc))
420
- )
421
- );
422
- font-weight: var(
423
- --_ctm-mob-dn-mp-wt-ft-wt-dc,
424
- var(
425
- --_ctm-tab-dn-mp-wt-ft-wt-dc,
426
- var(--_ctm-dn-mp-wt-ft-wt-dc, var(--_tst-dn-mp-wt-ft-wt-dc))
427
- )
428
- );
429
- font-style: var(
430
- --_ctm-mob-dn-mp-wt-ft-se-ic-dc,
431
- var(
432
- --_ctm-tab-dn-mp-wt-ft-se-ic-dc,
433
- var(--_ctm-dn-mp-wt-ft-se-ic-dc, var(--_tst-dn-mp-wt-ft-se-ic-dc))
434
- )
435
- );
436
- text-align: var(
437
- --_ctm-mob-dn-mp-wt-tt-an-dc,
438
- var(
439
- --_ctm-tab-dn-mp-wt-tt-an-dc,
440
- var(--_ctm-dn-mp-wt-tt-an-dc, var(--_tst-dn-mp-wt-tt-an-dc))
441
- )
442
- );
443
- letter-spacing: var(
444
- --_ctm-mob-dn-mp-wt-lr-sg-dc,
445
- var(
446
- --_ctm-tab-dn-mp-wt-lr-sg-dc,
447
- var(--_ctm-dn-mp-wt-lr-sg-dc, var(--_tst-dn-mp-wt-lr-sg-dc))
448
- )
449
- );
450
- line-height: var(
451
- --_ctm-mob-dn-mp-wt-le-ht-dc,
452
- var(
453
- --_ctm-tab-dn-mp-wt-le-ht-dc,
454
- var(--_ctm-dn-mp-wt-le-ht-dc, var(--_tst-dn-mp-wt-le-ht-dc))
455
- )
456
- );
457
- text-decoration: var(
458
- --_ctm-mob-dn-mp-wt-ue-dc,
459
- var(--_ctm-tab-dn-mp-wt-ue-dc, var(--_ctm-dn-mp-wt-ue-dc, var(--_tst-dn-mp-wt-ue-dc)))
460
- );
461
- }
462
-
463
- // h3 {
464
- // margin-bottom: var(--_mb-4);
465
- // }
466
- }
467
-
468
- .img__overlay {
469
- background: var(
470
- --_ctm-mob-dn-ie-se-oy-cr,
471
- var(--_ctm-tab-dn-ie-se-oy-cr, var(--_ctm-dn-ie-se-oy-cr, var(--_tst-dn-ie-se-oy-cr)))
472
- );
473
-
474
- height: 100%;
475
- width: 100%;
476
- position: absolute;
477
- top: 0;
478
- }
479
- @keyframes scaleInOut {
480
- 0% {
481
- transform: scale(1);
482
- }
483
- 50% {
484
- transform: scale(1.5);
485
- }
486
- 100% {
487
- transform: scale(1);
488
- }
489
- }
490
- .hotspot__container {
491
- position: absolute;
492
- top: 43%;
493
- left: 12%;
494
- .hotspot__main {
495
- position: relative;
496
- .hotspot {
497
- background: var(--_ctm-dn-ht-se-bd-cr);
498
- // height: var(--_ctm-dn-tp-tt-dn-ft-se);
499
- // width: var(--_ctm-dn-tp-tt-dn-ft-se);
500
- position: absolute;
501
- cursor: pointer;
502
- width: var(--_ctm-dn-ht-se-ht-se);
503
- height: var(--_ctm-dn-ht-se-ht-se);
504
- background-color: var(--_ctm-dn-ht-se-bd-cr);
505
- display: flex;
506
- align-items: center;
507
- top: 50%;
508
- left: 50%;
509
- transform: translate(-50%, -50%);
510
- box-sizing: border-box;
511
- justify-content: center;
512
- animation: scaleInOut var(--_ctm-dn-ht-se-an-fy) infinite;
513
- &[data-hotspot-shape="circle"] {
514
- border-radius: 50%;
515
- }
516
- &[data-hotspot-shape="any"] {
517
- border-radius: var(--_ctm-dn-ht-se-br-rs);
518
- }
519
- }
520
- }
521
- }
522
- .hotspot__tooltip {
523
- --_sf-br-vl: var(--_ctm-dn-tp-dn-br-rs, 0px);
524
- position: absolute;
525
- background: var(--_ctm-dn-tp-dn-bd-cr);
526
- z-index: 1000;
527
- min-width: 100px;
528
- width: var(--_ctm-dn-tp-dn-tp-wh);
529
- min-height: 100px;
530
- height: var(--_ctm-dn-tp-dn-tp-ht);
531
- top: 43%;
532
- left: 12%;
533
- // top: var(--_sf-im-psn-tp, 0);
534
- // left: var(--_sf-im-psn-lt, 0);
535
-
536
- padding: 4px 8px;
537
- display: flex;
538
- justify-content: var(--_ctm-dn-tp-dn-hl-at);
539
- align-items: var(--_ctm-dn-tp-dn-vl-at);
540
-
541
- &::after {
542
- content: "";
543
- position: absolute;
544
-
545
- border-width: 5px;
546
- border-style: solid;
547
- }
548
- .text_box {
549
- overflow-y: auto;
550
- h6 {
551
- font-size: var(--_ctm-dn-tp-tt-dn-ft-se);
552
- font-family: var(--_ctm-dn-tp-tt-dn-ft-fy);
553
- color: var(--_ctm-dn-tp-tt-dn-cr);
554
-
555
- font-weight: var(--_ctm-dn-tp-tt-dn-ft-wt);
556
- font-style: var(--_ctm-dn-tp-tt-dn-ft-se-ic);
557
- text-align: var(--_ctm-dn-tp-tt-dn-tt-an);
558
- letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg);
559
- line-height: var(--_ctm-dn-tp-tt-dn-le-ht);
560
- text-decoration: var(--_ctm-dn-tp-tt-dn-ue);
561
- }
562
- p {
563
- font-size: var(--_ctm-dn-tp-tt-dn-ft-se-dc);
564
- color: var(--_ctm-dn-tp-tt-dn-cr-dc);
565
- font-family: var(--_ctm-dn-tp-tt-dn-ft-fy-dc);
566
- font-weight: var(--_ctm-dn-tp-tt-dn-ft-wt-dc);
567
- font-style: var(--_ctm-dn-tp-tt-dn-ft-se-ic-dc);
568
- text-align: var(--_ctm-dn-tp-tt-dn-tt-an-dc);
569
- letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg-dc);
570
- line-height: var(--_ctm-dn-tp-tt-dn-le-ht-dc);
571
- text-decoration: var(--_ctm-dn-tp-tt-dn-lh-dc, var(--_ctm-dn-tp-tt-dn-ue-dc));
572
- }
573
- }
574
- .tooltip__image {
575
- width: 100%;
576
- background-color: var(--_ctm-dn-tp-ie-dn-bd-cr);
577
- transition: transform 0.3s ease-in-out;
578
- display: flex;
579
- justify-content: var(--_ctm-dn-tp-ie-dn-hl-at);
580
- align-items: var(--_ctm-dn-tp-ie-dn-vl-at);
581
- img {
582
- object-fit: var(--_ctm-dn-tp-ie-dn-ft-os);
583
- height: -webkit-fill-available;
584
- max-width: 100%;
585
- rotate: calc(var(--_ctm-dn-tp-ie-dn-ud) * 1deg);
586
- scale: var(--_ctm-dn-tp-ie-dn-zm-ie);
587
-
588
- &:hover {
589
- &[data-on-img-hover="Zoom In"] {
590
- transform: scale(1.08);
591
- }
592
- &[data-on-img-hover="Zoom Out"] {
593
- transform: scale(0.92);
594
- }
595
- }
596
- }
597
- }
598
- }
599
- // .hotspot__main {
600
- // position: relative;
601
- // .hotspot {
602
- // background: var(
603
- // --_ctm-mob-dn-pn-se-bd-cr,
604
- // var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr))
605
- // );
606
- // border-style: var(
607
- // --_ctm-mob-dn-pn-se-br-se,
608
- // var(--_ctm-tab-dn-pn-se-br-se, var(--_ctm-dn-pn-se-br-se))
609
- // );
610
- // border-color: var(
611
- // --_ctm-mob-dn-pn-se-br-cr,
612
- // var(--_ctm-tab-dn-pn-se-br-cr, var(--_ctm-dn-pn-se-br-cr))
613
- // );
614
- // border-width: var(
615
- // --_ctm-mob-dn-pn-se-br-wh,
616
- // var(--_ctm-tab-dn-pn-se-br-wh, var(--_ctm-dn-pn-se-br-wh))
617
- // );
618
- // border-radius: var(
619
- // --_ctm-mob-dn-pn-se-br-rs,
620
- // var(--_ctm-tab-dn-pn-se-br-rs, var(--_ctm-dn-pn-se-br-rs))
621
- // );
622
- // box-shadow: var(
623
- // --_show-shadow,
624
- // var(
625
- // --_ctm-mob-dn-pn-se-sw-ae,
626
- // var(--_ctm-tab-dn-pn-se-sw-ae, var(--_ctm-dn-pn-se-sw-ae))
627
- // )
628
- // var(
629
- // --_ctm-mob-dn-pn-se-sw-br,
630
- // var(--_ctm-tab-dn-pn-se-sw-br, var(--_ctm-dn-pn-se-sw-br))
631
- // )
632
- // var(
633
- // --_ctm-mob-dn-pn-se-sw-sd,
634
- // var(--_ctm-tab-dn-pn-se-sw-sd, var(--_ctm-dn-pn-se-sw-sd))
635
- // )
636
- // var(
637
- // --_ctm-mob-dn-pn-se-sw-cr,
638
- // var(--_ctm-tab-dn-pn-se-sw-cr, var(--_ctm-dn-pn-se-sw-cr))
639
- // )
640
- // );
641
-
642
- // position: absolute;
643
- // cursor: pointer;
644
- // width: var(
645
- // --_ctm-mob-dn-pn-se-ht-se,
646
- // var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
647
- // );
648
- // height: var(
649
- // --_ctm-mob-dn-pn-se-ht-se,
650
- // var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
651
- // );
652
- // background-color: var(
653
- // --_ctm-mob-dn-pn-se-bd-cr,
654
- // var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr))
655
- // );
656
-
657
- // display: flex;
658
- // align-items: center;
659
- // top: 50%;
660
- // left: 50%;
661
- // transform: translate(-50%, -50%);
662
- // justify-content: center;
663
- // animation: scaleInOut
664
- // var(
665
- // --_ctm-mob-dn-pn-se-an-fy,
666
- // var(--_ctm-tab-dn-pn-se-an-fy, var(--_ctm-dn-pn-se-an-fy))
667
- // )
668
- // infinite;
669
-
670
- // .icon {
671
- // display: var(--_sf-show-icon-ff, flex);
672
-
673
- // svg {
674
- // width: var(
675
- // --_ctm-mob-dn-pn-se-in-se,
676
- // var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
677
- // );
678
- // height: var(
679
- // --_ctm-mob-dn-pn-se-in-se,
680
- // var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
681
- // );
682
-
683
- // path {
684
- // stroke: var(
685
- // --_ctm-mob-dn-pn-se-in-c1,
686
- // var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
687
- // );
688
- // fill: var(
689
- // --_ctm-mob-dn-pn-se-in-c1,
690
- // var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
691
- // );
692
- // }
693
- // }
694
- // }
695
- // }
696
- // .hotspot__tooltip {
697
- // position: absolute;
698
- // background: var(
699
- // --_ctm-mob-dn-tp-dn-bd-cr,
700
- // var(--_ctm-tab-dn-tp-dn-bd-cr, var(--_ctm-dn-tp-dn-bd-cr))
701
- // );
702
- // border-style: var(
703
- // --_ctm-mob-dn-tp-dn-br-se,
704
- // var(--_ctm-tab-dn-tp-dn-br-se, var(--_ctm-dn-tp-dn-br-se))
705
- // );
706
- // border-color: var(
707
- // --_ctm-mob-dn-tp-dn-br-cr,
708
- // var(--_ctm-tab-dn-tp-dn-br-cr, var(--_ctm-dn-tp-dn-br-cr))
709
- // );
710
- // border-width: var(
711
- // --_ctm-mob-dn-tp-dn-br-wh,
712
- // var(--_ctm-tab-dn-tp-dn-br-wh, var(--_ctm-dn-tp-dn-br-wh))
713
- // );
714
- // border-radius: var(
715
- // --_ctm-mob-dn-tp-dn-br-rs,
716
- // var(--_ctm-tab-dn-tp-dn-br-rs, var(--_ctm-dn-tp-dn-br-rs))
717
- // );
718
-
719
- // box-shadow: var(
720
- // --_show-shadow,
721
- // var(
722
- // --_ctm-mob-dn-tp-dn-sw-ae,
723
- // var(--_ctm-tab-dn-tp-dn-sw-ae, var(--_ctm-dn-tp-dn-sw-ae))
724
- // )
725
- // var(
726
- // --_ctm-mob-dn-tp-dn-sw-br,
727
- // var(--_ctm-tab-dn-tp-dn-sw-br, var(--_ctm-dn-tp-dn-sw-br))
728
- // )
729
- // var(
730
- // --_ctm-mob-dn-tp-dn-sw-sd,
731
- // var(--_ctm-tab-dn-tp-dn-sw-sd, var(--_ctm-dn-tp-dn-sw-sd))
732
- // )
733
- // var(
734
- // --_ctm-mob-dn-tp-dn-sw-cr,
735
- // var(--_ctm-tab-dn-tp-dn-sw-cr, var(--_ctm-dn-tp-dn-sw-cr))
736
- // )
737
- // );
738
-
739
- // z-index: 1000;
740
- // min-width: 100px;
741
- // width: var(
742
- // --_ctm-mob-dn-tp-dn-tp-wh,
743
- // var(--_ctm-tab-dn-tp-dn-tp-wh, var(--_ctm-dn-tp-dn-tp-wh))
744
- // );
745
- // min-height: 100px;
746
- // height: var(
747
- // --_ctm-mob-dn-tp-dn-tp-ht,
748
- // var(--_ctm-tab-dn-tp-dn-tp-ht, var(--_ctm-dn-tp-dn-tp-ht))
749
- // );
750
-
751
- // // border-radius: 4px;
752
- // // transform: translate(-10%, -130%);
753
- // left: -10px;
754
- // bottom: 7px;
755
- // padding: 4px 8px;
756
- // display: flex;
757
- // justify-content: var(
758
- // --_ctm-mob-dn-tp-dn-hl-at,
759
- // var(--_ctm-tab-dn-tp-dn-hl-at, var(--_ctm-dn-tp-dn-hl-at))
760
- // );
761
- // align-items: var(
762
- // --_ctm-mob-dn-tp-dn-vl-at,
763
- // var(--_ctm-tab-dn-tp-dn-vl-at, var(--_ctm-dn-tp-dn-vl-at))
764
- // );
765
-
766
- // &::after {
767
- // content: "";
768
- // position: absolute;
769
- // top: 100%;
770
- // left: 20px;
771
- // margin-left: -5px;
772
- // border-width: 5px;
773
- // border-style: solid;
774
- // border-color: var(
775
- // --_ctm-mob-dn-tp-dn-bd-cr,
776
- // var(--_ctm-tab-dn-tp-dn-bd-cr, var(--_ctm-dn-tp-dn-bd-cr))
777
- // )
778
- // transparent transparent transparent;
779
- // }
780
- // span {
781
- // svg {
782
- // width: var(
783
- // --_ctm-mob-dn-pn-se-in-se,
784
- // var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
785
- // );
786
- // height: var(
787
- // --_ctm-mob-dn-pn-se-in-se,
788
- // var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
789
- // );
790
- // path {
791
- // stroke: var(
792
- // --_ctm-mob-dn-pn-se-in-c1,
793
- // var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
794
- // );
795
- // }
796
- // }
797
- // }
798
-
799
- // .text_box {
800
- // h6 {
801
- // font-size: var(
802
- // --_ctm-mob-dn-tp-tt-dn-ft-se,
803
- // var(--_ctm-tab-dn-tp-tt-dn-ft-se, var(--_ctm-dn-tp-tt-dn-ft-se))
804
- // );
805
- // font-family: var(
806
- // --_ctm-mob-dn-tp-tt-dn-ft-fy,
807
- // var(--_ctm-tab-dn-tp-tt-dn-ft-fy, var(--_ctm-dn-tp-tt-dn-ft-fy))
808
- // );
809
- // color: var(
810
- // --_ctm-mob-dn-tp-tt-dn-cr,
811
- // var(--_ctm-tab-dn-tp-tt-dn-cr, var(--_ctm-dn-tp-tt-dn-cr))
812
- // );
813
-
814
- // font-weight: var(
815
- // --_ctm-mob-dn-tp-tt-dn-ft-wt,
816
- // var(--_ctm-tab-dn-tp-tt-dn-ft-wt, var(--_ctm-dn-tp-tt-dn-ft-wt))
817
- // );
818
- // font-style: var(
819
- // --_ctm-mob-dn-tp-tt-dn-ft-se-ic,
820
- // var(--_ctm-tab-dn-tp-tt-dn-ft-se-ic, var(--_ctm-dn-tp-tt-dn-ft-se-ic))
821
- // );
822
- // text-align: var(
823
- // --_ctm-mob-dn-tp-tt-dn-tt-an,
824
- // var(--_ctm-tab-dn-tp-tt-dn-tt-an, var(--_ctm-dn-tp-tt-dn-tt-an))
825
- // );
826
- // letter-spacing: var(
827
- // --_ctm-mob-dn-tp-tt-dn-lr-sg,
828
- // var(--_ctm-tab-dn-tp-tt-dn-lr-sg, var(--_ctm-dn-tp-tt-dn-lr-sg))
829
- // );
830
- // line-height: var(
831
- // --_ctm-mob-dn-tp-tt-dn-le-ht,
832
- // var(--_ctm-tab-dn-tp-tt-dn-le-ht, var(--_ctm-dn-tp-tt-dn-le-ht))
833
- // );
834
- // text-decoration: var(
835
- // --_ctm-mob-dn-tp-tt-dn-ue,
836
- // var(--_ctm-tab-dn-tp-tt-dn-ue, var(--_ctm-dn-tp-tt-dn-ue))
837
- // );
838
- // }
839
-
840
- // p {
841
- // font-size: var(
842
- // --_ctm-mob-dn-tp-tt-dn-ft-se-dc,
843
- // var(--_ctm-tab-dn-tp-tt-dn-ft-se-dc, var(--_ctm-dn-tp-tt-dn-ft-se-dc))
844
- // );
845
- // color: var(
846
- // --_ctm-mob-dn-tp-tt-dn-cr-dc,
847
- // var(--_ctm-tab-dn-tp-tt-dn-cr-dc, var(--_ctm-dn-tp-tt-dn-cr-dc))
848
- // );
849
- // font-family: var(
850
- // --_ctm-mob-dn-tp-tt-dn-ft-fy-dc,
851
- // var(--_ctm-tab-dn-tp-tt-dn-ft-fy-dc, var(--_ctm-dn-tp-tt-dn-ft-fy-dc))
852
- // );
853
- // font-weight: var(
854
- // --_ctm-mob-dn-tp-tt-dn-ft-wt-dc,
855
- // var(--_ctm-tab-dn-tp-tt-dn-ft-wt-dc, var(--_ctm-dn-tp-tt-dn-ft-wt-dc))
856
- // );
857
- // font-style: var(
858
- // --_ctm-mob-dn-tp-tt-dn-ft-se-ic-dc,
859
- // var(--_ctm-tab-dn-tp-tt-dn-ft-se-ic-dc, var(--_ctm-dn-tp-tt-dn-ft-se-ic-dc))
860
- // );
861
- // text-align: var(
862
- // --_ctm-mob-dn-tp-tt-dn-tt-an-dc,
863
- // var(--_ctm-tab-dn-tp-tt-dn-tt-an-dc, var(--_ctm-dn-tp-tt-dn-tt-an-dc))
864
- // );
865
- // letter-spacing: var(
866
- // --_ctm-mob-dn-tp-tt-dn-lr-sg-dc,
867
- // var(--_ctm-tab-dn-tp-tt-dn-lr-sg-dc, var(--_ctm-dn-tp-tt-dn-lr-sg-dc))
868
- // );
869
- // line-height: var(
870
- // --_ctm-mob-dn-tp-tt-dn-le-ht-dc,
871
- // var(--_ctm-tab-dn-tp-tt-dn-le-ht-dc, var(--_ctm-dn-tp-tt-dn-le-ht-dc))
872
- // );
873
- // text-decoration: var(
874
- // --_ctm-mob-dn-tp-tt-dn-ue-dc,
875
- // var(--_ctm-tab-dn-tp-tt-dn-ue-dc, var(--_ctm-dn-tp-tt-dn-ue-dc))
876
- // );
877
- // }
878
- // }
879
- // .tooltip__image {
880
- // background-color: var(
881
- // --_ctm-mob-dn-tp-ie-dn-bd-cr,
882
- // var(--_ctm-tab-dn-tp-ie-dn-bd-cr, var(--_ctm-dn-tp-ie-dn-bd-cr))
883
- // );
884
- // transition: transform 0.3s ease-in-out;
885
- // border-style: var(
886
- // --_ctm-mob-dn-tp-ie-dn-br-se,
887
- // var(--_ctm-tab-dn-tp-ie-dn-br-se, var(--_ctm-dn-tp-ie-dn-br-se))
888
- // );
889
- // border-color: var(
890
- // --_ctm-mob-dn-tp-ie-dn-br-cr,
891
- // var(--_ctm-tab-dn-tp-ie-dn-br-cr, var(--_ctm-dn-tp-ie-dn-br-cr))
892
- // );
893
- // border-width: var(
894
- // --_ctm-mob-dn-tp-ie-dn-br-wh,
895
- // var(--_ctm-tab-dn-tp-ie-dn-br-wh, var(--_ctm-dn-tp-ie-dn-br-wh))
896
- // );
897
- // border-radius: var(
898
- // --_ctm-mob-dn-tp-ie-dn-br-rs,
899
- // var(--_ctm-tab-dn-tp-ie-dn-br-rs, var(--_ctm-dn-tp-ie-dn-br-rs))
900
- // );
901
- // box-shadow: var(
902
- // --_show-shadow,
903
- // var(
904
- // --_ctm-mob-dn-tp-ie-dn-sw-ae,
905
- // var(--_ctm-tab-dn-tp-ie-dn-sw-ae, var(--_ctm-dn-tp-ie-dn-sw-ae))
906
- // )
907
- // var(
908
- // --_ctm-mob-dn-tp-ie-dn-sw-br,
909
- // var(--_ctm-tab-dn-tp-ie-dn-sw-br, var(--_ctm-dn-tp-ie-dn-sw-br))
910
- // )
911
- // var(
912
- // --_ctm-mob-dn-tp-ie-dn-sw-sd,
913
- // var(--_ctm-tab-dn-tp-ie-dn-sw-sd, var(--_ctm-dn-tp-ie-dn-sw-sd))
914
- // )
915
- // var(
916
- // --_ctm-mob-dn-tp-ie-dn-sw-cr,
917
- // var(--_ctm-tab-dn-tp-ie-dn-sw-cr, var(--_ctm-dn-tp-ie-dn-sw-cr))
918
- // )
919
- // );
920
- // display: flex;
921
- // justify-content: var(
922
- // --_ctm-mob-dn-tp-ie-dn-hl-at,
923
- // var(--_ctm-tab-dn-tp-ie-dn-hl-at, var(--_ctm-dn-tp-ie-dn-hl-at))
924
- // );
925
- // align-items: var(
926
- // --_ctm-mob-dn-tp-ie-dn-vl-at,
927
- // var(--_ctm-tab-dn-tp-ie-dn-vl-at, var(--_ctm-dn-tp-ie-dn-vl-at))
928
- // );
929
-
930
- // img {
931
- // object-fit: var(
932
- // --_ctm-mob-dn-tp-ie-dn-ft-os,
933
- // var(--_ctm-tab-dn-tp-ie-dn-ft-os, var(--_ctm-dn-tp-ie-dn-ft-os))
934
- // );
935
- // max-width: 100%;
936
- // rotate: calc(
937
- // var(
938
- // --_ctm-mob-dn-tp-ie-dn-ud,
939
- // var(--_ctm-tab-dn-tp-ie-dn-ud, var(--_ctm-dn-tp-ie-dn-ud))
940
- // ) *
941
- // 1deg
942
- // );
943
- // scale: var(
944
- // --_ctm-mob-dn-tp-ie-dn-zm-ie,
945
- // var(--_ctm-tab-dn-tp-ie-dn-zm-ie, var(--_ctm-dn-tp-ie-dn-zm-ie))
946
- // );
947
- // }
948
- // }
949
- // }
950
- // }
951
-
952
- .map {
953
- width: 100%;
954
- height: 100%;
955
- img {
956
- width: 100%;
957
- height: 100%;
958
- }
959
- }
960
- }
961
- }
962
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ $tpgp: 20px;
6
+ $bm: 30px;
7
+ $ics: -1px;
8
+
9
+ $data: (
10
+ leftTop: (
11
+ transform: translate(calc(-100% - #{$tpgp}), calc(-100% + #{$bm})),
12
+ icon: (
13
+ bottom: #{$bm},
14
+ right: 0px,
15
+ transform: translate(calc(100% + #{$ics}), calc(50% + (#{$ics} * 1.25))),
16
+ border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
17
+ ),
18
+ ),
19
+ leftCenter: (
20
+ transform: translate(calc(-100% - #{$tpgp}), calc(-50% + 0px)),
21
+ icon: (
22
+ top: 50%,
23
+ right: 0px,
24
+ transform: translate(calc(100% + #{$ics}), calc(-50% + (0px * 1.75))),
25
+ border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
26
+ ),
27
+ ),
28
+ leftBottom: (
29
+ transform: translate(calc(-100% - #{$tpgp}), calc(0% - #{$bm})),
30
+ icon: (
31
+ top: #{$bm},
32
+ right: 0px,
33
+ transform: translate(calc(100% + #{$ics}), calc(-100% + (#{$ics} * 1.75))),
34
+ border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
35
+ ),
36
+ ),
37
+ topLeft: (
38
+ transform: translate(calc(-100% + #{$bm}), calc(-100% - #{$tpgp})),
39
+ icon: (
40
+ bottom: 0px,
41
+ right: #{$bm},
42
+ transform: translate(calc(50% + (#{$ics} * 1.75)), calc(100% + #{$ics})),
43
+ border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
44
+ ),
45
+ ),
46
+ topCenter: (
47
+ transform: translate(calc(-50% - #{$ics}), calc(-100% - #{$tpgp})),
48
+ icon: (
49
+ bottom: 0px,
50
+ right: 50%,
51
+ transform: translate(calc(50% + (#{$ics} * 1.75)), calc(100% + #{$ics})),
52
+ border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
53
+ ),
54
+ ),
55
+ topRight: (
56
+ transform: translate(calc(-1 * #{$bm}), calc(-100% - #{$tpgp})),
57
+ icon: (
58
+ bottom: 0px,
59
+ left: #{$bm},
60
+ transform: translate(calc(-100% + (#{$ics} * 1.25)), calc(100% + #{$ics})),
61
+ border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
62
+ ),
63
+ ),
64
+ rightTop: (
65
+ transform: translate(calc(0% + #{$tpgp}), calc(-100% + #{$bm})),
66
+ icon: (
67
+ top: 100%,
68
+ left: 0px,
69
+ transform: translate(calc(-100% - #{$ics}), calc(50% - (#{$bm} * 1.25))),
70
+ border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
71
+ ),
72
+ ),
73
+ rightCenter: (
74
+ transform: translate(calc(0% + #{$tpgp}), calc(-50% + #{$ics})),
75
+ border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
76
+ icon: (
77
+ bottom: 50%,
78
+ left: 0px,
79
+ transform: translate(calc(-100% - #{$ics}), calc(50% + (0px * 1.75))),
80
+ border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
81
+ ),
82
+ ),
83
+ rightBottom: (
84
+ transform: translate(calc(0% + #{$tpgp}), calc(0% - #{$bm})),
85
+ border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
86
+ icon: (
87
+ top: 100%,
88
+ left: 0,
89
+ transform: translate(calc(-100% - #{$ics}), calc(-100% - (#{$bm} * 2.05))),
90
+ border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
91
+ ),
92
+ ),
93
+ bottomLeft: (
94
+ transform: translate(calc(-100% + #{$bm}), calc(-50% + (#{$bm} * 2.7))),
95
+ border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
96
+ icon: (
97
+ right: #{$bm},
98
+ top: 0%,
99
+ transform: translate(calc(50% + (#{$ics} * 0.75)), calc(-100% - #{$ics})),
100
+ border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
101
+ ),
102
+ ),
103
+ bottomCenter: (
104
+ transform: translate(calc(-50% - #{$ics}), calc(-50% + (#{$bm} * 2.7))),
105
+ border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
106
+ icon: (
107
+ right: 50%,
108
+ top: 0,
109
+ transform: translate(calc(0% + (#{$ics} * 2.75)), calc(-100% - #{$ics})),
110
+ border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
111
+ ),
112
+ ),
113
+ bottomRight: (
114
+ transform: translate(calc(0% - #{$bm}), calc(-50% + (#{$bm} * 2.7))),
115
+ border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
116
+ icon: (
117
+ left: 30px,
118
+ top: 0,
119
+ transform: translate(calc(-50% - (#{$ics} * 1.25)), calc(-100% - #{$ics})),
120
+ border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
121
+ ),
122
+ ),
123
+ );
124
+
125
+ [data-div-type="element"] {
126
+ &[data-element-type="map"] {
127
+ &[data-hotspot-position] {
128
+ @each $key, $value in $data {
129
+ &[data-hotspot-position="#{$key}"] {
130
+ .hotspot__tooltip {
131
+ @each $prop, $val in $value {
132
+ @if ($prop != icon) {
133
+ #{$prop}: #{$val};
134
+ } @else {
135
+ @each $key2, $value2 in $val {
136
+ &:after {
137
+ #{$key2}: #{$value2};
138
+ }
139
+ }
140
+ }
141
+ }
142
+ }
143
+ }
144
+ }
145
+ }
146
+ }
147
+ }
148
+ [data-div-type="element"] {
149
+ &[data-element-type="map"] {
150
+ // width: var(--_lt-wh);
151
+ // height: var(--_lt-ht);
152
+ // margin: var(--_lt-mn);
153
+ // padding: var(--_lt-pg);
154
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
155
+ width: var(
156
+ --_sf-el-wh-st-mx,
157
+ calc(
158
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
159
+ )
160
+ );
161
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
162
+
163
+ --_aspect-ratio: calc(
164
+ 1 *
165
+ (
166
+ var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
167
+ var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
168
+ )
169
+ );
170
+
171
+ & > .wrapper {
172
+ width: 100%;
173
+ // height: 100%;
174
+ }
175
+ &[data-show-shadow="false"] {
176
+ --_show-shadow: none;
177
+ }
178
+ &[data-hotspot-position="topLeft"] {
179
+ --_show-shadow: none;
180
+ .hotspot__tooltip {
181
+ border-style: var(--_ctm-dn-tp-dn-br-se);
182
+ border-color: var(--_ctm-dn-tp-dn-br-cr);
183
+ border-width: var(--_ctm-dn-tp-dn-br-wh);
184
+ border-radius: var(--_ctm-dn-tp-dn-br-rs);
185
+ }
186
+ }
187
+
188
+ &[data-hotspot-image-style-show-border="true"] {
189
+ .imageHotspot-element {
190
+ border-style: var(--_ctm-dn-ie-se-br-se);
191
+ border-color: var(--_ctm-dn-ie-se-br-cr);
192
+ border-width: var(--_ctm-dn-ie-se-br-wh);
193
+ border-radius: var(--_ctm-dn-ie-se-br-rs);
194
+ }
195
+ }
196
+ &[data-hotspot-tooltip-style-show-border="true"] {
197
+ .hotspot__tooltip {
198
+ border-style: var(--_ctm-dn-tp-dn-br-se);
199
+ border-color: var(--_ctm-dn-tp-dn-br-cr);
200
+ border-width: var(--_ctm-dn-tp-dn-br-wh);
201
+ border-radius: var(--_ctm-dn-tp-dn-br-rs);
202
+ }
203
+ }
204
+ &[data-hotspot-tooltip-style-show-shadow="true"] {
205
+ .hotspot__tooltip {
206
+ box-shadow: var(--_ctm-dn-tp-dn-sw-ae) var(--_ctm-dn-tp-dn-sw-br) var(--_ctm-dn-tp-dn-sw-sd)
207
+ var(--_ctm-dn-tp-dn-sw-cr);
208
+ }
209
+ }
210
+ &[data-hotspot-tooltip-image-style-show-border="true"] {
211
+ .tooltip__image {
212
+ border-style: var(--_ctm-dn-tp-ie-dn-br-se);
213
+ border-color: var(--_ctm-dn-tp-ie-dn-br-cr);
214
+ border-width: var(--_ctm-dn-tp-ie-dn-br-wh);
215
+ border-radius: var(--_ctm-dn-tp-ie-dn-br-rs);
216
+ }
217
+ }
218
+ &[data-hotspot-tooltip-image-style-show-shadow="true"] {
219
+ .tooltip__image {
220
+ box-shadow: var(
221
+ --_show-shadow,
222
+ var(--_ctm-dn-tp-ie-dn-sw-ae) var(--_ctm-dn-tp-ie-dn-sw-br) var(--_ctm-dn-tp-ie-dn-sw-sd)
223
+ var(--_ctm-dn-tp-ie-dn-sw-cr)
224
+ );
225
+ }
226
+ }
227
+ &[data-hotspot-style-show-shadow="true"] {
228
+ .hotspot {
229
+ box-shadow: var(--_ctm-dn-ht-se-sw-ae) var(--_ctm-dn-ht-se-sw-br) var(--_ctm-dn-ht-se-sw-sd)
230
+ var(--_ctm-dn-ht-se-sw-cr);
231
+ }
232
+ }
233
+ &[data-hotspot-style-show-border="true"] {
234
+ .hotspot {
235
+ border-style: var(--_ctm-dn-ht-se-br-se);
236
+ border-color: var(--_ctm-dn-ht-se-br-cr);
237
+ border-width: var(--_ctm-dn-ht-se-br-wh);
238
+ border-radius: var(--_ctm-dn-ht-se-br-rs);
239
+ }
240
+ }
241
+ .map-element {
242
+ --text-high-contrast-rgb-value: 49, 49, 49;
243
+ --detail-medium-contrast: rgb(234, 234, 234);
244
+ --text-body: rgb(54, 49, 61);
245
+
246
+ position: relative;
247
+ background-color: var(
248
+ --_ctm-mob-dn-mp-wt-bd-cr,
249
+ var(--_ctm-tab-dn-mp-wt-bd-cr, var(--_ctm-dn-mp-wt-bd-cr))
250
+ );
251
+
252
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
253
+
254
+ display: flex;
255
+ flex-direction: column;
256
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
257
+
258
+ gap: var(
259
+ --_ctm-mob-dn-mp-wt-lt-mp-ad-tt-cr-sg,
260
+ var(--_ctm-tab-dn-mp-wt-lt-mp-ad-tt-cr-sg, var(--_ctm-dn-mp-wt-lt-mp-ad-tt-cr-sg))
261
+ );
262
+ align-content: var(
263
+ --_ctm-mob-dn-mp-wt-lt-mp-ad-tt-cr-sg,
264
+ var(--_ctm-tab-dn-mp-wt-lt-mp-ad-tt-cr-sg, center)
265
+ );
266
+
267
+ width: 100%;
268
+ height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
269
+
270
+ border-color: var(
271
+ --_ctm-mob-dn-mp-wt-br-cr,
272
+ var(--_ctm-tab-dn-mp-wt-br-cr, var(--_ctm-dn-mp-wt-br-cr))
273
+ );
274
+
275
+ border-style: var(
276
+ --_ctm-mob-dn-mp-wt-br-se,
277
+ var(--_ctm-tab-dn-mp-wt-br-se, var(--_ctm-dn-mp-wt-br-se))
278
+ );
279
+
280
+ border-width: var(
281
+ --_ctm-mob-dn-mp-wt-br-wh,
282
+ var(--_ctm-tab-dn-mp-wt-br-wh, var(--_ctm-dn-mp-wt-br-wh))
283
+ );
284
+
285
+ border-radius: var(
286
+ --_ctm-mob-dn-mp-wt-br-rs,
287
+ var(--_ctm-tab-dn-mp-wt-br-rs, var(--_ctm-dn-mp-wt-br-rs))
288
+ );
289
+
290
+ box-shadow: var(
291
+ --_show-shadow,
292
+ var(--_ctm-mob-dn-mp-wt-sw-ae, var(--_ctm-tab-dn-mp-wt-sw-ae, var(--_ctm-dn-mp-wt-sw-ae)))
293
+ var(--_ctm-mob-dn-mp-wt-sw-br, var(--_ctm-tab-dn-mp-wt-sw-br, var(--_ctm-dn-mp-wt-sw-br)))
294
+ var(--_ctm-mob-dn-mp-wt-sw-sd, var(--_ctm-tab-dn-mp-wt-sw-sd, var(--_ctm-dn-mp-wt-sw-sd)))
295
+ var(--_ctm-mob-dn-mp-wt-sw-cr, var(--_ctm-tab-dn-mp-wt-sw-cr, var(--_ctm-dn-mp-wt-sw-cr)))
296
+ );
297
+
298
+ .gallery-header {
299
+ text-align: var(
300
+ --_ctm-mob-dn-gy-lt-an,
301
+ var(--_ctm-tab-dn-gy-lt-an, var(--_ctm-dn-gy-lt-an))
302
+ );
303
+
304
+ // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg));
305
+ display: flex;
306
+ flex-direction: column;
307
+
308
+ gap: var(
309
+ --_ctm-mob-dn-mp-wt-tt-cr-lt-te-ad-dn-sg,
310
+ var(--_ctm-tab-dn-mp-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-mp-wt-tt-cr-lt-te-ad-dn-sg))
311
+ );
312
+ padding-block: var(
313
+ --_ctm-mob-dn-mp-wt-tt-cr-lt-tt-vl-pg,
314
+ var(--_ctm-tab-dn-mp-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-mp-wt-tt-cr-lt-tt-vl-pg))
315
+ );
316
+ padding-inline: var(
317
+ --_ctm-mob-dn-mp-wt-tt-cr-lt-tt-hl-pg,
318
+ var(--_ctm-tab-dn-mp-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-mp-wt-tt-cr-lt-tt-hl-pg))
319
+ );
320
+ background-color: var(
321
+ --_ctm-mob-dn-mp-wt-tt-cr-lt-tt-cr-bd-cr,
322
+ var(--_ctm-tab-dn-mp-wt-tt-cr-lt-tt-cr-bd-cr, var(--_ctm-dn-mp-wt-tt-cr-lt-tt-cr-bd-cr))
323
+ );
324
+
325
+ width: 100%;
326
+ border-color: var(
327
+ --_ctm-mob-dn-mp-wt-tt-cr-dn-br-cr,
328
+ var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-cr, var(--_ctm-dn-mp-wt-tt-cr-dn-br-cr))
329
+ );
330
+ border-style: var(
331
+ --_ctm-mob-dn-mp-wt-tt-cr-dn-br-se,
332
+ var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-se, var(--_ctm-dn-mp-wt-tt-cr-dn-br-se))
333
+ );
334
+ border-width: var(
335
+ --_ctm-mob-dn-mp-wt-tt-cr-dn-br-wh,
336
+ var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-wh, var(--_ctm-dn-mp-wt-tt-cr-dn-br-wh))
337
+ );
338
+ border-radius: var(
339
+ --_ctm-mob-dn-mp-wt-tt-cr-dn-br-rs,
340
+ var(--_ctm-tab-dn-mp-wt-tt-cr-dn-br-rs, var(--_ctm-dn-mp-wt-tt-cr-dn-br-rs))
341
+ );
342
+ box-shadow: var(
343
+ --_show-shadow,
344
+ var(
345
+ --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-ae,
346
+ var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-ae))
347
+ )
348
+ var(
349
+ --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-br,
350
+ var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-br, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-br))
351
+ )
352
+ var(
353
+ --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-sd,
354
+ var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-sd))
355
+ )
356
+ var(
357
+ --_ctm-mob-dn-mp-wt-tt-cr-dn-sw-cr,
358
+ var(--_ctm-tab-dn-mp-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-mp-wt-tt-cr-dn-sw-cr))
359
+ )
360
+ );
361
+
362
+ & h3 {
363
+ color: var(
364
+ --_ctm-mob-dn-mp-wt-cr,
365
+ var(--_ctm-tab-dn-mp-wt-cr, var(--_ctm-dn-mp-wt-cr, var(--_tst-dn-mp-wt-cr)))
366
+ );
367
+ font-family: var(
368
+ --_ctm-mob-dn-mp-wt-ft-fy,
369
+ var(--_ctm-tab-dn-mp-wt-ft-fy, var(--_ctm-dn-mp-wt-ft-fy, var(--_tst-dn-mp-wt-ft-fy)))
370
+ );
371
+ font-size: var(
372
+ --_ctm-mob-dn-mp-wt-ft-se,
373
+ var(--_ctm-tab-dn-mp-wt-ft-se, var(--_ctm-dn-mp-wt-ft-se, var(--_tst-dn-mp-wt-ft-se)))
374
+ );
375
+ font-weight: var(
376
+ --_ctm-mob-dn-mp-wt-ft-wt,
377
+ var(--_ctm-tab-dn-mp-wt-ft-wt, var(--_ctm-dn-mp-wt-ft-wt, var(--_tst-dn-mp-wt-ft-wt)))
378
+ );
379
+ font-style: var(
380
+ --_ctm-mob-dn-mp-wt-ft-se-ic,
381
+ var(
382
+ --_ctm-tab-dn-mp-wt-ft-se-ic,
383
+ var(--_ctm-dn-mp-wt-ft-se-ic, var(--_tst-dn-mp-wt-ft-se-ic))
384
+ )
385
+ );
386
+ text-align: var(
387
+ --_ctm-mob-dn-mp-wt-tt-an,
388
+ var(--_ctm-tab-dn-mp-wt-tt-an, var(--_ctm-dn-mp-wt-tt-an, var(--_tst-dn-mp-wt-tt-an)))
389
+ );
390
+ letter-spacing: var(
391
+ --_ctm-mob-dn-mp-wt-lr-sg,
392
+ var(--_ctm-tab-dn-mp-wt-lr-sg, var(--_ctm-dn-mp-wt-lr-sg, var(--_tst-dn-mp-wt-lr-sg)))
393
+ );
394
+ line-height: var(
395
+ --_ctm-mob-dn-mp-wt-le-ht,
396
+ var(--_ctm-tab-dn-mp-wt-le-ht, var(--_ctm-dn-mp-wt-le-ht, var(--_tst-dn-mp-wt-le-ht)))
397
+ );
398
+ text-decoration: var(
399
+ --_ctm-mob-dn-mp-wt-ue,
400
+ var(--_ctm-tab-dn-mp-wt-ue, var(--_ctm-dn-mp-wt-ue, var(--_tst-dn-mp-wt-ue)))
401
+ );
402
+ }
403
+
404
+ & p {
405
+ color: var(
406
+ --_ctm-mob-dn-mp-wt-cr-dc,
407
+ var(--_ctm-tab-dn-mp-wt-cr-dc, var(--_ctm-dn-mp-wt-cr-dc, var(--_tst-dn-mp-wt-cr-dc)))
408
+ );
409
+ font-family: var(
410
+ --_ctm-mob-dn-mp-wt-ft-fy-dc,
411
+ var(
412
+ --_ctm-tab-dn-mp-wt-ft-fy-dc,
413
+ var(--_ctm-dn-mp-wt-ft-fy-dc, var(--_tst-dn-mp-wt-ft-fy-dc))
414
+ )
415
+ );
416
+ font-size: var(
417
+ --_ctm-mob-dn-mp-wt-ft-se-dc,
418
+ var(
419
+ --_ctm-tab-dn-mp-wt-ft-se-dc,
420
+ var(--_ctm-dn-mp-wt-ft-se-dc, var(--_tst-dn-mp-wt-ft-se-dc))
421
+ )
422
+ );
423
+ font-weight: var(
424
+ --_ctm-mob-dn-mp-wt-ft-wt-dc,
425
+ var(
426
+ --_ctm-tab-dn-mp-wt-ft-wt-dc,
427
+ var(--_ctm-dn-mp-wt-ft-wt-dc, var(--_tst-dn-mp-wt-ft-wt-dc))
428
+ )
429
+ );
430
+ font-style: var(
431
+ --_ctm-mob-dn-mp-wt-ft-se-ic-dc,
432
+ var(
433
+ --_ctm-tab-dn-mp-wt-ft-se-ic-dc,
434
+ var(--_ctm-dn-mp-wt-ft-se-ic-dc, var(--_tst-dn-mp-wt-ft-se-ic-dc))
435
+ )
436
+ );
437
+ text-align: var(
438
+ --_ctm-mob-dn-mp-wt-tt-an-dc,
439
+ var(
440
+ --_ctm-tab-dn-mp-wt-tt-an-dc,
441
+ var(--_ctm-dn-mp-wt-tt-an-dc, var(--_tst-dn-mp-wt-tt-an-dc))
442
+ )
443
+ );
444
+ letter-spacing: var(
445
+ --_ctm-mob-dn-mp-wt-lr-sg-dc,
446
+ var(
447
+ --_ctm-tab-dn-mp-wt-lr-sg-dc,
448
+ var(--_ctm-dn-mp-wt-lr-sg-dc, var(--_tst-dn-mp-wt-lr-sg-dc))
449
+ )
450
+ );
451
+ line-height: var(
452
+ --_ctm-mob-dn-mp-wt-le-ht-dc,
453
+ var(
454
+ --_ctm-tab-dn-mp-wt-le-ht-dc,
455
+ var(--_ctm-dn-mp-wt-le-ht-dc, var(--_tst-dn-mp-wt-le-ht-dc))
456
+ )
457
+ );
458
+ text-decoration: var(
459
+ --_ctm-mob-dn-mp-wt-ue-dc,
460
+ var(--_ctm-tab-dn-mp-wt-ue-dc, var(--_ctm-dn-mp-wt-ue-dc, var(--_tst-dn-mp-wt-ue-dc)))
461
+ );
462
+ }
463
+
464
+ // h3 {
465
+ // margin-bottom: var(--_mb-4);
466
+ // }
467
+ }
468
+
469
+ .img__overlay {
470
+ background: var(
471
+ --_ctm-mob-dn-ie-se-oy-cr,
472
+ var(--_ctm-tab-dn-ie-se-oy-cr, var(--_ctm-dn-ie-se-oy-cr, var(--_tst-dn-ie-se-oy-cr)))
473
+ );
474
+
475
+ height: 100%;
476
+ width: 100%;
477
+ position: absolute;
478
+ top: 0;
479
+ }
480
+ @keyframes scaleInOut {
481
+ 0% {
482
+ transform: scale(1);
483
+ }
484
+ 50% {
485
+ transform: scale(1.5);
486
+ }
487
+ 100% {
488
+ transform: scale(1);
489
+ }
490
+ }
491
+ .hotspot__container {
492
+ position: absolute;
493
+ top: 43%;
494
+ left: 12%;
495
+ .hotspot__main {
496
+ position: relative;
497
+ .hotspot {
498
+ background: var(--_ctm-dn-ht-se-bd-cr);
499
+ // height: var(--_ctm-dn-tp-tt-dn-ft-se);
500
+ // width: var(--_ctm-dn-tp-tt-dn-ft-se);
501
+ position: absolute;
502
+ cursor: pointer;
503
+ width: var(--_ctm-dn-ht-se-ht-se);
504
+ height: var(--_ctm-dn-ht-se-ht-se);
505
+ background-color: var(--_ctm-dn-ht-se-bd-cr);
506
+ display: flex;
507
+ align-items: center;
508
+ top: 50%;
509
+ left: 50%;
510
+ transform: translate(-50%, -50%);
511
+ box-sizing: border-box;
512
+ justify-content: center;
513
+ animation: scaleInOut var(--_ctm-dn-ht-se-an-fy) infinite;
514
+ &[data-hotspot-shape="circle"] {
515
+ border-radius: 50%;
516
+ }
517
+ &[data-hotspot-shape="any"] {
518
+ border-radius: var(--_ctm-dn-ht-se-br-rs);
519
+ }
520
+
521
+ svg {
522
+ width: prepareMediaVariable(--_ctm-dn-pn-se-in-se);
523
+ height: prepareMediaVariable(--_ctm-dn-pn-se-in-se);
524
+
525
+ path[fill] {
526
+ fill: prepareMediaVariable(--_ctm-dn-pn-se-in-c1);
527
+ }
528
+ path[stroke] {
529
+ stroke: prepareMediaVariable(--_ctm-dn-pn-se-in-c1);
530
+ }
531
+ }
532
+ }
533
+ }
534
+ }
535
+ .hotspot__tooltip {
536
+ --_sf-br-vl: var(--_ctm-dn-tp-dn-br-rs, 0px);
537
+ position: absolute;
538
+ background: var(--_ctm-dn-tp-dn-bd-cr);
539
+ z-index: 1000;
540
+ min-width: 100px;
541
+ width: var(--_ctm-dn-tp-dn-tp-wh);
542
+ min-height: 100px;
543
+ height: var(--_ctm-dn-tp-dn-tp-ht);
544
+ top: 43%;
545
+ left: 12%;
546
+ overflow-y: auto;
547
+ // top: var(--_sf-im-psn-tp, 0);
548
+ // left: var(--_sf-im-psn-lt, 0);
549
+
550
+ padding: 4px 8px;
551
+ display: flex;
552
+ justify-content: var(--_ctm-dn-tp-dn-hl-at);
553
+ align-items: var(--_ctm-dn-tp-dn-vl-at);
554
+
555
+ &::after {
556
+ content: "";
557
+ position: absolute;
558
+
559
+ border-width: 5px;
560
+ border-style: solid;
561
+ }
562
+ .text_box {
563
+ overflow-y: auto;
564
+ h6 {
565
+ font-size: var(--_ctm-dn-tp-tt-dn-ft-se);
566
+ font-family: var(--_ctm-dn-tp-tt-dn-ft-fy);
567
+ color: var(--_ctm-dn-tp-tt-dn-cr);
568
+
569
+ font-weight: var(--_ctm-dn-tp-tt-dn-ft-wt);
570
+ font-style: var(--_ctm-dn-tp-tt-dn-ft-se-ic);
571
+ text-align: var(--_ctm-dn-tp-tt-dn-tt-an);
572
+ letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg);
573
+ line-height: var(--_ctm-dn-tp-tt-dn-le-ht);
574
+ text-decoration: var(--_ctm-dn-tp-tt-dn-ue);
575
+ }
576
+ p {
577
+ font-size: var(--_ctm-dn-tp-tt-dn-ft-se-dc);
578
+ color: var(--_ctm-dn-tp-tt-dn-cr-dc);
579
+ font-family: var(--_ctm-dn-tp-tt-dn-ft-fy-dc);
580
+ font-weight: var(--_ctm-dn-tp-tt-dn-ft-wt-dc);
581
+ font-style: var(--_ctm-dn-tp-tt-dn-ft-se-ic-dc);
582
+ text-align: var(--_ctm-dn-tp-tt-dn-tt-an-dc);
583
+ letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg-dc);
584
+ line-height: var(--_ctm-dn-tp-tt-dn-le-ht-dc);
585
+ text-decoration: var(--_ctm-dn-tp-tt-dn-lh-dc, var(--_ctm-dn-tp-tt-dn-ue-dc));
586
+ }
587
+ }
588
+ .tooltip__image {
589
+ width: 100%;
590
+ background-color: var(--_ctm-dn-tp-ie-dn-bd-cr);
591
+ transition: transform 0.3s ease-in-out;
592
+ display: flex;
593
+ justify-content: var(--_ctm-dn-tp-ie-dn-hl-at);
594
+ align-items: var(--_ctm-dn-tp-ie-dn-vl-at);
595
+ img {
596
+ object-fit: var(--_ctm-dn-tp-ie-dn-ft-os);
597
+ height: -webkit-fill-available;
598
+ max-width: 100%;
599
+ rotate: calc(var(--_ctm-dn-tp-ie-dn-ud) * 1deg);
600
+ scale: var(--_ctm-dn-tp-ie-dn-zm-ie);
601
+
602
+ &:hover {
603
+ &[data-on-img-hover="Zoom In"] {
604
+ transform: scale(1.08);
605
+ }
606
+ &[data-on-img-hover="Zoom Out"] {
607
+ transform: scale(0.92);
608
+ }
609
+ }
610
+ }
611
+ }
612
+ }
613
+ // .hotspot__main {
614
+ // position: relative;
615
+ // .hotspot {
616
+ // background: var(
617
+ // --_ctm-mob-dn-pn-se-bd-cr,
618
+ // var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr))
619
+ // );
620
+ // border-style: var(
621
+ // --_ctm-mob-dn-pn-se-br-se,
622
+ // var(--_ctm-tab-dn-pn-se-br-se, var(--_ctm-dn-pn-se-br-se))
623
+ // );
624
+ // border-color: var(
625
+ // --_ctm-mob-dn-pn-se-br-cr,
626
+ // var(--_ctm-tab-dn-pn-se-br-cr, var(--_ctm-dn-pn-se-br-cr))
627
+ // );
628
+ // border-width: var(
629
+ // --_ctm-mob-dn-pn-se-br-wh,
630
+ // var(--_ctm-tab-dn-pn-se-br-wh, var(--_ctm-dn-pn-se-br-wh))
631
+ // );
632
+ // border-radius: var(
633
+ // --_ctm-mob-dn-pn-se-br-rs,
634
+ // var(--_ctm-tab-dn-pn-se-br-rs, var(--_ctm-dn-pn-se-br-rs))
635
+ // );
636
+ // box-shadow: var(
637
+ // --_show-shadow,
638
+ // var(
639
+ // --_ctm-mob-dn-pn-se-sw-ae,
640
+ // var(--_ctm-tab-dn-pn-se-sw-ae, var(--_ctm-dn-pn-se-sw-ae))
641
+ // )
642
+ // var(
643
+ // --_ctm-mob-dn-pn-se-sw-br,
644
+ // var(--_ctm-tab-dn-pn-se-sw-br, var(--_ctm-dn-pn-se-sw-br))
645
+ // )
646
+ // var(
647
+ // --_ctm-mob-dn-pn-se-sw-sd,
648
+ // var(--_ctm-tab-dn-pn-se-sw-sd, var(--_ctm-dn-pn-se-sw-sd))
649
+ // )
650
+ // var(
651
+ // --_ctm-mob-dn-pn-se-sw-cr,
652
+ // var(--_ctm-tab-dn-pn-se-sw-cr, var(--_ctm-dn-pn-se-sw-cr))
653
+ // )
654
+ // );
655
+
656
+ // position: absolute;
657
+ // cursor: pointer;
658
+ // width: var(
659
+ // --_ctm-mob-dn-pn-se-ht-se,
660
+ // var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
661
+ // );
662
+ // height: var(
663
+ // --_ctm-mob-dn-pn-se-ht-se,
664
+ // var(--_ctm-tab-dn-pn-se-ht-se, var(--_ctm-dn-pn-se-ht-se))
665
+ // );
666
+ // background-color: var(
667
+ // --_ctm-mob-dn-pn-se-bd-cr,
668
+ // var(--_ctm-tab-dn-pn-se-bd-cr, var(--_ctm-dn-pn-se-bd-cr))
669
+ // );
670
+
671
+ // display: flex;
672
+ // align-items: center;
673
+ // top: 50%;
674
+ // left: 50%;
675
+ // transform: translate(-50%, -50%);
676
+ // justify-content: center;
677
+ // animation: scaleInOut
678
+ // var(
679
+ // --_ctm-mob-dn-pn-se-an-fy,
680
+ // var(--_ctm-tab-dn-pn-se-an-fy, var(--_ctm-dn-pn-se-an-fy))
681
+ // )
682
+ // infinite;
683
+
684
+ // .icon {
685
+ // display: var(--_sf-show-icon-ff, flex);
686
+
687
+ // svg {
688
+ // width: var(
689
+ // --_ctm-mob-dn-pn-se-in-se,
690
+ // var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
691
+ // );
692
+ // height: var(
693
+ // --_ctm-mob-dn-pn-se-in-se,
694
+ // var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
695
+ // );
696
+
697
+ // path {
698
+ // stroke: var(
699
+ // --_ctm-mob-dn-pn-se-in-c1,
700
+ // var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
701
+ // );
702
+ // fill: var(
703
+ // --_ctm-mob-dn-pn-se-in-c1,
704
+ // var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
705
+ // );
706
+ // }
707
+ // }
708
+ // }
709
+ // }
710
+ // .hotspot__tooltip {
711
+ // position: absolute;
712
+ // background: var(
713
+ // --_ctm-mob-dn-tp-dn-bd-cr,
714
+ // var(--_ctm-tab-dn-tp-dn-bd-cr, var(--_ctm-dn-tp-dn-bd-cr))
715
+ // );
716
+ // border-style: var(
717
+ // --_ctm-mob-dn-tp-dn-br-se,
718
+ // var(--_ctm-tab-dn-tp-dn-br-se, var(--_ctm-dn-tp-dn-br-se))
719
+ // );
720
+ // border-color: var(
721
+ // --_ctm-mob-dn-tp-dn-br-cr,
722
+ // var(--_ctm-tab-dn-tp-dn-br-cr, var(--_ctm-dn-tp-dn-br-cr))
723
+ // );
724
+ // border-width: var(
725
+ // --_ctm-mob-dn-tp-dn-br-wh,
726
+ // var(--_ctm-tab-dn-tp-dn-br-wh, var(--_ctm-dn-tp-dn-br-wh))
727
+ // );
728
+ // border-radius: var(
729
+ // --_ctm-mob-dn-tp-dn-br-rs,
730
+ // var(--_ctm-tab-dn-tp-dn-br-rs, var(--_ctm-dn-tp-dn-br-rs))
731
+ // );
732
+
733
+ // box-shadow: var(
734
+ // --_show-shadow,
735
+ // var(
736
+ // --_ctm-mob-dn-tp-dn-sw-ae,
737
+ // var(--_ctm-tab-dn-tp-dn-sw-ae, var(--_ctm-dn-tp-dn-sw-ae))
738
+ // )
739
+ // var(
740
+ // --_ctm-mob-dn-tp-dn-sw-br,
741
+ // var(--_ctm-tab-dn-tp-dn-sw-br, var(--_ctm-dn-tp-dn-sw-br))
742
+ // )
743
+ // var(
744
+ // --_ctm-mob-dn-tp-dn-sw-sd,
745
+ // var(--_ctm-tab-dn-tp-dn-sw-sd, var(--_ctm-dn-tp-dn-sw-sd))
746
+ // )
747
+ // var(
748
+ // --_ctm-mob-dn-tp-dn-sw-cr,
749
+ // var(--_ctm-tab-dn-tp-dn-sw-cr, var(--_ctm-dn-tp-dn-sw-cr))
750
+ // )
751
+ // );
752
+
753
+ // z-index: 1000;
754
+ // min-width: 100px;
755
+ // width: var(
756
+ // --_ctm-mob-dn-tp-dn-tp-wh,
757
+ // var(--_ctm-tab-dn-tp-dn-tp-wh, var(--_ctm-dn-tp-dn-tp-wh))
758
+ // );
759
+ // min-height: 100px;
760
+ // height: var(
761
+ // --_ctm-mob-dn-tp-dn-tp-ht,
762
+ // var(--_ctm-tab-dn-tp-dn-tp-ht, var(--_ctm-dn-tp-dn-tp-ht))
763
+ // );
764
+
765
+ // // border-radius: 4px;
766
+ // // transform: translate(-10%, -130%);
767
+ // left: -10px;
768
+ // bottom: 7px;
769
+ // padding: 4px 8px;
770
+ // display: flex;
771
+ // justify-content: var(
772
+ // --_ctm-mob-dn-tp-dn-hl-at,
773
+ // var(--_ctm-tab-dn-tp-dn-hl-at, var(--_ctm-dn-tp-dn-hl-at))
774
+ // );
775
+ // align-items: var(
776
+ // --_ctm-mob-dn-tp-dn-vl-at,
777
+ // var(--_ctm-tab-dn-tp-dn-vl-at, var(--_ctm-dn-tp-dn-vl-at))
778
+ // );
779
+
780
+ // &::after {
781
+ // content: "";
782
+ // position: absolute;
783
+ // top: 100%;
784
+ // left: 20px;
785
+ // margin-left: -5px;
786
+ // border-width: 5px;
787
+ // border-style: solid;
788
+ // border-color: var(
789
+ // --_ctm-mob-dn-tp-dn-bd-cr,
790
+ // var(--_ctm-tab-dn-tp-dn-bd-cr, var(--_ctm-dn-tp-dn-bd-cr))
791
+ // )
792
+ // transparent transparent transparent;
793
+ // }
794
+ // span {
795
+ // svg {
796
+ // width: var(
797
+ // --_ctm-mob-dn-pn-se-in-se,
798
+ // var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
799
+ // );
800
+ // height: var(
801
+ // --_ctm-mob-dn-pn-se-in-se,
802
+ // var(--_ctm-tab-dn-pn-se-in-se, var(--_ctm-dn-pn-se-in-se))
803
+ // );
804
+ // path {
805
+ // stroke: var(
806
+ // --_ctm-mob-dn-pn-se-in-c1,
807
+ // var(--_ctm-tab-dn-pn-se-in-c1, var(--_ctm-dn-pn-se-in-c1))
808
+ // );
809
+ // }
810
+ // }
811
+ // }
812
+
813
+ // .text_box {
814
+ // h6 {
815
+ // font-size: var(
816
+ // --_ctm-mob-dn-tp-tt-dn-ft-se,
817
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-se, var(--_ctm-dn-tp-tt-dn-ft-se))
818
+ // );
819
+ // font-family: var(
820
+ // --_ctm-mob-dn-tp-tt-dn-ft-fy,
821
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-fy, var(--_ctm-dn-tp-tt-dn-ft-fy))
822
+ // );
823
+ // color: var(
824
+ // --_ctm-mob-dn-tp-tt-dn-cr,
825
+ // var(--_ctm-tab-dn-tp-tt-dn-cr, var(--_ctm-dn-tp-tt-dn-cr))
826
+ // );
827
+
828
+ // font-weight: var(
829
+ // --_ctm-mob-dn-tp-tt-dn-ft-wt,
830
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-wt, var(--_ctm-dn-tp-tt-dn-ft-wt))
831
+ // );
832
+ // font-style: var(
833
+ // --_ctm-mob-dn-tp-tt-dn-ft-se-ic,
834
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-se-ic, var(--_ctm-dn-tp-tt-dn-ft-se-ic))
835
+ // );
836
+ // text-align: var(
837
+ // --_ctm-mob-dn-tp-tt-dn-tt-an,
838
+ // var(--_ctm-tab-dn-tp-tt-dn-tt-an, var(--_ctm-dn-tp-tt-dn-tt-an))
839
+ // );
840
+ // letter-spacing: var(
841
+ // --_ctm-mob-dn-tp-tt-dn-lr-sg,
842
+ // var(--_ctm-tab-dn-tp-tt-dn-lr-sg, var(--_ctm-dn-tp-tt-dn-lr-sg))
843
+ // );
844
+ // line-height: var(
845
+ // --_ctm-mob-dn-tp-tt-dn-le-ht,
846
+ // var(--_ctm-tab-dn-tp-tt-dn-le-ht, var(--_ctm-dn-tp-tt-dn-le-ht))
847
+ // );
848
+ // text-decoration: var(
849
+ // --_ctm-mob-dn-tp-tt-dn-ue,
850
+ // var(--_ctm-tab-dn-tp-tt-dn-ue, var(--_ctm-dn-tp-tt-dn-ue))
851
+ // );
852
+ // }
853
+
854
+ // p {
855
+ // font-size: var(
856
+ // --_ctm-mob-dn-tp-tt-dn-ft-se-dc,
857
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-se-dc, var(--_ctm-dn-tp-tt-dn-ft-se-dc))
858
+ // );
859
+ // color: var(
860
+ // --_ctm-mob-dn-tp-tt-dn-cr-dc,
861
+ // var(--_ctm-tab-dn-tp-tt-dn-cr-dc, var(--_ctm-dn-tp-tt-dn-cr-dc))
862
+ // );
863
+ // font-family: var(
864
+ // --_ctm-mob-dn-tp-tt-dn-ft-fy-dc,
865
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-fy-dc, var(--_ctm-dn-tp-tt-dn-ft-fy-dc))
866
+ // );
867
+ // font-weight: var(
868
+ // --_ctm-mob-dn-tp-tt-dn-ft-wt-dc,
869
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-wt-dc, var(--_ctm-dn-tp-tt-dn-ft-wt-dc))
870
+ // );
871
+ // font-style: var(
872
+ // --_ctm-mob-dn-tp-tt-dn-ft-se-ic-dc,
873
+ // var(--_ctm-tab-dn-tp-tt-dn-ft-se-ic-dc, var(--_ctm-dn-tp-tt-dn-ft-se-ic-dc))
874
+ // );
875
+ // text-align: var(
876
+ // --_ctm-mob-dn-tp-tt-dn-tt-an-dc,
877
+ // var(--_ctm-tab-dn-tp-tt-dn-tt-an-dc, var(--_ctm-dn-tp-tt-dn-tt-an-dc))
878
+ // );
879
+ // letter-spacing: var(
880
+ // --_ctm-mob-dn-tp-tt-dn-lr-sg-dc,
881
+ // var(--_ctm-tab-dn-tp-tt-dn-lr-sg-dc, var(--_ctm-dn-tp-tt-dn-lr-sg-dc))
882
+ // );
883
+ // line-height: var(
884
+ // --_ctm-mob-dn-tp-tt-dn-le-ht-dc,
885
+ // var(--_ctm-tab-dn-tp-tt-dn-le-ht-dc, var(--_ctm-dn-tp-tt-dn-le-ht-dc))
886
+ // );
887
+ // text-decoration: var(
888
+ // --_ctm-mob-dn-tp-tt-dn-ue-dc,
889
+ // var(--_ctm-tab-dn-tp-tt-dn-ue-dc, var(--_ctm-dn-tp-tt-dn-ue-dc))
890
+ // );
891
+ // }
892
+ // }
893
+ // .tooltip__image {
894
+ // background-color: var(
895
+ // --_ctm-mob-dn-tp-ie-dn-bd-cr,
896
+ // var(--_ctm-tab-dn-tp-ie-dn-bd-cr, var(--_ctm-dn-tp-ie-dn-bd-cr))
897
+ // );
898
+ // transition: transform 0.3s ease-in-out;
899
+ // border-style: var(
900
+ // --_ctm-mob-dn-tp-ie-dn-br-se,
901
+ // var(--_ctm-tab-dn-tp-ie-dn-br-se, var(--_ctm-dn-tp-ie-dn-br-se))
902
+ // );
903
+ // border-color: var(
904
+ // --_ctm-mob-dn-tp-ie-dn-br-cr,
905
+ // var(--_ctm-tab-dn-tp-ie-dn-br-cr, var(--_ctm-dn-tp-ie-dn-br-cr))
906
+ // );
907
+ // border-width: var(
908
+ // --_ctm-mob-dn-tp-ie-dn-br-wh,
909
+ // var(--_ctm-tab-dn-tp-ie-dn-br-wh, var(--_ctm-dn-tp-ie-dn-br-wh))
910
+ // );
911
+ // border-radius: var(
912
+ // --_ctm-mob-dn-tp-ie-dn-br-rs,
913
+ // var(--_ctm-tab-dn-tp-ie-dn-br-rs, var(--_ctm-dn-tp-ie-dn-br-rs))
914
+ // );
915
+ // box-shadow: var(
916
+ // --_show-shadow,
917
+ // var(
918
+ // --_ctm-mob-dn-tp-ie-dn-sw-ae,
919
+ // var(--_ctm-tab-dn-tp-ie-dn-sw-ae, var(--_ctm-dn-tp-ie-dn-sw-ae))
920
+ // )
921
+ // var(
922
+ // --_ctm-mob-dn-tp-ie-dn-sw-br,
923
+ // var(--_ctm-tab-dn-tp-ie-dn-sw-br, var(--_ctm-dn-tp-ie-dn-sw-br))
924
+ // )
925
+ // var(
926
+ // --_ctm-mob-dn-tp-ie-dn-sw-sd,
927
+ // var(--_ctm-tab-dn-tp-ie-dn-sw-sd, var(--_ctm-dn-tp-ie-dn-sw-sd))
928
+ // )
929
+ // var(
930
+ // --_ctm-mob-dn-tp-ie-dn-sw-cr,
931
+ // var(--_ctm-tab-dn-tp-ie-dn-sw-cr, var(--_ctm-dn-tp-ie-dn-sw-cr))
932
+ // )
933
+ // );
934
+ // display: flex;
935
+ // justify-content: var(
936
+ // --_ctm-mob-dn-tp-ie-dn-hl-at,
937
+ // var(--_ctm-tab-dn-tp-ie-dn-hl-at, var(--_ctm-dn-tp-ie-dn-hl-at))
938
+ // );
939
+ // align-items: var(
940
+ // --_ctm-mob-dn-tp-ie-dn-vl-at,
941
+ // var(--_ctm-tab-dn-tp-ie-dn-vl-at, var(--_ctm-dn-tp-ie-dn-vl-at))
942
+ // );
943
+
944
+ // img {
945
+ // object-fit: var(
946
+ // --_ctm-mob-dn-tp-ie-dn-ft-os,
947
+ // var(--_ctm-tab-dn-tp-ie-dn-ft-os, var(--_ctm-dn-tp-ie-dn-ft-os))
948
+ // );
949
+ // max-width: 100%;
950
+ // rotate: calc(
951
+ // var(
952
+ // --_ctm-mob-dn-tp-ie-dn-ud,
953
+ // var(--_ctm-tab-dn-tp-ie-dn-ud, var(--_ctm-dn-tp-ie-dn-ud))
954
+ // ) *
955
+ // 1deg
956
+ // );
957
+ // scale: var(
958
+ // --_ctm-mob-dn-tp-ie-dn-zm-ie,
959
+ // var(--_ctm-tab-dn-tp-ie-dn-zm-ie, var(--_ctm-dn-tp-ie-dn-zm-ie))
960
+ // );
961
+ // }
962
+ // }
963
+ // }
964
+ // }
965
+
966
+ .map {
967
+ width: 100%;
968
+ height: 100%;
969
+ img {
970
+ width: 100%;
971
+ height: 100%;
972
+ }
973
+ }
974
+ }
975
+ }
976
+ }