@total_onion/onion-library 3.0.40 → 3.0.42

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 (11) hide show
  1. package/components/block-divider-v3/divider-v3.scss +74 -66
  2. package/package.json +1 -1
  3. package/public/block-accordion-v3/accordion-v3.css +0 -84
  4. package/public/block-post-info-v3/post-info-v3.css +0 -84
  5. package/public/block-product-info-v3/product-info-v3.css +0 -84
  6. package/public/block-single-responsive-image-v3/single-responsive-image-v3.css +53 -51
  7. package/public/block-standard-content-v3/standard-content-v3.css +359 -441
  8. package/public/block-sub-group-container-v3/sub-group-container-v3.css +258 -256
  9. package/public/block-video-content-v3/video-content-v3.css +96 -94
  10. package/public/dynamicBlockScss-v3.scss +36 -0
  11. package/public/publicBundleBase.css +315 -349
package/public/publicBundleBase.css CHANGED
@@ -791,35 +791,6 @@
791
791
  }
792
792
  }
793
793
  @media (max-width: 768px) {
794
- .cmpl-text-editor-settings .sh-l-fs-mobile {
795
- letter-spacing: var(--sh-l-letter-spacing);
796
- line-height: var(--sh-l-line-height);
797
- font-family: var(--sh-l-font-family);
798
- --default-font-weight: var(--sh-l-default-font-weight);
799
- font-weight: var(--default-font-weight);
800
- }
801
- .cmpl-text-editor-settings .sh-l-fs-mobile strong,
802
- .cmpl-text-editor-settings .sh-l-fs-mobile b {
803
- font-weight: var(--sh-l-bold-font-weight);
804
- }
805
- .cmpl-text-editor-settings .sh-l-fs-mobile {
806
- font-size: clamp(10px, 32 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
807
- font-size: clamp(var(--sh-l-font-size-min-mobile, 10px), var(--sh-l-mobile, 32) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-l-font-size-max-mobile, 180px));
808
- }
809
- }
810
- @media screen and (max-width: 768px) and (min-width: 768px) {
811
- .cmpl-text-editor-settings .sh-l-fs-mobile {
812
- font-size: clamp(10px, 32 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
813
- font-size: clamp(var(--sh-l-font-size-min-mobile, 10px), var(--sh-l-portrait, 32) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-l-font-size-max-mobile, 180px));
814
- }
815
- }
816
- @media screen and (max-width: 768px) and (min-width: 1024px) {
817
- .cmpl-text-editor-settings .sh-l-fs-mobile {
818
- font-size: clamp(10px, 44 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
819
- font-size: clamp(var(--sh-l-font-size-min-desktop, 10px), var(--sh-l-landscape, 44) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-l-font-size-max-desktop, 180px));
820
- }
821
- }
822
- @media screen and (max-width: 768px) and (min-width: 1440px) {
823
794
  .cmpl-text-editor-settings .sh-l-fs-mobile {
824
795
  font-size: clamp(10px, 44 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
825
796
  font-size: clamp(var(--sh-l-font-size-min-desktop, 10px), var(--sh-l-desktop, 44) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-l-font-size-max-desktop, 180px));
@@ -828,35 +799,6 @@
828
799
  }
829
800
  }
830
801
  @media (min-width: 768px) and (max-width: 1024px) {
831
- .cmpl-text-editor-settings .sh-l-fs-portrait {
832
- letter-spacing: var(--sh-l-letter-spacing);
833
- line-height: var(--sh-l-line-height);
834
- font-family: var(--sh-l-font-family);
835
- --default-font-weight: var(--sh-l-default-font-weight);
836
- font-weight: var(--default-font-weight);
837
- }
838
- .cmpl-text-editor-settings .sh-l-fs-portrait strong,
839
- .cmpl-text-editor-settings .sh-l-fs-portrait b {
840
- font-weight: var(--sh-l-bold-font-weight);
841
- }
842
- .cmpl-text-editor-settings .sh-l-fs-portrait {
843
- font-size: clamp(10px, 32 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
844
- font-size: clamp(var(--sh-l-font-size-min-mobile, 10px), var(--sh-l-mobile, 32) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-l-font-size-max-mobile, 180px));
845
- }
846
- }
847
- @media screen and (min-width: 768px) and (max-width: 1024px) and (min-width: 768px) {
848
- .cmpl-text-editor-settings .sh-l-fs-portrait {
849
- font-size: clamp(10px, 32 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
850
- font-size: clamp(var(--sh-l-font-size-min-mobile, 10px), var(--sh-l-portrait, 32) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-l-font-size-max-mobile, 180px));
851
- }
852
- }
853
- @media screen and (min-width: 768px) and (max-width: 1024px) and (min-width: 1024px) {
854
- .cmpl-text-editor-settings .sh-l-fs-portrait {
855
- font-size: clamp(10px, 44 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
856
- font-size: clamp(var(--sh-l-font-size-min-desktop, 10px), var(--sh-l-landscape, 44) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-l-font-size-max-desktop, 180px));
857
- }
858
- }
859
- @media screen and (min-width: 768px) and (max-width: 1024px) and (min-width: 1440px) {
860
802
  .cmpl-text-editor-settings .sh-l-fs-portrait {
861
803
  font-size: clamp(10px, 44 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), 180px);
862
804
  font-size: clamp(var(--sh-l-font-size-min-desktop, 10px), var(--sh-l-desktop, 44) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier), var(--sh-l-font-size-max-desktop, 180px));
