@total_onion/onion-library 2.0.149 → 2.0.151

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 (86) hide show
  1. package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-link-widget.vue +4 -1
  2. package/components/block-raw-html-v3/raw-html-v3.js +7 -0
  3. package/components/block-raw-html-v3/raw-html-v3.scss +2 -0
  4. package/createDynamicBlockScss-v3.js +0 -1
  5. package/package.json +1 -1
  6. package/public/assetList.mjs +1 -1
  7. package/public/block-post-type-filter-grid-v3/post-type-filter-grid-v3.js +11 -11
  8. package/public/dynamicBlockScss-v3.scss +1 -0
  9. package/public/jsAssets.mjs +1 -1
  10. package/public/block-video-content-v3/video-content-v3.js +0 -11
  11. package/public/components/block-accent-image-v3/accent-image-v3.css +0 -0
  12. package/public/components/block-accent-image-v3/accent-image-v3.js +0 -7
  13. package/public/components/block-accordion-v3/accordion-v3.css +0 -474
  14. package/public/components/block-accordion-v3/accordion-v3.js +0 -117
  15. package/public/components/block-back-to-top-button-v3/back-to-top-button-v3.css +0 -62
  16. package/public/components/block-back-to-top-button-v3/back-to-top-button-v3.js +0 -12
  17. package/public/components/block-betterreviews-display-v3/betterreviews-display-v3.css +0 -96
  18. package/public/components/block-betterreviews-display-v3/betterreviews-display-v3.js +0 -7
  19. package/public/components/block-block-interactions-v3/block-interactions-v3.css +0 -34
  20. package/public/components/block-block-interactions-v3/block-interactions-v3.js +0 -44
  21. package/public/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.css +0 -928
  22. package/public/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.js +0 -169
  23. package/public/components/block-cocktail-recipe-v3/cocktail-recipe-v3.css +0 -317
  24. package/public/components/block-cocktail-recipe-v3/cocktail-recipe-v3.js +0 -93
  25. package/public/components/block-cover-link-v3/cover-link-v3.css +0 -0
  26. package/public/components/block-cover-link-v3/cover-link-v3.js +0 -7
  27. package/public/components/block-divider-v3/divider-v3.css +0 -74
  28. package/public/components/block-divider-v3/divider-v3.js +0 -7
  29. package/public/components/block-featured-image-gallery-v3/featured-image-gallery-v3.css +0 -102
  30. package/public/components/block-featured-image-gallery-v3/featured-image-gallery-v3.js +0 -44
  31. package/public/components/block-form-selection-v3/form-selection-v3.css +0 -32
  32. package/public/components/block-form-selection-v3/form-selection-v3.js +0 -61
  33. package/public/components/block-gradient-layer-v3/gradient-layer-v3.css +0 -52
  34. package/public/components/block-gradient-layer-v3/gradient-layer-v3.js +0 -7
  35. package/public/components/block-group-container-v3/group-container-v3.css +0 -323
  36. package/public/components/block-group-container-v3/group-container-v3.js +0 -7
  37. package/public/components/block-lottie-content-v3/lottie-content-v3.css +0 -0
  38. package/public/components/block-lottie-content-v3/lottie-content-v3.js +0 -25
  39. package/public/components/block-market-selector-v3/market-selector-v3.css +0 -139
  40. package/public/components/block-market-selector-v3/market-selector-v3.js +0 -7
  41. package/public/components/block-modal-form-v3/modal-form-v3.css +0 -0
  42. package/public/components/block-modal-form-v3/modal-form-v3.js +0 -44
  43. package/public/components/block-modal-form-v3/modal-form-v3.scss.css +0 -0
  44. package/public/components/block-nav-menu-container-v3/nav-menu-container-v3.css +0 -3
  45. package/public/components/block-nav-menu-container-v3/nav-menu-container-v3.js +0 -7
  46. package/public/components/block-post-info-v3/post-info-v3.css +0 -1310
  47. package/public/components/block-post-info-v3/post-info-v3.js +0 -7
  48. package/public/components/block-post-info-v3/post-info-v3.scss.css +0 -1310
  49. package/public/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3.css +0 -859
  50. package/public/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3.js +0 -13
  51. package/public/components/block-product-info-v3/product-info-v3.css +0 -993
  52. package/public/components/block-product-info-v3/product-info-v3.js +0 -7
  53. package/public/components/block-product-info-v3/product-info-v3.scss.css +0 -993
  54. package/public/components/block-responsive-table-v3/responsive-table-v3.css +0 -48
  55. package/public/components/block-responsive-table-v3/responsive-table-v3.js +0 -7
  56. package/public/components/block-scrolling-banner-v3/scrolling-banner-v3.css +0 -85
  57. package/public/components/block-scrolling-banner-v3/scrolling-banner-v3.js +0 -106
  58. package/public/components/block-section-separator-v3/section-separator-v3.css +0 -43
  59. package/public/components/block-section-separator-v3/section-separator-v3.js +0 -7
  60. package/public/components/block-single-column-container-v3/single-column-container-v3.css +0 -14
  61. package/public/components/block-single-column-container-v3/single-column-container-v3.js +0 -7
  62. package/public/components/block-single-responsive-image-v3/single-responsive-image-v3.css +0 -60
  63. package/public/components/block-single-responsive-image-v3/single-responsive-image-v3.js +0 -7
  64. package/public/components/block-site-copyright-notice-v3/site-copyright-notice-v3.css +0 -0
  65. package/public/components/block-site-copyright-notice-v3/site-copyright-notice-v3.js +0 -7
  66. package/public/components/block-site-logo-container-v3/site-logo-container-v3.css +0 -18
  67. package/public/components/block-site-logo-container-v3/site-logo-container-v3.js +0 -7
  68. package/public/components/block-site-title-and-tagline-v3/site-title-and-tagline-v3.css +0 -14
  69. package/public/components/block-site-title-and-tagline-v3/site-title-and-tagline-v3.js +0 -7
  70. package/public/components/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.css +0 -25
  71. package/public/components/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.js +0 -8
  72. package/public/components/block-social-networks-v3/social-networks-v3.css +0 -74
  73. package/public/components/block-social-networks-v3/social-networks-v3.js +0 -7
  74. package/public/components/block-spacer-v3/spacer-v3.css +0 -16
  75. package/public/components/block-spacer-v3/spacer-v3.js +0 -2
  76. package/public/components/block-spacer-v3/spacer-v3.scss.css +0 -16
  77. package/public/components/block-spotify-embed-v3/spotify-embed-v3.css +0 -7
  78. package/public/components/block-spotify-embed-v3/spotify-embed-v3.js +0 -7
  79. package/public/components/block-standard-content-v3/standard-content-v3.css +0 -529
  80. package/public/components/block-standard-content-v3/standard-content-v3.js +0 -7
  81. package/public/components/block-sticky-buy-cta-v3/sticky-buy-cta-v3.css +0 -0
  82. package/public/components/block-sticky-buy-cta-v3/sticky-buy-cta-v3.js +0 -7
  83. package/public/components/block-sub-group-container-v3/sub-group-container-v3.css +0 -308
  84. package/public/components/block-sub-group-container-v3/sub-group-container-v3.js +0 -2
  85. package/public/components/block-video-content-v3/video-content-v3.css +0 -105
  86. package/public/components/block-video-content-v3/video-content-v3.js +0 -11
