@sc-360-v2/storefront-cms-library 0.4.55 → 0.4.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (151) hide show
  1. package/dist/add-existing-form.scss +66 -66
  2. package/dist/add-order.scss +377 -377
  3. package/dist/add-products-tab copy.scss +1132 -1132
  4. package/dist/allocations.scss +1603 -1603
  5. package/dist/amount-estimator.scss +1083 -1083
  6. package/dist/animation-control.scss +23 -23
  7. package/dist/badge.scss +388 -388
  8. package/dist/brand-basic-elements.scss +292 -292
  9. package/dist/brand.scss +93 -93
  10. package/dist/breadcrumbs.scss +802 -802
  11. package/dist/builder.js +1 -1
  12. package/dist/bulk-order-pad.scss +677 -677
  13. package/dist/bulk-variant-picker copy.scss +1121 -1121
  14. package/dist/bulk-variant-picker.scss +3294 -3294
  15. package/dist/bundle copy.scss +2805 -2805
  16. package/dist/bundle.scss +2383 -2383
  17. package/dist/bundleDetails copy.scss +1431 -1431
  18. package/dist/button copy.scss +271 -271
  19. package/dist/button.scss +292 -292
  20. package/dist/buy-for-tab-container.scss +90 -90
  21. package/dist/buy-for-tabs-container-item.scss +80 -80
  22. package/dist/buyForHeaders.scss +6718 -6718
  23. package/dist/cart-products-sidebar.scss +211 -211
  24. package/dist/cart-summary.scss +2728 -2728
  25. package/dist/cart-wrapper.scss +127 -127
  26. package/dist/cartGrouping.scss +89 -89
  27. package/dist/category-groups-element.scss +138 -138
  28. package/dist/category.scss +73 -73
  29. package/dist/categoryDetails.scss +61 -61
  30. package/dist/categoryWidget.scss +34 -34
  31. package/dist/checkbox-radio.scss +124 -124
  32. package/dist/code-temp.scss +58 -58
  33. package/dist/colorpicker_v2.scss +52 -52
  34. package/dist/common-element.scss +35 -35
  35. package/dist/confirm-modal.scss +351 -351
  36. package/dist/confirmationModal.scss +139 -139
  37. package/dist/contact-us.scss +105 -105
  38. package/dist/container.scss +114 -114
  39. package/dist/countdown.scss +751 -751
  40. package/dist/coupon.scss +1254 -1254
  41. package/dist/custom-fonts.scss +100 -100
  42. package/dist/customization-tree.scss +160 -160
  43. package/dist/default-dropdown.scss +240 -240
  44. package/dist/editCartItem.scss +111 -111
  45. package/dist/embed-temp.scss +72 -72
  46. package/dist/embroider-preview-element.scss +94 -94
  47. package/dist/embroider-template-1-v2.scss +937 -937
  48. package/dist/embroider-template-1.scss +482 -482
  49. package/dist/embroidery.scss +213 -213
  50. package/dist/employee-bulk-order.scss +4057 -4057
  51. package/dist/emtpy-templates.scss +165 -165
  52. package/dist/faq.scss +564 -564
  53. package/dist/fb-dropdown.scss +125 -125
  54. package/dist/filter-results.scss +323 -323
  55. package/dist/flex-text-editor.scss +271 -271
  56. package/dist/form-preview.scss +290 -290
  57. package/dist/form-zindex-module.scss +24 -24
  58. package/dist/gallery-slider-temp.scss +1234 -1234
  59. package/dist/global-styles.scss +86 -86
  60. package/dist/grid.scss +119 -119
  61. package/dist/hotspot.scss +397 -397
  62. package/dist/icon-library.scss +74 -74
  63. package/dist/image-for-product.scss +21 -21
  64. package/dist/image-temp.scss +168 -168
  65. package/dist/item-stock.scss +87 -87
  66. package/dist/layouter-item.scss +89 -89
  67. package/dist/layouter-pro-item.scss +80 -80
  68. package/dist/layouter-pro.scss +88 -88
  69. package/dist/light-box-v2.scss +105 -105
  70. package/dist/lightbox.scss +78 -78
  71. package/dist/line.scss +166 -166
  72. package/dist/loader.scss +37 -37
  73. package/dist/map.scss +962 -962
  74. package/dist/marchandiserSets.scss +60 -60
  75. package/dist/mega-menu-container.scss +99 -99
  76. package/dist/mega-menu.scss +838 -838
  77. package/dist/menu-item.scss +19 -19
  78. package/dist/menu.scss +162 -162
  79. package/dist/modal.scss +2267 -2267
  80. package/dist/multi-select-dropdown.scss +282 -282
  81. package/dist/my-wishlist.scss +17 -17
  82. package/dist/option-bar.scss +845 -845
  83. package/dist/order-processing.scss +61 -61
  84. package/dist/overflow-module.scss +63 -63
  85. package/dist/past-orders.scss +975 -975
  86. package/dist/payment-methods.scss +289 -289
  87. package/dist/pickup-locations.scss +1167 -1167
  88. package/dist/position-module.scss +95 -95
  89. package/dist/prefix-list.scss +86 -86
  90. package/dist/product-actions copy.scss +2765 -2765
  91. package/dist/product-actions.scss +2286 -2286
  92. package/dist/product-basic-elements.scss +770 -770
  93. package/dist/product-customizations.scss +149 -149
  94. package/dist/product-highlights copy.scss +217 -217
  95. package/dist/product-highlights.scss +311 -311
  96. package/dist/product-image copy.scss +787 -787
  97. package/dist/product-image.scss +12 -0
  98. package/dist/product-inventory.scss +1378 -1378
  99. package/dist/product-options.scss +1144 -1144
  100. package/dist/product-price.scss +2598 -2598
  101. package/dist/product-promotions.scss +2759 -2759
  102. package/dist/product.scss +97 -97
  103. package/dist/productDetails.scss +70 -70
  104. package/dist/quick-links.scss +552 -552
  105. package/dist/quick-order-pad.scss +237 -237
  106. package/dist/quota-details.scss +263 -263
  107. package/dist/quotes.scss +737 -737
  108. package/dist/repeater copy.scss +635 -635
  109. package/dist/repeater-grid-toggle.scss +58 -58
  110. package/dist/repeater-item.scss +90 -90
  111. package/dist/request-for-quotes.scss +746 -746
  112. package/dist/responsive-behaviour.scss +29 -29
  113. package/dist/rfqs.scss +736 -736
  114. package/dist/scroll.scss +222 -222
  115. package/dist/search-results-heading.scss +279 -279
  116. package/dist/shareCartSideBar.scss +254 -254
  117. package/dist/shipping-estimator.scss +41 -41
  118. package/dist/shipping-payments.scss +2467 -2467
  119. package/dist/simple-list.scss +259 -259
  120. package/dist/skeleton.scss +74 -74
  121. package/dist/social.scss +276 -276
  122. package/dist/sort.scss +89 -89
  123. package/dist/spotlight.scss +1663 -1663
  124. package/dist/stack.scss +129 -129
  125. package/dist/static-text.scss +52 -52
  126. package/dist/stockStatus.scss +64 -64
  127. package/dist/store-locations.scss +1398 -1398
  128. package/dist/sub-category.scss +74 -74
  129. package/dist/submit-quote.scss +275 -275
  130. package/dist/tab-container-item.scss +80 -80
  131. package/dist/tab-container.scss +89 -89
  132. package/dist/tab-v2.scss +583 -583
  133. package/dist/table-common.scss +506 -506
  134. package/dist/table.scss +685 -685
  135. package/dist/tabs.scss +395 -395
  136. package/dist/text-temp-v2.scss +139 -139
  137. package/dist/text-temp.scss +109 -109
  138. package/dist/toaster.scss +350 -350
  139. package/dist/toggle-button.scss +32 -32
  140. package/dist/transform-properties-module.scss +20 -20
  141. package/dist/types/builder/tools/element-edit/layouter.d.ts +2 -0
  142. package/dist/uom-selector.scss +1169 -1169
  143. package/dist/user-elements copy.scss +1437 -1437
  144. package/dist/variant-picker.scss +2384 -2384
  145. package/dist/video.scss +476 -476
  146. package/dist/volume-pricing copy 2.scss +1468 -1468
  147. package/dist/volume-pricing copy.scss +1077 -1077
  148. package/dist/volume-pricing.scss +1175 -1175
  149. package/dist/widget.scss +148 -148
  150. package/dist/wishlist-overlay.scss +48 -48
  151. package/package.json +1 -1
package/dist/gallery-slider-temp.scss CHANGED
@@ -1,1234 +1,1234 @@
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
+ [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
+ }