@@ -1257,7 +1199,7 @@
1257
1199
  }
1258
1200
  }
1259
1201
  .p-s-sizing {
1260
- line-height: var(--paragraph-line-height);
1202
+ line-height: var(--paragraph-small-line-height);
1261
1203
  letter-spacing: var(--paragraph-letter-spacing);
1262
1204
  font-family: var(--paragraph-font-family);
1263
1205
  }
@@ -1312,7 +1254,7 @@
1312
1254
  }
1313
1255
  }
1314
1256
  .p-xs-sizing {
1315
- line-height: var(--paragraph-line-height);
1257
+ line-height: var(--paragraph-extra-small-line-height);
1316
1258
  letter-spacing: var(--paragraph-letter-spacing);
1317
1259
  font-family: var(--paragraph-font-family);
1318
1260
  }
@@ -1321,7 +1263,7 @@
1321
1263
  font-weight: var(--paragraph-bold-font-weight);
1322
1264
  }
1323
1265
  .p-xs-sizing:has(.font-tertiary) {
1324
- line-height: calc(var(--paragraph-line-height) * var(--global-line-height-multiplier-tertiary));
1266
+ line-height: calc(var(--paragraph-extra-small-line-height) * var(--global-line-height-multiplier-tertiary));
1325
1267
  }
1326
1268
  .p-xs-sizing em {
1327
1269
  font-style: italic;
@@ -1367,7 +1309,7 @@
1367
1309
  }
1368
1310
  }
1369
1311
  .p-xxs-sizing {
1370
- line-height: var(--paragraph-line-height);
1312
+ line-height: var(--paragraph-extra-extra-small-line-height);
1371
1313
  letter-spacing: var(--paragraph-letter-spacing);
1372
1314
  font-family: var(--paragraph-font-family);
1373
1315
  }
@@ -1713,17 +1655,22 @@
1713
1655
  }
1714
1656
  }
1715
1657
  }
