@sc-360-v2/storefront-cms-library 0.5.15 → 0.5.17

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.
@@ -0,0 +1,2226 @@
1
+ @use "./functions.scss" as *;
2
+
3
+ // Verbatim copy of the ProductImage gallery styling (styles/elements/product-image.scss),
4
+ // rebound to the Category Groups productImage layout/design CSS-variable paths.
5
+ // ONLY the variable paths + the element-width calc differ from product-image.scss.
6
+ // @imported inside category-groups-element.scss within the categoryGroups scope.
7
+ // (The body-level .pim__main magnifier is global and already loaded by widget.scss.)
8
+
9
+ [data-element-type="productImage"] {
10
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
11
+ // width: 100%;
12
+ width: var(
13
+ --_sf-el-wh-st-mx,
14
+ calc(1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl))))
15
+ );
16
+ // height: var(--_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-ht, var(--_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-ht, var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-ht)));
17
+ margin: var(
18
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-mn,
19
+ var(
20
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-mn,
21
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-mn)
22
+ )
23
+ );
24
+
25
+ // aspect-ratio
26
+ --_aspect-ratio: calc(
27
+ 1 *
28
+ (
29
+ var(
30
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-ht,
31
+ var(
32
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-ht,
33
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-ht)
34
+ )
35
+ ) /
36
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-wh, var(--_tst-lt-wh))
37
+ )
38
+ );
39
+
40
+ &:not(:has([data-display-style="Grid"][data-scroll-direction="Vertical"])) {
41
+ height: var(
42
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-ht,
43
+ var(
44
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-ht,
45
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-ht)
46
+ )
47
+ );
48
+ }
49
+
50
+ // &[data-view-state="full"] {
51
+ // width: auto;
52
+ // // height: 100%;
53
+ // margin: 0;
54
+ // justify-self: stretch !important;
55
+ // align-self: stretch !important;
56
+ // cursor: auto;
57
+ // }
58
+
59
+ // &[data-view-state="full"] {
60
+ // aspect-ratio: 1/0.01;
61
+ // & > .wrapper {
62
+ // & > div {
63
+ // height: 100%;
64
+ // }
65
+ // }
66
+ // img {
67
+ // height: 100%;
68
+ // object-fit: cover;
69
+ // }
70
+ // }
71
+
72
+ & > .wrapper {
73
+ width: 100%;
74
+ height: 100%;
75
+ &:has(.text-element) {
76
+ display: flex;
77
+ align-items: start;
78
+ justify-content: center;
79
+ }
80
+
81
+ * {
82
+ user-select: none;
83
+ // width: 100%;
84
+ }
85
+ .product__img__wrapper {
86
+ width: 100%;
87
+ height: 100%;
88
+ &:has(.image__fallback__contain) {
89
+ display: flex;
90
+ justify-content: center;
91
+ align-items: center;
92
+ }
93
+ .image__fallback__contain {
94
+ object-fit: contain !important;
95
+ }
96
+ }
97
+ }
98
+ &[data-show-shadow="false"] {
99
+ --_show-shadow: none;
100
+ }
101
+ .product_image {
102
+ height: 100%;
103
+ object-fit: contain;
104
+ }
105
+
106
+ .main-image {
107
+ position: relative;
108
+ flex: 1;
109
+ border: 1px solid #e5e7eb;
110
+ border-radius: 8px;
111
+ overflow: hidden;
112
+ background: white;
113
+ // cursor: zoom-in;
114
+
115
+ img {
116
+ width: 100%;
117
+ height: auto;
118
+ object-fit: contain;
119
+ display: block;
120
+ }
121
+
122
+ // .lens-overlay {
123
+ // position: absolute;
124
+ // width: 100px;
125
+ // height: 100px;
126
+ // pointer-events: none;
127
+ // border-radius: 50%;
128
+ // border: 1px solid rgba(0, 0, 0, 0.2);
129
+ // box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
130
+ // background-repeat: no-repeat;
131
+ // backdrop-filter: brightness(1.1);
132
+ // z-index: 5;
133
+ // }
134
+
135
+ .lens-overlay {
136
+ position: absolute;
137
+ pointer-events: none;
138
+ border: 1px solid rgba(0, 0, 0, 0.3);
139
+ z-index: 10;
140
+ background-color: rgba(255, 255, 255, 0.3);
141
+ pointer-events: none;
142
+ z-index: 10;
143
+ }
144
+ }
145
+
146
+ // .magnifier-box {
147
+ // position: absolute;
148
+ // top: 0;
149
+ // right: -102%;
150
+ // z-index: 10;
151
+ // // width: 70vw;
152
+ // // height: 95vh;
153
+ // width: 600px;
154
+ // height: 600px;
155
+ // background: white;
156
+ // border: 1px solid #ccc;
157
+ // box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
158
+
159
+ // .magnifier {
160
+ // width: 100%;
161
+ // height: 100%;
162
+ // background-repeat: no-repeat;
163
+ // background-position: center;
164
+ // border-radius: 4px;
165
+ // }
166
+
167
+ // .magnifier-placeholder {
168
+ // text-align: center;
169
+ // padding: 1rem;
170
+ // }
171
+ // }
172
+
173
+ .magnifier-box {
174
+ position: absolute;
175
+ right: -70%;
176
+ top: 0;
177
+ overflow: hidden;
178
+ border: 1px solid #ccc;
179
+ background: #fff;
180
+ z-index: 9;
181
+ img {
182
+ position: absolute;
183
+ will-change: transform;
184
+ }
185
+ }
186
+
187
+ a:has(> img.text-element) {
188
+ max-height: 100%;
189
+ }
190
+
191
+ .text-element {
192
+ // background: #6d96e4;
193
+ // padding: 10px;
194
+ // font-weight: 600;
195
+ // color: rgba(75, 69, 70, 1);
196
+ max-width: 100%;
197
+ max-height: 100%;
198
+ // object-fit: contain;
199
+ }
200
+ .gallery-slider-element {
201
+ --text-high-contrast-rgb-value: 49, 49, 49;
202
+ --detail-medium-contrast: rgb(234, 234, 234);
203
+ --text-body: rgb(54, 49, 61);
204
+ overflow: hidden;
205
+
206
+ position: relative;
207
+ background-color: var(
208
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-bd-cr,
209
+ var(
210
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-bd-cr,
211
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-bd-cr, var(--_tst-dn-gy-wt-se-bd-cr))
212
+ )
213
+ );
214
+
215
+ padding: var(
216
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-pg,
217
+ var(
218
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-pg,
219
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-pg)
220
+ )
221
+ );
222
+
223
+ display: flex;
224
+ flex-direction: column;
225
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
226
+
227
+ gap: var(
228
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-lt-gy-tt-ad-im-sg,
229
+ var(
230
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-lt-gy-tt-ad-im-sg,
231
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-lt-gy-tt-ad-im-sg)
232
+ )
233
+ );
234
+
235
+ width: 100%;
236
+ height: 100%;
237
+ border-color: var(
238
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-cr,
239
+ var(
240
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-cr,
241
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-cr)
242
+ )
243
+ );
244
+
245
+ border-style: var(
246
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-se,
247
+ var(
248
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-se,
249
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-se)
250
+ )
251
+ );
252
+
253
+ border-width: var(
254
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-wh,
255
+ var(
256
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-wh,
257
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-wh)
258
+ )
259
+ );
260
+
261
+ border-radius: var(
262
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-rs,
263
+ var(
264
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-rs,
265
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-br-rs)
266
+ )
267
+ );
268
+
269
+ box-shadow: var(
270
+ --_show-shadow,
271
+ var(
272
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-sw-ae,
273
+ var(
274
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-sw-ae,
275
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-sw-ae)
276
+ )
277
+ )
278
+ var(
279
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-sw-br,
280
+ var(
281
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-sw-br,
282
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-sw-br)
283
+ )
284
+ )
285
+ var(
286
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-sw-sd,
287
+ var(
288
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-sw-sd,
289
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-sw-sd)
290
+ )
291
+ )
292
+ var(
293
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-sw-cr,
294
+ var(
295
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-sw-cr,
296
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-sw-cr)
297
+ )
298
+ )
299
+ );
300
+
301
+ .gallery-header {
302
+ // text-align: var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-lt-an, var(--_tst-dn-gy-lt-an));
303
+ // line-height: var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-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-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-lt-te-ad-dn-sg,
309
+ var(
310
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-lt-te-ad-dn-sg,
311
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-lt-te-ad-dn-sg)
312
+ )
313
+ );
314
+
315
+ padding-block: var(
316
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-lt-tt-vl-pg,
317
+ var(
318
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-lt-tt-vl-pg,
319
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-lt-tt-vl-pg)
320
+ )
321
+ );
322
+
323
+ padding-inline: var(
324
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-lt-tt-hl-pg,
325
+ var(
326
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-lt-tt-hl-pg,
327
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-lt-tt-hl-pg)
328
+ )
329
+ );
330
+
331
+ background-color: var(
332
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-bd-cr,
333
+ var(
334
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-bd-cr,
335
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-bd-cr)
336
+ )
337
+ );
338
+
339
+ width: 100%;
340
+
341
+ border-color: var(
342
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-br-cr,
343
+ var(
344
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-br-cr,
345
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-br-cr)
346
+ )
347
+ );
348
+
349
+ border-style: var(
350
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-br-se,
351
+ var(
352
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-br-se,
353
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-br-se)
354
+ )
355
+ );
356
+
357
+ border-width: var(
358
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-br-wh,
359
+ var(
360
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-br-wh,
361
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-br-wh)
362
+ )
363
+ );
364
+
365
+ border-radius: var(
366
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-br-rs,
367
+ var(
368
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-br-rs,
369
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-br-rs)
370
+ )
371
+ );
372
+
373
+ box-shadow: var(
374
+ --_show-shadow,
375
+ var(
376
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-sw-ae,
377
+ var(
378
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-sw-ae,
379
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-sw-ae)
380
+ )
381
+ )
382
+ var(
383
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-sw-br,
384
+ var(
385
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-sw-br,
386
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-sw-br)
387
+ )
388
+ )
389
+ var(
390
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-sw-sd,
391
+ var(
392
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-sw-sd,
393
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-sw-sd)
394
+ )
395
+ )
396
+ var(
397
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-sw-cr,
398
+ var(
399
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-sw-cr,
400
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-tt-cr-dn-sw-cr)
401
+ )
402
+ )
403
+ );
404
+
405
+ & h3 {
406
+ color: var(
407
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-cr,
408
+ var(
409
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-cr,
410
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-cr)
411
+ )
412
+ );
413
+
414
+ font-family: var(
415
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-fy,
416
+ var(
417
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-fy,
418
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-fy)
419
+ )
420
+ );
421
+
422
+ font-size: var(
423
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-se,
424
+ var(
425
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-se,
426
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-se)
427
+ )
428
+ );
429
+
430
+ font-weight: var(
431
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-wt,
432
+ var(
433
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-wt,
434
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-wt)
435
+ )
436
+ );
437
+
438
+ font-style: var(
439
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-se-ic,
440
+ var(
441
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-se-ic,
442
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-se-ic)
443
+ )
444
+ );
445
+
446
+ text-align: var(
447
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-tt-an,
448
+ var(
449
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-tt-an,
450
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-tt-an)
451
+ )
452
+ );
453
+
454
+ letter-spacing: var(
455
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-lr-sg,
456
+ var(
457
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-lr-sg,
458
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-lr-sg)
459
+ )
460
+ );
461
+
462
+ line-height: var(
463
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-le-ht,
464
+ var(
465
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-le-ht,
466
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-le-ht)
467
+ )
468
+ );
469
+
470
+ text-decoration: var(
471
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ue,
472
+ var(
473
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ue,
474
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ue)
475
+ )
476
+ );
477
+ }
478
+
479
+ & p {
480
+ color: var(
481
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-cr-dc,
482
+ var(
483
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-cr-dc,
484
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-cr-dc)
485
+ )
486
+ );
487
+
488
+ font-family: var(
489
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-fy-dc,
490
+ var(
491
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-fy-dc,
492
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-fy-dc)
493
+ )
494
+ );
495
+
496
+ font-size: var(
497
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-se-dc,
498
+ var(
499
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-se-dc,
500
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-se-dc)
501
+ )
502
+ );
503
+
504
+ font-weight: var(
505
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-wt-dc,
506
+ var(
507
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-wt-dc,
508
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-wt-dc)
509
+ )
510
+ );
511
+
512
+ font-style: var(
513
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-se-ic-dc,
514
+ var(
515
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-se-ic-dc,
516
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ft-se-ic-dc)
517
+ )
518
+ );
519
+
520
+ text-align: var(
521
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-tt-an-dc,
522
+ var(
523
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-tt-an-dc,
524
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-tt-an-dc)
525
+ )
526
+ );
527
+
528
+ letter-spacing: var(
529
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-lr-sg-dc,
530
+ var(
531
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-lr-sg-dc,
532
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-lr-sg-dc)
533
+ )
534
+ );
535
+
536
+ line-height: var(
537
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-le-ht-dc,
538
+ var(
539
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-le-ht-dc,
540
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-le-ht-dc)
541
+ )
542
+ );
543
+
544
+ text-decoration: var(
545
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ue-dc,
546
+ var(
547
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ue-dc,
548
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-gy-wt-se-ue-dc)
549
+ )
550
+ );
551
+ }
552
+
553
+ // h3 {
554
+ // margin-bottom: var(--_mb-4);
555
+ // }
556
+ }
557
+ }
558
+
559
+ &[data-text-position="top"] {
560
+ .gallery-slider-element {
561
+ flex-direction: column;
562
+ }
563
+ }
564
+ &[data-text-position="bottom"] {
565
+ .gallery-slider-element {
566
+ flex-direction: column-reverse;
567
+ }
568
+ }
569
+ &[data-text-position="left"] {
570
+ .gallery-slider-element {
571
+ flex-direction: row;
572
+ }
573
+ .gallery-header {
574
+ width: fit-content;
575
+ height: 100%;
576
+ }
577
+ &[data-widget-alignment="top"] {
578
+ .gallery-slider-element {
579
+ align-items: flex-start;
580
+ }
581
+ .gallery-header {
582
+ justify-content: flex-start;
583
+ }
584
+ }
585
+ &[data-widget-alignment="center"] {
586
+ .gallery-slider-element {
587
+ align-items: center;
588
+ }
589
+ .gallery-header {
590
+ justify-content: center;
591
+ }
592
+ }
593
+ &[data-widget-alignment="bottom"] {
594
+ .gallery-slider-element {
595
+ align-items: flex-end;
596
+ }
597
+ .gallery-header {
598
+ justify-content: flex-end;
599
+ }
600
+ }
601
+ }
602
+ &[data-text-position="right"] {
603
+ .gallery-header {
604
+ width: fit-content;
605
+ height: 100%;
606
+ }
607
+ .gallery-slider-element {
608
+ flex-direction: row-reverse;
609
+ }
610
+
611
+ &[data-widget-alignment="top"] {
612
+ .gallery-slider-element {
613
+ align-items: flex-start;
614
+ }
615
+ .gallery-header {
616
+ justify-content: flex-start;
617
+ }
618
+ }
619
+ &[data-widget-alignment="center"] {
620
+ .gallery-slider-element {
621
+ align-items: center;
622
+ }
623
+ .gallery-header {
624
+ justify-content: center;
625
+ }
626
+ }
627
+ &[data-widget-alignment="bottom"] {
628
+ .gallery-slider-element {
629
+ align-items: flex-end;
630
+ }
631
+ .gallery-header {
632
+ justify-content: flex-end;
633
+ }
634
+ }
635
+ }
636
+
637
+ .embla {
638
+ width: 100%;
639
+ height: 100%;
640
+ position: relative;
641
+ display: flex;
642
+ flex-direction: column;
643
+ // overflow: hidden;
644
+
645
+ .embla__viewport {
646
+ width: 100%;
647
+ // height: 100%;
648
+ height: auto;
649
+ flex-grow: 1;
650
+ position: relative;
651
+ display: flex;
652
+ flex-direction: column;
653
+
654
+ overflow: hidden;
655
+
656
+ .embla__container {
657
+ width: 100%;
658
+ height: 100%;
659
+ display: grid;
660
+ grid-template-rows: 100%;
661
+ // grid-template-columns: 100%;
662
+ grid-template-columns: repeat(
663
+ var(
664
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-se,
665
+ var(
666
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-se,
667
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-se)
668
+ )
669
+ ),
670
+ calc(
671
+ 100% /
672
+ var(
673
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-se,
674
+ var(
675
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-se,
676
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-se)
677
+ )
678
+ )
679
+ )
680
+ );
681
+
682
+ grid-auto-flow: column;
683
+ gap: var(
684
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-im-gp,
685
+ var(
686
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-im-gp,
687
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-im-gp)
688
+ )
689
+ );
690
+
691
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
692
+ height: calc(
693
+ 100% - calc(
694
+ var(
695
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
696
+ var(
697
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
698
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se)
699
+ )
700
+ ) +
701
+ 10px
702
+ )
703
+ );
704
+ }
705
+
706
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
707
+ height: calc(
708
+ 100% - calc(
709
+ var(
710
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-le-ht,
711
+ var(
712
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-le-ht,
713
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-le-ht)
714
+ )
715
+ ) +
716
+ 20px
717
+ )
718
+ );
719
+ }
720
+
721
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
722
+ height: calc(
723
+ 100% - calc(
724
+ var(
725
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-dt-se,
726
+ var(
727
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-dt-se,
728
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-dt-se)
729
+ )
730
+ ) +
731
+ 20px
732
+ )
733
+ );
734
+ }
735
+
736
+ .embla__slide {
737
+ flex: 0 0 auto;
738
+ width: 100%;
739
+ height: 100%;
740
+ }
741
+ }
742
+ }
743
+ &:not([data-display-style="Column"]) {
744
+ .embla__container {
745
+ grid-auto-columns: calc(
746
+ 100% /
747
+ var(
748
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-se,
749
+ var(
750
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-se,
751
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-se)
752
+ )
753
+ )
754
+ );
755
+ }
756
+ }
757
+
758
+ &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
759
+ // overflow: unset;
760
+
761
+ .embla__viewport {
762
+ overflow: unset;
763
+ height: 80%;
764
+ flex-grow: 1;
765
+ &:not([data-is-builder-type="true"]) {
766
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
767
+ }
768
+
769
+ .embla__container {
770
+ overflow: unset;
771
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
772
+
773
+ // min-height: var(--_ctm-height);
774
+
775
+ grid-template-columns: repeat(
776
+ var(
777
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-rw,
778
+ var(
779
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-rw,
780
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-rw)
781
+ )
782
+ ),
783
+ 1fr
784
+ );
785
+
786
+ grid-template-rows: unset;
787
+
788
+ grid-auto-flow: row;
789
+ &[data-overflow-hidden="true"] {
790
+ overflow: hidden;
791
+ }
792
+ .embla__slide {
793
+ aspect-ratio: 1/1.1;
794
+ }
795
+ }
796
+ }
797
+ }
798
+
799
+ &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
800
+ .embla__viewport {
801
+ .embla__container {
802
+ grid-template-rows: repeat(
803
+ var(
804
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-cn,
805
+ var(
806
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-cn,
807
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-cn)
808
+ )
809
+ ),
810
+ calc(
811
+ 100% /
812
+ var(
813
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-cn,
814
+ var(
815
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-cn,
816
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-cn)
817
+ )
818
+ )
819
+ )
820
+ );
821
+ }
822
+ }
823
+ }
824
+
825
+ &[data-display-style="Rows"] {
826
+ // overflow: unset;
827
+
828
+ .embla__viewport {
829
+ overflow: unset;
830
+ height: 80%;
831
+ flex-grow: 1;
832
+ &:not([data-is-builder-type="true"]) {
833
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
834
+ }
835
+
836
+ .embla__container {
837
+ // overflow: hidden;
838
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
839
+
840
+ // min-height: var(--_ctm-height);
841
+
842
+ grid-template-columns: repeat(1, 1fr);
843
+ grid-template-rows: unset;
844
+
845
+ grid-auto-flow: row;
846
+ .embla__slide {
847
+ aspect-ratio: 7 / 2;
848
+ }
849
+ }
850
+ }
851
+ }
852
+
853
+ &[data-display-style="Column"] {
854
+ // overflow: unset;
855
+
856
+ .embla__viewport {
857
+ .embla__container {
858
+ display: flex;
859
+ .embla__slide {
860
+ width: unset;
861
+ height: 100%;
862
+ aspect-ratio: 1 / 2;
863
+ }
864
+ }
865
+ }
866
+ }
867
+ &[data-display-style="Masonry"] {
868
+ // overflow: unset;
869
+
870
+ .embla__viewport {
871
+ overflow: hidden;
872
+ height: 80%;
873
+ flex-grow: 1;
874
+ &:not([data-is-builder-type="true"]) {
875
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
876
+ }
877
+ .embla__container {
878
+ overflow: unset;
879
+
880
+ display: block;
881
+ column-count: var(
882
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-rw,
883
+ var(
884
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-rw,
885
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-is-pr-rw)
886
+ )
887
+ );
888
+ gap: unset;
889
+ column-gap: var(
890
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-im-gp,
891
+ var(
892
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-im-gp,
893
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-im-gp)
894
+ )
895
+ );
896
+
897
+ // height: auto;
898
+
899
+ height: auto;
900
+
901
+ .embla__slide {
902
+ // break-inside: avoid;
903
+ margin-bottom: var(
904
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-im-gp,
905
+ var(
906
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-im-gp,
907
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-im-gp)
908
+ )
909
+ );
910
+
911
+ height: unset;
912
+ .gallery__slide {
913
+ height: unset;
914
+ }
915
+ }
916
+ }
917
+ }
918
+ }
919
+
920
+ .arrow-navigation {
921
+ display: flex;
922
+ position: absolute;
923
+ top: 50%;
924
+ left: 50%;
925
+ width: 100%;
926
+ justify-content: space-between;
927
+ transform: translate(-50%, -50%);
928
+ // padding-left: 20px;
929
+
930
+ &[data-control-type="Bottom-Overflow"] {
931
+ transform: translateX(-50%);
932
+ width: 100%;
933
+ justify-content: center;
934
+ gap: 12px;
935
+ // top: unset;
936
+ // bottom: 6px;
937
+ bottom: 10px;
938
+ top: unset;
939
+ }
940
+ &[data-control-type="Bottom"] {
941
+ transform: unset;
942
+ position: static;
943
+ width: 100%;
944
+ justify-content: center;
945
+ gap: 12px;
946
+ margin-top: 10px;
947
+ }
948
+ }
949
+ &[data-control-type="Side"] {
950
+ .left-button,
951
+ .right-button {
952
+ background-color: transparent;
953
+ }
954
+ }
955
+ &[data-background-shape="Round"] {
956
+ .left-button,
957
+ .right-button {
958
+ @include BgColorLighter(var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-bd-cr), 10%);
959
+ &:not(:disabled):hover {
960
+ @include BgColorLighter(var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-bd-cr), 20%);
961
+ }
962
+ }
963
+ }
964
+
965
+ .left-button {
966
+ padding: 10px;
967
+ border-radius: 50%;
968
+ border: none;
969
+ width: var(
970
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
971
+ var(
972
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
973
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se)
974
+ )
975
+ );
976
+ height: var(
977
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
978
+ var(
979
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
980
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se)
981
+ )
982
+ );
983
+
984
+ display: flex;
985
+ align-items: center;
986
+ justify-content: center;
987
+ cursor: pointer;
988
+ outline: none;
989
+ margin-left: 12px;
990
+ span {
991
+ display: flex;
992
+ svg {
993
+ width: calc(
994
+ var(
995
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
996
+ var(
997
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
998
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se)
999
+ )
1000
+ ) *
1001
+ 0.5
1002
+ );
1003
+ height: calc(
1004
+ var(
1005
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
1006
+ var(
1007
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
1008
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se)
1009
+ )
1010
+ ) *
1011
+ 0.5
1012
+ );
1013
+
1014
+ path {
1015
+ stroke: var(
1016
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-cr,
1017
+ var(
1018
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-cr,
1019
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-cr)
1020
+ )
1021
+ );
1022
+ }
1023
+ }
1024
+ }
1025
+ &:disabled {
1026
+ & svg {
1027
+ path {
1028
+ stroke: rgb(192, 192, 192);
1029
+ }
1030
+ }
1031
+ }
1032
+ }
1033
+ .right-button {
1034
+ border-radius: 50%;
1035
+ border: none;
1036
+ width: var(
1037
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
1038
+ var(
1039
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
1040
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se)
1041
+ )
1042
+ );
1043
+ height: var(
1044
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
1045
+ var(
1046
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
1047
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se)
1048
+ )
1049
+ );
1050
+
1051
+ display: flex;
1052
+ align-items: center;
1053
+ justify-content: center;
1054
+ cursor: pointer;
1055
+ outline: none;
1056
+ margin-right: 12px;
1057
+ padding: 10px;
1058
+ span {
1059
+ display: flex;
1060
+ svg {
1061
+ width: calc(
1062
+ var(
1063
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
1064
+ var(
1065
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
1066
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se)
1067
+ )
1068
+ ) *
1069
+ 0.5
1070
+ );
1071
+ height: calc(
1072
+ var(
1073
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
1074
+ var(
1075
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
1076
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se)
1077
+ )
1078
+ ) *
1079
+ 0.5
1080
+ );
1081
+
1082
+ path {
1083
+ stroke: var(
1084
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-cr,
1085
+ var(
1086
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-cr,
1087
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-cr)
1088
+ )
1089
+ );
1090
+ }
1091
+ }
1092
+ }
1093
+ &:disabled {
1094
+ & svg {
1095
+ path {
1096
+ stroke: rgb(192, 192, 192);
1097
+ }
1098
+ }
1099
+ }
1100
+ }
1101
+ .icon {
1102
+ display: flex;
1103
+ svg {
1104
+ width: calc(
1105
+ var(
1106
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
1107
+ var(
1108
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
1109
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se)
1110
+ )
1111
+ ) *
1112
+ 0.5
1113
+ );
1114
+ height: calc(
1115
+ var(
1116
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
1117
+ var(
1118
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se,
1119
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-se)
1120
+ )
1121
+ ) *
1122
+ 0.5
1123
+ );
1124
+
1125
+ path {
1126
+ stroke: var(
1127
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-cr,
1128
+ var(
1129
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-cr,
1130
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-as-aw-cr)
1131
+ )
1132
+ );
1133
+ }
1134
+ }
1135
+ }
1136
+
1137
+ &[data-control-type="Side"] {
1138
+ .embla__viewport {
1139
+ width: calc(100% - 120px);
1140
+ margin-inline: auto;
1141
+ }
1142
+ }
1143
+
1144
+ &[data-thumbnail-placement="top"] {
1145
+ flex-direction: column-reverse;
1146
+ }
1147
+ &[data-thumbnail-placement="bottom"] {
1148
+ flex-direction: column;
1149
+ }
1150
+ &[data-thumbnail-placement="left"] {
1151
+ flex-direction: row-reverse;
1152
+
1153
+ .embla__thumbs {
1154
+ width: var(
1155
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-wh,
1156
+ var(
1157
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-wh,
1158
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-wh)
1159
+ )
1160
+ );
1161
+ height: 100%;
1162
+ flex-direction: column;
1163
+ margin-top: 0;
1164
+ margin-right: var(
1165
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-sr-ad-tl-gp,
1166
+ var(
1167
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-sr-ad-tl-gp,
1168
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-sr-ad-tl-gp)
1169
+ )
1170
+ );
1171
+
1172
+ & .embla__thumbs__container {
1173
+ flex-direction: column;
1174
+ height: 100%;
1175
+ justify-content: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-an-is);
1176
+ }
1177
+
1178
+ .thumb-prev-button,
1179
+ .thumb-next-button {
1180
+ span {
1181
+ transform: rotate(90deg);
1182
+ }
1183
+ }
1184
+
1185
+ .embla__thumbs__viewport {
1186
+ min-height: 0;
1187
+ }
1188
+ }
1189
+ }
1190
+ &[data-thumbnail-placement="right"] {
1191
+ flex-direction: row;
1192
+ .embla__thumbs {
1193
+ width: var(
1194
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-wh,
1195
+ var(
1196
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-wh,
1197
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-wh)
1198
+ )
1199
+ );
1200
+ height: 100%;
1201
+ flex-direction: column;
1202
+ margin-top: 0;
1203
+ margin-left: var(
1204
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-sr-ad-tl-gp,
1205
+ var(
1206
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-sr-ad-tl-gp,
1207
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-sr-ad-tl-gp)
1208
+ )
1209
+ );
1210
+
1211
+ & .embla__thumbs__container {
1212
+ flex-direction: column;
1213
+ height: 100%;
1214
+ justify-content: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-an-is);
1215
+ }
1216
+
1217
+ .thumb-prev-button,
1218
+ .thumb-next-button {
1219
+ span {
1220
+ transform: rotate(90deg);
1221
+ }
1222
+ }
1223
+
1224
+ .embla__thumbs__viewport {
1225
+ min-height: 0;
1226
+ }
1227
+ }
1228
+ }
1229
+ &[data-control-type="Side"] {
1230
+ flex-direction: row;
1231
+ align-items: center;
1232
+ }
1233
+ .embla__dots {
1234
+ display: flex;
1235
+ flex-wrap: wrap;
1236
+ justify-content: center;
1237
+ align-items: center;
1238
+ margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
1239
+ gap: 6px;
1240
+ margin-top: 16px;
1241
+
1242
+ &[data-control-type="Bottom-Overflow"] {
1243
+ position: absolute;
1244
+ bottom: 10px;
1245
+ left: 50%;
1246
+ transform: translateX(-50%);
1247
+ width: 75%;
1248
+ }
1249
+ .embla__dot {
1250
+ -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
1251
+ -webkit-appearance: none;
1252
+ appearance: none;
1253
+ background-color: var(
1254
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-or-dt-cr,
1255
+ var(
1256
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-or-dt-cr,
1257
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-or-dt-cr)
1258
+ )
1259
+ );
1260
+
1261
+ touch-action: manipulation;
1262
+ display: inline-flex;
1263
+ text-decoration: none;
1264
+ cursor: pointer;
1265
+ border: 0;
1266
+ padding: 0;
1267
+ margin: 0;
1268
+ // width: 0.6rem;
1269
+ // height: 0.6rem;
1270
+ width: var(
1271
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-dt-se,
1272
+ var(
1273
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-dt-se,
1274
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-dt-se)
1275
+ )
1276
+ );
1277
+ height: var(
1278
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-dt-se,
1279
+ var(
1280
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-dt-se,
1281
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-dt-se)
1282
+ )
1283
+ );
1284
+
1285
+ display: flex;
1286
+ align-items: center;
1287
+ justify-content: center;
1288
+ border-radius: 50%;
1289
+ }
1290
+ .embla__dot:after {
1291
+ // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
1292
+ width: var(
1293
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-dt-se,
1294
+ var(
1295
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-dt-se,
1296
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-dt-se)
1297
+ )
1298
+ );
1299
+ height: var(
1300
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-dt-se,
1301
+ var(
1302
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-dt-se,
1303
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-dt-se)
1304
+ )
1305
+ );
1306
+
1307
+ border-radius: 50%;
1308
+ display: flex;
1309
+ align-items: center;
1310
+ content: "";
1311
+ }
1312
+ .embla__dot--selected:after {
1313
+ box-shadow: inset 0 0 0 1px var(--text-body);
1314
+ background-color: var(
1315
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-ct-dt-cr,
1316
+ var(
1317
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-ct-dt-cr,
1318
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-ds-ct-dt-cr)
1319
+ )
1320
+ );
1321
+ }
1322
+ &[data-slider-control="Pagination Line"] {
1323
+ .embla__dot {
1324
+ width: var(
1325
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-le-wh,
1326
+ var(
1327
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-le-wh,
1328
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-le-wh)
1329
+ )
1330
+ );
1331
+
1332
+ height: var(
1333
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-le-ht,
1334
+ var(
1335
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-le-ht,
1336
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-le-ht)
1337
+ )
1338
+ );
1339
+
1340
+ background-color: var(
1341
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-or-le-cr,
1342
+ var(
1343
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-or-le-cr,
1344
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-or-le-cr)
1345
+ )
1346
+ );
1347
+
1348
+ border-radius: 6px;
1349
+ }
1350
+ .embla__dot--selected:after {
1351
+ box-shadow: inset 0 0 0 1px var(--text-body);
1352
+ border-radius: 6px;
1353
+ width: var(
1354
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-le-wh,
1355
+ var(
1356
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-le-wh,
1357
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-le-wh)
1358
+ )
1359
+ );
1360
+
1361
+ height: var(
1362
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-le-ht,
1363
+ var(
1364
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-le-ht,
1365
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-le-ht)
1366
+ )
1367
+ );
1368
+
1369
+ // background-color: #fff;
1370
+ background-color: var(
1371
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-ct-le-cr,
1372
+ var(
1373
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-ct-le-cr,
1374
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-pn-le-ct-le-cr)
1375
+ )
1376
+ );
1377
+ }
1378
+ }
1379
+ }
1380
+
1381
+ .embla__thumbs {
1382
+ width: 100%;
1383
+ height: var(
1384
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-ht,
1385
+ var(
1386
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-ht,
1387
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-ht)
1388
+ )
1389
+ );
1390
+ margin-top: var(
1391
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-sr-ad-tl-gp,
1392
+ var(
1393
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-sr-ad-tl-gp,
1394
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-sr-ad-tl-gp)
1395
+ )
1396
+ );
1397
+
1398
+ position: relative;
1399
+ display: flex;
1400
+ flex-direction: row;
1401
+ align-items: center;
1402
+ overflow: hidden;
1403
+
1404
+ // Thumbnail arrow shared styles
1405
+ .thumb-prev-button,
1406
+ .thumb-next-button {
1407
+ flex-shrink: 0;
1408
+ padding: 6px;
1409
+ border-radius: 50%;
1410
+ border: none;
1411
+ cursor: pointer;
1412
+ outline: none;
1413
+ display: flex;
1414
+ align-items: center;
1415
+ justify-content: center;
1416
+ background-color: transparent;
1417
+ z-index: 1;
1418
+
1419
+ width: var(
1420
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-as-aw-se,
1421
+ var(
1422
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-as-aw-se,
1423
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-as-aw-se, 30px)
1424
+ )
1425
+ );
1426
+ height: var(
1427
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-as-aw-se,
1428
+ var(
1429
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-as-aw-se,
1430
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-as-aw-se, 30px)
1431
+ )
1432
+ );
1433
+
1434
+ span {
1435
+ display: flex;
1436
+ svg {
1437
+ width: calc(
1438
+ var(
1439
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-as-aw-se,
1440
+ var(
1441
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-as-aw-se,
1442
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-as-aw-se, 30px)
1443
+ )
1444
+ ) *
1445
+ 0.5
1446
+ );
1447
+ height: calc(
1448
+ var(
1449
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-as-aw-se,
1450
+ var(
1451
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-as-aw-se,
1452
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-as-aw-se, 30px)
1453
+ )
1454
+ ) *
1455
+ 0.5
1456
+ );
1457
+ path {
1458
+ stroke: var(
1459
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-as-aw-cr,
1460
+ var(
1461
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-as-aw-cr,
1462
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-as-aw-cr)
1463
+ )
1464
+ );
1465
+ }
1466
+ }
1467
+ }
1468
+
1469
+ &:disabled {
1470
+ opacity: 0.3;
1471
+ cursor: not-allowed;
1472
+ }
1473
+ }
1474
+
1475
+ &[data-background-shape="Round"] {
1476
+ .thumb-prev-button,
1477
+ .thumb-next-button {
1478
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
1479
+ &:not(:disabled):hover {
1480
+ @include BgColorLighter(var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-as-bd-cr), 5%);
1481
+ }
1482
+ }
1483
+ }
1484
+ // margin: 10px;
1485
+ // padding: 10px;
1486
+
1487
+ .embla__thumbs__viewport {
1488
+ width: 100%;
1489
+ height: 100%;
1490
+ flex: 1;
1491
+ min-width: 0;
1492
+ position: relative;
1493
+ display: flex;
1494
+ flex-direction: column;
1495
+
1496
+ overflow: hidden;
1497
+ }
1498
+ .embla__thumbs__container {
1499
+ display: flex;
1500
+ flex-direction: row;
1501
+ justify-content: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-jy-ct);
1502
+ gap: var(
1503
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-sg,
1504
+ var(
1505
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-sg,
1506
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-sg)
1507
+ )
1508
+ );
1509
+
1510
+ width: 100%;
1511
+ // height: 200px;
1512
+
1513
+ .embla__thumbs__slide {
1514
+ flex-shrink: 0;
1515
+ max-width: var(
1516
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-wh,
1517
+ var(
1518
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-wh,
1519
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-wh)
1520
+ )
1521
+ );
1522
+
1523
+ height: var(
1524
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-ht,
1525
+ var(
1526
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-ht,
1527
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-ht)
1528
+ )
1529
+ );
1530
+ cursor: pointer;
1531
+ overflow: hidden;
1532
+ padding: var(
1533
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-pg,
1534
+ var(
1535
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-pg,
1536
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-lt-tl-pg)
1537
+ )
1538
+ );
1539
+
1540
+ // thumbnailStyle - hoverState
1541
+ &:hover {
1542
+ --_sf-hr-bd-cr: var(
1543
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-bd-cr,
1544
+ var(
1545
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-bd-cr,
1546
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-bd-cr)
1547
+ )
1548
+ );
1549
+ --_sf-hr-br-cr: var(
1550
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-br-cr,
1551
+ var(
1552
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-br-cr,
1553
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-br-cr)
1554
+ )
1555
+ );
1556
+ --_sf-hr-br-se: var(
1557
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-br-se,
1558
+ var(
1559
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-br-se,
1560
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-br-se)
1561
+ )
1562
+ );
1563
+ --_sf-hr-br-wh: var(
1564
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-br-wh,
1565
+ var(
1566
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-br-wh,
1567
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-br-wh)
1568
+ )
1569
+ );
1570
+ --_sf-hr-br-rs: var(
1571
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-br-rs,
1572
+ var(
1573
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-br-rs,
1574
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-br-rs)
1575
+ )
1576
+ );
1577
+ --_sf-hr-sw-ae: var(
1578
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-sw-ae,
1579
+ var(
1580
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-sw-ae,
1581
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-sw-ae)
1582
+ )
1583
+ );
1584
+ --_sf-hr-sw-br: var(
1585
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-sw-br,
1586
+ var(
1587
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-sw-br,
1588
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-sw-br)
1589
+ )
1590
+ );
1591
+ --_sf-hr-sw-sd: var(
1592
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-sw-sd,
1593
+ var(
1594
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-sw-sd,
1595
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-sw-sd)
1596
+ )
1597
+ );
1598
+ --_sf-hr-sw-cr: var(
1599
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-sw-cr,
1600
+ var(
1601
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-sw-cr,
1602
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-hr-se-sw-cr)
1603
+ )
1604
+ );
1605
+ }
1606
+
1607
+ // thumbnailStyle - defaultState
1608
+ background-color: var(
1609
+ --_sf-hr-bd-cr,
1610
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-dt-se-bd-cr)
1611
+ );
1612
+ border-color: var(
1613
+ --_sf-hr-br-cr,
1614
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-dt-se-br-cr)
1615
+ );
1616
+ border-style: var(
1617
+ --_sf-hr-br-se,
1618
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-dt-se-br-se)
1619
+ );
1620
+ border-width: var(
1621
+ --_sf-hr-br-wh,
1622
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-dt-se-br-wh)
1623
+ );
1624
+ border-radius: var(
1625
+ --_sf-hr-br-rs,
1626
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-dt-se-br-rs)
1627
+ );
1628
+ box-shadow: var(
1629
+ --_sf-hr-sw-ae,
1630
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-dt-se-sw-ae)
1631
+ )
1632
+ var(
1633
+ --_sf-hr-sw-br,
1634
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-dt-se-sw-br)
1635
+ )
1636
+ var(
1637
+ --_sf-hr-sw-sd,
1638
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-dt-se-sw-sd)
1639
+ )
1640
+ var(
1641
+ --_sf-hr-sw-cr,
1642
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-dt-se-sw-cr)
1643
+ );
1644
+
1645
+ // thumbnailStyle - selectedState
1646
+ &[data-selected="true"] {
1647
+ --_sf-sd-bd-cr: var(
1648
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-bd-cr,
1649
+ var(
1650
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-bd-cr,
1651
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-bd-cr)
1652
+ )
1653
+ );
1654
+ --_sf-sd-br-cr: var(
1655
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-br-cr,
1656
+ var(
1657
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-br-cr,
1658
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-br-cr)
1659
+ )
1660
+ );
1661
+ --_sf-sd-br-se: var(
1662
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-br-se,
1663
+ var(
1664
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-br-se,
1665
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-br-se)
1666
+ )
1667
+ );
1668
+ --_sf-sd-br-wh: var(
1669
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-br-wh,
1670
+ var(
1671
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-br-wh,
1672
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-br-wh)
1673
+ )
1674
+ );
1675
+ --_sf-sd-br-rs: var(
1676
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-br-rs,
1677
+ var(
1678
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-br-rs,
1679
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-br-rs)
1680
+ )
1681
+ );
1682
+ --_sf-sd-sw-ae: var(
1683
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-sw-ae,
1684
+ var(
1685
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-sw-ae,
1686
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-sw-ae)
1687
+ )
1688
+ );
1689
+ --_sf-sd-sw-br: var(
1690
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-sw-br,
1691
+ var(
1692
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-sw-br,
1693
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-sw-br)
1694
+ )
1695
+ );
1696
+ --_sf-sd-sw-sd: var(
1697
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-sw-sd,
1698
+ var(
1699
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-sw-sd,
1700
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-sw-sd)
1701
+ )
1702
+ );
1703
+ --_sf-sd-sw-cr: var(
1704
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-sw-cr,
1705
+ var(
1706
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-sw-cr,
1707
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-sd-se-sw-cr)
1708
+ )
1709
+ );
1710
+
1711
+ background-color: var(
1712
+ --_sf-sd-bd-cr,
1713
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-dt-se-bd-cr)
1714
+ );
1715
+ border-color: var(
1716
+ --_sf-sd-br-cr,
1717
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-dt-se-br-cr)
1718
+ );
1719
+ border-style: var(
1720
+ --_sf-sd-br-se,
1721
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-dt-se-br-se)
1722
+ );
1723
+ border-width: var(
1724
+ --_sf-sd-br-wh,
1725
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-dt-se-br-wh)
1726
+ );
1727
+ border-radius: var(
1728
+ --_sf-sd-br-rs,
1729
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-dt-se-br-rs)
1730
+ );
1731
+ box-shadow: var(
1732
+ --_sf-sd-sw-ae,
1733
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-dt-se-sw-ae)
1734
+ )
1735
+ var(
1736
+ --_sf-sd-sw-br,
1737
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-dt-se-sw-br)
1738
+ )
1739
+ var(
1740
+ --_sf-sd-sw-sd,
1741
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-dt-se-sw-sd)
1742
+ )
1743
+ var(
1744
+ --_sf-sd-sw-cr,
1745
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-tl-se-dt-se-sw-cr)
1746
+ );
1747
+ }
1748
+
1749
+ & > div {
1750
+ height: 100%;
1751
+ }
1752
+
1753
+ & img {
1754
+ width: 100%;
1755
+ height: 100%;
1756
+ object-fit: cover;
1757
+ }
1758
+ }
1759
+ }
1760
+ }
1761
+ }
1762
+
1763
+ .gallery__slide {
1764
+ img[data-has-link="true"] {
1765
+ cursor: pointer;
1766
+ }
1767
+ img[data-zoom="true"] {
1768
+ cursor: zoom-in;
1769
+ }
1770
+ width: 100%;
1771
+ max-width: 100%;
1772
+ height: 100%;
1773
+ display: flex;
1774
+ flex: 0 0 auto;
1775
+ div {
1776
+ position: relative;
1777
+ overflow: hidden;
1778
+ width: 100%;
1779
+ height: 100%;
1780
+ }
1781
+
1782
+ // flex-direction: column;
1783
+
1784
+ background-color: var(
1785
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-bd-cr,
1786
+ var(
1787
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-bd-cr,
1788
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-bd-cr)
1789
+ )
1790
+ );
1791
+ border-color: var(
1792
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-cr,
1793
+ var(
1794
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-cr,
1795
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-cr)
1796
+ )
1797
+ );
1798
+ border-style: var(
1799
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-se,
1800
+ var(
1801
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-se,
1802
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-se)
1803
+ )
1804
+ );
1805
+ border-width: var(
1806
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-wh,
1807
+ var(
1808
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-wh,
1809
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-wh)
1810
+ )
1811
+ );
1812
+ border-radius: var(
1813
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-rs,
1814
+ var(
1815
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-rs,
1816
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-rs)
1817
+ )
1818
+ );
1819
+
1820
+ box-shadow: var(
1821
+ --_show-shadow,
1822
+ var(
1823
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-sw-ae,
1824
+ var(
1825
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-sw-ae,
1826
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-sw-ae)
1827
+ )
1828
+ )
1829
+ var(
1830
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-sw-br,
1831
+ var(
1832
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-sw-br,
1833
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-sw-br)
1834
+ )
1835
+ )
1836
+ var(
1837
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-sw-sd,
1838
+ var(
1839
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-sw-sd,
1840
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-sw-sd)
1841
+ )
1842
+ )
1843
+ var(
1844
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-sw-cr,
1845
+ var(
1846
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-sw-cr,
1847
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-sw-cr)
1848
+ )
1849
+ )
1850
+ );
1851
+
1852
+ gap: var(
1853
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-lt-gy-tt-ad-im-sg,
1854
+ var(
1855
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-lt-gy-tt-ad-im-sg,
1856
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-lt-gy-tt-ad-im-sg)
1857
+ )
1858
+ );
1859
+
1860
+ .gallery-header {
1861
+ display: flex;
1862
+ flex-direction: column;
1863
+ gap: var(
1864
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-lt-te-ad-dn-sg,
1865
+ var(
1866
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-lt-te-ad-dn-sg,
1867
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-lt-te-ad-dn-sg)
1868
+ )
1869
+ );
1870
+ padding-block: var(
1871
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-lt-tt-vl-pg,
1872
+ var(
1873
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-lt-tt-vl-pg,
1874
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-lt-tt-vl-pg)
1875
+ )
1876
+ );
1877
+ padding-inline: var(
1878
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-lt-tt-hl-pg,
1879
+ var(
1880
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-lt-tt-hl-pg,
1881
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-lt-tt-hl-pg)
1882
+ )
1883
+ );
1884
+ background-color: var(
1885
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-bd-cr,
1886
+ var(
1887
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-bd-cr,
1888
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-bd-cr)
1889
+ )
1890
+ );
1891
+ width: 100%;
1892
+ border-color: var(
1893
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-br-cr,
1894
+ var(
1895
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-br-cr,
1896
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-br-cr)
1897
+ )
1898
+ );
1899
+ border-style: var(
1900
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-br-se,
1901
+ var(
1902
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-br-se,
1903
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-br-se)
1904
+ )
1905
+ );
1906
+ border-width: var(
1907
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-br-wh,
1908
+ var(
1909
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-br-wh,
1910
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-br-wh)
1911
+ )
1912
+ );
1913
+ border-radius: var(
1914
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-br-rs,
1915
+ var(
1916
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-br-rs,
1917
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-br-rs)
1918
+ )
1919
+ );
1920
+
1921
+ box-shadow: var(
1922
+ --_show-shadow,
1923
+ var(
1924
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-sw-ae,
1925
+ var(
1926
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-sw-ae,
1927
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-sw-ae)
1928
+ )
1929
+ )
1930
+ var(
1931
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-sw-br,
1932
+ var(
1933
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-sw-br,
1934
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-sw-br)
1935
+ )
1936
+ )
1937
+ var(
1938
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-sw-sd,
1939
+ var(
1940
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-sw-sd,
1941
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-sw-sd)
1942
+ )
1943
+ )
1944
+ var(
1945
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-sw-cr,
1946
+ var(
1947
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-sw-cr,
1948
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-tt-cr-dn-sw-cr)
1949
+ )
1950
+ )
1951
+ );
1952
+
1953
+ & h3 {
1954
+ color: var(
1955
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-cr,
1956
+ var(
1957
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-cr,
1958
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-cr)
1959
+ )
1960
+ );
1961
+ font-family: var(
1962
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-fy,
1963
+ var(
1964
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-fy,
1965
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-fy)
1966
+ )
1967
+ );
1968
+ font-size: var(
1969
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-se,
1970
+ var(
1971
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-se,
1972
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-se)
1973
+ )
1974
+ );
1975
+ font-weight: var(
1976
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-wt,
1977
+ var(
1978
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-wt,
1979
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-wt)
1980
+ )
1981
+ );
1982
+ font-style: var(
1983
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-se-ic,
1984
+ var(
1985
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-se-ic,
1986
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-se-ic)
1987
+ )
1988
+ );
1989
+ text-align: var(
1990
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-tt-an,
1991
+ var(
1992
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-tt-an,
1993
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-tt-an)
1994
+ )
1995
+ );
1996
+ letter-spacing: var(
1997
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-lr-sg,
1998
+ var(
1999
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-lr-sg,
2000
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-lr-sg)
2001
+ )
2002
+ );
2003
+ line-height: var(
2004
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-le-ht,
2005
+ var(
2006
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-le-ht,
2007
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-le-ht)
2008
+ )
2009
+ );
2010
+ text-decoration: var(
2011
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ue,
2012
+ var(
2013
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ue,
2014
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ue)
2015
+ )
2016
+ );
2017
+ }
2018
+
2019
+ & p {
2020
+ color: var(
2021
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-cr-dc,
2022
+ var(
2023
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-cr-dc,
2024
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-cr-dc)
2025
+ )
2026
+ );
2027
+ font-family: var(
2028
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-fy-dc,
2029
+ var(
2030
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-fy-dc,
2031
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-fy-dc)
2032
+ )
2033
+ );
2034
+ font-size: var(
2035
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-se-dc,
2036
+ var(
2037
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-se-dc,
2038
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-se-dc)
2039
+ )
2040
+ );
2041
+ font-weight: var(
2042
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-wt-dc,
2043
+ var(
2044
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-wt-dc,
2045
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-wt-dc)
2046
+ )
2047
+ );
2048
+ font-style: var(
2049
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-se-ic-dc,
2050
+ var(
2051
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-se-ic-dc,
2052
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ft-se-ic-dc)
2053
+ )
2054
+ );
2055
+ text-align: var(
2056
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-tt-an-dc,
2057
+ var(
2058
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-tt-an-dc,
2059
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-tt-an-dc)
2060
+ )
2061
+ );
2062
+ letter-spacing: var(
2063
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-lr-sg-dc,
2064
+ var(
2065
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-lr-sg-dc,
2066
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-lr-sg-dc)
2067
+ )
2068
+ );
2069
+ line-height: var(
2070
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-le-ht-dc,
2071
+ var(
2072
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-le-ht-dc,
2073
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-le-ht-dc)
2074
+ )
2075
+ );
2076
+ text-decoration: var(
2077
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ue-dc,
2078
+ var(
2079
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ue-dc,
2080
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ue-dc)
2081
+ )
2082
+ );
2083
+ }
2084
+ }
2085
+
2086
+ img {
2087
+ // object-fit: contain;
2088
+ }
2089
+ &[data-text-position="On Image"] {
2090
+ .gallery-header {
2091
+ width: 100%;
2092
+ // height: 100%;
2093
+ position: absolute;
2094
+ }
2095
+ a:has(img) {
2096
+ width: 100%;
2097
+ }
2098
+
2099
+ &[data-widget-alignment="top"] {
2100
+ // align-items: flex-start;
2101
+
2102
+ .gallery-header {
2103
+ top: 0;
2104
+
2105
+ justify-content: flex-start;
2106
+ }
2107
+ }
2108
+ &[data-widget-alignment="center"] {
2109
+ // align-items: center;
2110
+
2111
+ .gallery-header {
2112
+ top: 50%;
2113
+ transform: translateY(-50%);
2114
+ justify-content: center;
2115
+ }
2116
+ }
2117
+ &[data-widget-alignment="bottom"] {
2118
+ // align-items: flex-end;
2119
+ .gallery-header {
2120
+ bottom: 0;
2121
+
2122
+ justify-content: flex-end;
2123
+ }
2124
+ }
2125
+ }
2126
+
2127
+ &[data-text-position="top"] {
2128
+ flex-direction: column;
2129
+ }
2130
+
2131
+ &[data-text-position="bottom"] {
2132
+ flex-direction: column-reverse;
2133
+ }
2134
+ &[data-text-position="left"] {
2135
+ flex-direction: row;
2136
+
2137
+ .gallery-header {
2138
+ width: fit-content;
2139
+ height: 100%;
2140
+ }
2141
+ &[data-widget-alignment="top"] {
2142
+ align-items: flex-start;
2143
+
2144
+ .gallery-header {
2145
+ justify-content: flex-start;
2146
+ }
2147
+ }
2148
+ &[data-widget-alignment="center"] {
2149
+ align-items: center;
2150
+
2151
+ .gallery-header {
2152
+ justify-content: center;
2153
+ }
2154
+ }
2155
+ &[data-widget-alignment="bottom"] {
2156
+ align-items: flex-end;
2157
+
2158
+ .gallery-header {
2159
+ justify-content: flex-end;
2160
+ }
2161
+ }
2162
+ }
2163
+ &[data-text-position="right"] {
2164
+ flex-direction: row-reverse;
2165
+ .gallery-header {
2166
+ width: fit-content;
2167
+ height: 100%;
2168
+ }
2169
+
2170
+ &[data-widget-alignment="top"] {
2171
+ align-items: flex-start;
2172
+
2173
+ .gallery-header {
2174
+ justify-content: flex-start;
2175
+ }
2176
+ }
2177
+ &[data-widget-alignment="center"] {
2178
+ align-items: center;
2179
+
2180
+ .gallery-header {
2181
+ justify-content: center;
2182
+ }
2183
+ }
2184
+ &[data-widget-alignment="bottom"] {
2185
+ align-items: flex-end;
2186
+
2187
+ .gallery-header {
2188
+ justify-content: flex-end;
2189
+ }
2190
+ }
2191
+ }
2192
+ img {
2193
+ width: 100%;
2194
+ height: 100%;
2195
+ border-radius: var(
2196
+ --_ctm-mob-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-rs,
2197
+ var(
2198
+ --_ctm-tab-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-rs,
2199
+ var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-br-rs)
2200
+ )
2201
+ );
2202
+ // object-fit: cover;
2203
+
2204
+ // object-fit: var(--_ctm-catego-dn-pt-gd-dn-pt-ie-pt-ie-dn-im-se-ot-ft, var(--_tst-dn-im-se-ot-ft));
2205
+ // object-fit: cover;
2206
+
2207
+ &[data-has-title="true"] {
2208
+ height: 85%;
2209
+ }
2210
+
2211
+ /* display: block; */
2212
+ }
2213
+ }
2214
+
2215
+ .load__more__div {
2216
+ display: flex;
2217
+ justify-content: center;
2218
+ margin-block: 12px;
2219
+ & > button {
2220
+ padding-inline: 24px;
2221
+ border: 1px solid gray;
2222
+ padding-block: 12px;
2223
+ border-radius: 6px;
2224
+ }
2225
+ }
2226
+ }