@@ -1,1310 +0,0 @@
1
- @charset "UTF-8";
2
- .post-info-v3 {
3
- display: grid;
4
- grid-auto-columns: 1fr;
5
- grid-template: "main"/1fr;
6
- }
7
- .post-info-v3__inner-container {
8
- grid-area: main;
9
- align-self: var(--content-box-vert-align-mobile);
10
- justify-self: var(--content-box-horiz-align-mobile);
11
- place-self: var(--content-box-vert-align-mobile) var(--content-box-horiz-align-mobile);
12
- z-index: 5;
13
- z-index: var(--content-z-index, 5);
14
- overflow: var(--content-box-overflow);
15
- min-width: -moz-min-content;
16
- min-width: min-content;
17
- aspect-ratio: var(--content-box-aspect-ratio);
18
- border-radius: var(--border-radius);
19
- border-width: var(--border-width);
20
- border-color: var(--border-colour);
21
- border-style: var(--border-style);
22
- display: flex;
23
- flex-direction: column;
24
- flex-direction: var(--content-box-items-direction-mobile, column);
25
- justify-content: var(--content-items-alignment-mobile);
26
- align-items: center;
27
- background-color: var(--cb-bg-colour);
28
- padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult-mobile));
29
- margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-right-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-left-margin-mobile));
30
- -moz-column-gap: var(--content-items-micro-gap-mobile, calc(var(--content-items-gap-mobile) * var(--global-inline-spacing)));
31
- column-gap: var(--content-items-micro-gap-mobile, calc(var(--content-items-gap-mobile) * var(--global-inline-spacing)));
32
- }
33
- @media screen and (min-width: 768px) {
34
- .post-info-v3__inner-container {
35
- justify-content: var(--content-items-alignment-portrait);
36
- align-self: var(--content-box-vert-align-portrait);
37
- justify-self: var(--content-box-horiz-align-portrait);
38
- place-self: var(--content-box-vert-align-portrait) var(--content-box-horiz-align-portrait);
39
- padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult-portrait));
40
- margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-right-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-left-margin-portrait));
41
- }
42
- }
43
- @media screen and (min-width: 1024px) {
44
- .post-info-v3__inner-container {
45
- -moz-column-gap: var(--content-items-micro-gap-desktop, calc(var(--content-items-gap-desktop) * var(--global-inline-spacing)));
46
- column-gap: var(--content-items-micro-gap-desktop, calc(var(--content-items-gap-desktop) * var(--global-inline-spacing)));
47
- justify-content: var(--content-items-alignment);
48
- max-width: var(--cb-max-width);
49
- align-self: var(--content-box-vert-align);
50
- justify-self: var(--content-box-horiz-align);
51
- place-self: var(--content-box-vert-align) var(--content-box-horiz-align);
52
- padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult));
53
- margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin)) calc(var(--global-inline-spacing) * var(--content-box-right-margin)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin)) calc(var(--global-inline-spacing) * var(--content-box-left-margin));
54
- }
55
- }
56
- .post-info-v3__inner-container {
57
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour);
58
- }
59
- .post-info-v3__content-box,
60
- .post-info-v3__content-container {
61
- max-width: var(--wysiwyg-max-width-mobile);
62
- margin-left: auto;
63
- margin-right: auto;
64
- display: grid;
65
- word-break: normal;
66
- width: 100%;
67
- width: var(--content-box-width, 100%);
68
- -webkit-text-stroke: calc(var(--text-stroke-width) / var(--desktop-design-reference) * var(--screen-width-static) * var(--font-size-multiplier)) var(--text-stroke-colour);
69
- }
70
- .post-info-v3__content-box:last-child,
71
- .post-info-v3__content-container:last-child {
72
- margin-bottom: 0;
73
- }
74
- .post-info-v3__content-box,
75
- .post-info-v3__content-container {
76
- color: var(--default-text-colour-mobile, var(--theme-primary-text-colour));
77
- }
78
- @media screen and (min-width: 768px) {
79
- .post-info-v3__content-box,
80
- .post-info-v3__content-container {
81
- color: var(--default-text-colour-portrait, var(--default-text-colour-desktop));
82
- }
83
- }
84
- @media screen and (min-width: 1024px) {
85
- .post-info-v3__content-box,
86
- .post-info-v3__content-container {
87
- color: var(--default-text-colour-desktop, var(--theme-primary-text-colour));
88
- }
89
- }
90
- .post-info-v3__content-box,
91
- .post-info-v3__content-container {
92
- text-transform: var(--default-text-transform-mobile);
93
- }
94
- @media screen and (min-width: 768px) {
95
- .post-info-v3__content-box,
96
- .post-info-v3__content-container {
97
- text-transform: var(--default-text-transform-portrait, var(--default-text-transform-desktop));
98
- }
99
- }
100
- @media screen and (min-width: 1024px) {
101
- .post-info-v3__content-box,
102
- .post-info-v3__content-container {
103
- text-transform: var(--default-text-transform-desktop);
104
- }
105
- }
106
- .post-info-v3__content-box,
107
- .post-info-v3__content-container {
108
- text-align: var(--default-text-align-mobile);
109
- }
110
- @media screen and (min-width: 768px) {
111
- .post-info-v3__content-box,
112
- .post-info-v3__content-container {
113
- text-align: var(--default-text-align-portrait, var(--default-text-align-desktop));
114
- }
115
- }
116
- @media screen and (min-width: 1024px) {
117
- .post-info-v3__content-box,
118
- .post-info-v3__content-container {
119
- text-align: var(--default-text-align-desktop);
120
- }
121
- }
122
- .post-info-v3__content-box,
123
- .post-info-v3__content-container {
124
- display: block;
125
- display: var(--display-mobile, block);
126
- }
127
- @media screen and (min-width: 768px) {
128
- .post-info-v3__content-box,
129
- .post-info-v3__content-container {
130
- display: block;
131
- display: var(--display-portrait, block);
132
- }
133
- }
134
- @media screen and (min-width: 1024px) {
135
- .post-info-v3__content-box,
136
- .post-info-v3__content-container {
137
- display: block;
138
- display: var(--display-desktop, block);
139
- }
140
- }
141
- .post-info-v3__content-box p,
142
- .post-info-v3__content-box h1,
143
- .post-info-v3__content-box h2,
144
- .post-info-v3__content-box h3,
145
- .post-info-v3__content-box h4,
146
- .post-info-v3__content-box h5,
147
- .post-info-v3__content-box h6,
148
- .post-info-v3__content-box a,
149
- .post-info-v3__content-box li,
150
- .post-info-v3__content-box div,
151
- .post-info-v3__content-container p,
152
- .post-info-v3__content-container h1,
153
- .post-info-v3__content-container h2,
154
- .post-info-v3__content-container h3,
155
- .post-info-v3__content-container h4,
156
- .post-info-v3__content-container h5,
157
- .post-info-v3__content-container h6,
158
- .post-info-v3__content-container a,
159
- .post-info-v3__content-container li,
160
- .post-info-v3__content-container div {
161
- font-weight: var(--default-font-weight-mobile, var(--default-font-weight));
162
- }
163
- @media screen and (min-width: 768px) {
164
- .post-info-v3__content-box p,
165
- .post-info-v3__content-box h1,
166
- .post-info-v3__content-box h2,
167
- .post-info-v3__content-box h3,
168
- .post-info-v3__content-box h4,
169
- .post-info-v3__content-box h5,
170
- .post-info-v3__content-box h6,
171
- .post-info-v3__content-box a,
172
- .post-info-v3__content-box li,
173
- .post-info-v3__content-box div,
174
- .post-info-v3__content-container p,
175
- .post-info-v3__content-container h1,
176
- .post-info-v3__content-container h2,
177
- .post-info-v3__content-container h3,
178
- .post-info-v3__content-container h4,
179
- .post-info-v3__content-container h5,
180
- .post-info-v3__content-container h6,
181
- .post-info-v3__content-container a,
182
- .post-info-v3__content-container li,
183
- .post-info-v3__content-container div {
184
- font-weight: var(--default-font-weight-portrait, var(--default-font-weight));
185
- }
186
- }
187
- @media screen and (min-width: 1024px) {
188
- .post-info-v3__content-box p,
189
- .post-info-v3__content-box h1,
190
- .post-info-v3__content-box h2,
191
- .post-info-v3__content-box h3,
192
- .post-info-v3__content-box h4,
193
- .post-info-v3__content-box h5,
194
- .post-info-v3__content-box h6,
195
- .post-info-v3__content-box a,
196
- .post-info-v3__content-box li,
197
- .post-info-v3__content-box div,
198
- .post-info-v3__content-container p,
199
- .post-info-v3__content-container h1,
200
- .post-info-v3__content-container h2,
201
- .post-info-v3__content-container h3,
202
- .post-info-v3__content-container h4,
203
- .post-info-v3__content-container h5,
204
- .post-info-v3__content-container h6,
205
- .post-info-v3__content-container a,
206
- .post-info-v3__content-container li,
207
- .post-info-v3__content-container div {
208
- font-weight: var(--default-font-weight-desktop, var(--default-font-weight));
209
- }
210
- }
211
- .post-info-v3__content-box p,
212
- .post-info-v3__content-box h1,
213
- .post-info-v3__content-box h2,
214
- .post-info-v3__content-box h3,
215
- .post-info-v3__content-box h4,
216
- .post-info-v3__content-box h5,
217
- .post-info-v3__content-box h6,
218
- .post-info-v3__content-box a,
219
- .post-info-v3__content-box li,
220
- .post-info-v3__content-box div,
221
- .post-info-v3__content-container p,
222
- .post-info-v3__content-container h1,
223
- .post-info-v3__content-container h2,
224
- .post-info-v3__content-container h3,
225
- .post-info-v3__content-container h4,
226
- .post-info-v3__content-container h5,
227
- .post-info-v3__content-container h6,
228
- .post-info-v3__content-container a,
229
- .post-info-v3__content-container li,
230
- .post-info-v3__content-container div {
231
- font-style: var(--default-font-style-mobile);
232
- }
233
- @media screen and (min-width: 768px) {
234
- .post-info-v3__content-box p,
235
- .post-info-v3__content-box h1,
236
- .post-info-v3__content-box h2,
237
- .post-info-v3__content-box h3,
238
- .post-info-v3__content-box h4,
239
- .post-info-v3__content-box h5,
240
- .post-info-v3__content-box h6,
241
- .post-info-v3__content-box a,
242
- .post-info-v3__content-box li,
243
- .post-info-v3__content-box div,
244
- .post-info-v3__content-container p,
245
- .post-info-v3__content-container h1,
246
- .post-info-v3__content-container h2,
247
- .post-info-v3__content-container h3,
248
- .post-info-v3__content-container h4,
249
- .post-info-v3__content-container h5,
250
- .post-info-v3__content-container h6,
251
- .post-info-v3__content-container a,
252
- .post-info-v3__content-container li,
253
- .post-info-v3__content-container div {
254
- font-style: var(--default-font-style-portrait, var(--default-font-style-desktop));
255
- }
256
- }
257
- @media screen and (min-width: 1024px) {
258
- .post-info-v3__content-box p,
259
- .post-info-v3__content-box h1,
260
- .post-info-v3__content-box h2,
261
- .post-info-v3__content-box h3,
262
- .post-info-v3__content-box h4,
263
- .post-info-v3__content-box h5,
264
- .post-info-v3__content-box h6,
265
- .post-info-v3__content-box a,
266
- .post-info-v3__content-box li,
267
- .post-info-v3__content-box div,
268
- .post-info-v3__content-container p,
269
- .post-info-v3__content-container h1,
270
- .post-info-v3__content-container h2,
271
- .post-info-v3__content-container h3,
272
- .post-info-v3__content-container h4,
273
- .post-info-v3__content-container h5,
274
- .post-info-v3__content-container h6,
275
- .post-info-v3__content-container a,
276
- .post-info-v3__content-container li,
277
- .post-info-v3__content-container div {
278
- font-style: var(--default-font-style-desktop);
279
- }
280
- }
281
- @media screen and (min-width: 768px) {
282
- .post-info-v3__content-box,
283
- .post-info-v3__content-container {
284
- max-width: var(--wysiwyg-max-width-portrait);
285
- }
286
- }
287
- @media screen and (min-width: 1024px) {
288
- .post-info-v3__content-box,
289
- .post-info-v3__content-container {
290
- max-width: var(--wysiwyg-max-width);
291
- }
292
- }
293
- .post-info-v3--text-shadow {
294
- text-shadow: calc(var(--text-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--text-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--text-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) var(--text-shadow-colour);
295
- }
296
- .post-info-v3__cta-selection-container {
297
- width: 100%;
298
- display: var(--cta-container-display);
299
- grid-template-columns: var(--grid-columns-mobile);
300
- flex-wrap: wrap;
301
- flex-direction: var(--cta-flex-direction);
302
- justify-content: var(--cta-alignment-mobile);
303
- gap: calc(var(--global-inline-spacing) * var(--cta-spacing-gap-mobile));
304
- }
305
- @media screen and (min-width: 768px) {
306
- .post-info-v3__cta-selection-container {
307
- gap: calc(var(--global-inline-spacing) * var(--cta-spacing-gap-desktop));
308
- justify-content: var(--cta-alignment-portrait);
309
- grid-template-columns: var(--grid-columns-portrait);
310
- }
311
- }
312
- @media screen and (min-width: 1024px) {
313
- .post-info-v3__cta-selection-container {
314
- justify-content: var(--cta-alignment);
315
- grid-template-columns: var(--grid-columns-desktop);
316
- }
317
- }
318
- .post-info-v3 {
319
- display: "grid";
320
- display: var(--display-type, "grid");
321
- position: relative;
322
- scroll-behavior: smooth;
323
- overscroll-behavior-x: contain;
324
- scroll-snap-type: none;
325
- scroll-snap-type: var(--scroll-snap-type-mobile, none);
326
- }
327
- .post-info-v3 > div {
328
- scroll-snap-align: start;
329
- scroll-snap-align: var(--scroll-snap-align-mobile, start);
330
- }
331
- .post-info-v3 {
332
- overflow: hidden;
333
- overflow: var(--container-overflow-type-mobile, hidden);
334
- grid-gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
335
- grid-gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-mobile, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-mobile, 0));
336
- grid-auto-flow: row;
337
- grid-auto-flow: var(--grid-auto-flow-mobile, row);
338
- grid-auto-columns: 1fr;
339
- grid-auto-columns: var(--grid-auto-columns-mobile, 1fr);
340
- grid-auto-rows: auto;
341
- grid-auto-rows: var(--grid-auto-rows-mobile, auto);
342
- grid-template-columns: var(--grid-template-columns-custom-mobile, repeat(var(--grid-template-columns-mobile), 1fr));
343
- grid-template-columns: var(--grid-template-columns-custom-mobile, repeat(var(--grid-template-columns-mobile), var(--grid-auto-columns-mobile, 1fr)));
344
- grid-template-rows: var(--grid-template-rows-custom-mobile, repeat(var(--grid-template-rows-mobile), 1fr));
345
- grid-template-rows: var(--grid-template-rows-custom-mobile, repeat(var(--grid-template-rows-mobile), var(--grid-auto-rows-mobile, 1fr)));
346
- }
347
- @media screen and (min-width: 1024px) {
348
- .post-info-v3.scroll-btns-desktop::scroll-button(left) {
349
- content: "\25c4";
350
- position: absolute;
351
- align-self: center;
352
- justify-self: flex-start;
353
- place-self: center flex-start;
354
- z-index: 50;
355
- }
356
- .post-info-v3.scroll-btns-desktop::scroll-button(right) {
357
- content: "\25ba";
358
- position: absolute;
359
- align-self: center;
360
- justify-self: flex-end;
361
- place-self: center flex-end;
362
- z-index: 50;
363
- }
364
- .post-info-v3.scroll-btns-desktop::scroll-button(*) {
365
- border: 1px solid black;
366
- border-radius: 10px;
367
- font-size: var(--scroll-button-font-size, calc(30 / var(--design-reference) * var(--screen-width)));
368
- background: rgba(0, 0, 0, 0.163);
369
- color: white;
370
- opacity: 0.7;
371
- cursor: pointer;
372
- transition: scale 0.3s ease-in-out;
373
- }
374
- .post-info-v3.scroll-btns-desktop::scroll-button(*):hover,
375
- .post-info-v3.scroll-btns-desktop::scroll-button(*):focus {
376
- opacity: 1;
377
- scale: 1.2;
378
- }
379
- .post-info-v3.scroll-btns-desktop::scroll-button(*):active {
380
- translate: 1px 1px;
381
- }
382
- .post-info-v3.scroll-btns-desktop::scroll-button(*):disabled {
383
- opacity: 0.2;
384
- cursor: inherit;
385
- }
386
- }
387
- @media screen and (min-width: 768px) and (max-width: 1023px) {
388
- .post-info-v3.scroll-btns-portrait::scroll-button(left) {
389
- content: "\25c4";
390
- position: absolute;
391
- align-self: center;
392
- justify-self: flex-start;
393
- place-self: center flex-start;
394
- z-index: 50;
395
- }
396
- .post-info-v3.scroll-btns-portrait::scroll-button(right) {
397
- content: "\25ba";
398
- position: absolute;
399
- align-self: center;
400
- justify-self: flex-end;
401
- place-self: center flex-end;
402
- z-index: 50;
403
- }
404
- .post-info-v3.scroll-btns-portrait::scroll-button(*) {
405
- border: 1px solid black;
406
- border-radius: 10px;
407
- font-size: var(--scroll-button-font-size, calc(30 / var(--design-reference) * var(--screen-width)));
408
- background: rgba(0, 0, 0, 0.163);
409
- color: white;
410
- opacity: 0.7;
411
- cursor: pointer;
412
- transition: scale 0.3s ease-in-out;
413
- }
414
- .post-info-v3.scroll-btns-portrait::scroll-button(*):hover,
415
- .post-info-v3.scroll-btns-portrait::scroll-button(*):focus {
416
- opacity: 1;
417
- scale: 1.2;
418
- }
419
- .post-info-v3.scroll-btns-portrait::scroll-button(*):active {
420
- translate: 1px 1px;
421
- }
422
- .post-info-v3.scroll-btns-portrait::scroll-button(*):disabled {
423
- opacity: 0.2;
424
- cursor: inherit;
425
- }
426
- }
427
- @media screen and (max-width: 767px) {
428
- .post-info-v3.scroll-btns-mobile::scroll-button(left) {
429
- content: "\25c4";
430
- position: absolute;
431
- align-self: center;
432
- justify-self: flex-start;
433
- place-self: center flex-start;
434
- z-index: 50;
435
- }
436
- .post-info-v3.scroll-btns-mobile::scroll-button(right) {
437
- content: "\25ba";
438
- position: absolute;
439
- align-self: center;
440
- justify-self: flex-end;
441
- place-self: center flex-end;
442
- z-index: 50;
443
- }
444
- .post-info-v3.scroll-btns-mobile::scroll-button(*) {
445
- border: 1px solid black;
446
- border-radius: 10px;
447
- font-size: var(--scroll-button-font-size, calc(30 / var(--design-reference) * var(--screen-width)));
448
- background: rgba(0, 0, 0, 0.163);
449
- color: white;
450
- opacity: 0.7;
451
- cursor: pointer;
452
- transition: scale 0.3s ease-in-out;
453
- }
454
- .post-info-v3.scroll-btns-mobile::scroll-button(*):hover,
455
- .post-info-v3.scroll-btns-mobile::scroll-button(*):focus {
456
- opacity: 1;
457
- scale: 1.2;
458
- }
459
- .post-info-v3.scroll-btns-mobile::scroll-button(*):active {
460
- translate: 1px 1px;
461
- }
462
- .post-info-v3.scroll-btns-mobile::scroll-button(*):disabled {
463
- opacity: 0.2;
464
- cursor: inherit;
465
- }
466
- }
467
- @media screen and (min-width: 768px) {
468
- .post-info-v3 {
469
- scroll-snap-type: none;
470
- scroll-snap-type: var(--scroll-snap-type-portrait, none);
471
- }
472
- .post-info-v3 > div {
473
- scroll-snap-align: start;
474
- scroll-snap-align: var(--scroll-snap-align-portrait, start);
475
- }
476
- .post-info-v3 {
477
- overflow: hidden;
478
- overflow: var(--container-overflow-type-portrait, hidden);
479
- grid-auto-flow: row;
480
- grid-auto-flow: var(--grid-auto-flow-portrait, row);
481
- grid-auto-columns: 1fr;
482
- grid-auto-columns: var(--grid-auto-columns-portrait, 1fr);
483
- grid-auto-rows: auto;
484
- grid-auto-rows: var(--grid-auto-rows-portrait, auto);
485
- grid-gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
486
- grid-gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-portrait, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-portrait, 0));
487
- grid-template-columns: var(--grid-template-columns-custom-portrait, repeat(var(--grid-template-columns-portrait), 1fr));
488
- grid-template-columns: var(--grid-template-columns-custom-portrait, repeat(var(--grid-template-columns-portrait), var(--grid-auto-columns-portrait, 1fr)));
489
- grid-template-rows: var(--grid-template-rows-custom-portrait, repeat(var(--grid-template-rows-portrait), 1fr));
490
- grid-template-rows: var(--grid-template-rows-custom-portrait, repeat(var(--grid-template-rows-portrait), var(--grid-auto-rows-portrait, 1fr)));
491
- }
492
- }
493
- @media screen and (min-width: 1024px) {
494
- .post-info-v3 {
495
- scroll-snap-type: none;
496
- scroll-snap-type: var(--scroll-snap-type-desktop, none);
497
- }
498
- .post-info-v3 > div {
499
- scroll-snap-align: start;
500
- scroll-snap-align: var(--scroll-snap-align-desktop, start);
501
- }
502
- .post-info-v3 {
503
- overflow: hidden;
504
- overflow: var(--container-overflow-type-desktop, hidden);
505
- grid-gap: calc(var(--global-inline-spacing) * 0) calc(var(--global-inline-spacing) * 0);
506
- grid-gap: calc(var(--global-inline-spacing) * var(--row-gap-mult-desktop, 0)) calc(var(--global-inline-spacing) * var(--column-gap-mult-desktop, 0));
507
- grid-auto-flow: row;
508
- grid-auto-flow: var(--grid-auto-flow-desktop, row);
509
- grid-auto-columns: 1fr;
510
- grid-auto-columns: var(--grid-auto-columns-desktop, 1fr);
511
- grid-auto-rows: auto;
512
- grid-auto-rows: var(--grid-auto-rows-desktop, auto);
513
- grid-template-columns: repeat(1, 1fr);
514
- grid-template-columns: var(--grid-template-columns-custom-desktop, repeat(var(--grid-template-columns-desktop, 1), var(--grid-auto-columns-desktop, 1fr)));
515
- grid-template-rows: var(--grid-template-rows-custom-desktop, repeat(var(--grid-template-rows-desktop), 1fr));
516
- grid-template-rows: var(--grid-template-rows-custom-desktop, repeat(var(--grid-template-rows-desktop), var(--grid-auto-rows-desktop, 1fr)));
517
- }
518
- }
519
- .post-info-v3 .social-media-share-popup {
520
- display: grid;
521
- z-index: 5;
522
- z-index: var(--element-z-index, 5);
523
- grid-row: var(--grid-row-start-mobile)/span var(--grid-row-span-mobile);
524
- grid-column: var(--grid-column-start-mobile)/span var(--grid-column-span-mobile);
525
- align-self: var(--grid-vertical-placement-mobile);
526
- justify-self: var(--grid-horizontal-placement-mobile);
527
- place-self: var(--grid-vertical-placement-mobile) var(--grid-horizontal-placement-mobile);
528
- }
529
- .post-info-v3 .social-media-share-popup:has(> .subgrid-layout-mobile) {
530
- grid-template-rows: subgrid;
531
- }
532
- .post-info-v3 .social-media-share-popup:has(> .subgrid-layout-mobile) > section {
533
- grid-row: 1/-1;
534
- grid-column: 1/-1;
535
- }
536
- @media screen and (min-width: 768px) {
537
- .post-info-v3 .social-media-share-popup {
538
- grid-row: var(--grid-row-start-portrait)/span var(--grid-row-span-portrait);
539
- grid-column: var(--grid-column-start-portrait)/span var(--grid-column-span-portrait);
540
- align-self: var(--grid-vertical-placement-portrait);
541
- justify-self: var(--grid-horizontal-placement-portrait);
542
- place-self: var(--grid-vertical-placement-portrait) var(--grid-horizontal-placement-portrait);
543
- }
544
- .post-info-v3 .social-media-share-popup:has(> .subgrid-layout-portrait) {
545
- grid-template-rows: subgrid;
546
- }
547
- .post-info-v3 .social-media-share-popup:has(> .subgrid-layout-portrait) > section {
548
- grid-row: 1/-1;
549
- grid-column: 1/-1;
550
- }
551
- }
552
- @media screen and (min-width: 1024px) {
553
- .post-info-v3 .social-media-share-popup {
554
- grid-row: var(--grid-row-start)/span var(--grid-row-span);
555
- grid-column: var(--grid-column-start)/span var(--grid-column-span);
556
- align-self: var(--grid-vertical-placement-desktop);
557
- justify-self: var(--grid-horizontal-placement-desktop);
558
- place-self: var(--grid-vertical-placement-desktop) var(--grid-horizontal-placement-desktop);
559
- }
560
- .post-info-v3 .social-media-share-popup:has(> .subgrid-layout-desktop) {
561
- grid-template-rows: subgrid;
562
- }
563
- .post-info-v3 .social-media-share-popup:has(> .subgrid-layout-desktop) > section {
564
- grid-row: 1/-1;
565
- grid-column: 1/-1;
566
- }
567
- }
568
- .post-info-v3 .social-media-share-popup .social-media-page-content {
569
- display: grid;
570
- grid-template-areas: " left right ";
571
- grid-template-columns: fit-content(100%) fit-content(100%);
572
- grid-gap: var(--social-media-share-grid-gap);
573
- align-content: var(--social-media-share-horizontal-align);
574
- justify-content: var(--social-media-share-horizontal-align);
575
- place-content: var(--social-media-share-horizontal-align);
576
- align-items: center;
577
- }
578
- .post-info-v3 .social-media-share-popup .social-media-page-content .social-media-share-text {
579
- grid-area: var(--social-media-share-col1);
580
- color: var(--theme-primary-text-colour);
581
- text-decoration-line: underline;
582
- font-size: calc(16 / var(--desktop-design-reference) * var(--screen-width-static) * var(--font-size-multiplier));
583
- cursor: pointer;
584
- }
585
- .post-info-v3 .social-media-share-popup .social-media-page-content .social-media-share-icon {
586
- grid-area: var(--social-media-share-col2);
587
- padding-top: calc(9 / var(--desktop-design-reference) * var(--screen-width-static));
588
- }
589
- .post-info-v3 .social-media-share-popup .social-media-page-content .social-media-share-icon .share-icon-img {
590
- transform: rotate(var(--social-share-icon-rotate));
591
- cursor: pointer;
592
- }
593
- .post-info-v3 .social-media-share-popup dialog::backdrop {
594
- backdrop-filter: blur(10px);
595
- }
596
- .post-info-v3 .social-media-share-popup dialog {
597
- min-width: calc(334 / var(--desktop-design-reference) * var(--screen-width-static));
598
- width: calc(100% - 30px);
599
- max-width: calc(330 / var(--desktop-design-reference) * var(--screen-width-static));
600
- overflow: visible;
601
- box-shadow: var(--social-share-popup-shadow);
602
- background-color: var(--social-share-popup-background-colour);
603
- border-radius: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
604
- border: none;
605
- padding: calc(40 / var(--desktop-design-reference) * var(--screen-width-static)) calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
606
- height: -moz-fit-content;
607
- height: fit-content;
608
- font-size: calc(50 / var(--desktop-design-reference) * var(--screen-width-static) * var(--font-size-multiplier));
609
- line-height: 1em;
610
- text-transform: uppercase;
611
- }
612
- .post-info-v3 .social-media-share-popup dialog .icon-close {
613
- background-color: white;
614
- width: calc(48 / var(--desktop-design-reference) * var(--screen-width-static));
615
- height: calc(48 / var(--desktop-design-reference) * var(--screen-width-static));
616
- border-radius: 50%;
617
- position: absolute;
618
- top: calc(-25 / var(--desktop-design-reference) * var(--screen-width-static));
619
- right: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
620
- display: flex;
621
- align-items: center;
622
- justify-content: center;
623
- cursor: pointer;
624
- }
625
- .post-info-v3 .social-media-share-popup dialog .dialog-actions {
626
- text-align: center;
627
- }
628
- .post-info-v3 .social-media-share-popup dialog .dialog-actions h3 {
629
- font-size: calc(50 / var(--desktop-design-reference) * var(--screen-width-static) * var(--font-size-multiplier));
630
- font-family: var(--primary-font-family);
631
- color: var(--social-share-popup-font-colour);
632
- }
633
- .post-info-v3 .social-media-share-popup dialog .dialog-actions .wrapper-content-icons {
634
- display: flex;
635
- justify-content: center;
636
- -moz-column-gap: 1rem;
637
- column-gap: 1rem;
638
- padding-top: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
639
- }
640
- .post-info-v3 .social-media-share-popup dialog .dialog-actions .wrapper-content-icons a {
641
- background-color: #ffffff;
642
- border-radius: 50%;
643
- height: calc(40 / var(--desktop-design-reference) * var(--screen-width-static));
644
- height: calc(var(--social-media-share-a-size, 40) / var(--desktop-design-reference) * var(--screen-width-static));
645
- }
646
- .post-info-v3 .social-media-share-popup dialog .dialog-actions .wrapper-content-icons a svg {
647
- padding-top: calc(5 / var(--desktop-design-reference) * var(--screen-width-static));
648
- }
649
- .post-info-v3 .social-media-share-popup dialog .dialog-actions .wrapper-content-icons a svg:hover {
650
- fill: purple;
651
- }
652
- .post-info-v3 .social-media-share-popup dialog .dialog-actions .wrapper-content-icons a svg:hover rect {
653
- fill: purple;
654
- }
655
- .post-info-v3 .social-media-share-popup dialog .dialog-actions .wrapper-content-icons a svg:hover path {
656
- fill: purple;
657
- }
658
- .post-info-v3 .social-media-share-popup dialog .dialog-actions .wrapper-content-icons a:focus-visible {
659
- outline: medium none currentcolor;
660
- outline: initial;
661
- }
662
- .post-info-v3 .social-media-share-popup dialog .dialog-actions .social-media-message {
663
- display: none;
664
- color: white;
665
- font-size: calc(16 / var(--desktop-design-reference) * var(--screen-width-static) * var(--font-size-multiplier));
666
- justify-content: center;
667
- align-items: center;
668
- }
669
- .post-info-v3__better-reviews {
670
- align-self: center;
671
- align-self: var(--horizontal-alignment, center);
672
- justify-self: center;
673
- justify-self: var(--horizontal-alignment, center);
674
- align-self: center;
675
- justify-self: center;
676
- place-self: center;
677
- place-self: var(--horizontal-alignment, center);
678
- }
679
- .post-info-v3 {
680
- --better-reviews-filled-star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.86 26"><path d="M27.86,10.12l-7.24,6.46,1.99,9.42-8.68-4.71-8.68,4.54,1.99-9.43L0,9.95l9.77-1.22L13.93,0l4.16,8.73,9.77,1.4Z" fill="%23ECFC34"/></svg>');
681
- --better-reviews-no-fill-star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.86 26"><path d="M27.86,10.12l-7.24,6.46,1.99,9.42-8.68-4.71-8.68,4.54,1.99-9.43L0,9.95l9.77-1.22L13.93,0l4.16,8.73,9.77,1.4Z" opacity="0.3" fill="%230f8d86" /></svg>');
682
- --better-reviews-half-fill-star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.86 25.82" fill="%23ECFC34"><path d="M13.93 0L9.77 8.72 0 9.94l7.24 6.46-1.99 9.42 8.68-4.53h0V0z"/></svg>');
683
- --better-reviews-font-size: core-functions-v3.fontSize(16, "static");
684
- --better-reviews-text-colour: #ffffff;
685
- }
686
- .post-info-v3 .better-reviews__review {
687
- display: flex;
688
- font-family: var(--secondary-font-family);
689
- gap: 5px;
690
- width: 100%;
691
- max-width: var(--global-content-max-width);
692
- margin-left: auto;
693
- margin-right: auto;
694
- padding-top: 15px;
695
- padding-bottom: 15px;
696
- align-items: center;
697
- justify-content: var(--horizontal-alignment);
698
- }
699
- .post-info-v3 .better-reviews__review .better-reviews__criteria-review-count {
700
- font-size: var(--better-reviews-font-size);
701
- font-family: var(--secondary-font-family);
702
- color: var(--better-reviews-text-colour);
703
- }
704
- .post-info-v3 .better-reviews__review .better-reviews__review-title {
705
- font-family: var(--secondary-font-family);
706
- font-size: var(--better-reviews-font-size);
707
- font-weight: 400;
708
- margin-bottom: 0;
709
- display: none;
710
- }
711
- .post-info-v3 .better-reviews__review .better-reviews__cta {
712
- border: 0;
713
- cursor: pointer;
714
- background-color: transparent;
715
- font-family: var(--secondary-font-family);
716
- font-size: var(--better-reviews-font-size);
717
- font-weight: 500;
718
- -webkit-text-decoration: underline;
719
- text-decoration: underline;
720
- display: inline-block;
721
- padding-top: 4px;
722
- padding-bottom: 4px;
723
- -webkit-appearance: none;
724
- -moz-appearance: none;
725
- appearance: none;
726
- padding-left: 0;
727
- padding-left: initial;
728
- color: var(--better-reviews-text-colour);
729
- }
730
- .post-info-v3 .better-reviews__review .better-reviews__cta-container {
731
- order: 1;
732
- }
733
- .post-info-v3 .better-reviews__review .better-reviews__average {
734
- display: flex;
735
- gap: 5px;
736
- align-items: center;
737
- order: 2;
738
- }
739
- .post-info-v3 .better-reviews__review .better-reviews__average .better-reviews__criteria-stars {
740
- --better-reviews-star-width: 110px;
741
- position: relative;
742
- background-image: var(--better-reviews-filled-star);
743
- width: 110px;
744
- width: var(--better-reviews-star-width);
745
- height: 16px;
746
- background-clip: content-box;
747
- background-repeat: space;
748
- background-size: 16px auto;
749
- background-position: 0% 33%;
750
- }
751
- .post-info-v3 .better-reviews__review .better-reviews__average .better-reviews__criteria-stars:before {
752
- content: "";
753
- display: block;
754
- position: absolute;
755
- width: var(--better-reviews-star-width);
756
- height: 100%;
757
- transform: scaleX(-1);
758
- opacity: 0.4;
759
- background-image: var(--better-reviews-filled-star);
760
- background-clip: content-box;
761
- background-repeat: space;
762
- background-size: 16px auto;
763
- background-position: 0% 33%;
764
- }
765
- .post-info-v3 .better-reviews__review .better-reviews__average .better-reviews__star_05 {
766
- padding-right: calc(var(--better-reviews-star-width) * 0.911);
767
- }
768
- .post-info-v3 .better-reviews__review .better-reviews__average .better-reviews__star_10 {
769
- padding-right: calc(var(--better-reviews-star-width) * 0.8);
770
- }
771
- .post-info-v3 .better-reviews__review .better-reviews__average .better-reviews__star_15 {
772
- padding-right: calc(var(--better-reviews-star-width) * 0.702);
773
- }
774
- .post-info-v3 .better-reviews__review .better-reviews__average .better-reviews__star_20 {
775
- padding-right: calc(var(--better-reviews-star-width) * 0.6);
776
- }
777
- .post-info-v3 .better-reviews__review .better-reviews__average .better-reviews__star_25 {
778
- padding-right: calc(var(--better-reviews-star-width) * 0.5);
779
- }
780
- .post-info-v3 .better-reviews__review .better-reviews__average .better-reviews__star_30 {
781
- padding-right: calc(var(--better-reviews-star-width) * 0.4);
782
- }
783
- .post-info-v3 .better-reviews__review .better-reviews__average .better-reviews__star_35 {
784
- padding-right: calc(var(--better-reviews-star-width) * 0.298);
785
- }
786
- .post-info-v3 .better-reviews__review .better-reviews__average .better-reviews__star_40 {
787
- padding-right: calc(var(--better-reviews-star-width) * 0.2);
788
- }
789
- .post-info-v3 .better-reviews__review .better-reviews__average .better-reviews__star_45 {
790
- padding-right: calc(var(--better-reviews-star-width) * 0.09);
791
- }
792
- .post-info-v3 .better-reviews__review .better-reviews__average .better-reviews__star_50 {
793
- padding-right: calc(var(--better-reviews-star-width) * 0);
794
- }
795
- .post-info-v3__post-cover-link {
796
- grid-area: unset;
797
- position: absolute;
798
- top: 0;
799
- right: 0;
800
- bottom: 0;
801
- left: 0;
802
- width: 100%;
803
- height: 100%;
804
- z-index: 99;
805
- opacity: 0;
806
- }
807
- .post-info-v3__post-cover-label {
808
- position: absolute;
809
- width: 1px;
810
- height: 1px;
811
- margin: -1px;
812
- padding: 0;
813
- overflow: hidden;
814
- clip: rect(0, 0, 0, 0);
815
- white-space: nowrap;
816
- border: 0;
817
- }
818
- .post-info-v3__info-item {
819
- display: grid;
820
- z-index: 5;
821
- z-index: var(--element-z-index, 5);
822
- grid-row: var(--grid-row-start-mobile)/span var(--grid-row-span-mobile);
823
- grid-column: var(--grid-column-start-mobile)/span var(--grid-column-span-mobile);
824
- align-self: var(--grid-vertical-placement-mobile);
825
- justify-self: var(--grid-horizontal-placement-mobile);
826
- place-self: var(--grid-vertical-placement-mobile) var(--grid-horizontal-placement-mobile);
827
- }
828
- .post-info-v3__info-item:has(> .subgrid-layout-mobile) {
829
- grid-template-rows: subgrid;
830
- }
831
- .post-info-v3__info-item:has(> .subgrid-layout-mobile) > section {
832
- grid-row: 1/-1;
833
- grid-column: 1/-1;
834
- }
835
- @media screen and (min-width: 768px) {
836
- .post-info-v3__info-item {
837
- grid-row: var(--grid-row-start-portrait)/span var(--grid-row-span-portrait);
838
- grid-column: var(--grid-column-start-portrait)/span var(--grid-column-span-portrait);
839
- align-self: var(--grid-vertical-placement-portrait);
840
- justify-self: var(--grid-horizontal-placement-portrait);
841
- place-self: var(--grid-vertical-placement-portrait) var(--grid-horizontal-placement-portrait);
842
- }
843
- .post-info-v3__info-item:has(> .subgrid-layout-portrait) {
844
- grid-template-rows: subgrid;
845
- }
846
- .post-info-v3__info-item:has(> .subgrid-layout-portrait) > section {
847
- grid-row: 1/-1;
848
- grid-column: 1/-1;
849
- }
850
- }
851
- @media screen and (min-width: 1024px) {
852
- .post-info-v3__info-item {
853
- grid-row: var(--grid-row-start)/span var(--grid-row-span);
854
- grid-column: var(--grid-column-start)/span var(--grid-column-span);
855
- align-self: var(--grid-vertical-placement-desktop);
856
- justify-self: var(--grid-horizontal-placement-desktop);
857
- place-self: var(--grid-vertical-placement-desktop) var(--grid-horizontal-placement-desktop);
858
- }
859
- .post-info-v3__info-item:has(> .subgrid-layout-desktop) {
860
- grid-template-rows: subgrid;
861
- }
862
- .post-info-v3__info-item:has(> .subgrid-layout-desktop) > section {
863
- grid-row: 1/-1;
864
- grid-column: 1/-1;
865
- }
866
- }
867
- .post-info-v3__info-item {
868
- width: 100%;
869
- position: relative;
870
- overflow: hidden;
871
- }
872
- .post-info-v3__post-video {
873
- aspect-ratio: var(--image-aspect-ratio-mobile, var(--image-aspect-ratio-desktop));
874
- width: 100%;
875
- -o-object-fit: cover;
876
- object-fit: cover;
877
- height: auto;
878
- }
879
- @media screen and (min-width: 768px) {
880
- .post-info-v3__post-video {
881
- aspect-ratio: var(--image-aspect-ratio-portrait);
882
- }
883
- }
884
- @media screen and (min-width: 1024px) {
885
- .post-info-v3__post-video {
886
- aspect-ratio: var(--image-aspect-ratio-desktop);
887
- }
888
- }
889
- .post-info-v3__content-container {
890
- width: 100%;
891
- }
892
- .post-info-v3__cta-selection-container {
893
- display: grid;
894
- z-index: 5;
895
- z-index: var(--element-z-index, 5);
896
- grid-row: var(--grid-row-start-mobile)/span var(--grid-row-span-mobile);
897
- grid-column: var(--grid-column-start-mobile)/span var(--grid-column-span-mobile);
898
- align-self: var(--grid-vertical-placement-mobile);
899
- justify-self: var(--grid-horizontal-placement-mobile);
900
- place-self: var(--grid-vertical-placement-mobile) var(--grid-horizontal-placement-mobile);
901
- }
902
- .post-info-v3__cta-selection-container:has(> .subgrid-layout-mobile) {
903
- grid-template-rows: subgrid;
904
- }
905
- .post-info-v3__cta-selection-container:has(> .subgrid-layout-mobile) > section {
906
- grid-row: 1/-1;
907
- grid-column: 1/-1;
908
- }
909
- @media screen and (min-width: 768px) {
910
- .post-info-v3__cta-selection-container {
911
- grid-row: var(--grid-row-start-portrait)/span var(--grid-row-span-portrait);
912
- grid-column: var(--grid-column-start-portrait)/span var(--grid-column-span-portrait);
913
- align-self: var(--grid-vertical-placement-portrait);
914
- justify-self: var(--grid-horizontal-placement-portrait);
915
- place-self: var(--grid-vertical-placement-portrait) var(--grid-horizontal-placement-portrait);
916
- }
917
- .post-info-v3__cta-selection-container:has(> .subgrid-layout-portrait) {
918
- grid-template-rows: subgrid;
919
- }
920
- .post-info-v3__cta-selection-container:has(> .subgrid-layout-portrait) > section {
921
- grid-row: 1/-1;
922
- grid-column: 1/-1;
923
- }
924
- }
925
- @media screen and (min-width: 1024px) {
926
- .post-info-v3__cta-selection-container {
927
- grid-row: var(--grid-row-start)/span var(--grid-row-span);
928
- grid-column: var(--grid-column-start)/span var(--grid-column-span);
929
- align-self: var(--grid-vertical-placement-desktop);
930
- justify-self: var(--grid-horizontal-placement-desktop);
931
- place-self: var(--grid-vertical-placement-desktop) var(--grid-horizontal-placement-desktop);
932
- }
933
- .post-info-v3__cta-selection-container:has(> .subgrid-layout-desktop) {
934
- grid-template-rows: subgrid;
935
- }
936
- .post-info-v3__cta-selection-container:has(> .subgrid-layout-desktop) > section {
937
- grid-row: 1/-1;
938
- grid-column: 1/-1;
939
- }
940
- }
941
- .post-info-v3__cta {
942
- display: flex;
943
- }
944
- .post-info-v3__cta-style-post-colour,
945
- .post-info-v3__cta-style-post-text-colour-style {
946
- padding-top: calc(10 / var(--design-reference) * var(--screen-width));
947
- padding-bottom: calc(10 / var(--design-reference) * var(--screen-width));
948
- padding-left: calc(20 / var(--design-reference) * var(--screen-width));
949
- padding-right: calc(20 / var(--design-reference) * var(--screen-width));
950
- }
951
- @media screen and (min-width: 768px) {
952
- .post-info-v3__cta-style-post-colour,
953
- .post-info-v3__cta-style-post-text-colour-style {
954
- padding-top: calc(10 / var(--design-reference) * var(--screen-width));
955
- padding-bottom: calc(10 / var(--design-reference) * var(--screen-width));
956
- padding-left: calc(20 / var(--design-reference) * var(--screen-width));
957
- padding-right: calc(20 / var(--design-reference) * var(--screen-width));
958
- }
959
- }
960
- @media screen and (min-width: 1024px) {
961
- .post-info-v3__cta-style-post-colour,
962
- .post-info-v3__cta-style-post-text-colour-style {
963
- padding-top: calc(10 / var(--design-reference) * var(--screen-width));
964
- padding-bottom: calc(10 / var(--design-reference) * var(--screen-width));
965
- padding-left: calc(20 / var(--design-reference) * var(--screen-width));
966
- padding-right: calc(20 / var(--design-reference) * var(--screen-width));
967
- }
968
- }
969
- .post-info-v3__cta-style-post-colour {
970
- color: var(--post-colour);
971
- border: 1px solid var(--post-colour);
972
- }
973
- .post-info-v3__cta-style-post-text-colour-style {
974
- color: var(--post-text-colour-style);
975
- border: 1px solid var(--post-text-colour-style);
976
- }
977
- .post-info-v3__post-link,
978
- .post-info-v3__better-reviews {
979
- max-width: -moz-max-content;
980
- max-width: max-content;
981
- }
982
- .post-info-v3__gradient-overlay {
983
- height: 100%;
984
- --spread: calc(100% - var(--gradient-spread));
985
- }
986
- .post-info-v3__gradient-overlay__gradient-overlay-element {
987
- position: absolute;
988
- top: 0;
989
- right: 0;
990
- bottom: 0;
991
- left: 0;
992
- z-index: var(--gradient-zindex);
993
- grid-area: var(--gradient-grid-area);
994
- }
995
- .post-info-v3__gradient-overlay__gradient-overlay-element::before,
996
- .post-info-v3__gradient-overlay__gradient-overlay-element:after {
997
- content: "";
998
- pointer-events: none;
999
- position: absolute;
1000
- top: 0;
1001
- right: 0;
1002
- bottom: 0;
1003
- left: 0;
1004
- opacity: var(--gradient-opacity);
1005
- }
1006
- .post-info-v3__gradient-overlay__gradient-overlay-element::before {
1007
- background:
1008
- linear-gradient(
1009
- var(--gradient-origin-before),
1010
- rgba(255, 255, 255, 0) 0%,
1011
- rgba(255, 255, 255, 0) calc(var(--spread) - var(--gradient-amount)),
1012
- var(--gradient-colour) calc(100% - var(--gradient-amount)));
1013
- }
1014
- .post-info-v3__gradient-overlay__gradient-overlay-element::after {
1015
- content: var(--enable-after);
1016
- background:
1017
- linear-gradient(
1018
- var(--gradient-origin-after),
1019
- rgba(255, 255, 255, 0) 0%,
1020
- rgba(255, 255, 255, 0) calc(var(--spread) - var(--gradient-amount)),
1021
- var(--gradient-colour) calc(100% - var(--gradient-amount)));
1022
- }
1023
- .post-info-v3__gradient-overlay__blur-overlay-element {
1024
- background: var(--blur-colour);
1025
- backdrop-filter: blur(var(--blur-value));
1026
- position: absolute;
1027
- top: 0;
1028
- right: 0;
1029
- bottom: 0;
1030
- left: 0;
1031
- z-index: var(--blur-zindex);
1032
- }
1033
- .post-info-v3__post-tags {
1034
- pointer-events: none;
1035
- display: flex;
1036
- width: auto;
1037
- display: grid;
1038
- z-index: 5;
1039
- z-index: var(--element-z-index, 5);
1040
- grid-row: var(--grid-row-start-mobile)/span var(--grid-row-span-mobile);
1041
- grid-column: var(--grid-column-start-mobile)/span var(--grid-column-span-mobile);
1042
- align-self: var(--grid-vertical-placement-mobile);
1043
- justify-self: var(--grid-horizontal-placement-mobile);
1044
- place-self: var(--grid-vertical-placement-mobile) var(--grid-horizontal-placement-mobile);
1045
- }
1046
- .post-info-v3__post-tags:has(> .subgrid-layout-mobile) {
1047
- grid-template-rows: subgrid;
1048
- }
1049
- .post-info-v3__post-tags:has(> .subgrid-layout-mobile) > section {
1050
- grid-row: 1/-1;
1051
- grid-column: 1/-1;
1052
- }
1053
- @media screen and (min-width: 768px) {
1054
- .post-info-v3__post-tags {
1055
- grid-row: var(--grid-row-start-portrait)/span var(--grid-row-span-portrait);
1056
- grid-column: var(--grid-column-start-portrait)/span var(--grid-column-span-portrait);
1057
- align-self: var(--grid-vertical-placement-portrait);
1058
- justify-self: var(--grid-horizontal-placement-portrait);
1059
- place-self: var(--grid-vertical-placement-portrait) var(--grid-horizontal-placement-portrait);
1060
- }
1061
- .post-info-v3__post-tags:has(> .subgrid-layout-portrait) {
1062
- grid-template-rows: subgrid;
1063
- }
1064
- .post-info-v3__post-tags:has(> .subgrid-layout-portrait) > section {
1065
- grid-row: 1/-1;
1066
- grid-column: 1/-1;
1067
- }
1068
- }
1069
- @media screen and (min-width: 1024px) {
1070
- .post-info-v3__post-tags {
1071
- grid-row: var(--grid-row-start)/span var(--grid-row-span);
1072
- grid-column: var(--grid-column-start)/span var(--grid-column-span);
1073
- align-self: var(--grid-vertical-placement-desktop);
1074
- justify-self: var(--grid-horizontal-placement-desktop);
1075
- place-self: var(--grid-vertical-placement-desktop) var(--grid-horizontal-placement-desktop);
1076
- }
1077
- .post-info-v3__post-tags:has(> .subgrid-layout-desktop) {
1078
- grid-template-rows: subgrid;
1079
- }
1080
- .post-info-v3__post-tags:has(> .subgrid-layout-desktop) > section {
1081
- grid-row: 1/-1;
1082
- grid-column: 1/-1;
1083
- }
1084
- }
1085
- .post-info-v3__post-image-container {
1086
- display: grid;
1087
- grid-template: "main"/1fr;
1088
- }
1089
- .post-info-v3__post-image-container--image-accent {
1090
- position: relative;
1091
- }
1092
- .post-info-v3__post-image-container--image-accent img,
1093
- .post-info-v3__post-image-container--image-accent svg {
1094
- margin: 0;
1095
- margin: initial;
1096
- position: relative;
1097
- position: var(--element-position, relative);
1098
- z-index: var(--element-z-index);
1099
- align-self: var(--mobile-vertical-placement);
1100
- justify-self: var(--mobile-horizontal-placement);
1101
- place-self: var(--mobile-vertical-placement) var(--mobile-horizontal-placement);
1102
- translate: 0 0;
1103
- translate: var(--element-horizontal-offset-mobile, 0) var(--element-vertical-offset-mobile, 0);
1104
- rotate: 0deg;
1105
- rotate: var(--element-rotation-mobile, 0deg);
1106
- }
1107
- @media screen and (min-width: 1024px) {
1108
- .post-info-v3__post-image-container--image-accent img,
1109
- .post-info-v3__post-image-container--image-accent svg {
1110
- align-self: var(--desktop-vertical-placement);
1111
- justify-self: var(--desktop-horizontal-placement);
1112
- place-self: var(--desktop-vertical-placement) var(--desktop-horizontal-placement);
1113
- translate: 0 0;
1114
- translate: var(--element-horizontal-offset-desktop, 0) var(--element-vertical-offset-desktop, 0);
1115
- rotate: 0deg;
1116
- rotate: var(--element-rotation-desktop, 0deg);
1117
- }
1118
- }
1119
- .post-info-v3__post__image {
1120
- display: flex;
1121
- justify-content: center;
1122
- margin-left: auto;
1123
- margin-right: auto;
1124
- grid-area: main;
1125
- height: auto;
1126
- aspect-ratio: var(--image-aspect-ratio-mobile, var(--image-aspect-ratio-desktop));
1127
- display: grid;
1128
- z-index: 5;
1129
- z-index: var(--element-z-index, 5);
1130
- grid-row: var(--grid-row-start-mobile)/span var(--grid-row-span-mobile);
1131
- grid-column: var(--grid-column-start-mobile)/span var(--grid-column-span-mobile);
1132
- align-self: var(--grid-vertical-placement-mobile);
1133
- justify-self: var(--grid-horizontal-placement-mobile);
1134
- place-self: var(--grid-vertical-placement-mobile) var(--grid-horizontal-placement-mobile);
1135
- }
1136
- .post-info-v3__post__image:has(> .subgrid-layout-mobile) {
1137
- grid-template-rows: subgrid;
1138
- }
1139
- .post-info-v3__post__image:has(> .subgrid-layout-mobile) > section {
1140
- grid-row: 1/-1;
1141
- grid-column: 1/-1;
1142
- }
1143
- @media screen and (min-width: 768px) {
1144
- .post-info-v3__post__image {
1145
- grid-row: var(--grid-row-start-portrait)/span var(--grid-row-span-portrait);
1146
- grid-column: var(--grid-column-start-portrait)/span var(--grid-column-span-portrait);
1147
- align-self: var(--grid-vertical-placement-portrait);
1148
- justify-self: var(--grid-horizontal-placement-portrait);
1149
- place-self: var(--grid-vertical-placement-portrait) var(--grid-horizontal-placement-portrait);
1150
- }
1151
- .post-info-v3__post__image:has(> .subgrid-layout-portrait) {
1152
- grid-template-rows: subgrid;
1153
- }
1154
- .post-info-v3__post__image:has(> .subgrid-layout-portrait) > section {
1155
- grid-row: 1/-1;
1156
- grid-column: 1/-1;
1157
- }
1158
- }
1159
- @media screen and (min-width: 1024px) {
1160
- .post-info-v3__post__image {
1161
- grid-row: var(--grid-row-start)/span var(--grid-row-span);
1162
- grid-column: var(--grid-column-start)/span var(--grid-column-span);
1163
- align-self: var(--grid-vertical-placement-desktop);
1164
- justify-self: var(--grid-horizontal-placement-desktop);
1165
- place-self: var(--grid-vertical-placement-desktop) var(--grid-horizontal-placement-desktop);
1166
- }
1167
- .post-info-v3__post__image:has(> .subgrid-layout-desktop) {
1168
- grid-template-rows: subgrid;
1169
- }
1170
- .post-info-v3__post__image:has(> .subgrid-layout-desktop) > section {
1171
- grid-row: 1/-1;
1172
- grid-column: 1/-1;
1173
- }
1174
- }
1175
- .post-info-v3__post__image {
1176
- width: var(--post-image-width-mobile);
1177
- }
1178
- @media screen and (min-width: 768px) {
1179
- .post-info-v3__post__image {
1180
- aspect-ratio: var(--image-aspect-ratio-portrait);
1181
- }
1182
- }
1183
- @media screen and (min-width: 1024px) {
1184
- .post-info-v3__post__image {
1185
- width: var(--post-image-width-desktop);
1186
- aspect-ratio: var(--image-aspect-ratio-desktop);
1187
- }
1188
- }
1189
- .post-info-v3__post__image {
1190
- -o-object-fit: var(--image-fit-style);
1191
- object-fit: var(--image-fit-style);
1192
- margin: auto;
1193
- }
1194
- .post-info-v3__post-author-label {
1195
- display: flex;
1196
- }
1197
- .post-info-v3__global-image {
1198
- z-index: var(--global-image-zindex);
1199
- max-width: var(--global-image-max-width);
1200
- min-height: 100%;
1201
- }
1202
- .post-info-v3__global-image__picture {
1203
- width: var(--global-image-width);
1204
- display: flex;
1205
- position: var(--global-image-position);
1206
- top: 0;
1207
- right: 0;
1208
- bottom: 0;
1209
- left: 0;
1210
- }
1211
- .post-info-v3__global-image__image {
1212
- -o-object-fit: var(--global-image-fit-style);
1213
- object-fit: var(--global-image-fit-style);
1214
- }
1215
- .post-info-v3__product-logo {
1216
- max-width: calc(var(--logo-max-width-mobile) / var(--design-reference) * var(--screen-width));
1217
- }
1218
- @media screen and (min-width: 1024px) {
1219
- .post-info-v3__product-logo {
1220
- max-width: calc(var(--logo-max-width-desktop) / var(--design-reference) * var(--screen-width));
1221
- }
1222
- }
1223
- .post-info-v3__post-text-alternative-style {
1224
- width: auto;
1225
- display: grid;
1226
- z-index: 5;
1227
- z-index: var(--element-z-index, 5);
1228
- grid-row: var(--grid-row-start-mobile)/span var(--grid-row-span-mobile);
1229
- grid-column: var(--grid-column-start-mobile)/span var(--grid-column-span-mobile);
1230
- align-self: var(--grid-vertical-placement-mobile);
1231
- justify-self: var(--grid-horizontal-placement-mobile);
1232
- place-self: var(--grid-vertical-placement-mobile) var(--grid-horizontal-placement-mobile);
1233
- }
1234
- .post-info-v3__post-text-alternative-style:has(> .subgrid-layout-mobile) {
1235
- grid-template-rows: subgrid;
1236
- }
1237
- .post-info-v3__post-text-alternative-style:has(> .subgrid-layout-mobile) > section {
1238
- grid-row: 1/-1;
1239
- grid-column: 1/-1;
1240
- }
1241
- @media screen and (min-width: 768px) {
1242
- .post-info-v3__post-text-alternative-style {
1243
- grid-row: var(--grid-row-start-portrait)/span var(--grid-row-span-portrait);
1244
- grid-column: var(--grid-column-start-portrait)/span var(--grid-column-span-portrait);
1245
- align-self: var(--grid-vertical-placement-portrait);
1246
- justify-self: var(--grid-horizontal-placement-portrait);
1247
- place-self: var(--grid-vertical-placement-portrait) var(--grid-horizontal-placement-portrait);
1248
- }
1249
- .post-info-v3__post-text-alternative-style:has(> .subgrid-layout-portrait) {
1250
- grid-template-rows: subgrid;
1251
- }
1252
- .post-info-v3__post-text-alternative-style:has(> .subgrid-layout-portrait) > section {
1253
- grid-row: 1/-1;
1254
- grid-column: 1/-1;
1255
- }
1256
- }
1257
- @media screen and (min-width: 1024px) {
1258
- .post-info-v3__post-text-alternative-style {
1259
- grid-row: var(--grid-row-start)/span var(--grid-row-span);
1260
- grid-column: var(--grid-column-start)/span var(--grid-column-span);
1261
- align-self: var(--grid-vertical-placement-desktop);
1262
- justify-self: var(--grid-horizontal-placement-desktop);
1263
- place-self: var(--grid-vertical-placement-desktop) var(--grid-horizontal-placement-desktop);
1264
- }
1265
- .post-info-v3__post-text-alternative-style:has(> .subgrid-layout-desktop) {
1266
- grid-template-rows: subgrid;
1267
- }
1268
- .post-info-v3__post-text-alternative-style:has(> .subgrid-layout-desktop) > section {
1269
- grid-row: 1/-1;
1270
- grid-column: 1/-1;
1271
- }
1272
- }
1273
- .post-info-v3__social-networks-inner-container {
1274
- display: flex;
1275
- flex-direction: column;
1276
- gap: calc(10 / var(--design-reference) * var(--screen-width));
1277
- }
1278
- @media screen and (min-width: 768px) {
1279
- .post-info-v3__social-networks-inner-container {
1280
- flex-direction: row;
1281
- gap: calc(20 / var(--design-reference) * var(--screen-width));
1282
- }
1283
- }
1284
- .post-info-v3__social-networks-links-container {
1285
- display: flex;
1286
- gap: calc(20 / var(--design-reference) * var(--screen-width));
1287
- }
1288
- .post-info-v3__social-networks-link-container img {
1289
- width: calc(30 / var(--design-reference) * var(--screen-width));
1290
- height: calc(30 / var(--design-reference) * var(--screen-width));
1291
- }
1292
- .post-info-v3__social-networks-share-label {
1293
- --default-font-weight: 700;
1294
- line-height: var(--paragraph-line-height);
1295
- letter-spacing: var(--paragraph-letter-spacing);
1296
- font-family: var(--paragraph-font-family);
1297
- font-weight: 700;
1298
- font-weight: var(--default-font-weight);
1299
- font-size: calc(18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
1300
- }
1301
- @media screen and (min-width: 768px) {
1302
- .post-info-v3__social-networks-share-label {
1303
- font-size: calc(22 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
1304
- }
1305
- }
1306
- @media screen and (min-width: 1024px) {
1307
- .post-info-v3__social-networks-share-label {
1308
- font-size: calc(22 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
1309
- }
1310
- }