1716
- .cmpl-block-padding {
1717
- padding: calc(var(--global-inline-spacing) * var(--padding-block-multiplier-mobile-top)) calc(var(--global-inline-spacing) * var(--padding-inline-multiplier-mobile-right)) calc(var(--global-inline-spacing) * var(--padding-block-multiplier-mobile-bottom)) calc(var(--global-inline-spacing) * var(--padding-inline-multiplier-mobile-left));
1718
- }
1719
- @media screen and (min-width: 768px) {
1658
+ @layer components {
1720
1659
  .cmpl-block-padding {
1721
- padding: calc(var(--global-inline-spacing) * var(--padding-block-multiplier-portrait-top)) calc(var(--global-inline-spacing) * var(--padding-inline-multiplier-portrait-right)) calc(var(--global-inline-spacing) * var(--padding-block-multiplier-portrait-bottom)) calc(var(--global-inline-spacing) * var(--padding-inline-multiplier-portrait-left));
1660
+ padding: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
1661
+ padding: calc(var(--global-inline-spacing) * var(--padding-block-multiplier-mobile-top, 0)) calc(var(--global-inline-spacing) * var(--padding-inline-multiplier-mobile-right, 0)) calc(var(--global-inline-spacing) * var(--padding-block-multiplier-mobile-bottom, 0)) calc(var(--global-inline-spacing) * var(--padding-inline-multiplier-mobile-left, 0));
1722
1662
  }
1723
- }
1724
- @media screen and (min-width: 1024px) {
1725
- .cmpl-block-padding {
1726
- padding: calc(var(--global-inline-spacing) * var(--padding-block-multiplier-desktop-top)) calc(var(--global-inline-spacing) * var(--padding-inline-multiplier-desktop-right)) calc(var(--global-inline-spacing) * var(--padding-block-multiplier-desktop-bottom)) calc(var(--global-inline-spacing) * var(--padding-inline-multiplier-desktop-left));
1663
+ @media screen and (min-width: 768px) {
1664
+ .cmpl-block-padding {
1665
+ padding: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
1666
+ padding: calc(var(--global-inline-spacing) * var(--padding-block-multiplier-portrait-top, 0)) calc(var(--global-inline-spacing) * var(--padding-inline-multiplier-portrait-right, 0)) calc(var(--global-inline-spacing) * var(--padding-block-multiplier-portrait-bottom, 0)) calc(var(--global-inline-spacing) * var(--padding-inline-multiplier-portrait-left, 0));
1667
+ }
1668
+ }
1669
+ @media screen and (min-width: 1024px) {
1670
+ .cmpl-block-padding {
1671
+ padding: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
1672
+ padding: calc(var(--global-inline-spacing) * var(--padding-block-multiplier-desktop-top, 0)) calc(var(--global-inline-spacing) * var(--padding-inline-multiplier-desktop-right, 0)) calc(var(--global-inline-spacing) * var(--padding-block-multiplier-desktop-bottom, 0)) calc(var(--global-inline-spacing) * var(--padding-inline-multiplier-desktop-left, 0));
1673
+ }
1727
1674
  }
1728
1675
  }
1729
1676
  .cmpl-block-animations {
@@ -1845,7 +1792,8 @@
1845
1792
  }
1846
1793
  @layer components {
1847
1794
  .cmpl-block-settings {
1848
- min-height: calc(var(--block-min-height-mobile) / var(--design-reference) * var(--screen-width));
1795
+ min-height: calc(0 / var(--design-reference) * var(--screen-width));
1796
+ min-height: calc(var(--block-min-height-mobile, 0) / var(--design-reference) * var(--screen-width));
1849
1797
  height: auto;
1850
1798
  height: var(--block-height-mobile, auto);
1851
1799
  overflow: hidden;
@@ -1853,14 +1801,26 @@
1853
1801
  border-radius: var(--block-border-radius);
1854
1802
  position: relative;
1855
1803
  position: var(--block-position-type, relative);
1856
- z-index: var(--block-z-index);
1857
- top: var(--block-position-top);
1858
- right: var(--block-position-right);
1859
- bottom: var(--block-position-bottom);
1860
- left: var(--block-position-left);
1861
- background-color: var(--block-background-colour);
1862
- pointer-events: var(--block-pointer-events);
1863
- aspect-ratio: var(--block-aspect-ratio-mobile);
1804
+ z-index: 5;
1805
+ z-index: var(--block-z-index, 5);
1806
+ top: auto;
1807
+ top: initial;
1808
+ top: var(--block-position-top, unset);
1809
+ right: auto;
1810
+ right: initial;
1811
+ right: var(--block-position-right, unset);
1812
+ bottom: auto;
1813
+ bottom: initial;
1814
+ bottom: var(--block-position-bottom, unset);
1815
+ left: auto;
1816
+ left: initial;
1817
+ left: var(--block-position-left, unset);
1818
+ background-color: transparent;
1819
+ background-color: var(--block-background-colour, transparent);
1820
+ pointer-events: all;
1821
+ pointer-events: var(--block-pointer-events, all);
1822
+ aspect-ratio: unset;
1823
+ aspect-ratio: var(--block-aspect-ratio-mobile, unset);
1864
1824
  }
1865
1825
  .wp-admin .cmpl-block-settings {
1866
1826
  position: relative;
@@ -1869,16 +1829,20 @@
1869
1829
  .cmpl-block-settings {
1870
1830
  height: auto;
1871
1831
  height: var(--block-height-portrait, auto);
1872
- aspect-ratio: var(--block-aspect-ratio-portrait);
1873
- min-height: calc(var(--block-min-height-portrait) / var(--design-reference) * var(--screen-width));
1832
+ aspect-ratio: unset;
1833
+ aspect-ratio: var(--block-aspect-ratio-portrait, unset);
1834
+ min-height: calc(0 / var(--design-reference) * var(--screen-width));
1835
+ min-height: calc(var(--block-min-height-portrait, 0) / var(--design-reference) * var(--screen-width));
1874
1836
  }
1875
1837
  }
1876
1838
  @media screen and (min-width: 1024px) {
1877
1839
  .cmpl-block-settings {
1878
1840
  height: auto;
1879
1841
  height: var(--block-height-desktop, auto);
1880
- aspect-ratio: var(--block-aspect-ratio);
1881
- min-height: calc(var(--block-min-height-desktop) / var(--design-reference) * var(--screen-width));
1842
+ aspect-ratio: unset;
1843
+ aspect-ratio: var(--block-aspect-ratio, unset);
1844
+ min-height: calc(0 / var(--design-reference) * var(--screen-width));
1845
+ min-height: calc(var(--block-min-height-desktop, 0) / var(--design-reference) * var(--screen-width));
1882
1846
  }
1883
1847
  }
1884
1848
  }
@@ -4474,303 +4438,305 @@
4474
4438
  background-color: var(--cta-style-20-selected-background-colour);
4475
4439
  border: var(--cta-style-20-border-width) solid var(--cta-style-20-selected-border-colour);
4476
4440
  }
4477
- .cmpl-core-group-container-styles {
4478
- display: grid;
4479
- grid-template: "main"/1fr;
4480
- place-items: center;
4481
- }
4482
- .cmpl-core-group-container-styles__grid-container {
4483
- grid-area: main;
4484
- place-self: stretch;
4485
- }
4486
- .cmpl-core-group-container-styles__grid-container.flex-layout-container {
4487
- display: flex;
4488
- display: var(--display-type, flex);
4489
- justify-content: flex-start;
4490
- justify-content: var(--justify-content-mobile, flex-start);
4491
- flex-direction: row;
4492
- flex-direction: var(--flex-direction-mobile, row);
4493
- align-items: center;
4494
- align-items: var(--align-items-mobile, center);
4495
- gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
4496
- gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-mobile, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-mobile, 0));
4497
- flex-wrap: nowrap;
4498
- flex-wrap: var(--flex-wrap-mobile, nowrap);
4499
- }
4500
- @media screen and (min-width: 768px) {
4501
- .cmpl-core-group-container-styles__grid-container.flex-layout-container {
4502
- justify-content: flex-start;
4503
- justify-content: var(--justify-content-portrait, flex-start);
4504
- flex-direction: row;
4505
- flex-direction: var(--flex-direction-portrait, row);
4506
- align-items: center;
4507
- align-items: var(--align-items-portrait, center);
4508
- gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
4509
- gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-portrait, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-portrait, 0));
4510
- flex-wrap: nowrap;
4511
- flex-wrap: var(--flex-wrap-portrait, nowrap);
4441
+ @layer base-styles {
4442
+ .cmpl-core-group-container-styles {
4443
+ display: grid;
4444
+ grid-template: "main"/1fr;
4445
+ place-items: center;
4446
+ }
4447
+ .cmpl-core-group-container-styles__grid-container {
4448
+ grid-area: main;
4449
+ place-self: stretch;
4512
4450
  }
4513
- }
4514
- @media screen and (min-width: 1024px) {
4515
4451
  .cmpl-core-group-container-styles__grid-container.flex-layout-container {
4452
+ display: flex;
4453
+ display: var(--display-type, flex);
4516
4454
  justify-content: flex-start;
4517
- justify-content: var(--justify-content-desktop, flex-start);
4455
+ justify-content: var(--justify-content-mobile, flex-start);
4518
4456
  flex-direction: row;
4519
- flex-direction: var(--flex-direction-desktop, row);
4457
+ flex-direction: var(--flex-direction-mobile, row);
4520
4458
  align-items: center;
4521
- align-items: var(--align-items-desktop, center);
4459
+ align-items: var(--align-items-mobile, center);
4522
4460
  gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
4523
- gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-desktop, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-desktop, 0));
4461
+ gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-mobile, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-mobile, 0));
4524
4462
  flex-wrap: nowrap;
