@total_onion/onion-library 3.0.15 → 3.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/esbuild.mjs +3 -3
  2. package/package.json +1 -1
  3. package/public/block-accent-image-v3/accent-image-v3.css +2 -0
  4. package/public/block-accordion-v3/accordion-v3.css +375 -385
  5. package/public/block-back-to-top-button-v3/back-to-top-button-v3.css +60 -58
  6. package/public/block-betterreviews-display-v3/betterreviews-display-v3.css +1 -4
  7. package/public/block-block-interactions-v3/block-interactions-v3.css +30 -28
  8. package/public/block-carousel-multi-layout-v3/carousel-multi-layout-v3.css +157 -164
  9. package/public/block-cocktail-recipe-v3/cocktail-recipe-v3.css +8 -16
  10. package/public/block-cover-link-v3/cover-link-v3.css +1 -4
  11. package/public/block-divider-v3/divider-v3.css +0 -2
  12. package/public/block-featured-image-gallery-v3/featured-image-gallery-v3.css +0 -6
  13. package/public/block-form-selection-v3/form-selection-v3.css +1 -4
  14. package/public/block-gradient-layer-v3/gradient-layer-v3.css +3 -12
  15. package/public/block-group-container-v3/group-container-v3.css +0 -22
  16. package/public/block-market-selector-v3/market-selector-v3.css +0 -3
  17. package/public/block-post-info-v3/post-info-v3.css +1063 -1153
  18. package/public/block-product-info-v3/product-info-v3.css +13 -90
  19. package/public/block-scrolling-banner-v3/scrolling-banner-v3.css +85 -87
  20. package/public/block-section-separator-v3/section-separator-v3.css +0 -2
  21. package/public/block-single-column-container-v3/single-column-container-v3.css +0 -2
  22. package/public/block-single-responsive-image-v3/single-responsive-image-v3.css +1 -4
  23. package/public/block-site-copyright-notice-v3/site-copyright-notice-v3.css +16 -14
  24. package/public/block-site-title-and-tagline-v3/site-title-and-tagline-v3.css +0 -2
  25. package/public/block-standard-content-v3/standard-content-v3.css +4 -28
  26. package/public/block-sub-group-container-v3/sub-group-container-v3.css +0 -22
  27. package/public/block-video-content-v3/video-content-v3.css +2 -7
  28. package/public/jsAssets.mjs +3 -39
  29. package/public/publicBundleBase.css +1168 -1191
