@sc-360-v2/storefront-cms-library 0.4.72 → 0.4.74

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.
@@ -1,1234 +1,1238 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- [data-div-type="element"] {
4
- &[data-element-type="gallerySlider"] {
5
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
6
- width: var(
7
- --_sf-el-wh-st-mx,
8
- calc(
9
- 1% *
10
- var(
11
- --_ctm-mob-ele-nw-wh-vl,
12
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
13
- )
14
- )
15
- );
16
- // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
17
- &:not(:has([data-display-style="Grid"][data-scroll-direction="Vertical"])) {
18
- height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
19
- }
20
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
21
-
22
- --_aspect-ratio: calc(
23
- 1 *
24
- (
25
- var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht)))) /
26
- var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh, var(--_tst-lt-wh))))
27
- )
28
- );
29
- &[data-view-state="full"] {
30
- // aspect-ratio: 1/0.01;
31
- & > .wrapper {
32
- & > div {
33
- height: 100%;
34
- }
35
- }
36
- img {
37
- height: 100%;
38
- object-fit: cover;
39
- }
40
- }
41
-
42
- .arrow-navigation {
43
- pointer-events: none;
44
- }
45
- .arrow-navigation > button {
46
- pointer-events: all;
47
- }
48
-
49
- // &[data-view-state="full"] {
50
- // width: auto;
51
- // // height: 100%;
52
- // margin: 0;
53
- // justify-self: stretch !important;
54
- // align-self: stretch !important;
55
- // cursor: auto;
56
- // }
57
-
58
- & > .wrapper {
59
- width: 100%;
60
- height: 100%;
61
- }
62
- &[data-show-shadow="false"] {
63
- --_show-shadow: none;
64
- }
65
-
66
- .gallery-slider-element {
67
- --text-high-contrast-rgb-value: 49, 49, 49;
68
- --detail-medium-contrast: rgb(234, 234, 234);
69
- --text-body: rgb(54, 49, 61);
70
-
71
- position: relative;
72
- background-color: var(
73
- --_ctm-mob-dn-gy-wt-se-bd-cr,
74
- var(--_ctm-tab-dn-gy-wt-se-bd-cr, var(--_ctm-dn-gy-wt-se-bd-cr))
75
- );
76
-
77
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
78
-
79
- display: flex;
80
- flex-direction: column;
81
-
82
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
83
-
84
- gap: var(
85
- --_ctm-mob-dn-gy-wt-lt-gy-tt-ad-im-sg,
86
- var(--_ctm-tab-dn-gy-wt-lt-gy-tt-ad-im-sg, var(--_ctm-dn-gy-wt-lt-gy-tt-ad-im-sg))
87
- );
88
-
89
- width: 100%;
90
- height: 100%;
91
-
92
- border-color: var(
93
- --_ctm-mob-dn-gy-wt-se-br-cr,
94
- var(--_ctm-tab-dn-gy-wt-se-br-cr, var(--_ctm-dn-gy-wt-se-br-cr))
95
- );
96
-
97
- border-style: var(
98
- --_ctm-mob-dn-gy-wt-se-br-se,
99
- var(--_ctm-tab-dn-gy-wt-se-br-se, var(--_ctm-dn-gy-wt-se-br-se))
100
- );
101
-
102
- border-width: var(
103
- --_ctm-mob-dn-gy-wt-se-br-wh,
104
- var(--_ctm-tab-dn-gy-wt-se-br-wh, var(--_ctm-dn-gy-wt-se-br-wh))
105
- );
106
-
107
- border-radius: var(
108
- --_ctm-mob-dn-gy-wt-se-br-rs,
109
- var(--_ctm-tab-dn-gy-wt-se-br-rs, var(--_ctm-dn-gy-wt-se-br-rs))
110
- );
111
-
112
- box-shadow: var(
113
- --_show-shadow,
114
- var(
115
- --_ctm-mob-dn-gy-wt-se-sw-ae,
116
- var(--_ctm-tab-dn-gy-wt-se-sw-ae, var(--_ctm-dn-gy-wt-se-sw-ae))
117
- )
118
- var(
119
- --_ctm-mob-dn-gy-wt-se-sw-br,
120
- var(--_ctm-tab-dn-gy-wt-se-sw-br, var(--_ctm-dn-gy-wt-se-sw-br))
121
- )
122
- var(
123
- --_ctm-mob-dn-gy-wt-se-sw-sd,
124
- var(--_ctm-tab-dn-gy-wt-se-sw-sd, var(--_ctm-dn-gy-wt-se-sw-sd))
125
- )
126
- var(
127
- --_ctm-mob-dn-gy-wt-se-sw-cr,
128
- var(--_ctm-tab-dn-gy-wt-se-sw-cr, var(--_ctm-dn-gy-wt-se-sw-cr))
129
- )
130
- );
131
-
132
- .gallery-header {
133
- // text-align: var(--_ctm-dn-gy-lt-an, var(--_tst-dn-gy-lt-an));
134
- // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg));
135
- display: flex;
136
- flex-direction: column;
137
-
138
- gap: var(
139
- --_ctm-mob-dn-gy-wt-tt-cr-lt-te-ad-dn-sg,
140
- var(--_ctm-tab-dn-gy-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-gy-wt-tt-cr-lt-te-ad-dn-sg))
141
- );
142
-
143
- padding-block: var(
144
- --_ctm-mob-dn-gy-wt-tt-cr-lt-tt-vl-pg,
145
- var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-vl-pg))
146
- );
147
-
148
- padding-inline: var(
149
- --_ctm-mob-dn-gy-wt-tt-cr-lt-tt-hl-pg,
150
- var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-hl-pg))
151
- );
152
-
153
- background-color: var(
154
- --_ctm-mob-dn-gy-wt-tt-cr-dn-bd-cr,
155
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-bd-cr))
156
- );
157
-
158
- width: 100%;
159
-
160
- border-color: var(
161
- --_ctm-mob-dn-gy-wt-tt-cr-dn-br-cr,
162
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-br-cr))
163
- );
164
-
165
- border-style: var(
166
- --_ctm-mob-dn-gy-wt-tt-cr-dn-br-se,
167
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-se, var(--_ctm-dn-gy-wt-tt-cr-dn-br-se))
168
- );
169
-
170
- border-width: var(
171
- --_ctm-mob-dn-gy-wt-tt-cr-dn-br-wh,
172
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-wh, var(--_ctm-dn-gy-wt-tt-cr-dn-br-wh))
173
- );
174
-
175
- border-radius: var(
176
- --_ctm-mob-dn-gy-wt-tt-cr-dn-br-rs,
177
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-rs, var(--_ctm-dn-gy-wt-tt-cr-dn-br-rs))
178
- );
179
-
180
- box-shadow: var(
181
- --_show-shadow,
182
- var(
183
- --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-ae,
184
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-ae))
185
- )
186
- var(
187
- --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-br,
188
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-br, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-br))
189
- )
190
- var(
191
- --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-sd,
192
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-sd))
193
- )
194
- var(
195
- --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-cr,
196
- var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-cr))
197
- )
198
- );
199
-
200
- & h3 {
201
- color: var(
202
- --_ctm-mob-dn-gy-wt-se-cr,
203
- var(--_ctm-tab-dn-gy-wt-se-cr, var(--_ctm-dn-gy-wt-se-cr))
204
- );
205
- font-family: var(
206
- --_ctm-mob-dn-gy-wt-se-ft-fy,
207
- var(--_ctm-tab-dn-gy-wt-se-ft-fy, var(--_ctm-dn-gy-wt-se-ft-fy))
208
- );
209
- font-size: var(
210
- --_ctm-mob-dn-gy-wt-se-ft-se,
211
- var(--_ctm-tab-dn-gy-wt-se-ft-se, var(--_ctm-dn-gy-wt-se-ft-se))
212
- );
213
- font-weight: var(
214
- --_ctm-mob-dn-gy-wt-se-ft-wt,
215
- var(--_ctm-tab-dn-gy-wt-se-ft-wt, var(--_ctm-dn-gy-wt-se-ft-wt))
216
- );
217
- font-style: var(
218
- --_ctm-mob-dn-gy-wt-se-ft-se-ic,
219
- var(--_ctm-tab-dn-gy-wt-se-ft-se-ic, var(--_ctm-dn-gy-wt-se-ft-se-ic))
220
- );
221
- text-align: var(
222
- --_ctm-mob-dn-gy-wt-se-tt-an,
223
- var(--_ctm-tab-dn-gy-wt-se-tt-an, var(--_ctm-dn-gy-wt-se-tt-an))
224
- );
225
- letter-spacing: var(
226
- --_ctm-mob-dn-gy-wt-se-lr-sg,
227
- var(--_ctm-tab-dn-gy-wt-se-lr-sg, var(--_ctm-dn-gy-wt-se-lr-sg))
228
- );
229
- line-height: var(
230
- --_ctm-mob-dn-gy-wt-se-le-ht,
231
- var(--_ctm-tab-dn-gy-wt-se-le-ht, var(--_ctm-dn-gy-wt-se-le-ht))
232
- );
233
- text-decoration: var(
234
- --_ctm-mob-dn-gy-wt-se-ue,
235
- var(--_ctm-tab-dn-gy-wt-se-ue, var(--_ctm-dn-gy-wt-se-ue))
236
- );
237
- }
238
-
239
- & p {
240
- color: var(
241
- --_ctm-mob-dn-gy-wt-se-cr-dc,
242
- var(--_ctm-tab-dn-gy-wt-se-cr-dc, var(--_ctm-dn-gy-wt-se-cr-dc))
243
- );
244
- font-family: var(
245
- --_ctm-mob-dn-gy-wt-se-ft-fy-dc,
246
- var(--_ctm-tab-dn-gy-wt-se-ft-fy-dc, var(--_ctm-dn-gy-wt-se-ft-fy-dc))
247
- );
248
- font-size: var(
249
- --_ctm-mob-dn-gy-wt-se-ft-se-dc,
250
- var(--_ctm-tab-dn-gy-wt-se-ft-se-dc, var(--_ctm-dn-gy-wt-se-ft-se-dc))
251
- );
252
- font-weight: var(
253
- --_ctm-mob-dn-gy-wt-se-ft-wt-dc,
254
- var(--_ctm-tab-dn-gy-wt-se-ft-wt-dc, var(--_ctm-dn-gy-wt-se-ft-wt-dc))
255
- );
256
- font-style: var(
257
- --_ctm-mob-dn-gy-wt-se-ft-se-ic-dc,
258
- var(--_ctm-tab-dn-gy-wt-se-ft-se-ic-dc, var(--_ctm-dn-gy-wt-se-ft-se-ic-dc))
259
- );
260
- text-align: var(
261
- --_ctm-mob-dn-gy-wt-se-tt-an-dc,
262
- var(--_ctm-tab-dn-gy-wt-se-tt-an-dc, var(--_ctm-dn-gy-wt-se-tt-an-dc))
263
- );
264
- letter-spacing: var(
265
- --_ctm-mob-dn-gy-wt-se-lr-sg-dc,
266
- var(--_ctm-tab-dn-gy-wt-se-lr-sg-dc, var(--_ctm-dn-gy-wt-se-lr-sg-dc))
267
- );
268
- line-height: var(
269
- --_ctm-mob-dn-gy-wt-se-le-ht-dc,
270
- var(--_ctm-tab-dn-gy-wt-se-le-ht-dc, var(--_ctm-dn-gy-wt-se-le-ht-dc))
271
- );
272
- text-decoration: var(
273
- --_ctm-mob-dn-gy-wt-se-ue-dc,
274
- var(--_ctm-tab-dn-gy-wt-se-ue-dc, var(--_ctm-dn-gy-wt-se-ue-dc))
275
- );
276
- }
277
-
278
- // h3 {
279
- // margin-bottom: var(--_mb-4);
280
- // }
281
- }
282
- }
283
-
284
- &[data-text-position="top"] {
285
- .gallery-slider-element {
286
- flex-direction: column;
287
- }
288
- }
289
- &[data-text-position="bottom"] {
290
- .gallery-slider-element {
291
- flex-direction: column-reverse;
292
- }
293
- }
294
- &[data-text-position="left"] {
295
- .gallery-slider-element {
296
- flex-direction: row;
297
- }
298
- .gallery-header {
299
- width: fit-content;
300
- height: 100%;
301
- }
302
- &[data-widget-alignment="top"] {
303
- .gallery-slider-element {
304
- align-items: flex-start;
305
- }
306
- .gallery-header {
307
- justify-content: flex-start;
308
- }
309
- }
310
- &[data-widget-alignment="center"] {
311
- .gallery-slider-element {
312
- align-items: center;
313
- }
314
- .gallery-header {
315
- justify-content: center;
316
- }
317
- }
318
- &[data-widget-alignment="bottom"] {
319
- .gallery-slider-element {
320
- align-items: flex-end;
321
- }
322
- .gallery-header {
323
- justify-content: flex-end;
324
- }
325
- }
326
- }
327
- &[data-text-position="right"] {
328
- .gallery-header {
329
- width: fit-content;
330
- height: 100%;
331
- }
332
- .gallery-slider-element {
333
- flex-direction: row-reverse;
334
- }
335
-
336
- &[data-widget-alignment="top"] {
337
- .gallery-slider-element {
338
- align-items: flex-start;
339
- }
340
- .gallery-header {
341
- justify-content: flex-start;
342
- }
343
- }
344
- &[data-widget-alignment="center"] {
345
- .gallery-slider-element {
346
- align-items: center;
347
- }
348
- .gallery-header {
349
- justify-content: center;
350
- }
351
- }
352
- &[data-widget-alignment="bottom"] {
353
- .gallery-slider-element {
354
- align-items: flex-end;
355
- }
356
- .gallery-header {
357
- justify-content: flex-end;
358
- }
359
- }
360
- }
361
- .embla {
362
- width: 100%;
363
- height: 100%;
364
- position: relative;
365
- display: flex;
366
- flex-direction: column;
367
- // overflow: hidden;
368
-
369
- .embla__viewport {
370
- width: 100%;
371
- height: 100%;
372
- position: relative;
373
- display: flex;
374
- flex-direction: column;
375
-
376
- overflow: hidden;
377
-
378
- .embla__container {
379
- width: 100%;
380
- height: 100%;
381
- display: grid;
382
- grid-template-rows: 100%;
383
-
384
- grid-template-columns: repeat(
385
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
386
- calc(
387
- 100% /
388
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
389
- )
390
- );
391
-
392
- grid-auto-flow: column;
393
- gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
394
-
395
- &[data-control-type="Bottom"][data-slider-control="Arrows"] {
396
- height: calc(
397
- 100% - calc(
398
- var(
399
- --_ctm-mob-dn-pn-as-aw-se,
400
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
401
- ) +
402
- 10px
403
- )
404
- );
405
- }
406
-
407
- &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
408
- height: calc(
409
- 100% - calc(
410
- var(
411
- --_ctm-mob-dn-pn-le-le-ht,
412
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
413
- ) +
414
- 20px
415
- )
416
- );
417
- }
418
-
419
- &[data-control-type="Bottom"][data-slider-control="Dots"] {
420
- height: calc(
421
- 100% - calc(
422
- var(
423
- --_ctm-mob-dn-pn-ds-dt-se,
424
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
425
- ) +
426
- 20px
427
- )
428
- );
429
- }
430
-
431
- .embla__slide {
432
- width: 100%;
433
- height: 100%;
434
- }
435
- }
436
- }
437
- &:not([data-display-style="Column"]) {
438
- .embla__container {
439
- grid-auto-columns: calc(
440
- 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
441
- );
442
- }
443
- }
444
-
445
- &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
446
- // overflow: unset;
447
-
448
- .embla__viewport {
449
- overflow: unset;
450
- height: 80%;
451
- flex-grow: 1;
452
- &:not([data-is-builder-type="true"]) {
453
- height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
454
- }
455
-
456
- .embla__container {
457
- overflow: unset;
458
- height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
459
- // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
460
-
461
- grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
462
- grid-template-rows: unset;
463
-
464
- grid-auto-flow: row;
465
-
466
- &[data-overflow-hidden="true"] {
467
- overflow: hidden;
468
- }
469
- }
470
- }
471
- }
472
-
473
- &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
474
- .embla__viewport {
475
- .embla__container {
476
- grid-template-rows: repeat(
477
- var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
478
- calc(
479
- 100% /
480
- var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
481
- )
482
- );
483
- }
484
- }
485
- }
486
-
487
- &[data-display-style="Rows"] {
488
- // overflow: unset;
489
-
490
- .embla__viewport {
491
- overflow: unset;
492
- height: 80%;
493
- flex-grow: 1;
494
-
495
- &:not([data-is-builder-type="true"]) {
496
- height: var(--_ctm-height);
497
- }
498
-
499
- .embla__container {
500
- overflow: hidden;
501
- height: var(--_ctm-height);
502
- // min-height: var(--_ctm-height);
503
-
504
- grid-template-columns: repeat(
505
- var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
506
- 1fr
507
- );
508
- grid-template-rows: unset;
509
- grid-auto-flow: row;
510
- }
511
- }
512
- }
513
-
514
- &[data-display-style="Column"] {
515
- // overflow: unset;
516
-
517
- .embla__viewport {
518
- .embla__container {
519
- display: flex;
520
- .embla__slide {
521
- width: unset;
522
- height: 100%;
523
- aspect-ratio: 1 / 2;
524
- }
525
- }
526
- }
527
- }
528
- &[data-display-style="Masonry"] {
529
- // overflow: unset;
530
-
531
- .embla__viewport {
532
- overflow: hidden;
533
- height: 80%;
534
- flex-grow: 1;
535
-
536
- &:not([data-is-builder-type="true"]) {
537
- height: var(--_ctm-height);
538
- }
539
-
540
- .embla__container {
541
- overflow: unset;
542
- display: block;
543
-
544
- column-count: var(
545
- --_ctm-mob-lt-is-pr-rw,
546
- var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))
547
- );
548
- gap: unset;
549
-
550
- column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
551
-
552
- height: auto;
553
-
554
- .embla__slide {
555
- margin-bottom: var(
556
- --_ctm-mob-lt-im-gp,
557
- var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))
558
- );
559
- height: unset;
560
-
561
- .gallery__slide {
562
- height: unset;
563
- }
564
- }
565
- }
566
- }
567
- }
568
-
569
- .arrow-navigation {
570
- display: flex;
571
- position: absolute;
572
- top: 50%;
573
- left: 50%;
574
- width: 100%;
575
- justify-content: space-between;
576
- transform: translate(-50%, -50%);
577
- // padding-left: 20px;
578
-
579
- &[data-control-type="Bottom-Overflow"] {
580
- transform: translateX(-50%);
581
- width: 100%;
582
- justify-content: center;
583
- gap: 12px;
584
- top: unset;
585
- bottom: 6px;
586
- }
587
- &[data-control-type="Bottom"] {
588
- transform: unset;
589
- position: static;
590
- width: 100%;
591
- justify-content: center;
592
- gap: 12px;
593
- margin-top: 10px;
594
- }
595
- }
596
- .left-button {
597
- padding: 10px;
598
- border-radius: 50%;
599
- border: none;
600
- width: var(
601
- --_ctm-mob-dn-pn-as-aw-se,
602
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
603
- );
604
- height: var(
605
- --_ctm-mob-dn-pn-as-aw-se,
606
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
607
- );
608
-
609
- display: flex;
610
- align-items: center;
611
- justify-content: center;
612
- cursor: pointer;
613
- outline: none;
614
- margin-left: 12px;
615
- &:disabled {
616
- & svg {
617
- path {
618
- stroke: rgb(192, 192, 192);
619
- }
620
- }
621
- }
622
- }
623
- .right-button {
624
- border-radius: 50%;
625
- border: none;
626
- width: var(
627
- --_ctm-mob-dn-pn-as-aw-se,
628
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
629
- );
630
- height: var(
631
- --_ctm-mob-dn-pn-as-aw-se,
632
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
633
- );
634
-
635
- display: flex;
636
- align-items: center;
637
- justify-content: center;
638
- cursor: pointer;
639
- outline: none;
640
- margin-right: 12px;
641
- padding: 10px;
642
-
643
- &:disabled {
644
- & svg {
645
- path {
646
- stroke: rgb(192, 192, 192);
647
- }
648
- }
649
- }
650
- }
651
- .icon {
652
- display: flex;
653
-
654
- svg {
655
- width: calc(
656
- var(
657
- --_ctm-mob-dn-pn-as-aw-se,
658
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
659
- ) *
660
- 0.5
661
- );
662
- height: calc(
663
- var(
664
- --_ctm-mob-dn-pn-as-aw-se,
665
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
666
- ) *
667
- 0.5
668
- );
669
-
670
- path {
671
- stroke: var(
672
- --_ctm-mob-dn-pn-as-aw-cr,
673
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
674
- );
675
- }
676
- }
677
- }
678
-
679
- &[data-control-type="Side"] {
680
- .left-button,
681
- .right-button {
682
- background-color: transparent;
683
- }
684
- }
685
- &[data-background-shape="Round"] {
686
- .left-button,
687
- .right-button {
688
- background-color: #f2f5f5;
689
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
690
- }
691
- }
692
-
693
- &[data-control-type="Side"] {
694
- .embla__viewport {
695
- width: calc(100% - 120px);
696
- margin-inline: auto;
697
- }
698
- .left-button {
699
- position: absolute;
700
- left: 0;
701
- top: 50%;
702
- transform: translateY(-50%);
703
- }
704
- .right-button {
705
- position: absolute;
706
-
707
- right: 0;
708
- top: 50%;
709
- transform: translateY(-50%);
710
- }
711
- }
712
-
713
- &[data-thumbnail-placement="top"] {
714
- flex-direction: column-reverse;
715
- }
716
- &[data-thumbnail-placement="bottom"] {
717
- flex-direction: column;
718
- }
719
- &[data-thumbnail-placement="left"] {
720
- flex-direction: row-reverse;
721
-
722
- .embla__thumbs {
723
- width: var(--_ctm-lt-tl-se);
724
- height: 100%;
725
-
726
- & .embla__thumbs__container {
727
- flex-direction: column;
728
- height: 100%;
729
- }
730
- }
731
- }
732
- &[data-thumbnail-placement="right"] {
733
- flex-direction: row;
734
- .embla__thumbs {
735
- width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
736
-
737
- height: 100%;
738
-
739
- & .embla__thumbs__container {
740
- flex-direction: column;
741
- height: 100%;
742
- }
743
- }
744
- }
745
- .embla__dots {
746
- display: flex;
747
- flex-wrap: wrap;
748
- justify-content: center;
749
- align-items: center;
750
- margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
751
- gap: 6px;
752
- margin-top: 16px;
753
-
754
- &[data-control-type="Bottom-Overflow"] {
755
- position: absolute;
756
- bottom: 10px;
757
- left: 50%;
758
- transform: translateX(-50%);
759
- width: 75%;
760
- }
761
- .embla__dot {
762
- -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
763
- -webkit-appearance: none;
764
- appearance: none;
765
- background-color: var(
766
- --_ctm-mob-dn-pn-ds-or-dt-cr,
767
- var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
768
- );
769
-
770
- touch-action: manipulation;
771
- display: inline-flex;
772
- text-decoration: none;
773
- cursor: pointer;
774
- border: 0;
775
- padding: 0;
776
- margin: 0;
777
- // width: 0.6rem;
778
- // height: 0.6rem;
779
- width: var(
780
- --_ctm-mob-dn-pn-ds-dt-se,
781
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
782
- );
783
- height: var(
784
- --_ctm-mob-dn-pn-ds-dt-se,
785
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
786
- );
787
-
788
- display: flex;
789
- align-items: center;
790
- justify-content: center;
791
- border-radius: 50%;
792
- }
793
- .embla__dot:after {
794
- // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
795
- width: var(
796
- --_ctm-mob-dn-pn-ds-dt-se,
797
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
798
- );
799
- height: var(
800
- --_ctm-mob-dn-pn-ds-dt-se,
801
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
802
- );
803
-
804
- border-radius: 50%;
805
- display: flex;
806
- align-items: center;
807
- content: "";
808
- }
809
- .embla__dot--selected:after {
810
- box-shadow: inset 0 0 0 1px var(--text-body);
811
- background-color: var(
812
- --_ctm-mob-dn-pn-ds-ct-dt-cr,
813
- var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
814
- );
815
- }
816
- &[data-slider-control="Pagination Line"] {
817
- .embla__dot {
818
- width: var(
819
- --_ctm-mob-dn-pn-le-le-wh,
820
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
821
- );
822
- height: var(
823
- --_ctm-mob-dn-pn-le-le-ht,
824
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
825
- );
826
- background-color: var(
827
- --_ctm-mob-dn-pn-le-or-le-cr,
828
- var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
829
- );
830
- border-radius: 6px;
831
- }
832
-
833
- .embla__dot--selected:after {
834
- box-shadow: inset 0 0 0 1px var(--text-body);
835
- border-radius: 6px;
836
- width: var(
837
- --_ctm-mob-dn-pn-le-le-wh,
838
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
839
- );
840
- height: var(
841
- --_ctm-mob-dn-pn-le-le-ht,
842
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
843
- );
844
- background-color: var(
845
- --_ctm-mob-dn-pn-le-ct-le-cr,
846
- var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
847
- );
848
- }
849
- }
850
- }
851
-
852
- .embla__thumbs {
853
- width: 100%;
854
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
855
-
856
- position: relative;
857
- display: grid;
858
- grid-template-columns: 1fr;
859
- overflow: hidden;
860
- // margin: 10px;
861
- padding: 10px;
862
-
863
- .embla__thumbs__viewport {
864
- width: 100%;
865
- height: 100%;
866
- position: relative;
867
- display: flex;
868
- flex-direction: column;
869
-
870
- overflow: hidden;
871
- }
872
- .embla__thumbs__container {
873
- display: flex;
874
- flex-direction: row;
875
- margin-left: calc(var(--thumbs-slide-spacing) * -1);
876
- gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
877
-
878
- width: 100%;
879
- // justify-content: center;
880
- // height: 200px;
881
-
882
- .embla__thumbs__slide {
883
- min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
884
- max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
885
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
886
-
887
- & img {
888
- width: 100%;
889
- height: 100%;
890
- }
891
- }
892
- }
893
- }
894
- }
895
-
896
- .gallery__slide {
897
- width: 100%;
898
- height: 100%;
899
- display: flex;
900
- // flex-direction: column;
901
-
902
- background-color: var(
903
- --_ctm-mob-dn-im-se-bd-cr,
904
- var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
905
- );
906
-
907
- border-color: var(
908
- --_ctm-mob-dn-im-se-br-cr,
909
- var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
910
- );
911
-
912
- border-style: var(
913
- --_ctm-mob-dn-im-se-br-se,
914
- var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
915
- );
916
-
917
- border-width: var(
918
- --_ctm-mob-dn-im-se-br-wh,
919
- var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
920
- );
921
-
922
- border-radius: var(
923
- --_ctm-mob-dn-im-se-br-rs,
924
- var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
925
- );
926
-
927
- box-shadow: var(
928
- --_show-shadow,
929
- var(--_ctm-mob-dn-im-se-sw-ae, var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae)))
930
- var(--_ctm-mob-dn-im-se-sw-br, var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br)))
931
- var(--_ctm-mob-dn-im-se-sw-sd, var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd)))
932
- var(--_ctm-mob-dn-im-se-sw-cr, var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr)))
933
- );
934
-
935
- gap: var(
936
- --_ctm-mob-dn-im-lt-gy-tt-ad-im-sg,
937
- var(--_ctm-tab-dn-im-lt-gy-tt-ad-im-sg, var(--_ctm-dn-im-lt-gy-tt-ad-im-sg))
938
- );
939
-
940
- .gallery-header {
941
- // text-align: var(--_ctm-dn-gy-lt-an, var(--_tst-dn-gy-lt-an));
942
- // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg));
943
- display: flex;
944
- flex-direction: column;
945
-
946
- gap: var(
947
- --_ctm-mob-dn-im-tt-cr-lt-te-ad-dn-sg,
948
- var(--_ctm-tab-dn-im-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-im-tt-cr-lt-te-ad-dn-sg))
949
- );
950
-
951
- padding-block: var(
952
- --_ctm-mob-dn-im-tt-cr-lt-tt-vl-pg,
953
- var(--_ctm-tab-dn-im-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-vl-pg))
954
- );
955
-
956
- padding-inline: var(
957
- --_ctm-mob-dn-im-tt-cr-lt-tt-hl-pg,
958
- var(--_ctm-tab-dn-im-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-hl-pg))
959
- );
960
-
961
- background-color: var(
962
- --_ctm-mob-dn-im-tt-cr-dn-bd-cr,
963
- var(--_ctm-tab-dn-im-tt-cr-dn-bd-cr, var(--_ctm-dn-im-tt-cr-dn-bd-cr))
964
- );
965
-
966
- width: 100%;
967
-
968
- border-color: var(
969
- --_ctm-mob-dn-im-tt-cr-dn-br-cr,
970
- var(--_ctm-tab-dn-im-tt-cr-dn-br-cr, var(--_ctm-dn-im-tt-cr-dn-br-cr))
971
- );
972
-
973
- border-style: var(
974
- --_ctm-mob-dn-im-tt-cr-dn-br-se,
975
- var(--_ctm-tab-dn-im-tt-cr-dn-br-se, var(--_ctm-dn-im-tt-cr-dn-br-se))
976
- );
977
-
978
- border-width: var(
979
- --_ctm-mob-dn-im-tt-cr-dn-br-wh,
980
- var(--_ctm-tab-dn-im-tt-cr-dn-br-wh, var(--_ctm-dn-im-tt-cr-dn-br-wh))
981
- );
982
-
983
- border-radius: var(
984
- --_ctm-mob-dn-im-tt-cr-dn-br-rs,
985
- var(--_ctm-tab-dn-im-tt-cr-dn-br-rs, var(--_ctm-dn-im-tt-cr-dn-br-rs))
986
- );
987
-
988
- box-shadow: var(
989
- --_show-shadow,
990
- var(
991
- --_ctm-mob-dn-im-tt-cr-dn-sw-ae,
992
- var(--_ctm-tab-dn-im-tt-cr-dn-sw-ae, var(--_ctm-dn-im-tt-cr-dn-sw-ae))
993
- )
994
- var(
995
- --_ctm-mob-dn-im-tt-cr-dn-sw-br,
996
- var(--_ctm-tab-dn-im-tt-cr-dn-sw-br, var(--_ctm-dn-im-tt-cr-dn-sw-br))
997
- )
998
- var(
999
- --_ctm-mob-dn-im-tt-cr-dn-sw-sd,
1000
- var(--_ctm-tab-dn-im-tt-cr-dn-sw-sd, var(--_ctm-dn-im-tt-cr-dn-sw-sd))
1001
- )
1002
- var(
1003
- --_ctm-mob-dn-im-tt-cr-dn-sw-cr,
1004
- var(--_ctm-tab-dn-im-tt-cr-dn-sw-cr, var(--_ctm-dn-im-tt-cr-dn-sw-cr))
1005
- )
1006
- );
1007
-
1008
- & h3 {
1009
- color: var(--_ctm-mob-dn-im-se-cr, var(--_ctm-tab-dn-im-se-cr, var(--_ctm-dn-im-se-cr)));
1010
-
1011
- font-family: var(
1012
- --_ctm-mob-dn-im-se-ft-fy,
1013
- var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy))
1014
- );
1015
-
1016
- font-size: var(
1017
- --_ctm-mob-dn-im-se-ft-se,
1018
- var(--_ctm-tab-dn-im-se-ft-se, var(--_ctm-dn-im-se-ft-se))
1019
- );
1020
-
1021
- font-weight: var(
1022
- --_ctm-mob-dn-im-se-ft-wt,
1023
- var(--_ctm-tab-dn-im-se-ft-wt, var(--_ctm-dn-im-se-ft-wt))
1024
- );
1025
-
1026
- font-style: var(
1027
- --_ctm-mob-dn-im-se-ft-se-ic,
1028
- var(--_ctm-tab-dn-im-se-ft-se-ic, var(--_ctm-dn-im-se-ft-se-ic))
1029
- );
1030
-
1031
- text-align: var(
1032
- --_ctm-mob-dn-im-se-tt-an,
1033
- var(--_ctm-tab-dn-im-se-tt-an, var(--_ctm-dn-im-se-tt-an))
1034
- );
1035
-
1036
- letter-spacing: var(
1037
- --_ctm-mob-dn-im-se-lr-sg,
1038
- var(--_ctm-tab-dn-im-se-lr-sg, var(--_ctm-dn-im-se-lr-sg))
1039
- );
1040
-
1041
- line-height: var(
1042
- --_ctm-mob-dn-im-se-le-ht,
1043
- var(--_ctm-tab-dn-im-se-le-ht, var(--_ctm-dn-im-se-le-ht))
1044
- );
1045
-
1046
- text-decoration: var(
1047
- --_ctm-mob-dn-im-se-ue,
1048
- var(--_ctm-tab-dn-im-se-ue, var(--_ctm-dn-im-se-ue))
1049
- );
1050
- }
1051
-
1052
- & p {
1053
- color: var(
1054
- --_ctm-mob-dn-im-se-cr-dc,
1055
- var(--_ctm-tab-dn-im-se-cr-dc, var(--_ctm-dn-im-se-cr-dc))
1056
- );
1057
-
1058
- font-family: var(
1059
- --_ctm-mob-dn-im-se-ft-fy-dc,
1060
- var(--_ctm-tab-dn-im-se-ft-fy-dc, var(--_ctm-dn-im-se-ft-fy-dc))
1061
- );
1062
-
1063
- font-size: var(
1064
- --_ctm-mob-dn-im-se-ft-se-dc,
1065
- var(--_ctm-tab-dn-im-se-ft-se-dc, var(--_ctm-dn-im-se-ft-se-dc))
1066
- );
1067
-
1068
- font-weight: var(
1069
- --_ctm-mob-dn-im-se-ft-wt-dc,
1070
- var(--_ctm-tab-dn-im-se-ft-wt-dc, var(--_ctm-dn-im-se-ft-wt-dc))
1071
- );
1072
-
1073
- font-style: var(
1074
- --_ctm-mob-dn-im-se-ft-se-ic-dc,
1075
- var(--_ctm-tab-dn-im-se-ft-se-ic-dc, var(--_ctm-dn-im-se-ft-se-ic-dc))
1076
- );
1077
-
1078
- text-align: var(
1079
- --_ctm-mob-dn-im-se-tt-an-dc,
1080
- var(--_ctm-tab-dn-im-se-tt-an-dc, var(--_ctm-dn-im-se-tt-an-dc))
1081
- );
1082
-
1083
- letter-spacing: var(
1084
- --_ctm-mob-dn-im-se-lr-sg-dc,
1085
- var(--_ctm-tab-dn-im-se-lr-sg-dc, var(--_ctm-dn-im-se-lr-sg-dc))
1086
- );
1087
-
1088
- line-height: var(
1089
- --_ctm-mob-dn-im-se-le-ht-dc,
1090
- var(--_ctm-tab-dn-im-se-le-ht-dc, var(--_ctm-dn-im-se-le-ht-dc))
1091
- );
1092
-
1093
- text-decoration: var(
1094
- --_ctm-mob-dn-im-se-ue-dc,
1095
- var(--_ctm-tab-dn-im-se-ue-dc, var(--_ctm-dn-im-se-ue-dc))
1096
- );
1097
- }
1098
-
1099
- // h3 {
1100
- // margin-bottom: var(--_mb-4);
1101
- // }
1102
- }
1103
- > img {
1104
- object-fit: cover;
1105
- }
1106
- &[data-text-position="On Image"] {
1107
- .gallery-header {
1108
- width: 100%;
1109
- // height: 100%;
1110
- position: absolute;
1111
- }
1112
-
1113
- &[data-widget-alignment="top"] {
1114
- // align-items: flex-start;
1115
-
1116
- .gallery-header {
1117
- top: 0;
1118
-
1119
- justify-content: flex-start;
1120
- }
1121
- }
1122
- &[data-widget-alignment="center"] {
1123
- // align-items: center;
1124
-
1125
- .gallery-header {
1126
- top: 50%;
1127
- transform: translateY(-50%);
1128
- justify-content: center;
1129
- }
1130
- }
1131
- &[data-widget-alignment="bottom"] {
1132
- // align-items: flex-end;
1133
- .gallery-header {
1134
- bottom: 0;
1135
-
1136
- justify-content: flex-end;
1137
- }
1138
- }
1139
- }
1140
-
1141
- &[data-text-position="top"] {
1142
- flex-direction: column;
1143
- }
1144
-
1145
- &[data-text-position="bottom"] {
1146
- flex-direction: column-reverse;
1147
- }
1148
- &[data-text-position="left"] {
1149
- flex-direction: row;
1150
-
1151
- .gallery-header {
1152
- width: fit-content;
1153
- height: 100%;
1154
- }
1155
- &[data-widget-alignment="top"] {
1156
- align-items: flex-start;
1157
-
1158
- .gallery-header {
1159
- justify-content: flex-start;
1160
- }
1161
- }
1162
- &[data-widget-alignment="center"] {
1163
- align-items: center;
1164
-
1165
- .gallery-header {
1166
- justify-content: center;
1167
- }
1168
- }
1169
- &[data-widget-alignment="bottom"] {
1170
- align-items: flex-end;
1171
-
1172
- .gallery-header {
1173
- justify-content: flex-end;
1174
- }
1175
- }
1176
- }
1177
- &[data-text-position="right"] {
1178
- flex-direction: row-reverse;
1179
- .gallery-header {
1180
- width: fit-content;
1181
- height: 100%;
1182
- }
1183
-
1184
- &[data-widget-alignment="top"] {
1185
- align-items: flex-start;
1186
-
1187
- .gallery-header {
1188
- justify-content: flex-start;
1189
- }
1190
- }
1191
- &[data-widget-alignment="center"] {
1192
- align-items: center;
1193
-
1194
- .gallery-header {
1195
- justify-content: center;
1196
- }
1197
- }
1198
- &[data-widget-alignment="bottom"] {
1199
- align-items: flex-end;
1200
-
1201
- .gallery-header {
1202
- justify-content: flex-end;
1203
- }
1204
- }
1205
- }
1206
- & > img {
1207
- width: 100%;
1208
- height: 100%;
1209
- // object-fit: cover;
1210
-
1211
- // object-fit: var(--_ctm-dn-im-se-ot-ft, var(--_tst-dn-im-se-ot-ft));
1212
- // object-fit: cover;
1213
-
1214
- &[data-has-title="true"] {
1215
- height: 85%;
1216
- }
1217
-
1218
- /* display: block; */
1219
- }
1220
- }
1221
-
1222
- .load__more__div {
1223
- display: flex;
1224
- justify-content: center;
1225
- margin-block: 12px;
1226
- & > button {
1227
- padding-inline: 24px;
1228
- border: 1px solid gray;
1229
- padding-block: 12px;
1230
- border-radius: 6px;
1231
- }
1232
- }
1233
- }
1234
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+ [data-div-type="element"] {
5
+ &[data-element-type="gallerySlider"] {
6
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
7
+ width: var(
8
+ --_sf-el-wh-st-mx,
9
+ calc(
10
+ 1% *
11
+ var(
12
+ --_ctm-mob-ele-nw-wh-vl,
13
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
14
+ )
15
+ )
16
+ );
17
+ // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
18
+ &:not(:has([data-display-style="Grid"][data-scroll-direction="Vertical"])) {
19
+ height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
20
+ }
21
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
22
+
23
+ --_aspect-ratio: calc(
24
+ 1 *
25
+ (
26
+ var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht, var(--_tst-lt-ht)))) /
27
+ var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh, var(--_tst-lt-wh))))
28
+ )
29
+ );
30
+ &[data-view-state="full"] {
31
+ // aspect-ratio: 1/0.01;
32
+ & > .wrapper {
33
+ & > div {
34
+ height: 100%;
35
+ }
36
+ }
37
+ img {
38
+ height: 100%;
39
+ object-fit: cover;
40
+ }
41
+ }
42
+
43
+ .arrow-navigation {
44
+ pointer-events: none;
45
+ }
46
+ .arrow-navigation > button {
47
+ pointer-events: all;
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
+ & > .wrapper {
60
+ width: 100%;
61
+ height: 100%;
62
+ }
63
+ &[data-show-shadow="false"] {
64
+ --_show-shadow: none;
65
+ }
66
+
67
+ .gallery-slider-element {
68
+ --text-high-contrast-rgb-value: 49, 49, 49;
69
+ --detail-medium-contrast: rgb(234, 234, 234);
70
+ --text-body: rgb(54, 49, 61);
71
+
72
+ position: relative;
73
+ background-color: var(
74
+ --_ctm-mob-dn-gy-wt-se-bd-cr,
75
+ var(--_ctm-tab-dn-gy-wt-se-bd-cr, var(--_ctm-dn-gy-wt-se-bd-cr))
76
+ );
77
+
78
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
79
+
80
+ display: flex;
81
+ flex-direction: column;
82
+
83
+ --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
84
+
85
+ gap: var(
86
+ --_ctm-mob-dn-gy-wt-lt-gy-tt-ad-im-sg,
87
+ var(--_ctm-tab-dn-gy-wt-lt-gy-tt-ad-im-sg, var(--_ctm-dn-gy-wt-lt-gy-tt-ad-im-sg))
88
+ );
89
+
90
+ width: 100%;
91
+ height: 100%;
92
+
93
+ border-color: var(
94
+ --_ctm-mob-dn-gy-wt-se-br-cr,
95
+ var(--_ctm-tab-dn-gy-wt-se-br-cr, var(--_ctm-dn-gy-wt-se-br-cr))
96
+ );
97
+
98
+ border-style: var(
99
+ --_ctm-mob-dn-gy-wt-se-br-se,
100
+ var(--_ctm-tab-dn-gy-wt-se-br-se, var(--_ctm-dn-gy-wt-se-br-se))
101
+ );
102
+
103
+ border-width: var(
104
+ --_ctm-mob-dn-gy-wt-se-br-wh,
105
+ var(--_ctm-tab-dn-gy-wt-se-br-wh, var(--_ctm-dn-gy-wt-se-br-wh))
106
+ );
107
+
108
+ border-radius: var(
109
+ --_ctm-mob-dn-gy-wt-se-br-rs,
110
+ var(--_ctm-tab-dn-gy-wt-se-br-rs, var(--_ctm-dn-gy-wt-se-br-rs))
111
+ );
112
+
113
+ box-shadow: var(
114
+ --_show-shadow,
115
+ var(
116
+ --_ctm-mob-dn-gy-wt-se-sw-ae,
117
+ var(--_ctm-tab-dn-gy-wt-se-sw-ae, var(--_ctm-dn-gy-wt-se-sw-ae))
118
+ )
119
+ var(
120
+ --_ctm-mob-dn-gy-wt-se-sw-br,
121
+ var(--_ctm-tab-dn-gy-wt-se-sw-br, var(--_ctm-dn-gy-wt-se-sw-br))
122
+ )
123
+ var(
124
+ --_ctm-mob-dn-gy-wt-se-sw-sd,
125
+ var(--_ctm-tab-dn-gy-wt-se-sw-sd, var(--_ctm-dn-gy-wt-se-sw-sd))
126
+ )
127
+ var(
128
+ --_ctm-mob-dn-gy-wt-se-sw-cr,
129
+ var(--_ctm-tab-dn-gy-wt-se-sw-cr, var(--_ctm-dn-gy-wt-se-sw-cr))
130
+ )
131
+ );
132
+
133
+ .gallery-header {
134
+ // text-align: var(--_ctm-dn-gy-lt-an, var(--_tst-dn-gy-lt-an));
135
+ // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg));
136
+ display: flex;
137
+ flex-direction: column;
138
+
139
+ gap: var(
140
+ --_ctm-mob-dn-gy-wt-tt-cr-lt-te-ad-dn-sg,
141
+ var(--_ctm-tab-dn-gy-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-gy-wt-tt-cr-lt-te-ad-dn-sg))
142
+ );
143
+
144
+ padding-block: var(
145
+ --_ctm-mob-dn-gy-wt-tt-cr-lt-tt-vl-pg,
146
+ var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-vl-pg))
147
+ );
148
+
149
+ padding-inline: var(
150
+ --_ctm-mob-dn-gy-wt-tt-cr-lt-tt-hl-pg,
151
+ var(--_ctm-tab-dn-gy-wt-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-gy-wt-tt-cr-lt-tt-hl-pg))
152
+ );
153
+
154
+ background-color: var(
155
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-bd-cr,
156
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-bd-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-bd-cr))
157
+ );
158
+
159
+ width: 100%;
160
+
161
+ border-color: var(
162
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-br-cr,
163
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-br-cr))
164
+ );
165
+
166
+ border-style: var(
167
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-br-se,
168
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-se, var(--_ctm-dn-gy-wt-tt-cr-dn-br-se))
169
+ );
170
+
171
+ border-width: var(
172
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-br-wh,
173
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-wh, var(--_ctm-dn-gy-wt-tt-cr-dn-br-wh))
174
+ );
175
+
176
+ border-radius: var(
177
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-br-rs,
178
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-br-rs, var(--_ctm-dn-gy-wt-tt-cr-dn-br-rs))
179
+ );
180
+
181
+ box-shadow: var(
182
+ --_show-shadow,
183
+ var(
184
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-ae,
185
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-ae, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-ae))
186
+ )
187
+ var(
188
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-br,
189
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-br, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-br))
190
+ )
191
+ var(
192
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-sd,
193
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-sd, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-sd))
194
+ )
195
+ var(
196
+ --_ctm-mob-dn-gy-wt-tt-cr-dn-sw-cr,
197
+ var(--_ctm-tab-dn-gy-wt-tt-cr-dn-sw-cr, var(--_ctm-dn-gy-wt-tt-cr-dn-sw-cr))
198
+ )
199
+ );
200
+
201
+ & h3 {
202
+ color: var(
203
+ --_ctm-mob-dn-gy-wt-se-cr,
204
+ var(--_ctm-tab-dn-gy-wt-se-cr, var(--_ctm-dn-gy-wt-se-cr))
205
+ );
206
+ font-family: var(
207
+ --_ctm-mob-dn-gy-wt-se-ft-fy,
208
+ var(--_ctm-tab-dn-gy-wt-se-ft-fy, var(--_ctm-dn-gy-wt-se-ft-fy))
209
+ );
210
+ font-size: var(
211
+ --_ctm-mob-dn-gy-wt-se-ft-se,
212
+ var(--_ctm-tab-dn-gy-wt-se-ft-se, var(--_ctm-dn-gy-wt-se-ft-se))
213
+ );
214
+ font-weight: var(
215
+ --_ctm-mob-dn-gy-wt-se-ft-wt,
216
+ var(--_ctm-tab-dn-gy-wt-se-ft-wt, var(--_ctm-dn-gy-wt-se-ft-wt))
217
+ );
218
+ font-style: var(
219
+ --_ctm-mob-dn-gy-wt-se-ft-se-ic,
220
+ var(--_ctm-tab-dn-gy-wt-se-ft-se-ic, var(--_ctm-dn-gy-wt-se-ft-se-ic))
221
+ );
222
+ text-align: var(
223
+ --_ctm-mob-dn-gy-wt-se-tt-an,
224
+ var(--_ctm-tab-dn-gy-wt-se-tt-an, var(--_ctm-dn-gy-wt-se-tt-an))
225
+ );
226
+ letter-spacing: var(
227
+ --_ctm-mob-dn-gy-wt-se-lr-sg,
228
+ var(--_ctm-tab-dn-gy-wt-se-lr-sg, var(--_ctm-dn-gy-wt-se-lr-sg))
229
+ );
230
+ line-height: var(
231
+ --_ctm-mob-dn-gy-wt-se-le-ht,
232
+ var(--_ctm-tab-dn-gy-wt-se-le-ht, var(--_ctm-dn-gy-wt-se-le-ht))
233
+ );
234
+ text-decoration: var(
235
+ --_ctm-mob-dn-gy-wt-se-ue,
236
+ var(--_ctm-tab-dn-gy-wt-se-ue, var(--_ctm-dn-gy-wt-se-ue))
237
+ );
238
+ }
239
+
240
+ & p {
241
+ color: var(
242
+ --_ctm-mob-dn-gy-wt-se-cr-dc,
243
+ var(--_ctm-tab-dn-gy-wt-se-cr-dc, var(--_ctm-dn-gy-wt-se-cr-dc))
244
+ );
245
+ font-family: var(
246
+ --_ctm-mob-dn-gy-wt-se-ft-fy-dc,
247
+ var(--_ctm-tab-dn-gy-wt-se-ft-fy-dc, var(--_ctm-dn-gy-wt-se-ft-fy-dc))
248
+ );
249
+ font-size: var(
250
+ --_ctm-mob-dn-gy-wt-se-ft-se-dc,
251
+ var(--_ctm-tab-dn-gy-wt-se-ft-se-dc, var(--_ctm-dn-gy-wt-se-ft-se-dc))
252
+ );
253
+ font-weight: var(
254
+ --_ctm-mob-dn-gy-wt-se-ft-wt-dc,
255
+ var(--_ctm-tab-dn-gy-wt-se-ft-wt-dc, var(--_ctm-dn-gy-wt-se-ft-wt-dc))
256
+ );
257
+ font-style: var(
258
+ --_ctm-mob-dn-gy-wt-se-ft-se-ic-dc,
259
+ var(--_ctm-tab-dn-gy-wt-se-ft-se-ic-dc, var(--_ctm-dn-gy-wt-se-ft-se-ic-dc))
260
+ );
261
+ text-align: var(
262
+ --_ctm-mob-dn-gy-wt-se-tt-an-dc,
263
+ var(--_ctm-tab-dn-gy-wt-se-tt-an-dc, var(--_ctm-dn-gy-wt-se-tt-an-dc))
264
+ );
265
+ letter-spacing: var(
266
+ --_ctm-mob-dn-gy-wt-se-lr-sg-dc,
267
+ var(--_ctm-tab-dn-gy-wt-se-lr-sg-dc, var(--_ctm-dn-gy-wt-se-lr-sg-dc))
268
+ );
269
+ line-height: var(
270
+ --_ctm-mob-dn-gy-wt-se-le-ht-dc,
271
+ var(--_ctm-tab-dn-gy-wt-se-le-ht-dc, var(--_ctm-dn-gy-wt-se-le-ht-dc))
272
+ );
273
+ text-decoration: var(
274
+ --_ctm-mob-dn-gy-wt-se-ue-dc,
275
+ var(--_ctm-tab-dn-gy-wt-se-ue-dc, var(--_ctm-dn-gy-wt-se-ue-dc))
276
+ );
277
+ }
278
+
279
+ // h3 {
280
+ // margin-bottom: var(--_mb-4);
281
+ // }
282
+ }
283
+ }
284
+
285
+ &[data-text-position="top"] {
286
+ .gallery-slider-element {
287
+ flex-direction: column;
288
+ }
289
+ }
290
+ &[data-text-position="bottom"] {
291
+ .gallery-slider-element {
292
+ flex-direction: column-reverse;
293
+ }
294
+ }
295
+ &[data-text-position="left"] {
296
+ .gallery-slider-element {
297
+ flex-direction: row;
298
+ }
299
+ .gallery-header {
300
+ width: fit-content;
301
+ height: 100%;
302
+ }
303
+ &[data-widget-alignment="top"] {
304
+ .gallery-slider-element {
305
+ align-items: flex-start;
306
+ }
307
+ .gallery-header {
308
+ justify-content: flex-start;
309
+ }
310
+ }
311
+ &[data-widget-alignment="center"] {
312
+ .gallery-slider-element {
313
+ align-items: center;
314
+ }
315
+ .gallery-header {
316
+ justify-content: center;
317
+ }
318
+ }
319
+ &[data-widget-alignment="bottom"] {
320
+ .gallery-slider-element {
321
+ align-items: flex-end;
322
+ }
323
+ .gallery-header {
324
+ justify-content: flex-end;
325
+ }
326
+ }
327
+ }
328
+ &[data-text-position="right"] {
329
+ .gallery-header {
330
+ width: fit-content;
331
+ height: 100%;
332
+ }
333
+ .gallery-slider-element {
334
+ flex-direction: row-reverse;
335
+ }
336
+
337
+ &[data-widget-alignment="top"] {
338
+ .gallery-slider-element {
339
+ align-items: flex-start;
340
+ }
341
+ .gallery-header {
342
+ justify-content: flex-start;
343
+ }
344
+ }
345
+ &[data-widget-alignment="center"] {
346
+ .gallery-slider-element {
347
+ align-items: center;
348
+ }
349
+ .gallery-header {
350
+ justify-content: center;
351
+ }
352
+ }
353
+ &[data-widget-alignment="bottom"] {
354
+ .gallery-slider-element {
355
+ align-items: flex-end;
356
+ }
357
+ .gallery-header {
358
+ justify-content: flex-end;
359
+ }
360
+ }
361
+ }
362
+ .embla {
363
+ width: 100%;
364
+ height: 100%;
365
+ position: relative;
366
+ display: flex;
367
+ flex-direction: column;
368
+ // overflow: hidden;
369
+
370
+ .embla__viewport {
371
+ width: 100%;
372
+ height: 100%;
373
+ position: relative;
374
+ display: flex;
375
+ flex-direction: column;
376
+
377
+ overflow: hidden;
378
+
379
+ .embla__container {
380
+ width: 100%;
381
+ height: 100%;
382
+ display: grid;
383
+ grid-template-rows: 100%;
384
+
385
+ grid-template-columns: repeat(
386
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
387
+ calc(
388
+ 100% /
389
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
390
+ )
391
+ );
392
+
393
+ grid-auto-flow: column;
394
+ gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
395
+
396
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
397
+ height: calc(
398
+ 100% - calc(
399
+ var(
400
+ --_ctm-mob-dn-pn-as-aw-se,
401
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
402
+ ) +
403
+ 10px
404
+ )
405
+ );
406
+ }
407
+
408
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
409
+ height: calc(
410
+ 100% - calc(
411
+ var(
412
+ --_ctm-mob-dn-pn-le-le-ht,
413
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
414
+ ) +
415
+ 20px
416
+ )
417
+ );
418
+ }
419
+
420
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
421
+ height: calc(
422
+ 100% - calc(
423
+ var(
424
+ --_ctm-mob-dn-pn-ds-dt-se,
425
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
426
+ ) +
427
+ 20px
428
+ )
429
+ );
430
+ }
431
+
432
+ .embla__slide {
433
+ width: 100%;
434
+ height: 100%;
435
+ }
436
+ }
437
+ }
438
+ &:not([data-display-style="Column"]) {
439
+ .embla__container {
440
+ grid-auto-columns: calc(
441
+ 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
442
+ );
443
+ }
444
+ }
445
+
446
+ &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
447
+ // overflow: unset;
448
+
449
+ .embla__viewport {
450
+ overflow: unset;
451
+ height: 80%;
452
+ flex-grow: 1;
453
+ &:not([data-is-builder-type="true"]) {
454
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
455
+ }
456
+
457
+ .embla__container {
458
+ overflow: unset;
459
+ height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
460
+ // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
461
+
462
+ grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
463
+ grid-template-rows: unset;
464
+
465
+ grid-auto-flow: row;
466
+
467
+ &[data-overflow-hidden="true"] {
468
+ overflow: hidden;
469
+ }
470
+ }
471
+ }
472
+ }
473
+
474
+ &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
475
+ .embla__viewport {
476
+ .embla__container {
477
+ grid-template-rows: repeat(
478
+ var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
479
+ calc(
480
+ 100% /
481
+ var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
482
+ )
483
+ );
484
+ }
485
+ }
486
+ }
487
+
488
+ &[data-display-style="Rows"] {
489
+ // overflow: unset;
490
+
491
+ .embla__viewport {
492
+ overflow: unset;
493
+ height: 80%;
494
+ flex-grow: 1;
495
+
496
+ &:not([data-is-builder-type="true"]) {
497
+ height: var(--_ctm-height);
498
+ }
499
+
500
+ .embla__container {
501
+ overflow: hidden;
502
+ height: var(--_ctm-height);
503
+ // min-height: var(--_ctm-height);
504
+
505
+ grid-template-columns: repeat(
506
+ var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
507
+ 1fr
508
+ );
509
+ grid-template-rows: unset;
510
+ grid-auto-flow: row;
511
+ }
512
+ }
513
+ }
514
+
515
+ &[data-display-style="Column"] {
516
+ // overflow: unset;
517
+
518
+ .embla__viewport {
519
+ .embla__container {
520
+ display: flex;
521
+ .embla__slide {
522
+ width: unset;
523
+ height: 100%;
524
+ aspect-ratio: 1 / 2;
525
+ }
526
+ }
527
+ }
528
+ }
529
+ &[data-display-style="Masonry"] {
530
+ // overflow: unset;
531
+
532
+ .embla__viewport {
533
+ overflow: hidden;
534
+ height: 80%;
535
+ flex-grow: 1;
536
+
537
+ &:not([data-is-builder-type="true"]) {
538
+ height: var(--_ctm-height);
539
+ }
540
+
541
+ .embla__container {
542
+ overflow: unset;
543
+ display: block;
544
+
545
+ column-count: var(
546
+ --_ctm-mob-lt-is-pr-rw,
547
+ var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))
548
+ );
549
+ gap: unset;
550
+
551
+ column-gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
552
+
553
+ height: auto;
554
+
555
+ .embla__slide {
556
+ margin-bottom: var(
557
+ --_ctm-mob-lt-im-gp,
558
+ var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp))
559
+ );
560
+ height: unset;
561
+
562
+ .gallery__slide {
563
+ height: unset;
564
+ }
565
+ }
566
+ }
567
+ }
568
+ }
569
+
570
+ .arrow-navigation {
571
+ display: flex;
572
+ position: absolute;
573
+ top: 50%;
574
+ left: 50%;
575
+ width: 100%;
576
+ justify-content: space-between;
577
+ transform: translate(-50%, -50%);
578
+ // padding-left: 20px;
579
+
580
+ &[data-control-type="Bottom-Overflow"] {
581
+ transform: translateX(-50%);
582
+ width: 100%;
583
+ justify-content: center;
584
+ gap: 12px;
585
+ top: unset;
586
+ bottom: 6px;
587
+ }
588
+ &[data-control-type="Bottom"] {
589
+ transform: unset;
590
+ position: static;
591
+ width: 100%;
592
+ justify-content: center;
593
+ gap: 12px;
594
+ margin-top: 10px;
595
+ }
596
+ }
597
+ :is(.left-button, .right-button) {
598
+ background: prepareMediaVariable(--_ctm-dn-pn-as-bd-cr);
599
+ }
600
+ .left-button {
601
+ padding: 10px;
602
+ border-radius: 50%;
603
+ border: none;
604
+ width: var(
605
+ --_ctm-mob-dn-pn-as-aw-se,
606
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
607
+ );
608
+ height: var(
609
+ --_ctm-mob-dn-pn-as-aw-se,
610
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
611
+ );
612
+
613
+ display: flex;
614
+ align-items: center;
615
+ justify-content: center;
616
+ cursor: pointer;
617
+ outline: none;
618
+ margin-left: 12px;
619
+ &:disabled {
620
+ & svg {
621
+ path {
622
+ stroke: rgb(192, 192, 192);
623
+ }
624
+ }
625
+ }
626
+ }
627
+ .right-button {
628
+ border-radius: 50%;
629
+ border: none;
630
+ width: var(
631
+ --_ctm-mob-dn-pn-as-aw-se,
632
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
633
+ );
634
+ height: var(
635
+ --_ctm-mob-dn-pn-as-aw-se,
636
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
637
+ );
638
+
639
+ display: flex;
640
+ align-items: center;
641
+ justify-content: center;
642
+ cursor: pointer;
643
+ outline: none;
644
+ margin-right: 12px;
645
+ padding: 10px;
646
+
647
+ &:disabled {
648
+ & svg {
649
+ path {
650
+ stroke: rgb(192, 192, 192);
651
+ }
652
+ }
653
+ }
654
+ }
655
+ .icon {
656
+ display: flex;
657
+
658
+ svg {
659
+ width: calc(
660
+ var(
661
+ --_ctm-mob-dn-pn-as-aw-se,
662
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
663
+ ) *
664
+ 0.5
665
+ );
666
+ height: calc(
667
+ var(
668
+ --_ctm-mob-dn-pn-as-aw-se,
669
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
670
+ ) *
671
+ 0.5
672
+ );
673
+
674
+ path {
675
+ stroke: var(
676
+ --_ctm-mob-dn-pn-as-aw-cr,
677
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
678
+ );
679
+ }
680
+ }
681
+ }
682
+
683
+ &[data-control-type="Side"] {
684
+ .left-button,
685
+ .right-button {
686
+ // background-color: transparent;
687
+ }
688
+ }
689
+ &[data-background-shape="Round"] {
690
+ .left-button,
691
+ .right-button {
692
+ // background-color: #f2f5f5;
693
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
694
+ }
695
+ }
696
+
697
+ &[data-control-type="Side"] {
698
+ .embla__viewport {
699
+ width: calc(100% - 120px);
700
+ margin-inline: auto;
701
+ }
702
+ .left-button {
703
+ position: absolute;
704
+ left: 0;
705
+ top: 50%;
706
+ transform: translateY(-50%);
707
+ }
708
+ .right-button {
709
+ position: absolute;
710
+
711
+ right: 0;
712
+ top: 50%;
713
+ transform: translateY(-50%);
714
+ }
715
+ }
716
+
717
+ &[data-thumbnail-placement="top"] {
718
+ flex-direction: column-reverse;
719
+ }
720
+ &[data-thumbnail-placement="bottom"] {
721
+ flex-direction: column;
722
+ }
723
+ &[data-thumbnail-placement="left"] {
724
+ flex-direction: row-reverse;
725
+
726
+ .embla__thumbs {
727
+ width: var(--_ctm-lt-tl-se);
728
+ height: 100%;
729
+
730
+ & .embla__thumbs__container {
731
+ flex-direction: column;
732
+ height: 100%;
733
+ }
734
+ }
735
+ }
736
+ &[data-thumbnail-placement="right"] {
737
+ flex-direction: row;
738
+ .embla__thumbs {
739
+ width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
740
+
741
+ height: 100%;
742
+
743
+ & .embla__thumbs__container {
744
+ flex-direction: column;
745
+ height: 100%;
746
+ }
747
+ }
748
+ }
749
+ .embla__dots {
750
+ display: flex;
751
+ flex-wrap: wrap;
752
+ justify-content: center;
753
+ align-items: center;
754
+ margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
755
+ gap: 6px;
756
+ margin-top: 16px;
757
+
758
+ &[data-control-type="Bottom-Overflow"] {
759
+ position: absolute;
760
+ bottom: 10px;
761
+ left: 50%;
762
+ transform: translateX(-50%);
763
+ width: 75%;
764
+ }
765
+ .embla__dot {
766
+ -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
767
+ -webkit-appearance: none;
768
+ appearance: none;
769
+ background-color: var(
770
+ --_ctm-mob-dn-pn-ds-or-dt-cr,
771
+ var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
772
+ );
773
+
774
+ touch-action: manipulation;
775
+ display: inline-flex;
776
+ text-decoration: none;
777
+ cursor: pointer;
778
+ border: 0;
779
+ padding: 0;
780
+ margin: 0;
781
+ // width: 0.6rem;
782
+ // height: 0.6rem;
783
+ width: var(
784
+ --_ctm-mob-dn-pn-ds-dt-se,
785
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
786
+ );
787
+ height: var(
788
+ --_ctm-mob-dn-pn-ds-dt-se,
789
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
790
+ );
791
+
792
+ display: flex;
793
+ align-items: center;
794
+ justify-content: center;
795
+ border-radius: 50%;
796
+ }
797
+ .embla__dot:after {
798
+ // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
799
+ width: var(
800
+ --_ctm-mob-dn-pn-ds-dt-se,
801
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
802
+ );
803
+ height: var(
804
+ --_ctm-mob-dn-pn-ds-dt-se,
805
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
806
+ );
807
+
808
+ border-radius: 50%;
809
+ display: flex;
810
+ align-items: center;
811
+ content: "";
812
+ }
813
+ .embla__dot--selected:after {
814
+ box-shadow: inset 0 0 0 1px var(--text-body);
815
+ background-color: var(
816
+ --_ctm-mob-dn-pn-ds-ct-dt-cr,
817
+ var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
818
+ );
819
+ }
820
+ &[data-slider-control="Pagination Line"] {
821
+ .embla__dot {
822
+ width: var(
823
+ --_ctm-mob-dn-pn-le-le-wh,
824
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
825
+ );
826
+ height: var(
827
+ --_ctm-mob-dn-pn-le-le-ht,
828
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
829
+ );
830
+ background-color: var(
831
+ --_ctm-mob-dn-pn-le-or-le-cr,
832
+ var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
833
+ );
834
+ border-radius: 6px;
835
+ }
836
+
837
+ .embla__dot--selected:after {
838
+ box-shadow: inset 0 0 0 1px var(--text-body);
839
+ border-radius: 6px;
840
+ width: var(
841
+ --_ctm-mob-dn-pn-le-le-wh,
842
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
843
+ );
844
+ height: var(
845
+ --_ctm-mob-dn-pn-le-le-ht,
846
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
847
+ );
848
+ background-color: var(
849
+ --_ctm-mob-dn-pn-le-ct-le-cr,
850
+ var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
851
+ );
852
+ }
853
+ }
854
+ }
855
+
856
+ .embla__thumbs {
857
+ width: 100%;
858
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
859
+
860
+ position: relative;
861
+ display: grid;
862
+ grid-template-columns: 1fr;
863
+ overflow: hidden;
864
+ // margin: 10px;
865
+ padding: 10px;
866
+
867
+ .embla__thumbs__viewport {
868
+ width: 100%;
869
+ height: 100%;
870
+ position: relative;
871
+ display: flex;
872
+ flex-direction: column;
873
+
874
+ overflow: hidden;
875
+ }
876
+ .embla__thumbs__container {
877
+ display: flex;
878
+ flex-direction: row;
879
+ margin-left: calc(var(--thumbs-slide-spacing) * -1);
880
+ gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
881
+
882
+ width: 100%;
883
+ // justify-content: center;
884
+ // height: 200px;
885
+
886
+ .embla__thumbs__slide {
887
+ min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
888
+ max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
889
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
890
+
891
+ & img {
892
+ width: 100%;
893
+ height: 100%;
894
+ }
895
+ }
896
+ }
897
+ }
898
+ }
899
+
900
+ .gallery__slide {
901
+ width: 100%;
902
+ height: 100%;
903
+ display: flex;
904
+ // flex-direction: column;
905
+
906
+ background-color: var(
907
+ --_ctm-mob-dn-im-se-bd-cr,
908
+ var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
909
+ );
910
+
911
+ border-color: var(
912
+ --_ctm-mob-dn-im-se-br-cr,
913
+ var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
914
+ );
915
+
916
+ border-style: var(
917
+ --_ctm-mob-dn-im-se-br-se,
918
+ var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
919
+ );
920
+
921
+ border-width: var(
922
+ --_ctm-mob-dn-im-se-br-wh,
923
+ var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
924
+ );
925
+
926
+ border-radius: var(
927
+ --_ctm-mob-dn-im-se-br-rs,
928
+ var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
929
+ );
930
+
931
+ box-shadow: var(
932
+ --_show-shadow,
933
+ var(--_ctm-mob-dn-im-se-sw-ae, var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae)))
934
+ var(--_ctm-mob-dn-im-se-sw-br, var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br)))
935
+ var(--_ctm-mob-dn-im-se-sw-sd, var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd)))
936
+ var(--_ctm-mob-dn-im-se-sw-cr, var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr)))
937
+ );
938
+
939
+ gap: var(
940
+ --_ctm-mob-dn-im-lt-gy-tt-ad-im-sg,
941
+ var(--_ctm-tab-dn-im-lt-gy-tt-ad-im-sg, var(--_ctm-dn-im-lt-gy-tt-ad-im-sg))
942
+ );
943
+
944
+ .gallery-header {
945
+ // text-align: var(--_ctm-dn-gy-lt-an, var(--_tst-dn-gy-lt-an));
946
+ // line-height: var(--_ctm-dn-gy-lt-tt-ad-dn-sg, var(--_tst-dn-gy-lt-tt-ad-dn-sg));
947
+ display: flex;
948
+ flex-direction: column;
949
+
950
+ gap: var(
951
+ --_ctm-mob-dn-im-tt-cr-lt-te-ad-dn-sg,
952
+ var(--_ctm-tab-dn-im-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-im-tt-cr-lt-te-ad-dn-sg))
953
+ );
954
+
955
+ padding-block: var(
956
+ --_ctm-mob-dn-im-tt-cr-lt-tt-vl-pg,
957
+ var(--_ctm-tab-dn-im-tt-cr-lt-tt-vl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-vl-pg))
958
+ );
959
+
960
+ padding-inline: var(
961
+ --_ctm-mob-dn-im-tt-cr-lt-tt-hl-pg,
962
+ var(--_ctm-tab-dn-im-tt-cr-lt-tt-hl-pg, var(--_ctm-dn-im-tt-cr-lt-tt-hl-pg))
963
+ );
964
+
965
+ background-color: var(
966
+ --_ctm-mob-dn-im-tt-cr-dn-bd-cr,
967
+ var(--_ctm-tab-dn-im-tt-cr-dn-bd-cr, var(--_ctm-dn-im-tt-cr-dn-bd-cr))
968
+ );
969
+
970
+ width: 100%;
971
+
972
+ border-color: var(
973
+ --_ctm-mob-dn-im-tt-cr-dn-br-cr,
974
+ var(--_ctm-tab-dn-im-tt-cr-dn-br-cr, var(--_ctm-dn-im-tt-cr-dn-br-cr))
975
+ );
976
+
977
+ border-style: var(
978
+ --_ctm-mob-dn-im-tt-cr-dn-br-se,
979
+ var(--_ctm-tab-dn-im-tt-cr-dn-br-se, var(--_ctm-dn-im-tt-cr-dn-br-se))
980
+ );
981
+
982
+ border-width: var(
983
+ --_ctm-mob-dn-im-tt-cr-dn-br-wh,
984
+ var(--_ctm-tab-dn-im-tt-cr-dn-br-wh, var(--_ctm-dn-im-tt-cr-dn-br-wh))
985
+ );
986
+
987
+ border-radius: var(
988
+ --_ctm-mob-dn-im-tt-cr-dn-br-rs,
989
+ var(--_ctm-tab-dn-im-tt-cr-dn-br-rs, var(--_ctm-dn-im-tt-cr-dn-br-rs))
990
+ );
991
+
992
+ box-shadow: var(
993
+ --_show-shadow,
994
+ var(
995
+ --_ctm-mob-dn-im-tt-cr-dn-sw-ae,
996
+ var(--_ctm-tab-dn-im-tt-cr-dn-sw-ae, var(--_ctm-dn-im-tt-cr-dn-sw-ae))
997
+ )
998
+ var(
999
+ --_ctm-mob-dn-im-tt-cr-dn-sw-br,
1000
+ var(--_ctm-tab-dn-im-tt-cr-dn-sw-br, var(--_ctm-dn-im-tt-cr-dn-sw-br))
1001
+ )
1002
+ var(
1003
+ --_ctm-mob-dn-im-tt-cr-dn-sw-sd,
1004
+ var(--_ctm-tab-dn-im-tt-cr-dn-sw-sd, var(--_ctm-dn-im-tt-cr-dn-sw-sd))
1005
+ )
1006
+ var(
1007
+ --_ctm-mob-dn-im-tt-cr-dn-sw-cr,
1008
+ var(--_ctm-tab-dn-im-tt-cr-dn-sw-cr, var(--_ctm-dn-im-tt-cr-dn-sw-cr))
1009
+ )
1010
+ );
1011
+
1012
+ & h3 {
1013
+ color: var(--_ctm-mob-dn-im-se-cr, var(--_ctm-tab-dn-im-se-cr, var(--_ctm-dn-im-se-cr)));
1014
+
1015
+ font-family: var(
1016
+ --_ctm-mob-dn-im-se-ft-fy,
1017
+ var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy))
1018
+ );
1019
+
1020
+ font-size: var(
1021
+ --_ctm-mob-dn-im-se-ft-se,
1022
+ var(--_ctm-tab-dn-im-se-ft-se, var(--_ctm-dn-im-se-ft-se))
1023
+ );
1024
+
1025
+ font-weight: var(
1026
+ --_ctm-mob-dn-im-se-ft-wt,
1027
+ var(--_ctm-tab-dn-im-se-ft-wt, var(--_ctm-dn-im-se-ft-wt))
1028
+ );
1029
+
1030
+ font-style: var(
1031
+ --_ctm-mob-dn-im-se-ft-se-ic,
1032
+ var(--_ctm-tab-dn-im-se-ft-se-ic, var(--_ctm-dn-im-se-ft-se-ic))
1033
+ );
1034
+
1035
+ text-align: var(
1036
+ --_ctm-mob-dn-im-se-tt-an,
1037
+ var(--_ctm-tab-dn-im-se-tt-an, var(--_ctm-dn-im-se-tt-an))
1038
+ );
1039
+
1040
+ letter-spacing: var(
1041
+ --_ctm-mob-dn-im-se-lr-sg,
1042
+ var(--_ctm-tab-dn-im-se-lr-sg, var(--_ctm-dn-im-se-lr-sg))
1043
+ );
1044
+
1045
+ line-height: var(
1046
+ --_ctm-mob-dn-im-se-le-ht,
1047
+ var(--_ctm-tab-dn-im-se-le-ht, var(--_ctm-dn-im-se-le-ht))
1048
+ );
1049
+
1050
+ text-decoration: var(
1051
+ --_ctm-mob-dn-im-se-ue,
1052
+ var(--_ctm-tab-dn-im-se-ue, var(--_ctm-dn-im-se-ue))
1053
+ );
1054
+ }
1055
+
1056
+ & p {
1057
+ color: var(
1058
+ --_ctm-mob-dn-im-se-cr-dc,
1059
+ var(--_ctm-tab-dn-im-se-cr-dc, var(--_ctm-dn-im-se-cr-dc))
1060
+ );
1061
+
1062
+ font-family: var(
1063
+ --_ctm-mob-dn-im-se-ft-fy-dc,
1064
+ var(--_ctm-tab-dn-im-se-ft-fy-dc, var(--_ctm-dn-im-se-ft-fy-dc))
1065
+ );
1066
+
1067
+ font-size: var(
1068
+ --_ctm-mob-dn-im-se-ft-se-dc,
1069
+ var(--_ctm-tab-dn-im-se-ft-se-dc, var(--_ctm-dn-im-se-ft-se-dc))
1070
+ );
1071
+
1072
+ font-weight: var(
1073
+ --_ctm-mob-dn-im-se-ft-wt-dc,
1074
+ var(--_ctm-tab-dn-im-se-ft-wt-dc, var(--_ctm-dn-im-se-ft-wt-dc))
1075
+ );
1076
+
1077
+ font-style: var(
1078
+ --_ctm-mob-dn-im-se-ft-se-ic-dc,
1079
+ var(--_ctm-tab-dn-im-se-ft-se-ic-dc, var(--_ctm-dn-im-se-ft-se-ic-dc))
1080
+ );
1081
+
1082
+ text-align: var(
1083
+ --_ctm-mob-dn-im-se-tt-an-dc,
1084
+ var(--_ctm-tab-dn-im-se-tt-an-dc, var(--_ctm-dn-im-se-tt-an-dc))
1085
+ );
1086
+
1087
+ letter-spacing: var(
1088
+ --_ctm-mob-dn-im-se-lr-sg-dc,
1089
+ var(--_ctm-tab-dn-im-se-lr-sg-dc, var(--_ctm-dn-im-se-lr-sg-dc))
1090
+ );
1091
+
1092
+ line-height: var(
1093
+ --_ctm-mob-dn-im-se-le-ht-dc,
1094
+ var(--_ctm-tab-dn-im-se-le-ht-dc, var(--_ctm-dn-im-se-le-ht-dc))
1095
+ );
1096
+
1097
+ text-decoration: var(
1098
+ --_ctm-mob-dn-im-se-ue-dc,
1099
+ var(--_ctm-tab-dn-im-se-ue-dc, var(--_ctm-dn-im-se-ue-dc))
1100
+ );
1101
+ }
1102
+
1103
+ // h3 {
1104
+ // margin-bottom: var(--_mb-4);
1105
+ // }
1106
+ }
1107
+ > img {
1108
+ object-fit: cover;
1109
+ }
1110
+ &[data-text-position="On Image"] {
1111
+ .gallery-header {
1112
+ width: 100%;
1113
+ // height: 100%;
1114
+ position: absolute;
1115
+ }
1116
+
1117
+ &[data-widget-alignment="top"] {
1118
+ // align-items: flex-start;
1119
+
1120
+ .gallery-header {
1121
+ top: 0;
1122
+
1123
+ justify-content: flex-start;
1124
+ }
1125
+ }
1126
+ &[data-widget-alignment="center"] {
1127
+ // align-items: center;
1128
+
1129
+ .gallery-header {
1130
+ top: 50%;
1131
+ transform: translateY(-50%);
1132
+ justify-content: center;
1133
+ }
1134
+ }
1135
+ &[data-widget-alignment="bottom"] {
1136
+ // align-items: flex-end;
1137
+ .gallery-header {
1138
+ bottom: 0;
1139
+
1140
+ justify-content: flex-end;
1141
+ }
1142
+ }
1143
+ }
1144
+
1145
+ &[data-text-position="top"] {
1146
+ flex-direction: column;
1147
+ }
1148
+
1149
+ &[data-text-position="bottom"] {
1150
+ flex-direction: column-reverse;
1151
+ }
1152
+ &[data-text-position="left"] {
1153
+ flex-direction: row;
1154
+
1155
+ .gallery-header {
1156
+ width: fit-content;
1157
+ height: 100%;
1158
+ }
1159
+ &[data-widget-alignment="top"] {
1160
+ align-items: flex-start;
1161
+
1162
+ .gallery-header {
1163
+ justify-content: flex-start;
1164
+ }
1165
+ }
1166
+ &[data-widget-alignment="center"] {
1167
+ align-items: center;
1168
+
1169
+ .gallery-header {
1170
+ justify-content: center;
1171
+ }
1172
+ }
1173
+ &[data-widget-alignment="bottom"] {
1174
+ align-items: flex-end;
1175
+
1176
+ .gallery-header {
1177
+ justify-content: flex-end;
1178
+ }
1179
+ }
1180
+ }
1181
+ &[data-text-position="right"] {
1182
+ flex-direction: row-reverse;
1183
+ .gallery-header {
1184
+ width: fit-content;
1185
+ height: 100%;
1186
+ }
1187
+
1188
+ &[data-widget-alignment="top"] {
1189
+ align-items: flex-start;
1190
+
1191
+ .gallery-header {
1192
+ justify-content: flex-start;
1193
+ }
1194
+ }
1195
+ &[data-widget-alignment="center"] {
1196
+ align-items: center;
1197
+
1198
+ .gallery-header {
1199
+ justify-content: center;
1200
+ }
1201
+ }
1202
+ &[data-widget-alignment="bottom"] {
1203
+ align-items: flex-end;
1204
+
1205
+ .gallery-header {
1206
+ justify-content: flex-end;
1207
+ }
1208
+ }
1209
+ }
1210
+ & > img {
1211
+ width: 100%;
1212
+ height: 100%;
1213
+ // object-fit: cover;
1214
+
1215
+ // object-fit: var(--_ctm-dn-im-se-ot-ft, var(--_tst-dn-im-se-ot-ft));
1216
+ // object-fit: cover;
1217
+
1218
+ &[data-has-title="true"] {
1219
+ height: 85%;
1220
+ }
1221
+
1222
+ /* display: block; */
1223
+ }
1224
+ }
1225
+
1226
+ .load__more__div {
1227
+ display: flex;
1228
+ justify-content: center;
1229
+ margin-block: 12px;
1230
+ & > button {
1231
+ padding-inline: 24px;
1232
+ border: 1px solid gray;
1233
+ padding-block: 12px;
1234
+ border-radius: 6px;
1235
+ }
1236
+ }
1237
+ }
1238
+ }