4525
- flex-wrap: var(--flex-wrap-desktop, nowrap);
4463
+ flex-wrap: var(--flex-wrap-mobile, nowrap);
4526
4464
  }
4527
- }
4528
- .cmpl-core-group-container-styles__grid-container.grid-layout-container {
4529
- display: "grid";
4530
- display: var(--display-type, "grid");
4531
- position: relative;
4532
- scroll-behavior: smooth;
4533
- overscroll-behavior-x: contain;
4534
- scroll-snap-type: none;
4535
- scroll-snap-type: var(--scroll-snap-type-mobile, none);
4536
- }
4537
- .cmpl-core-group-container-styles__grid-container.grid-layout-container > div {
4538
- scroll-snap-align: start;
4539
- scroll-snap-align: var(--scroll-snap-align-mobile, start);
4540
- }
4541
- .cmpl-core-group-container-styles__grid-container.grid-layout-container {
4542
- overflow: hidden;
4543
- overflow: var(--container-overflow-type-mobile, hidden);
4544
- grid-gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
4545
- grid-gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-mobile, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-mobile, 0));
4546
- grid-auto-flow: row;
4547
- grid-auto-flow: var(--grid-auto-flow-mobile, row);
4548
- grid-auto-columns: 1fr;
4549
- grid-auto-columns: var(--grid-auto-columns-mobile, 1fr);
4550
- grid-auto-rows: auto;
4551
- grid-auto-rows: var(--grid-auto-rows-mobile, auto);
4552
- grid-template-columns: var(--grid-template-columns-custom-mobile, repeat(var(--grid-template-columns-mobile), 1fr));
4553
- grid-template-columns: var(--grid-template-columns-custom-mobile, repeat(var(--grid-template-columns-mobile), var(--grid-auto-columns-mobile, 1fr)));
4554
- grid-template-rows: var(--grid-template-rows-custom-mobile, repeat(var(--grid-template-rows-mobile), 1fr));
4555
- grid-template-rows: var(--grid-template-rows-custom-mobile, repeat(var(--grid-template-rows-mobile), var(--grid-auto-rows-mobile, 1fr)));
4556
- }
4557
- @media screen and (min-width: 1024px) {
4558
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(left) {
4559
- content: "\25c4";
4560
- position: absolute;
4561
- place-self: center flex-start;
4562
- z-index: 50;
4563
- }
4564
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(right) {
4565
- content: "\25ba";
4566
- position: absolute;
4567
- place-self: center flex-end;
4568
- z-index: 50;
4569
- }
4570
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(*) {
4571
- border: 1px solid black;
4572
- border-radius: 10px;
4573
- font-size: var(--scroll-button-font-size, calc(30 / var(--design-reference) * var(--screen-width)));
4574
- background: rgba(0, 0, 0, 0.163);
4575
- color: white;
4576
- opacity: 0.7;
4577
- cursor: pointer;
4578
- transition: scale 0.3s ease-in-out;
4579
- }
4580
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(*):hover,
4581
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(*):focus {
4582
- opacity: 1;
4583
- scale: 1.2;
4584
- }
4585
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(*):active {
4586
- translate: 1px 1px;
4587
- }
4588
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(*):disabled {
4589
- opacity: 0.2;
4590
- cursor: inherit;
4591
- }
4592
- }
4593
- @media screen and (min-width: 768px) and (max-width: 1023px) {
4594
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(left) {
4595
- content: "\25c4";
4596
- position: absolute;
4597
- place-self: center flex-start;
4598
- z-index: 50;
4599
- }
4600
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(right) {
4601
- content: "\25ba";
4602
- position: absolute;
4603
- place-self: center flex-end;
4604
- z-index: 50;
4605
- }
4606
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(*) {
4607
- border: 1px solid black;
4608
- border-radius: 10px;
4609
- font-size: var(--scroll-button-font-size, calc(30 / var(--design-reference) * var(--screen-width)));
4610
- background: rgba(0, 0, 0, 0.163);
4611
- color: white;
4612
- opacity: 0.7;
4613
- cursor: pointer;
4614
- transition: scale 0.3s ease-in-out;
4615
- }
4616
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(*):hover,
4617
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(*):focus {
4618
- opacity: 1;
4619
- scale: 1.2;
4620
- }
4621
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(*):active {
4622
- translate: 1px 1px;
4623
- }
4624
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(*):disabled {
4625
- opacity: 0.2;
4626
- cursor: inherit;
4627
- }
4628
- }
4629
- @media screen and (max-width: 767px) {
4630
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(left) {
4631
- content: "\25c4";
4632
- position: absolute;
4633
- place-self: center flex-start;
4634
- z-index: 50;
4635
- }
4636
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(right) {
4637
- content: "\25ba";
4638
- position: absolute;
4639
- place-self: center flex-end;
4640
- z-index: 50;
4641
- }
4642
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(*) {
4643
- border: 1px solid black;
4644
- border-radius: 10px;
4645
- font-size: var(--scroll-button-font-size, calc(30 / var(--design-reference) * var(--screen-width)));
4646
- background: rgba(0, 0, 0, 0.163);
4647
- color: white;
4648
- opacity: 0.7;
4649
- cursor: pointer;
4650
- transition: scale 0.3s ease-in-out;
4651
- }
4652
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(*):hover,
4653
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(*):focus {
4654
- opacity: 1;
4655
- scale: 1.2;
4656
- }
4657
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(*):active {
4658
- translate: 1px 1px;
4465
+ @media screen and (min-width: 768px) {
4466
+ .cmpl-core-group-container-styles__grid-container.flex-layout-container {
4467
+ justify-content: flex-start;
4468
+ justify-content: var(--justify-content-portrait, flex-start);
4469
+ flex-direction: row;
4470
+ flex-direction: var(--flex-direction-portrait, row);
4471
+ align-items: center;
4472
+ align-items: var(--align-items-portrait, center);
4473
+ gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
4474
+ gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-portrait, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-portrait, 0));
4475
+ flex-wrap: nowrap;
4476
+ flex-wrap: var(--flex-wrap-portrait, nowrap);
4477
+ }
4659
4478
  }