package/public/block-back-to-top-button-v3/back-to-top-button-v3.css CHANGED
@@ -1,62 +1,64 @@
1
- .back-to-top-button {
2
- position: relative;
3
- width: 100%;
4
- z-index: 50;
5
- overflow: visible;
6
- overflow: initial;
7
- }
8
- .back-to-top-button__arrow {
9
- --arrow-colour: black;
10
- position: absolute;
11
- border-style: solid;
12
- border-color: black;
13
- border-color: var(--arrow-colour);
14
- border-width: 0 2px 2px 0;
15
- display: inline-block;
16
- transform: rotate(-135deg);
17
- height: 20%;
18
- width: 20%;
19
- }
20
- .back-to-top-button__button {
21
- --bg-colour: white;
22
- display: flex;
23
- justify-content: center;
24
- align-items: center;
25
- position: fixed;
26
- cursor: pointer;
27
- height: calc(50 / var(--desktop-design-reference) * var(--screen-width-static));
28
- width: calc(50 / var(--desktop-design-reference) * var(--screen-width-static));
29
- border: none;
30
- border-radius: 50px;
31
- padding: calc(18 / var(--desktop-design-reference) * var(--screen-width-static));
32
- background-color: white;
33
- background-color: var(--bg-colour);
34
- right: calc(10 / var(--design-reference) * var(--screen-width));
35
- border-radius: var(--button-border-radius);
36
- }
37
- @media screen and (min-width: 768px) {
38
- .back-to-top-button__button {
39
- right: calc(30 / var(--design-reference) * var(--screen-width));
1
+ @layer base-styles {
2
+ .back-to-top-button {
3
+ position: relative;
4
+ width: 100%;
5
+ z-index: 50;
6
+ overflow: visible;
7
+ overflow: initial;
8
+ }
9
+ .back-to-top-button__arrow {
10
+ --arrow-colour: black;
11
+ position: absolute;
12
+ border-style: solid;
13
+ border-color: black;
14
+ border-color: var(--arrow-colour);
15
+ border-width: 0 2px 2px 0;
16
+ display: inline-block;
17
+ transform: rotate(-135deg);
18
+ height: 20%;
19
+ width: 20%;
40
20
  }
41
- }
42
- @media screen and (min-width: 1024px) {
43
21
  .back-to-top-button__button {
44
- right: calc(60 / var(--design-reference) * var(--screen-width));
22
+ --bg-colour: white;
23
+ display: flex;
24
+ justify-content: center;
25
+ align-items: center;
26
+ position: fixed;
27
+ cursor: pointer;
28
+ height: calc(50 / var(--desktop-design-reference) * var(--screen-width-static));
29
+ width: calc(50 / var(--desktop-design-reference) * var(--screen-width-static));
30
+ border: none;
31
+ border-radius: 50px;
32
+ padding: calc(18 / var(--desktop-design-reference) * var(--screen-width-static));
33
+ background-color: white;
34
+ background-color: var(--bg-colour);
35
+ right: calc(10 / var(--design-reference) * var(--screen-width));
36
+ border-radius: var(--button-border-radius);
37
+ }
38
+ @media screen and (min-width: 768px) {
39
+ .back-to-top-button__button {
40
+ right: calc(30 / var(--design-reference) * var(--screen-width));
41
+ }
42
+ }
43
+ @media screen and (min-width: 1024px) {
44
+ .back-to-top-button__button {
45
+ right: calc(60 / var(--design-reference) * var(--screen-width));
46
+ }
47
+ }
48
+ .back-to-top-button__button--fixed {
49
+ position: fixed;
50
+ bottom: calc(60 / var(--desktop-design-reference) * var(--screen-width-static));
51
+ }
52
+ .back-to-top-button__button--absolute {
53
+ position: absolute;
54
+ translate: 0 -50%;
55
+ }
56
+ .wp-admin .back-to-top-button__button {
57
+ position: absolute;
58
+ translate: 0 0;
59
+ bottom: 0;
60
+ }
61
+ .back-to-top-button__image {
62
+ width: calc(var(--image-size) / var(--desktop-design-reference) * var(--screen-width-static));
45
63
  }
46
- }
47
- .back-to-top-button__button--fixed {
48
- position: fixed;
49
- bottom: calc(60 / var(--desktop-design-reference) * var(--screen-width-static));
50
- }
51
- .back-to-top-button__button--absolute {
52
- position: absolute;
53
- translate: 0 -50%;
54
- }
55
- .wp-admin .back-to-top-button__button {
56
- position: absolute;
57
- translate: 0 0;
58
- bottom: 0;
59
- }
60
- .back-to-top-button__image {
61
- width: calc(var(--image-size) / var(--desktop-design-reference) * var(--screen-width-static));
62
64
  }
package/public/block-betterreviews-display-v3/betterreviews-display-v3.css CHANGED
@@ -26,10 +26,7 @@
26
26
  .betterreviews-display-v3 .better-reviews__average .better-reviews__criteria-stars::before {
27
27
  content: "";
28
28
  position: absolute;
29
- top: 0;
30
- right: 0;
31
- bottom: 0;
32
- left: 0;
29
+ inset: 0;
33
30
  background:
34
31
  linear-gradient(
35
32
  90deg,
package/public/block-block-interactions-v3/block-interactions-v3.css CHANGED
@@ -1,34 +1,36 @@
1
- .block-interactions-v3__block-close-button {
2
- cursor: pointer;
3
- border: medium none currentcolor;
4
- border: initial;
5
- background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
6
- background: initial;
7
- }
8
- .block-interactions-v3__popup-trigger {
9
- -webkit-appearance: none;
10
- -moz-appearance: none;
11
- appearance: none;
12
- border: medium none currentcolor;
13
- border: initial;
14
- background-color: transparent;
15
- background-color: initial;
16
- display: flex;
17
- cursor: pointer;
18
- }
19
- .block-interactions-v3 svg {
20
- width: calc(30 / var(--design-reference) * var(--screen-width));
21
- height: calc(30 / var(--design-reference) * var(--screen-width));
22
- }
23
- @media screen and (min-width: 768px) {
24
- .block-interactions-v3 svg {
25
- width: calc(30 / var(--design-reference) * var(--screen-width));
26
- height: calc(30 / var(--design-reference) * var(--screen-width));
1
+ @layer base-styles {
2
+ .block-interactions-v3__block-close-button {
3
+ cursor: pointer;
4
+ border: medium none currentcolor;
5
+ border: initial;
6
+ background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
7
+ background: initial;
8
+ }
9
+ .block-interactions-v3__popup-trigger {
10
+ -webkit-appearance: none;
11
+ -moz-appearance: none;
12
+ appearance: none;
13
+ border: medium none currentcolor;
14
+ border: initial;
15
+ background-color: transparent;
16
+ background-color: initial;
17
+ display: flex;
18
+ cursor: pointer;
27
19
  }
28
- }
29
- @media screen and (min-width: 1024px) {
30
20
  .block-interactions-v3 svg {
31
21
  width: calc(30 / var(--design-reference) * var(--screen-width));
32
22
  height: calc(30 / var(--design-reference) * var(--screen-width));
33
23
  }
24
+ @media screen and (min-width: 768px) {
25
+ .block-interactions-v3 svg {
26
+ width: calc(30 / var(--design-reference) * var(--screen-width));
27
+ height: calc(30 / var(--design-reference) * var(--screen-width));
28
+ }
29
+ }
30
+ @media screen and (min-width: 1024px) {
31
+ .block-interactions-v3 svg {
32
+ width: calc(30 / var(--design-reference) * var(--screen-width));
33
+ height: calc(30 / var(--design-reference) * var(--screen-width));
34
+ }
35
+ }
34
36
  }
package/public/block-carousel-multi-layout-v3/carousel-multi-layout-v3.css CHANGED
@@ -1,194 +1,187 @@
1
- .carousel-multi-layout-v3 {
2
- display: grid;
3
- grid-template: "main"/1fr;
4
- overflow-x: hidden;
5
- overflow-x: var(--block-overflow, hidden);
6
- width: 100%;
7
- position: relative;
8
- background-color: var(--carousel-bg-colour);
9
- }
10
- .carousel-multi-layout-v3__inner-container {
11
- width: 100%;
12
- height: 100%;
13
- position: relative;
14
- display: grid;
15
- grid-area: main;
16
- grid-template: "main"/1fr;
17
- }
18
- .carousel-multi-layout-v3__swiper-carousel-container {
19
- width: 100%;
20
- height: 100%;
21
- grid-area: main;
22
- top: 0;
23
- right: 0;
24
- bottom: 0;
25
- left: 0;
26
- }
27
- .carousel-multi-layout-v3__swiper-carousel-container .swiper-wrapper {
28
- height: 100%;
29
- }
30
- .carousel-multi-layout-v3 .swiper-button-disabled {
31
- pointer-events: none;
32
- opacity: 0;
33
- }
34
- .carousel-multi-layout-v3 .swiper-button-prev {
35
- left: var(--left-arrow-horizontally-mobile);
36
- }
37
- @media screen and (min-width: 768px) {
38
- .carousel-multi-layout-v3 .swiper-button-prev {
39
- left: var(--left-arrow-horizontally-portrait);
1
+ @layer base-styles {
2
+ .carousel-multi-layout-v3 {
3
+ display: grid;
4
+ grid-template: "main"/1fr;
5
+ overflow-x: hidden;
6
+ overflow-x: var(--block-overflow, hidden);
7
+ width: 100%;
8
+ position: relative;
9
+ background-color: var(--carousel-bg-colour);
10
+ }
11
+ .carousel-multi-layout-v3__inner-container {
12
+ width: 100%;
13
+ height: 100%;
14
+ position: relative;
15
+ display: grid;
16
+ grid-area: main;
17
+ grid-template: "main"/1fr;
18
+ }
19
+ .carousel-multi-layout-v3__swiper-carousel-container {
20
+ width: 100%;
21
+ height: 100%;
22
+ grid-area: main;
23
+ inset: 0;
24
+ }
25
+ .carousel-multi-layout-v3__swiper-carousel-container .swiper-wrapper {
26
+ height: 100%;
27
+ }
28
+ .carousel-multi-layout-v3 .swiper-button-disabled {
29
+ pointer-events: none;
30
+ opacity: 0;
40
31
  }
41
- }
42
- @media screen and (min-width: 1024px) {
43
32
  .carousel-multi-layout-v3 .swiper-button-prev {
44
- left: var(--left-arrow-horizontally-desktop);
33
+ left: var(--left-arrow-horizontally-mobile);
45
34
  }
46
- }
47
- .carousel-multi-layout-v3 .swiper-button-next {
48
- right: var(--right-arrow-horizontally-mobile);
49
- }
50
- @media screen and (min-width: 768px) {
51
- .carousel-multi-layout-v3 .swiper-button-next {
52
- right: var(--right-arrow-horizontally-portrait);
35
+ @media screen and (min-width: 768px) {
36
+ .carousel-multi-layout-v3 .swiper-button-prev {
37
+ left: var(--left-arrow-horizontally-portrait);
38
+ }
39
+ }
40
+ @media screen and (min-width: 1024px) {
41
+ .carousel-multi-layout-v3 .swiper-button-prev {
42
+ left: var(--left-arrow-horizontally-desktop);
43
+ }
53
44
  }
54
- }
55
- @media screen and (min-width: 1024px) {
56
45
  .carousel-multi-layout-v3 .swiper-button-next {
57
- right: var(--right-arrow-horizontally-desktop);
46
+ right: var(--right-arrow-horizontally-mobile);
58
47
  }
59
- }
60
- .carousel-multi-layout-v3 .swiper-button-next,
61
- .carousel-multi-layout-v3 .swiper-button-prev {
62
- top: var(--arrows-position-vertically-mobile);
63
- }
64
- @media screen and (min-width: 768px) {
65
- .carousel-multi-layout-v3 .swiper-button-next,
66
- .carousel-multi-layout-v3 .swiper-button-prev {
67
- top: var(--arrows-position-vertically-portrait);
48
+ @media screen and (min-width: 768px) {
49
+ .carousel-multi-layout-v3 .swiper-button-next {
50
+ right: var(--right-arrow-horizontally-portrait);
51
+ }
52
+ }
53
+ @media screen and (min-width: 1024px) {
54
+ .carousel-multi-layout-v3 .swiper-button-next {
55
+ right: var(--right-arrow-horizontally-desktop);
56
+ }
68
57
  }
69
- }
70
- @media screen and (min-width: 1024px) {
71
58
  .carousel-multi-layout-v3 .swiper-button-next,
72
59
  .carousel-multi-layout-v3 .swiper-button-prev {
73
- top: var(--arrows-position-vertically-desktop);
60
+ top: var(--arrows-position-vertically-mobile);
61
+ }
62
+ @media screen and (min-width: 768px) {
63
+ .carousel-multi-layout-v3 .swiper-button-next,
64
+ .carousel-multi-layout-v3 .swiper-button-prev {
65
+ top: var(--arrows-position-vertically-portrait);
66
+ }
67
+ }
68
+ @media screen and (min-width: 1024px) {
69
+ .carousel-multi-layout-v3 .swiper-button-next,
70
+ .carousel-multi-layout-v3 .swiper-button-prev {
71
+ top: var(--arrows-position-vertically-desktop);
72
+ }
74
73
  }
75
- }
76
- .carousel-multi-layout-v3 .swiper-button-next::after,
77
- .carousel-multi-layout-v3 .swiper-button-prev::after {
78
- --swiper-navigation-size: calc(var(--arrows-size-mobile) / var(--design-reference) * var(--screen-width));
79
- }
80
- @media screen and (min-width: 768px) {
81
74
  .carousel-multi-layout-v3 .swiper-button-next::after,
82
75
  .carousel-multi-layout-v3 .swiper-button-prev::after {
83
- --swiper-navigation-size: calc(var(--arrows-size-portrait) / var(--design-reference) * var(--screen-width));
76
+ --swiper-navigation-size: calc(var(--arrows-size-mobile) / var(--design-reference) * var(--screen-width));
77
+ }
78
+ @media screen and (min-width: 768px) {
79
+ .carousel-multi-layout-v3 .swiper-button-next::after,
80
+ .carousel-multi-layout-v3 .swiper-button-prev::after {
81
+ --swiper-navigation-size: calc(var(--arrows-size-portrait) / var(--design-reference) * var(--screen-width));
82
+ }
83
+ }
84
+ @media screen and (min-width: 1024px) {
85
+ .carousel-multi-layout-v3 .swiper-button-next::after,
86
+ .carousel-multi-layout-v3 .swiper-button-prev::after {
87
+ --swiper-navigation-size: calc(var(--arrows-size-desktop) / var(--design-reference) * var(--screen-width));
88
+ }
84
89
  }
85
- }
86
- @media screen and (min-width: 1024px) {
87
90
  .carousel-multi-layout-v3 .swiper-button-next::after,
88
91
  .carousel-multi-layout-v3 .swiper-button-prev::after {
89
- --swiper-navigation-size: calc(var(--arrows-size-desktop) / var(--design-reference) * var(--screen-width));
90
- }
91
- }
92
- .carousel-multi-layout-v3 .swiper-button-next::after,
93
- .carousel-multi-layout-v3 .swiper-button-prev::after {
94
- text-rendering: auto;
95
- color: var(--swiper-arrow-colour);
96
- }
97
- .carousel-multi-layout-v3 .custom_arrow {
98
- height: auto;
99
- width: calc(var(--custom-arrows-size-mobile) / var(--design-reference) * var(--screen-width));
100
- }
101
- @media screen and (min-width: 768px) {
102
- .carousel-multi-layout-v3 .custom_arrow {
103
- width: calc(var(--custom-arrows-size-portrait) / var(--design-reference) * var(--screen-width));
92
+ text-rendering: auto;
93
+ color: var(--swiper-arrow-colour);
104
94
  }
105
- }
106
- @media screen and (min-width: 1024px) {
107
95
  .carousel-multi-layout-v3 .custom_arrow {
108
- width: calc(var(--custom-arrows-size-desktop) / var(--design-reference) * var(--screen-width));
109
- }
110
- }
111
- .carousel-multi-layout-v3 .swiper-pagination-bullets.swiper-pagination-horizontal {
112
- bottom: auto;
113
- bottom: initial;
114
- left: auto;
115
- left: initial;
116
- width: auto;
117
- width: initial;
118
- }
119
- .carousel-multi-layout-v3 .swiper-pagination {
120
- position: relative;
121
- position: var(--element-position, relative);
122
- z-index: var(--element-z-index);
123
- align-self: var(--mobile-vertical-placement);
124
- justify-self: var(--mobile-horizontal-placement);
125
- place-self: var(--mobile-vertical-placement) var(--mobile-horizontal-placement);
126
- translate: 0 0;
127
- translate: var(--element-horizontal-offset-mobile, 0) var(--element-vertical-offset-mobile, 0);
128
- rotate: 0deg;
129
- rotate: var(--element-rotation-mobile, 0deg);
130
- }
131
- @media screen and (min-width: 768px) {
132
- .carousel-multi-layout-v3 .swiper-pagination {
133
- align-self: var(--portrait-vertical-placement, var(--desktop-vertical-placement));
134
- justify-self: var(--portrait-horizontal-placement, var(--desktop-horizontal-placement));
135
- place-self: var(--portrait-vertical-placement, var(--desktop-vertical-placement)) var(--portrait-horizontal-placement, var(--desktop-horizontal-placement));
136
- translate: 0 0;
137
- translate: var(--element-horizontal-offset-portrait, var(--element-horizontal-offset-desktop, 0)) var(--element-vertical-offset-portrait, var(--element-vertical-offset-desktop, 0));
138
- rotate: 0deg;
139
- rotate: var(--element-rotation-portrait, var(--element-rotation-desktop, 0deg));
96
+ height: auto;
97
+ width: calc(var(--custom-arrows-size-mobile) / var(--design-reference) * var(--screen-width));
98
+ }
99
+ @media screen and (min-width: 768px) {
100
+ .carousel-multi-layout-v3 .custom_arrow {
101
+ width: calc(var(--custom-arrows-size-portrait) / var(--design-reference) * var(--screen-width));
102
+ }
103
+ }
104
+ @media screen and (min-width: 1024px) {
105
+ .carousel-multi-layout-v3 .custom_arrow {
106
+ width: calc(var(--custom-arrows-size-desktop) / var(--design-reference) * var(--screen-width));
107
+ }
108
+ }
109
+ .carousel-multi-layout-v3 .swiper-pagination-bullets.swiper-pagination-horizontal {
110
+ bottom: auto;
111
+ bottom: initial;
112
+ left: auto;
113
+ left: initial;
114
+ width: auto;
115
+ width: initial;
140
116
  }
141
- }
142
- @media screen and (min-width: 1024px) {
143
117
  .carousel-multi-layout-v3 .swiper-pagination {
144
- align-self: var(--desktop-vertical-placement);
145
- justify-self: var(--desktop-horizontal-placement);
146
- place-self: var(--desktop-vertical-placement) var(--desktop-horizontal-placement);
118
+ position: relative;
119
+ position: var(--element-position, relative);
120
+ z-index: var(--element-z-index);
121
+ place-self: var(--mobile-vertical-placement) var(--mobile-horizontal-placement);
147
122
  translate: 0 0;
148
- translate: var(--element-horizontal-offset-desktop, 0) var(--element-vertical-offset-desktop, 0);
123
+ translate: var(--element-horizontal-offset-mobile, 0) var(--element-vertical-offset-mobile, 0);
149
124
  rotate: 0deg;
150
- rotate: var(--element-rotation-desktop, 0deg);
125
+ rotate: var(--element-rotation-mobile, 0deg);
126
+ }
127
+ @media screen and (min-width: 768px) {
128
+ .carousel-multi-layout-v3 .swiper-pagination {
129
+ place-self: var(--portrait-vertical-placement, var(--desktop-vertical-placement)) var(--portrait-horizontal-placement, var(--desktop-horizontal-placement));
130
+ translate: 0 0;
131
+ translate: var(--element-horizontal-offset-portrait, var(--element-horizontal-offset-desktop, 0)) var(--element-vertical-offset-portrait, var(--element-vertical-offset-desktop, 0));
132
+ rotate: 0deg;
133
+ rotate: var(--element-rotation-portrait, var(--element-rotation-desktop, 0deg));
134
+ }
135
+ }
136
+ @media screen and (min-width: 1024px) {
137
+ .carousel-multi-layout-v3 .swiper-pagination {
138
+ place-self: var(--desktop-vertical-placement) var(--desktop-horizontal-placement);
139
+ translate: 0 0;
140
+ translate: var(--element-horizontal-offset-desktop, 0) var(--element-vertical-offset-desktop, 0);
141
+ rotate: 0deg;
142
+ rotate: var(--element-rotation-desktop, 0deg);
143
+ }
144
+ }
145
+ .carousel-multi-layout-v3 .swiper-pagination-bullet {
146
+ background-color: transparent;
147
+ }
148
+ .carousel-multi-layout-v3 .swiper-pagination-bullet-active {
149
+ background-color: var(--swiper-pagination-colour);
150
+ }
151
+ .carousel-multi-layout-v3 .swiper-pagination-fraction {
152
+ color: var(--swiper-pagination-colour);
151
153
  }
152
- }
153
- .carousel-multi-layout-v3 .swiper-pagination-bullet {
154
- background-color: transparent;
155
- }
156
- .carousel-multi-layout-v3 .swiper-pagination-bullet-active {
157
- background-color: var(--swiper-pagination-colour);
158
- }
159
- .carousel-multi-layout-v3 .swiper-pagination-fraction {
160
- color: var(--swiper-pagination-colour);
161
- }
162
- .carousel-multi-layout-v3 .swiper-slide {
163
- opacity: var(--next-and-prev-slide-opacity-mobile);
164
- }
165
- @media screen and (min-width: 768px) {
166
154
  .carousel-multi-layout-v3 .swiper-slide {
167
- opacity: var(--next-and-prev-slide-opacity-portrait);
155
+ opacity: var(--next-and-prev-slide-opacity-mobile);
168
156
  }
169
- }
170
- @media screen and (min-width: 1024px) {
171
- .carousel-multi-layout-v3 .swiper-slide {
172
- opacity: var(--next-and-prev-slide-opacity-desktop);
157
+ @media screen and (min-width: 768px) {
158
+ .carousel-multi-layout-v3 .swiper-slide {
159
+ opacity: var(--next-and-prev-slide-opacity-portrait);
160
+ }
173
161
  }
174
- }
175
- .carousel-multi-layout-v3 .swiper-slide-active {
176
- opacity: 1;
177
- opacity: initial;
178
- }
179
- .carousel-multi-layout-v3 .swiper-button-next,
180
- .carousel-multi-layout-v3 .swiper-button-prev {
181
- display: var(--display-arrows-mobile);
182
- }
183
- @media screen and (min-width: 768px) {
184
- .carousel-multi-layout-v3 .swiper-button-next,
185
- .carousel-multi-layout-v3 .swiper-button-prev {
186
- display: var(--display-arrows-portrait);
162
+ @media screen and (min-width: 1024px) {
163
+ .carousel-multi-layout-v3 .swiper-slide {
164
+ opacity: var(--next-and-prev-slide-opacity-desktop);
165
+ }
166
+ }
167
+ .carousel-multi-layout-v3 .swiper-slide-active {
168
+ opacity: 1;
169
+ opacity: initial;
187
170
  }
188
- }
189
- @media screen and (min-width: 1024px) {
190
171
  .carousel-multi-layout-v3 .swiper-button-next,
191
172
  .carousel-multi-layout-v3 .swiper-button-prev {
192
- display: var(--display-arrows-desktop);
173
+ display: var(--display-arrows-mobile);
174
+ }
175
+ @media screen and (min-width: 768px) {
176
+ .carousel-multi-layout-v3 .swiper-button-next,
177
+ .carousel-multi-layout-v3 .swiper-button-prev {
178
+ display: var(--display-arrows-portrait);
179
+ }
180
+ }
181
+ @media screen and (min-width: 1024px) {
182
+ .carousel-multi-layout-v3 .swiper-button-next,
183
+ .carousel-multi-layout-v3 .swiper-button-prev {
184
+ display: var(--display-arrows-desktop);
185
+ }
193
186
  }
194
187
  }
package/public/block-cocktail-recipe-v3/cocktail-recipe-v3.css CHANGED
@@ -8,8 +8,7 @@
8
8
  padding-bottom: calc(50 / var(--design-reference) * var(--screen-width));
9
9
  }
10
10
  .cocktail-recipe-v3__ingredients-container .ingredients-title {
11
- padding-top: calc(10 / var(--design-reference) * var(--screen-width));
12
- padding-bottom: calc(10 / var(--design-reference) * var(--screen-width));
11
+ padding-block: calc(10 / var(--design-reference) * var(--screen-width));
13
12
  font-family: var(--primary-font-family);
14
13
  font-size: calc(80 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
15
14
  font-weight: 500;
@@ -26,8 +25,7 @@
26
25
  display: flex;
27
26
  justify-content: space-between;
28
27
  align-items: center;
29
- padding-top: calc(15 / var(--design-reference) * var(--screen-width));
30
- padding-bottom: calc(15 / var(--design-reference) * var(--screen-width));
28
+ padding-block: calc(15 / var(--design-reference) * var(--screen-width));
31
29
  border-bottom: 1px solid rgba(250, 248, 236, 0.3019607843);
32
30
  }
33
31
  .cocktail-recipe-v3__servings .servings-title {
@@ -180,14 +178,12 @@
180
178
  font-family: var(--secondary-font-family);
181
179
  font-size: calc(26 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
182
180
  font-weight: 500;
183
- padding-top: calc(20 / var(--design-reference) * var(--screen-width));
184
- padding-bottom: calc(20 / var(--design-reference) * var(--screen-width));
181
+ padding-block: calc(20 / var(--design-reference) * var(--screen-width));
185
182
  border-bottom: 1px solid rgba(250, 248, 236, 0.3019607843);
186
183
  }
187
184
  @media screen and (min-width: 768px) {
188
185
  .cocktail-recipe-v3__equipment-container .equipments-title {
189
- padding-top: calc(10 / var(--design-reference) * var(--screen-width));
190
- padding-bottom: calc(10 / var(--design-reference) * var(--screen-width));
186
+ padding-block: calc(10 / var(--design-reference) * var(--screen-width));
191
187
  }
192
188
  }
193
189
  .cocktail-recipe-v3__equipment-container .equipments-wrapper {
@@ -226,15 +222,13 @@
226
222
  font-size: calc(70 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
227
223
  font-weight: 500;
228
224
  text-transform: uppercase;
229
- padding-top: calc(10 / var(--design-reference) * var(--screen-width));
230
- padding-bottom: calc(10 / var(--design-reference) * var(--screen-width));
225
+ padding-block: calc(10 / var(--design-reference) * var(--screen-width));
231
226
  text-box-edge: cap alphabetic;
232
227
  text-box-trim: trim-both;
233
228
  }
234
229
  @media screen and (min-width: 768px) {
235
230
  .cocktail-recipe-v3__instructions-container .instructions-title {
236
- padding-top: calc(40 / var(--design-reference) * var(--screen-width));
237
- padding-bottom: calc(40 / var(--design-reference) * var(--screen-width));
231
+ padding-block: calc(40 / var(--design-reference) * var(--screen-width));
238
232
  font-size: calc(160 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
239
233
  }
240
234
  }
@@ -242,8 +236,7 @@
242
236
  display: flex;
243
237
  align-items: flex-start;
244
238
  gap: calc(20 / var(--design-reference) * var(--screen-width));
245
- padding-top: calc(30 / var(--design-reference) * var(--screen-width));
246
- padding-bottom: calc(30 / var(--design-reference) * var(--screen-width));
239
+ padding-block: calc(30 / var(--design-reference) * var(--screen-width));
247
240
  border-top: 1px solid rgba(250, 248, 236, 0.3019607843);
248
241
  }
249
242
  @media screen and (min-width: 768px) {
@@ -254,8 +247,7 @@
254
247
  .cocktail-recipe-v3__instructions-container .instructions-wrapper .instructions-number {
255
248
  font-family: var(--secondary-font-family);
256
249
  font-size: calc(30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
257
- padding-left: calc(10 / var(--design-reference) * var(--screen-width));
258
- padding-right: calc(10 / var(--design-reference) * var(--screen-width));
250
+ padding-inline: calc(10 / var(--design-reference) * var(--screen-width));
259
251
  font-weight: 500;
260
252
  text-box-trim: trim-both;
261
253
  text-box-edge: cap alphabetic;
package/public/block-cover-link-v3/cover-link-v3.css CHANGED
@@ -1,9 +1,6 @@
1
1
  .cover-link-v3__link {
2
2
  position: absolute;
3
- top: 0;
4
- right: 0;
5
- bottom: 0;
6
- left: 0;
3
+ inset: 0;
7
4
  z-index: 10;
8
5
  pointer-events: all;
9
6
  }
package/public/block-divider-v3/divider-v3.css CHANGED
@@ -50,8 +50,6 @@
50
50
  background-position: var(--divider-v3-background-position-x) var(--divider-v3-background-position-y);
51
51
  width: calc(var(--divider-v3-width) / var(--design-reference) * var(--screen-width));
52
52
  height: calc(var(--divider-v3-height) / var(--design-reference) * var(--screen-width));
53
- align-self: var(--divider-v3-vertical-position);
54
- justify-self: var(--divider-v3-horizontal-position);
55
53
  place-self: var(--divider-v3-vertical-position) var(--divider-v3-horizontal-position);
56
54
  max-width: calc(var(--divider-v3-max-width-mobile) / var(--design-reference) * var(--screen-width));
57
55
  max-height: calc(var(--divider-v3-max-height-mobile) / var(--design-reference) * var(--screen-width));