react-motion-gallery 2.0.5 → 2.0.7

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 (7) hide show
  1. package/dist/index.css +1 -675
  2. package/dist/index.d.mts +318 -101
  3. package/dist/index.mjs +39 -12901
  4. package/dist/metafile-esm.json +1 -1
  5. package/package.json +1 -1
  6. package/dist/index.css.map +0 -1
  7. package/dist/index.mjs.map +0 -1
package/dist/index.css CHANGED
@@ -1,675 +1 @@
1
- /* src/Gallery/styles.module.css */
2
- .gridRoot {
3
- display: grid;
4
- grid-template-columns: repeat(auto-fill, minmax(var(--rmg-grid-min, 160px), 1fr));
5
- gap: var(--rmg-grid-gap, 8px);
6
- }
7
- .grid {
8
- display: grid;
9
- grid-template-columns: repeat(auto-fill, minmax(var(--rmg-grid-min, 160px), 1fr));
10
- gap: var(--rmg-grid-gap, 8px);
11
- }
12
- .gridItem {
13
- position: relative;
14
- display: block;
15
- cursor: pointer;
16
- }
17
- .gridItem img,
18
- .gridItem video {
19
- display: block;
20
- width: 100%;
21
- height: auto;
22
- object-fit: cover;
23
- }
24
- .masonryRoot {
25
- display: flex;
26
- align-items: flex-start;
27
- width: 100%;
28
- column-gap: var(--rmg-masonry-gap, 8px);
29
- }
30
- .masonryCol {
31
- flex: 1;
32
- min-width: 0;
33
- display: flex;
34
- flex-direction: column;
35
- }
36
- .masonryItem {
37
- position: relative;
38
- display: block;
39
- cursor: pointer;
40
- }
41
- .masonryItem img,
42
- .masonryItem video {
43
- display: block;
44
- width: 100%;
45
- object-fit: cover;
46
- }
47
- .introContainer {
48
- opacity: 0;
49
- }
50
- .introActive {
51
- opacity: 1;
52
- transition: opacity var(--rmg-intro-duration, 420ms) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));
53
- }
54
- .introContainer [data-rmg-idx] {
55
- opacity: 0;
56
- transform: var(--rmg-intro-transform, translateY(10px) scale(0.99));
57
- transition: opacity 300ms cubic-bezier(.4, 0, .22, 1), transform 300ms cubic-bezier(.4, 0, .22, 1);
58
- transition-delay: calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));
59
- will-change: opacity, transform;
60
- }
61
- .introContainer.introActive [data-rmg-idx] {
62
- opacity: 1;
63
- transform: none;
64
- }
65
- .gridSkeletonOverlay {
66
- position: relative;
67
- width: 100%;
68
- }
69
- .gridSkeletonGrid {
70
- display: grid;
71
- grid-template-columns: repeat(auto-fill, minmax(var(--rmg-grid-min, 160px), 1fr));
72
- gap: var(--rmg-grid-gap, 8px);
73
- }
74
- .gridSkeletonItem {
75
- position: relative;
76
- width: 100%;
77
- padding-bottom: var(--rmg-shimmer-padding-bottom, 66.666%);
78
- border-radius: var(--rmg-shimmer-radius, 8px);
79
- overflow: hidden;
80
- background:
81
- linear-gradient(
82
- 90deg,
83
- var(--rmg-shimmer-c1, #f0f2f5) 25%,
84
- var(--rmg-shimmer-c2, #e6e9ef) 37%,
85
- var(--rmg-shimmer-c3, #f0f2f5) 63%);
86
- background-size: var(--rmg-shimmer-size, 400% 100%);
87
- animation: rmgShimmer var(--rmg-shimmer-duration, 1.2s) infinite var(--rmg-shimmer-timing, linear);
88
- }
89
- @keyframes rmgShimmer {
90
- 0% {
91
- background-position: -200% 0;
92
- }
93
- 100% {
94
- background-position: 200% 0;
95
- }
96
- }
97
- @media (prefers-reduced-motion: reduce) {
98
- .gridSkeletonItem {
99
- animation: none;
100
- }
101
- }
102
- .fullscreenOverlay {
103
- position: fixed;
104
- inset: 0;
105
- opacity: 0;
106
- pointer-events: none;
107
- background-color: rgba(0, 0, 0, 0.8);
108
- transition: opacity 300ms cubic-bezier(.4, 0, .22, 1);
109
- will-change: opacity;
110
- z-index: 8999;
111
- transform: translateZ(0);
112
- backface-visibility: hidden;
113
- contain: paint;
114
- }
115
- .open {
116
- opacity: 1;
117
- pointer-events: auto;
118
- }
119
- .duplicateImg {
120
- position: fixed;
121
- display: none;
122
- transform-origin: top left;
123
- transition: transform 0.3s cubic-bezier(.4, 0, .22, 1);
124
- z-index: 9998;
125
- will-change: transform;
126
- }
127
- .closeBtn,
128
- .leftChevron,
129
- .rightChevron,
130
- .counter {
131
- position: fixed;
132
- opacity: 0;
133
- pointer-events: none;
134
- transition: opacity 0.3s cubic-bezier(.4, 0, .22, 1);
135
- z-index: 2147483602;
136
- }
137
- .closeBtn.open,
138
- .leftChevron.open,
139
- .rightChevron.open,
140
- .counter.open {
141
- opacity: 1;
142
- pointer-events: auto;
143
- }
144
- .closeBtn {
145
- top: 12px;
146
- right: 12px;
147
- background: transparent;
148
- border: none;
149
- padding: 0;
150
- width: 35px;
151
- height: 35px;
152
- cursor: pointer;
153
- }
154
- .leftChevron,
155
- .rightChevron {
156
- top: 45.5%;
157
- width: 50px;
158
- height: 50px;
159
- cursor: pointer;
160
- background-color: transparent;
161
- border: none;
162
- }
163
- .leftChevron {
164
- left: 0;
165
- transform: rotate(180deg);
166
- }
167
- .rightChevron {
168
- right: 0;
169
- }
170
- .counter {
171
- top: 15px;
172
- left: 16px;
173
- color: #fff;
174
- font-size: 14px;
175
- line-height: 32px;
176
- user-select: none;
177
- text-shadow: 1px 1px 3px #4f4f4f;
178
- }
179
- .fsOverlayCaption {
180
- position: fixed;
181
- padding: 1rem 1.5rem;
182
- color: #fff;
183
- font-size: 0.875rem;
184
- pointer-events: none;
185
- opacity: 0;
186
- transform: translateY(8px);
187
- transition: opacity 300ms cubic-bezier(.4, 0, .22, 1), transform 300ms cubic-bezier(.4, 0, .22, 1);
188
- z-index: 9999;
189
- }
190
- .fsOverlayCaption.open {
191
- opacity: 1;
192
- transform: translateY(0);
193
- }
194
- .entryRow {
195
- position: relative;
196
- }
197
- .entryInner {
198
- position: relative;
199
- opacity: 0;
200
- transform: var(--rmg-entry-intro-transform, translateY(10px));
201
- pointer-events: none;
202
- transition: opacity var(--rmg-entry-intro-duration, 700ms) var(--rmg-entry-intro-easing, cubic-bezier(.4,0,.22,1)), transform var(--rmg-entry-intro-duration, 700ms) var(--rmg-entry-intro-easing, cubic-bezier(.4,0,.22,1));
203
- transition-delay: 0ms;
204
- }
205
- .entrySkeletonWrap {
206
- display: block;
207
- opacity: 1;
208
- transition: opacity 150ms linear;
209
- }
210
- .entryRow[data-rmg-entry-ready="1"] .entrySkeletonWrap {
211
- position: absolute;
212
- inset: 0;
213
- opacity: 0;
214
- pointer-events: none;
215
- }
216
- .entryRow[data-rmg-entry-ready="1"] .entryInner {
217
- opacity: 1;
218
- transform: none;
219
- pointer-events: auto;
220
- transition-delay: calc(var(--rmg-entry-intro-index, 0) * var(--rmg-entry-intro-stagger, 200ms));
221
- }
222
- .entryList {
223
- display: flex;
224
- flex-direction: column;
225
- gap: 1.5rem;
226
- }
227
- .entrySkeletonMediaGrid {
228
- width: 100%;
229
- }
230
- .entrySkeletonMedia {
231
- width: 100%;
232
- border-radius: 14px;
233
- }
234
- .entryText {
235
- }
236
- .entryMedia {
237
- }
238
- .entryMediaSlider {
239
- display: flex;
240
- gap: 0.75rem;
241
- overflow-x: auto;
242
- padding-bottom: 0.25rem;
243
- }
244
- .gridEntryRoot {
245
- display: grid;
246
- gap: var(--rmg-grid-gap, 8px);
247
- grid-template-columns: repeat(auto-fit, minmax(var(--rmg-grid-min, 160px), 1fr));
248
- }
249
- .gridEntryItem {
250
- position: relative;
251
- display: block;
252
- width: 100%;
253
- padding: 0;
254
- border: 0;
255
- background: transparent;
256
- border-radius: 12px;
257
- overflow: hidden;
258
- cursor: pointer;
259
- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
260
- border: 1px solid rgba(0, 0, 0, 0.08);
261
- }
262
- .gridEntryItem img,
263
- .gridEntryItem video {
264
- display: block;
265
- width: 100%;
266
- object-fit: cover;
267
- background: rgba(0, 0, 0, 0.04);
268
- }
269
- .entryMasonry img {
270
- cursor: pointer;
271
- }
272
- .entryMediaItem img {
273
- display: block;
274
- width: 100%;
275
- height: auto;
276
- border-radius: 0.5rem;
277
- }
278
- .entrySkeletonShimmer {
279
- position: relative;
280
- overflow: hidden;
281
- border-radius: inherit;
282
- --rmg-shimmer-c1: #f0f2f5;
283
- --rmg-shimmer-c2: #e6e9ef;
284
- --rmg-shimmer-c3: #f0f2f5;
285
- --rmg-shimmer-size: 400% 100%;
286
- --rmg-shimmer-duration: 1.2s;
287
- --rmg-shimmer-timing: linear;
288
- background:
289
- linear-gradient(
290
- 90deg,
291
- var(--rmg-shimmer-c1) 25%,
292
- var(--rmg-shimmer-c2) 37%,
293
- var(--rmg-shimmer-c3) 63%);
294
- background-size: var(--rmg-shimmer-size);
295
- animation: rmgShimmer var(--rmg-shimmer-duration) infinite var(--rmg-shimmer-timing);
296
- }
297
- .entrySkeletonList {
298
- display: flex;
299
- flex-direction: column;
300
- gap: 1.5rem;
301
- padding: 0.75rem 0;
302
- }
303
- .entrySkeletonCard {
304
- position: relative;
305
- overflow: hidden;
306
- border-radius: 12px;
307
- padding: 1rem 1.25rem;
308
- background: var(--rmg-skel-bg, rgba(255, 255, 255, 0.03));
309
- }
310
- .entrySkeletonHeader {
311
- display: flex;
312
- align-items: center;
313
- gap: 0.75rem;
314
- margin-bottom: 0.75rem;
315
- }
316
- .entrySkeletonLines {
317
- flex: 1;
318
- display: flex;
319
- flex-direction: column;
320
- gap: 0.35rem;
321
- }
322
- .entrySkeletonAvatar {
323
- width: 40px;
324
- height: 40px;
325
- border-radius: 999px;
326
- }
327
- .entrySkeletonLineShort,
328
- .entrySkeletonLineLong,
329
- .entrySkeletonLineMedium {
330
- height: 10px;
331
- border-radius: 999px;
332
- }
333
- .entrySkeletonMedia {
334
- width: 100%;
335
- height: 140px;
336
- border-radius: 10px;
337
- }
338
- .entrySkeletonBody {
339
- display: flex;
340
- flex-direction: column;
341
- gap: 0.4rem;
342
- margin-bottom: 0.9rem;
343
- }
344
- .sliderSkeletonOverlay {
345
- position: absolute;
346
- inset: 0;
347
- z-index: 5;
348
- pointer-events: none;
349
- display: flex;
350
- align-items: center;
351
- justify-content: center;
352
- }
353
- .sliderSkeletonRow {
354
- display: flex;
355
- width: 100%;
356
- gap: 0.75rem;
357
- height: var(--rmg-slider-initial-height, var(--rmg-slider-height, 320px));
358
- }
359
- .sliderShell {
360
- position: relative;
361
- width: 100%;
362
- min-height: var(--rmg-slider-initial-height, var(--rmg-slider-height, 320px));
363
- height: var(--rmg-slider-height, var(--rmg-slider-initial-height, 320px));
364
- }
365
- .sliderSkeleton {
366
- flex: 1 1 0;
367
- height: 100%;
368
- border-radius: var(--rmg-shimmer-radius, 10px);
369
- overflow: hidden;
370
- position: relative;
371
- background:
372
- linear-gradient(
373
- 90deg,
374
- var(--rmg-shimmer-c1, #f0f2f5) 25%,
375
- var(--rmg-shimmer-c2, #e6e9ef) 37%,
376
- var(--rmg-shimmer-c3, #f0f2f5) 63%);
377
- background-size: var(--rmg-shimmer-size, 400% 100%);
378
- animation: rmgShimmer var(--rmg-shimmer-duration, 1.2s) infinite var(--rmg-shimmer-timing, linear);
379
- }
380
- .thumbSkeletonOverlay {
381
- position: absolute;
382
- inset: 0;
383
- z-index: 5;
384
- pointer-events: none;
385
- display: flex;
386
- align-items: center;
387
- justify-content: center;
388
- padding: 0.5rem;
389
- }
390
- .thumbSkeletonRow {
391
- display: flex;
392
- width: 100%;
393
- height: 100%;
394
- }
395
- .thumbSkeleton {
396
- border-radius: 6px;
397
- overflow: hidden;
398
- position: relative;
399
- background:
400
- linear-gradient(
401
- 90deg,
402
- var(--rmg-shimmer-c1, #f0f2f5) 25%,
403
- var(--rmg-shimmer-c2, #e6e9ef) 37%,
404
- var(--rmg-shimmer-c3, #f0f2f5) 63%);
405
- background-size: var(--rmg-shimmer-size, 400% 100%);
406
- animation: rmgShimmer var(--rmg-shimmer-duration, 1.2s) infinite var(--rmg-shimmer-timing, linear);
407
- }
408
-
409
- /* src/Gallery/fullscreen/FullscreenSlider.module.css */
410
- .rtl {
411
- }
412
- .track {
413
- position: relative;
414
- left: 0;
415
- }
416
- .rtl .track {
417
- left: auto;
418
- right: 0;
419
- }
420
- [data-rmg-plyr-provider=mp4] :global(.plyr__video-wrapper),
421
- [data-rmg-plyr-provider=vimeo] :global(.plyr__video-wrapper) {
422
- pointer-events: none !important;
423
- }
424
-
425
- /* src/Gallery/slider/thumbnails/ThumbnailSlider.module.css */
426
- .thumb {
427
- position: relative;
428
- border: 1px solid rgba(0, 0, 0, .12);
429
- border-radius: 6px;
430
- overflow: hidden;
431
- box-sizing: border-box;
432
- }
433
- .thumb::after {
434
- content: "";
435
- position: absolute;
436
- inset: 0;
437
- border-radius: inherit;
438
- pointer-events: none;
439
- box-shadow: 0 0 0 2px #111 inset;
440
- opacity: 0;
441
- transition: opacity 120ms ease;
442
- z-index: 1;
443
- }
444
- .thumb[data-active=true]::after {
445
- opacity: 1;
446
- }
447
- .thumb :global(img) {
448
- display: block;
449
- width: 100%;
450
- height: 100%;
451
- object-fit: cover;
452
- position: relative;
453
- z-index: 0;
454
- }
455
- .fadeInStart {
456
- opacity: 0;
457
- }
458
- .fadeInActive {
459
- opacity: 1;
460
- transition: opacity var(--rmg-intro-duration, 420ms) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));
461
- }
462
- @media (prefers-reduced-motion: reduce) {
463
- .fadeInActive {
464
- transition: none;
465
- }
466
- }
467
- .fade_container [data-rmg-thumb-index] > * {
468
- opacity: 0;
469
- transform: translateY(var(--rmg-intro-transform, 10px));
470
- transition: opacity var(--rmg-intro-duration, 300ms) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1)), transform var(--rmg-intro-duration, 300ms) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));
471
- transition-delay: calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));
472
- will-change: opacity, transform;
473
- }
474
- .fade_container.fadeInActive [data-rmg-thumb-index] > * {
475
- opacity: 1;
476
- transform: translateY(0);
477
- }
478
- .ripple {
479
- position: absolute;
480
- border-radius: 50%;
481
- transform: scale(0);
482
- animation: ripple 600ms linear;
483
- background-color: rgba(0, 0, 0, 0.3);
484
- pointer-events: none;
485
- }
486
- @keyframes ripple {
487
- to {
488
- transform: scale(4);
489
- opacity: 0;
490
- }
491
- }
492
-
493
- /* src/Gallery/slider/Slider.module.css */
494
- .rtl {
495
- }
496
- .track {
497
- position: relative;
498
- left: 0;
499
- }
500
- .rtl .track {
501
- left: auto;
502
- right: 0;
503
- }
504
- .slider_container,
505
- .fade_container {
506
- height: var(--rmg-slider-height);
507
- cursor: grab;
508
- }
509
- .viewport {
510
- overflow: hidden;
511
- height: 100%;
512
- width: 100%;
513
- position: relative;
514
- }
515
- .track {
516
- position: relative;
517
- height: 100%;
518
- width: 100%;
519
- will-change: transform;
520
- transform: translate3d(0, 0, 0);
521
- backface-visibility: hidden;
522
- }
523
- .fadeInStart {
524
- opacity: 0;
525
- }
526
- .fadeInActive {
527
- opacity: 1;
528
- transition: opacity var(--rmg-intro-duration, 420ms) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));
529
- }
530
- @media (prefers-reduced-motion: reduce) {
531
- .fadeInActive {
532
- transition: none;
533
- }
534
- }
535
- .pagination_dot {
536
- position: relative;
537
- width: 14px;
538
- height: 14px;
539
- overflow: hidden;
540
- border-radius: 50%;
541
- margin: 5px 5px 5px 5px;
542
- cursor: pointer;
543
- transition:
544
- transform 0.2s ease,
545
- background-color 0.3s ease,
546
- box-shadow 0.3s ease;
547
- }
548
- .pagination_dot:hover {
549
- transform: scale(1.2);
550
- }
551
- .pagination_dot.active {
552
- background-color: rgb(80, 163, 255);
553
- box-shadow: 0 0 8px rgba(80, 163, 255, 0.6);
554
- }
555
- .pagination_dot.inactive {
556
- background-color: lightgray;
557
- }
558
- .ripple {
559
- position: absolute;
560
- border-radius: 50%;
561
- transform: scale(0);
562
- animation: ripple 600ms linear;
563
- background-color: rgba(0, 0, 0, 0.3);
564
- pointer-events: none;
565
- }
566
- @keyframes ripple {
567
- to {
568
- transform: scale(4);
569
- opacity: 0;
570
- }
571
- }
572
- .fullscreenOverlay {
573
- position: fixed;
574
- inset: 0;
575
- opacity: 0;
576
- pointer-events: none;
577
- background-color: rgba(0, 0, 0, 0.8);
578
- transition: opacity 300ms cubic-bezier(.4, 0, .22, 1);
579
- will-change: opacity;
580
- z-index: 8999;
581
- transform: translateZ(0);
582
- backface-visibility: hidden;
583
- contain: paint;
584
- }
585
- .open {
586
- opacity: 1;
587
- pointer-events: auto;
588
- }
589
- .duplicateImg {
590
- position: fixed;
591
- display: none;
592
- transform-origin: top left;
593
- transition: transform 0.3s cubic-bezier(.4, 0, .22, 1);
594
- z-index: 9998;
595
- will-change: transform;
596
- }
597
- .closeBtn,
598
- .leftChevron,
599
- .rightChevron,
600
- .counter {
601
- position: fixed;
602
- display: none;
603
- opacity: 0;
604
- transition: opacity 0.3s cubic-bezier(.4, 0, .22, 1);
605
- z-index: 2147483602;
606
- }
607
- .closeBtn.open,
608
- .leftChevron.open,
609
- .rightChevron.open,
610
- .counter.open {
611
- display: block;
612
- opacity: 1;
613
- }
614
- .closeBtn {
615
- top: 12px;
616
- right: 12px;
617
- background: transparent;
618
- border: none;
619
- padding: 0;
620
- width: 35px;
621
- height: 35px;
622
- cursor: pointer;
623
- }
624
- .leftChevron,
625
- .rightChevron {
626
- top: 45.5%;
627
- width: 50px;
628
- height: 50px;
629
- cursor: pointer;
630
- background-color: transparent;
631
- border: none;
632
- }
633
- .leftChevron {
634
- left: 0;
635
- transform: rotate(180deg);
636
- }
637
- .rightChevron {
638
- right: 0;
639
- }
640
- .counter {
641
- top: 15px;
642
- left: 16px;
643
- color: #fff;
644
- font-size: 14px;
645
- line-height: 32px;
646
- user-select: none;
647
- text-shadow: 1px 1px 3px #4f4f4f;
648
- }
649
- .fsOverlayCaption {
650
- position: fixed;
651
- padding: 1rem 1.5rem;
652
- color: #fff;
653
- font-size: 0.875rem;
654
- pointer-events: none;
655
- opacity: 0;
656
- transform: translateY(8px);
657
- transition: opacity 300ms cubic-bezier(.4, 0, .22, 1), transform 300ms cubic-bezier(.4, 0, .22, 1);
658
- z-index: 9999;
659
- }
660
- .fsOverlayCaption.open {
661
- opacity: 1;
662
- transform: translateY(0);
663
- }
664
- .fade_container [data-rmg-idx] > * {
665
- opacity: 0;
666
- transform: translateY(var(--rmg-intro-offset, 10px));
667
- transition: opacity var(--rmg-intro-duration, 300) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1)), transform var(--rmg-intro-duration, 300) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));
668
- transition-delay: calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));
669
- will-change: opacity, transform;
670
- }
671
- .fade_container.fadeInActive [data-rmg-idx] > * {
672
- opacity: 1;
673
- transform: translateY(0);
674
- }
675
- /*# sourceMappingURL=index.css.map */
1
+ .entryRow{position:relative;min-height:var(--rmg-entry-min-height, 260px)}.entryRow[data-rmg-entry-mounted="1"] .entrySkeletonWrap{position:absolute;inset:0;z-index:1;height:auto}.entrySkeletonWrap{position:relative;display:block;opacity:1;transition:opacity .15s linear;transition-delay:0ms;pointer-events:none;z-index:0;height:var(--rmg-entry-min-height, 260px);border-radius:12px;background-color:var(--rmg-entry-skeleton-bg, transparent);overflow:hidden}.entryInner{position:relative;opacity:0;pointer-events:none;min-height:var(--rmg-entry-min-height, 260px);transition:opacity var(--rmg-entry-intro-duration, .7s) var(--rmg-entry-intro-easing, cubic-bezier(.4,0,.22,1));transition-delay:0ms;z-index:0}.entryRow[data-rmg-entry-ready="1"] .entrySkeletonWrap{opacity:0;transition-delay:var(--rmg-entry-intro-delay, 0ms)}.entryRow[data-rmg-entry-ready="1"] .entryInner{opacity:1;pointer-events:auto;transition-delay:var(--rmg-entry-intro-delay, 0ms)}.entryList{display:flex;flex-direction:column;gap:1.5rem}.entrySkelRoot{--rmg-skel-radius: 12px;width:100%}.entrySkelGroup{display:flex;min-width:0}.entrySkelStack{flex-direction:column;width:100%}.entrySkelRow{flex-direction:row;width:100%}.entrySkelCol{flex-direction:column;width:100%}.entrySkelTile{flex:0 0 auto;width:100%;height:100%;position:relative;display:block;background:var(--rmg-skel-bg, #e5e5e5);border-radius:var(--rmg-skel-radius);overflow:hidden}.entrySkelTile:after{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:blur(var(--rmg-skel-shimmer-blur, .2px));background-image:linear-gradient(var(--rmg-skel-shimmer-angle, 90deg),transparent 0%,var(--rmg-skel-shimmer-c1, rgba(255, 255, 255, .25)) 22%,var(--rmg-skel-shimmer-c2, rgba(255, 255, 255, .45)) 50%,var(--rmg-skel-shimmer-c3, rgba(255, 255, 255, .25)) 78%,transparent 100%);animation:rmgShimmer var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, linear) infinite;will-change:transform}.entrySkelRect{flex:0 0 auto;width:100%;height:16px}.entrySkelSquare{width:48px;height:48px}.entrySkelCircle{width:44px;height:44px;border-radius:999px}[data-rmg-plyr-provider=mp4] :global(.plyr__video-wrapper),[data-rmg-plyr-provider=vimeo] :global(.plyr__video-wrapper){pointer-events:none!important}.thumb{position:relative;border:1px solid rgba(0,0,0,.12);border-radius:6px;overflow:hidden;box-sizing:border-box}.thumb:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px #111 inset;opacity:0;transition:opacity .12s ease;z-index:1}.thumb[data-active=true]:after{opacity:1}.thumb :global(img){display:block;width:100%;height:100%;object-fit:cover;position:relative;z-index:0}.fade_container [data-rmg-thumb-index]>*{opacity:0;transform:translateY(var(--rmg-intro-transform, 10px));transition:opacity var(--rmg-intro-duration, .3s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1)),transform var(--rmg-intro-duration, .3s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.fade_container.fadeInActive [data-rmg-thumb-index]>*{opacity:1;transform:translateY(0)}.fullscreenOverlay{position:fixed;inset:0;opacity:0;pointer-events:none;background-color:#000c;transition:opacity .3s cubic-bezier(.4,0,.22,1);will-change:opacity;z-index:8999;transform:translateZ(0);backface-visibility:hidden;contain:paint}.open{opacity:1;pointer-events:auto}.duplicateImg{position:fixed;display:none;transform-origin:top left;transition:transform .3s cubic-bezier(.4,0,.22,1);z-index:9998;will-change:transform}.closeBtn,.leftChevron,.rightChevron,.counter{position:fixed;opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.22,1);z-index:2147483602}.closeBtn.open,.leftChevron.open,.rightChevron.open,.counter.open{opacity:1;pointer-events:auto}.closeBtn{top:12px;right:12px;background:transparent;border:none;padding:0;width:35px;height:35px;cursor:pointer}.leftChevron,.rightChevron{top:45.5%;width:50px;height:50px;cursor:pointer;background-color:transparent;border:none}.leftChevron{left:0;transform:rotate(180deg)}.rightChevron{right:0}.counter{top:15px;left:16px;color:#fff;font-size:14px;line-height:32px;user-select:none;text-shadow:1px 1px 3px #4f4f4f}.fsOverlayCaption{position:fixed;padding:1rem 1.5rem;color:#fff;font-size:.875rem;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .3s cubic-bezier(.4,0,.22,1),transform .3s cubic-bezier(.4,0,.22,1);z-index:9999}.fsOverlayCaption.open{opacity:1;transform:translateY(0)}.track{position:relative;left:0}.rtl .track{left:auto;right:0}.slider_container,.fade_container{height:100%;min-height:var(--rmg-slider-height, var(--rmg-slider-initial-height, 1px))}.viewport{overflow:hidden;height:100%;width:100%;position:relative}.track{position:relative;height:100%;width:100%;will-change:transform;transform:translateZ(0);backface-visibility:hidden}.fadeInStart{opacity:0}.fadeInActive{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}@media(prefers-reduced-motion:reduce){.fadeInActive{transition:none}}.pagination_dot{position:relative;width:14px;height:14px;overflow:hidden;border-radius:50%;margin:5px;cursor:pointer;transition:transform .2s ease,background-color .3s ease,box-shadow .3s ease}.pagination_dot:hover{transform:scale(1.2)}.pagination_dot.active{background-color:#50a3ff;box-shadow:0 0 8px #50a3ff99}.pagination_dot.inactive{background-color:#d3d3d3}.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background-color:#0000004d;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}.fade_container [data-rmg-idx]>*{opacity:0;transform:translateY(var(--rmg-intro-offset, 10px));transition:opacity var(--rmg-intro-duration, 600) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1)),transform var(--rmg-intro-duration, 600) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 60ms));will-change:opacity,transform}.fade_container.fadeInActive [data-rmg-idx]>*{opacity:1;transform:translateY(0)}.sliderSkeletonOverlay{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;justify-content:center}.sliderSkeletonRow{display:flex;width:100%;gap:.75rem;height:var(--rmg-slider-initial-height, var(--rmg-slider-height, 320px));align-items:stretch}.sliderShell{position:relative;width:100%;container-type:inline-size;height:var(--rmg-slider-height, var(--rmg-slider-initial-height, 1px));min-height:var(--rmg-slider-height, var(--rmg-slider-initial-height, 1px));max-height:var(--rmg-slider-height, var(--rmg-slider-initial-height, 1px))}.sliderSkeletonItem{flex:1 1 0;height:100%;min-width:0;display:flex}.sliderSkeletonGroup{display:flex;min-width:0;min-height:0;width:100%}.sliderSkeleton{width:100%;height:auto;position:relative;overflow:hidden;border-radius:var(--rmg-skel-radius, 12px);background:var(--rmg-skel-bg, #e5e5e5)}.sliderSkeleton:after{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:blur(var(--rmg-skel-shimmer-blur, .2px));background-image:linear-gradient(var(--rmg-skel-shimmer-angle, 90deg),transparent 0%,var(--rmg-skel-shimmer-c1, rgba(255, 255, 255, .25)) 22%,var(--rmg-skel-shimmer-c2, rgba(255, 255, 255, .45)) 50%,var(--rmg-skel-shimmer-c3, rgba(255, 255, 255, .25)) 78%,transparent 100%);animation:rmgShimmer var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, linear) infinite;will-change:transform}@media(prefers-reduced-motion:reduce){.sliderSkeleton:after{animation:none;opacity:0}}.thumbSkeletonOverlay{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;align-items:center;justify-content:center;padding:.5rem}.thumbSkeletonRow{display:flex;width:100%;height:100%}.thumbSkeleton{border-radius:6px;overflow:hidden;position:relative;background:linear-gradient(90deg,var(--rmg-shimmer-c1, #f0f2f5) 25%,var(--rmg-shimmer-c2, #e6e9ef) 37%,var(--rmg-shimmer-c3, #f0f2f5) 63%);background-size:var(--rmg-shimmer-size, 400% 100%);animation:rmgShimmer var(--rmg-shimmer-duration, 1.2s) infinite var(--rmg-shimmer-timing, linear)}.gridRoot,.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--rmg-grid-min, 160px),1fr));gap:var(--rmg-grid-gap, 8px)}.gridItem{position:relative;display:block;cursor:pointer}.gridItem img,.gridItem video{display:block;width:100%;height:auto;object-fit:cover}.gridSkeletonOverlay{position:relative;width:100%}.gridSkeletonGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--rmg-grid-min, 160px),1fr));gap:var(--rmg-grid-gap, 8px)}.gridSkeletonItem{position:relative;width:100%}@keyframes rmgShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media(prefers-reduced-motion:reduce){.gridSkeletonItem{animation:none}}.gridSkelSquare{aspect-ratio:1 / 1}.gridSkelCircle{aspect-ratio:1 / 1;border-radius:999px}.gridSkelGroup{display:flex;min-width:0}.gridSkelRow{flex-direction:row;align-items:center}.gridSkelCol,.gridSkelStack{flex-direction:column;align-items:stretch}.gridSkelTile{position:relative;display:block;width:100%;min-width:0;height:auto;background:var(--rmg-skel-bg, #e5e5e5);border-radius:var(--rmg-skel-radius, 12px);overflow:hidden}.gridSkelShimmer:before{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:blur(var(--rmg-skel-shimmer-blur, .2px));background-image:linear-gradient(var(--rmg-skel-shimmer-angle, 90deg),transparent 0%,var(--rmg-skel-shimmer-c1, rgba(255, 255, 255, .25)) 22%,var(--rmg-skel-shimmer-c2, rgba(255, 255, 255, .45)) 50%,var(--rmg-skel-shimmer-c3, rgba(255, 255, 255, .25)) 78%,transparent 100%);animation:rmgShimmer var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, linear) infinite;will-change:transform}.masonryRoot{display:flex;align-items:flex-start;width:100%;column-gap:var(--rmg-masonry-gap, 8px)}.masonryCol{flex:1;min-width:0;display:flex;flex-direction:column}.masonryItem{position:relative;display:block;cursor:pointer}.masonryItem img,.masonryItem video{display:block;width:100%;object-fit:cover}.introContainer{opacity:0}.introActive{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}.introContainer [data-rmg-idx]{opacity:0;transform:var(--rmg-intro-transform, translateY(10px) scale(.99));transition:opacity .3s cubic-bezier(.4,0,.22,1),transform .3s cubic-bezier(.4,0,.22,1);transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.introContainer.introActive [data-rmg-idx]{opacity:1;transform:none}.masonrySkelItem{display:block;width:100%;break-inside:avoid;page-break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:var(--rmg-mskel-gap)}.masonrySkeletonOverlay{position:relative;inset:0;z-index:5;pointer-events:none}.masonrySkeletonRoot{width:100%}.masonrySkeletonCol{flex:1;min-width:0;display:flex;flex-direction:column}.masonrySkeletonItem{display:block;width:100%;break-inside:avoid;page-break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:var(--rmg-mskel-gap);border-radius:var(--rmg-skel-radius, 12px);background:var(--rmg-skel-bg, #e5e5e5);overflow:hidden;position:relative}.masonrySkeletonItem:after{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:blur(var(--rmg-skel-shimmer-blur, .2px));background-image:linear-gradient(var(--rmg-skel-shimmer-angle, 90deg),transparent 0%,var(--rmg-skel-shimmer-c1, rgba(255, 255, 255, .25)) 22%,var(--rmg-skel-shimmer-c2, rgba(255, 255, 255, .45)) 50%,var(--rmg-skel-shimmer-c3, rgba(255, 255, 255, .25)) 78%,transparent 100%);animation:rmgShimmer var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, linear) infinite;will-change:transform}@keyframes rmgShimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}