4660
- .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(*):disabled {
4661
- opacity: 0.2;
4662
- cursor: inherit;
4479
+ @media screen and (min-width: 1024px) {
4480
+ .cmpl-core-group-container-styles__grid-container.flex-layout-container {
4481
+ justify-content: flex-start;
4482
+ justify-content: var(--justify-content-desktop, flex-start);
4483
+ flex-direction: row;
4484
+ flex-direction: var(--flex-direction-desktop, row);
4485
+ align-items: center;
4486
+ align-items: var(--align-items-desktop, center);
4487
+ gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
4488
+ gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-desktop, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-desktop, 0));
4489
+ flex-wrap: nowrap;
4490
+ flex-wrap: var(--flex-wrap-desktop, nowrap);
4491
+ }
4663
4492
  }
4664
- }
4665
- @media screen and (min-width: 768px) {
4666
4493
  .cmpl-core-group-container-styles__grid-container.grid-layout-container {
4494
+ display: "grid";
4495
+ display: var(--display-type, "grid");
4496
+ position: relative;
4497
+ scroll-behavior: smooth;
4498
+ overscroll-behavior-x: contain;
4667
4499
  scroll-snap-type: none;
4668
- scroll-snap-type: var(--scroll-snap-type-portrait, none);
4500
+ scroll-snap-type: var(--scroll-snap-type-mobile, none);
4669
4501
  }
4670
4502
  .cmpl-core-group-container-styles__grid-container.grid-layout-container > div {
4671
4503
  scroll-snap-align: start;
4672
- scroll-snap-align: var(--scroll-snap-align-portrait, start);
4504
+ scroll-snap-align: var(--scroll-snap-align-mobile, start);
4673
4505
  }
4674
4506
  .cmpl-core-group-container-styles__grid-container.grid-layout-container {
4675
4507
  overflow: hidden;
4676
- overflow: var(--container-overflow-type-portrait, hidden);
4508
+ overflow: var(--container-overflow-type-mobile, hidden);
4509
+ grid-gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
4510
+ grid-gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-mobile, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-mobile, 0));
4677
4511
  grid-auto-flow: row;
4678
- grid-auto-flow: var(--grid-auto-flow-portrait, row);
4512
+ grid-auto-flow: var(--grid-auto-flow-mobile, row);
4679
4513
  grid-auto-columns: 1fr;
4680
- grid-auto-columns: var(--grid-auto-columns-portrait, 1fr);
4514
+ grid-auto-columns: var(--grid-auto-columns-mobile, 1fr);
4681
4515
  grid-auto-rows: auto;
4682
- grid-auto-rows: var(--grid-auto-rows-portrait, auto);
4683
- grid-gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
4684
- grid-gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-portrait, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-portrait, 0));
4685
- grid-template-columns: var(--grid-template-columns-custom-portrait, repeat(var(--grid-template-columns-portrait), 1fr));
4686
- grid-template-columns: var(--grid-template-columns-custom-portrait, repeat(var(--grid-template-columns-portrait), var(--grid-auto-columns-portrait, 1fr)));
4687
- grid-template-rows: var(--grid-template-rows-custom-portrait, repeat(var(--grid-template-rows-portrait), 1fr));
4688
- grid-template-rows: var(--grid-template-rows-custom-portrait, repeat(var(--grid-template-rows-portrait), var(--grid-auto-rows-portrait, 1fr)));
4516
+ grid-auto-rows: var(--grid-auto-rows-mobile, auto);
4517
+ grid-template-columns: var(--grid-template-columns-custom-mobile, repeat(var(--grid-template-columns-mobile), 1fr));
4518
+ grid-template-columns: var(--grid-template-columns-custom-mobile, repeat(var(--grid-template-columns-mobile), var(--grid-auto-columns-mobile, 1fr)));
4519
+ grid-template-rows: var(--grid-template-rows-custom-mobile, repeat(var(--grid-template-rows-mobile), 1fr));
4520
+ grid-template-rows: var(--grid-template-rows-custom-mobile, repeat(var(--grid-template-rows-mobile), var(--grid-auto-rows-mobile, 1fr)));
4689
4521
  }
4690
- }
4691
- @media screen and (min-width: 1024px) {
4692
- .cmpl-core-group-container-styles__grid-container.grid-layout-container {
4693
- scroll-snap-type: none;
4694
- scroll-snap-type: var(--scroll-snap-type-desktop, none);
4522
+ @media screen and (min-width: 1024px) {
4523
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(left) {
4524
+ content: "\25c4";
4525
+ position: absolute;
4526
+ place-self: center flex-start;
4527
+ z-index: 50;
4528
+ }
4529
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(right) {
4530
+ content: "\25ba";
4531
+ position: absolute;
4532
+ place-self: center flex-end;
4533
+ z-index: 50;
4534
+ }
4535
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(*) {
4536
+ border: 1px solid black;
4537
+ border-radius: 10px;
4538
+ font-size: var(--scroll-button-font-size, calc(30 / var(--design-reference) * var(--screen-width)));
4539
+ background: rgba(0, 0, 0, 0.163);
4540
+ color: white;
4541
+ opacity: 0.7;
4542
+ cursor: pointer;
4543
+ transition: scale 0.3s ease-in-out;
4544
+ }
4545
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(*):hover,
4546
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(*):focus {
4547
+ opacity: 1;
4548
+ scale: 1.2;
4549
+ }
4550
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(*):active {
4551
+ translate: 1px 1px;
4552
+ }
4553
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(*):disabled {
4554
+ opacity: 0.2;
4555
+ cursor: inherit;
4556
+ }
4695
4557
  }
4696
- .cmpl-core-group-container-styles__grid-container.grid-layout-container > div {
4697
- scroll-snap-align: start;
4698
- scroll-snap-align: var(--scroll-snap-align-desktop, start);
4558
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
4559
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(left) {
4560
+ content: "\25c4";
4561
+ position: absolute;
4562
+ place-self: center flex-start;
4563
+ z-index: 50;
4564
+ }
4565
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(right) {
4566
+ content: "\25ba";
4567
+ position: absolute;
4568
+ place-self: center flex-end;
4569
+ z-index: 50;
4570
+ }
4571
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(*) {
4572
+ border: 1px solid black;
4573
+ border-radius: 10px;
4574
+ font-size: var(--scroll-button-font-size, calc(30 / var(--design-reference) * var(--screen-width)));
4575
+ background: rgba(0, 0, 0, 0.163);
4576
+ color: white;
4577
+ opacity: 0.7;
4578
+ cursor: pointer;
4579
+ transition: scale 0.3s ease-in-out;
4580
+ }
4581
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(*):hover,
4582
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(*):focus {
4583
+ opacity: 1;
4584
+ scale: 1.2;
4585
+ }
4586
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(*):active {
4587
+ translate: 1px 1px;
4588
+ }
4589
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(*):disabled {
4590
+ opacity: 0.2;
4591
+ cursor: inherit;
4592
+ }
4699
4593
  }
4700
- .cmpl-core-group-container-styles__grid-container.grid-layout-container {
4701
- overflow: hidden;
4702
- overflow: var(--container-overflow-type-desktop, hidden);
4703
- grid-gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
4704
- grid-gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-desktop, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-desktop, 0));
4705
- grid-auto-flow: row;
4706
- grid-auto-flow: var(--grid-auto-flow-desktop, row);
4707
- grid-auto-columns: 1fr;
4708
- grid-auto-columns: var(--grid-auto-columns-desktop, 1fr);
4709
- grid-auto-rows: auto;
4710
- grid-auto-rows: var(--grid-auto-rows-desktop, auto);
4711
- grid-template-columns: repeat(1, 1fr);
4712
- grid-template-columns: var(--grid-template-columns-custom-desktop, repeat(var(--grid-template-columns-desktop, 1), var(--grid-auto-columns-desktop, 1fr)));
4713
- grid-template-rows: var(--grid-template-rows-custom-desktop, repeat(var(--grid-template-rows-desktop), 1fr));
4714
- grid-template-rows: var(--grid-template-rows-custom-desktop, repeat(var(--grid-template-rows-desktop), var(--grid-auto-rows-desktop, 1fr)));
4594
+ @media screen and (max-width: 767px) {
4595
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(left) {
4596
+ content: "\25c4";
4597
+ position: absolute;
4598
+ place-self: center flex-start;
4599
+ z-index: 50;
4600
+ }
4601
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(right) {
4602
+ content: "\25ba";
4603
+ position: absolute;
4604
+ place-self: center flex-end;
4605
+ z-index: 50;
4606
+ }
4607
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(*) {
4608
+ border: 1px solid black;
4609
+ border-radius: 10px;
4610
+ font-size: var(--scroll-button-font-size, calc(30 / var(--design-reference) * var(--screen-width)));
4611
+ background: rgba(0, 0, 0, 0.163);
4612
+ color: white;
4613
+ opacity: 0.7;
4614
+ cursor: pointer;
4615
+ transition: scale 0.3s ease-in-out;
4616
+ }
4617
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(*):hover,
4618
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(*):focus {
4619
+ opacity: 1;
4620
+ scale: 1.2;
4621
+ }
4622
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(*):active {
4623
+ translate: 1px 1px;
4624
+ }
4625
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(*):disabled {
4626
+ opacity: 0.2;
4627
+ cursor: inherit;
4628
+ }
4715
4629
  }
4716
- }
4717
- .cmpl-core-group-container-styles__block-container {
4718
- pointer-events: none;
4719
- position: relative;
4720
- }
4721
- .cmpl-core-group-container-styles__block-container.grid-layout-container {
4722
- display: grid;
4723
- z-index: 5;
4724
- z-index: var(--element-z-index, 5);
4725
- grid-row: var(--grid-row-start-mobile)/span var(--grid-row-span-mobile);
4726
- grid-column: var(--grid-column-start-mobile)/span var(--grid-column-span-mobile);
4727
- place-self: var(--grid-vertical-placement-mobile) var(--grid-horizontal-placement-mobile);
4728
- }
4729
- .cmpl-core-group-container-styles__block-container.grid-layout-container:has(> .subgrid-layout-mobile) {
4730
- grid-template-rows: subgrid;
4731
- }
4732
- .cmpl-core-group-container-styles__block-container.grid-layout-container:has(> .subgrid-layout-mobile) > section {
4733
- grid-row: 1/-1;
4734
- grid-column: 1/-1;
4735
- }
4736
- @media screen and (min-width: 768px) {
4737
- .cmpl-core-group-container-styles__block-container.grid-layout-container {
4738
- grid-row: var(--grid-row-start-portrait)/span var(--grid-row-span-portrait);
4739
- grid-column: var(--grid-column-start-portrait)/span var(--grid-column-span-portrait);
4740
- place-self: var(--grid-vertical-placement-portrait) var(--grid-horizontal-placement-portrait);
4630
+ @media screen and (min-width: 768px) {
4631
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container {
4632
+ scroll-snap-type: none;
4633
+ scroll-snap-type: var(--scroll-snap-type-portrait, none);
4634
+ }
4635
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container > div {
4636
+ scroll-snap-align: start;
4637
+ scroll-snap-align: var(--scroll-snap-align-portrait, start);
4638
+ }
4639
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container {
4640
+ overflow: hidden;
4641
+ overflow: var(--container-overflow-type-portrait, hidden);
4642
+ grid-auto-flow: row;
4643
+ grid-auto-flow: var(--grid-auto-flow-portrait, row);
4644
+ grid-auto-columns: 1fr;
4645
+ grid-auto-columns: var(--grid-auto-columns-portrait, 1fr);
4646
+ grid-auto-rows: auto;
4647
+ grid-auto-rows: var(--grid-auto-rows-portrait, auto);
4648
+ grid-gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
4649
+ grid-gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-portrait, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-portrait, 0));
4650
+ grid-template-columns: var(--grid-template-columns-custom-portrait, repeat(var(--grid-template-columns-portrait), 1fr));
4651
+ grid-template-columns: var(--grid-template-columns-custom-portrait, repeat(var(--grid-template-columns-portrait), var(--grid-auto-columns-portrait, 1fr)));
4652
+ grid-template-rows: var(--grid-template-rows-custom-portrait, repeat(var(--grid-template-rows-portrait), 1fr));
4653
+ grid-template-rows: var(--grid-template-rows-custom-portrait, repeat(var(--grid-template-rows-portrait), var(--grid-auto-rows-portrait, 1fr)));
4654
+ }
4741
4655
  }
4742
- .cmpl-core-group-container-styles__block-container.grid-layout-container:has(> .subgrid-layout-portrait) {
4743
- grid-template-rows: subgrid;
4656
+ @media screen and (min-width: 1024px) {
4657
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container {
4658
+ scroll-snap-type: none;
4659
+ scroll-snap-type: var(--scroll-snap-type-desktop, none);
4660
+ }
4661
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container > div {
4662
+ scroll-snap-align: start;
4663
+ scroll-snap-align: var(--scroll-snap-align-desktop, start);
4664
+ }
4665
+ .cmpl-core-group-container-styles__grid-container.grid-layout-container {
4666
+ overflow: hidden;
4667
+ overflow: var(--container-overflow-type-desktop, hidden);
4668
+ grid-gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
4669
+ grid-gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-desktop, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-desktop, 0));
4670
+ grid-auto-flow: row;
4671
+ grid-auto-flow: var(--grid-auto-flow-desktop, row);
4672
+ grid-auto-columns: 1fr;
4673
+ grid-auto-columns: var(--grid-auto-columns-desktop, 1fr);
4674
+ grid-auto-rows: auto;
4675
+ grid-auto-rows: var(--grid-auto-rows-desktop, auto);
4676
+ grid-template-columns: repeat(1, 1fr);
4677
+ grid-template-columns: var(--grid-template-columns-custom-desktop, repeat(var(--grid-template-columns-desktop, 1), var(--grid-auto-columns-desktop, 1fr)));
4678
+ grid-template-rows: var(--grid-template-rows-custom-desktop, repeat(var(--grid-template-rows-desktop), 1fr));
4679
+ grid-template-rows: var(--grid-template-rows-custom-desktop, repeat(var(--grid-template-rows-desktop), var(--grid-auto-rows-desktop, 1fr)));
4680
+ }
4744
4681
  }
4745
- .cmpl-core-group-container-styles__block-container.grid-layout-container:has(> .subgrid-layout-portrait) > section {
4746
- grid-row: 1/-1;
4747
- grid-column: 1/-1;
4682
+ .cmpl-core-group-container-styles__block-container {
4683
+ pointer-events: none;
4684
+ position: relative;
4748
4685
  }
4749
- }
4750
- @media screen and (min-width: 1024px) {
4751
4686
  .cmpl-core-group-container-styles__block-container.grid-layout-container {
4752
- grid-row: var(--grid-row-start)/span var(--grid-row-span);
4753
- grid-column: var(--grid-column-start)/span var(--grid-column-span);
4754
- place-self: var(--grid-vertical-placement-desktop) var(--grid-horizontal-placement-desktop);
4755
- }
4756
- .cmpl-core-group-container-styles__block-container.grid-layout-container:has(> .subgrid-layout-desktop) {
4687
+ display: grid;
4688
+ z-index: 5;
4689
+ z-index: var(--element-z-index, 5);
4690
+ grid-row: var(--grid-row-start-mobile)/span var(--grid-row-span-mobile);
4691
+ grid-column: var(--grid-column-start-mobile)/span var(--grid-column-span-mobile);
4692
+ place-self: var(--grid-vertical-placement-mobile) var(--grid-horizontal-placement-mobile);
4693
+ }
4694
+ .cmpl-core-group-container-styles__block-container.grid-layout-container:has(> .subgrid-layout-mobile) {
4757
4695
  grid-template-rows: subgrid;
4758
4696
  }
4759
- .cmpl-core-group-container-styles__block-container.grid-layout-container:has(> .subgrid-layout-desktop) > section {
4697
+ .cmpl-core-group-container-styles__block-container.grid-layout-container:has(> .subgrid-layout-mobile) > section {
4760
4698
  grid-row: 1/-1;
4761
4699
  grid-column: 1/-1;
4762
4700
  }
4763
- }
4764
- .cmpl-core-group-container-styles__block-container:has(.video-content-v3__video-container.video-playing.video-playing--high-z-index) {
4765
- z-index: 50;
4766
- }
4767
- .cmpl-core-group-container-styles__block-number {
4768
- z-index: 99;
4769
- position: absolute;
4770
- font-size: 40px;
4771
- left: 50%;
4772
- top: 50%;
4773
- transform: translate(-50%, -50%);
4774
- color: white;
4775
- text-shadow: 1px 1px 1px blue;
4701
+ @media screen and (min-width: 768px) {
4702
+ .cmpl-core-group-container-styles__block-container.grid-layout-container {
4703
+ grid-row: var(--grid-row-start-portrait)/span var(--grid-row-span-portrait);
4704
+ grid-column: var(--grid-column-start-portrait)/span var(--grid-column-span-portrait);
4705
+ place-self: var(--grid-vertical-placement-portrait) var(--grid-horizontal-placement-portrait);
4706
+ }
4707
+ .cmpl-core-group-container-styles__block-container.grid-layout-container:has(> .subgrid-layout-portrait) {
4708
+ grid-template-rows: subgrid;
4709
+ }
4710
+ .cmpl-core-group-container-styles__block-container.grid-layout-container:has(> .subgrid-layout-portrait) > section {
4711
+ grid-row: 1/-1;
4712
+ grid-column: 1/-1;
4713
+ }
4714
+ }
4715
+ @media screen and (min-width: 1024px) {
4716
+ .cmpl-core-group-container-styles__block-container.grid-layout-container {
4717
+ grid-row: var(--grid-row-start)/span var(--grid-row-span);
4718
+ grid-column: var(--grid-column-start)/span var(--grid-column-span);
4719
+ place-self: var(--grid-vertical-placement-desktop) var(--grid-horizontal-placement-desktop);
4720
+ }
4721
+ .cmpl-core-group-container-styles__block-container.grid-layout-container:has(> .subgrid-layout-desktop) {
4722
+ grid-template-rows: subgrid;
4723
+ }
4724
+ .cmpl-core-group-container-styles__block-container.grid-layout-container:has(> .subgrid-layout-desktop) > section {
4725
+ grid-row: 1/-1;
4726
+ grid-column: 1/-1;
4727
+ }
4728
+ }
4729
+ .cmpl-core-group-container-styles__block-container:has(.video-content-v3__video-container.video-playing.video-playing--high-z-index) {
4730
+ z-index: 50;
4731
+ }
4732
+ .cmpl-core-group-container-styles__block-number {
4733
+ z-index: 99;
4734
+ position: absolute;
4735
+ font-size: 40px;
4736
+ left: 50%;
4737
+ top: 50%;
4738
+ transform: translate(-50%, -50%);
4739
+ color: white;
4740
+ text-shadow: 1px 1px 1px blue;
4741
+ }
4776
4742
  }