@comicrelief/component-library 8.77.4 → 8.77.6

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 (18) hide show
  1. package/dist/index.cjs.js +790 -740
  2. package/dist/index.es.js +6484 -6433
  3. package/package.json +1 -1
  4. package/src/components/Atoms/LogoNav2026/LogoNav2026.test.js +114 -114
  5. package/src/components/Molecules/ArticleTeaser/ArticleTeaser.js +1 -1
  6. package/src/components/Molecules/ArticleTeaser/ArticleTeaser.style.js +3 -3
  7. package/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js +58 -44
  8. package/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap +1123 -1010
  9. package/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap +286 -198
  10. package/src/components/Molecules/CTA/shared/CTACard.js +19 -16
  11. package/src/components/Molecules/CTA/shared/CTACard.style.js +71 -39
  12. package/src/components/Molecules/HeroBanner/HeroBanner.js +2 -3
  13. package/src/components/Molecules/HeroBanner/HeroBanner.style.js +35 -16
  14. package/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap +9 -6
  15. package/src/components/Molecules/shared/ctaArrow/CtaArrowCircle.style.js +5 -8
  16. package/src/components/Molecules/shared/ctaText/ctaText.style.js +1 -0
  17. package/src/components/Organisms/DonateBanner/Form/PopUpComponent.js +1 -1
  18. package/src/theme/shared/animations.js +4 -2
package/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap CHANGED
@@ -1,7 +1,7 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`handles data structure correctly 1`] = `
4
- .c13 {
4
+ .c15 {
5
5
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
6
6
  font-weight: 400;
7
7
  text-transform: inherit;
@@ -10,7 +10,7 @@ exports[`handles data structure correctly 1`] = `
10
10
  line-height: 1.25rem;
11
11
  }
12
12
 
13
- .c13 span {
13
+ .c15 span {
14
14
  font-size: inherit;
15
15
  line-height: inherit;
16
16
  }
@@ -28,30 +28,41 @@ exports[`handles data structure correctly 1`] = `
28
28
  text-decoration: none;
29
29
  }
30
30
 
31
- .c9 {
31
+ .c11 {
32
32
  display: block;
33
33
  width: 100%;
34
34
  height: 100%;
35
35
  position: relative;
36
36
  }
37
37
 
38
- .c10 {
38
+ .c12 {
39
39
  width: 100%;
40
40
  height: 100%;
41
41
  display: block;
42
42
  object-fit: cover;
43
43
  }
44
44
 
45
- .c23 {
45
+ .c20 {
46
+ height: 4px;
47
+ width: 100%;
48
+ position: absolute;
49
+ left: 0;
50
+ bottom: -5px;
51
+ transition: opacity 0.15s 0.1s;
52
+ opacity: 0;
53
+ pointer-events: none;
54
+ }
55
+
56
+ .c25 {
46
57
  display: inline-flex;
47
58
  align-items: center;
48
59
  justify-content: center;
49
- transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
60
+ transition: transform 0.35s cubic-bezier(0.65,-0.19,0.37,1.16);
50
61
  transform: scale(1);
51
62
  transform-origin: center;
52
63
  }
53
64
 
54
- .c21 {
65
+ .c23 {
55
66
  width: 32px;
56
67
  height: 32px;
57
68
  border-radius: 50%;
@@ -63,20 +74,20 @@ exports[`handles data structure correctly 1`] = `
63
74
  overflow: hidden;
64
75
  }
65
76
 
66
- .c19 {
77
+ .c21 {
67
78
  padding-left: 1rem;
68
79
  display: flex;
69
80
  align-items: center;
70
81
  justify-content: flex-end;
71
82
  }
72
83
 
73
- .c24 {
84
+ .c26 {
74
85
  display: inline-block;
75
86
  color: #FFFFFF;
76
87
  fill: currentColor;
77
88
  }
78
89
 
79
- .c8 {
90
+ .c10 {
80
91
  width: 100%;
81
92
  overflow: hidden;
82
93
  flex-shrink: 0;
@@ -84,14 +95,14 @@ exports[`handles data structure correctly 1`] = `
84
95
  border-radius: 1rem 1rem 0 0;
85
96
  }
86
97
 
87
- .c8 img {
98
+ .c10 img {
88
99
  width: 100%;
89
100
  height: auto;
90
101
  object-fit: cover;
91
102
  display: block;
92
103
  }
93
104
 
94
- .c16 {
105
+ .c18 {
95
106
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
96
107
  font-weight: 400;
97
108
  text-transform: inherit;
@@ -103,17 +114,17 @@ exports[`handles data structure correctly 1`] = `
103
114
  text-decoration: none;
104
115
  position: relative;
105
116
  display: inline-block;
117
+ transition: color 0.35s;
106
118
  }
107
119
 
108
- .c18 {
109
- height: 4px;
110
- width: 100%;
111
- position: absolute;
112
- left: 0;
113
- bottom: -5px;
114
- transition: opacity 0.15s 0.1s;
115
- opacity: 0;
116
- pointer-events: none;
120
+ .c8 {
121
+ display: inherit;
122
+ flex-direction: inherit;
123
+ flex: inherit;
124
+ border-radius: inherit;
125
+ overflow: hidden;
126
+ transition: box-shadow 0.35s;
127
+ box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
117
128
  }
118
129
 
119
130
  .c6 {
@@ -124,19 +135,22 @@ exports[`handles data structure correctly 1`] = `
124
135
  flex: 1 1 auto;
125
136
  background: transparent;
126
137
  border-radius: 1rem;
127
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
128
138
  text-decoration: none;
129
- overflow: hidden;
130
139
  cursor: pointer;
131
140
  box-sizing: border-box;
132
141
  }
133
142
 
134
- .c6 img {
143
+ .c6:hover .c7,
144
+ .c6:focus .c7 {
145
+ box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
146
+ }
147
+
148
+ .c6 .c9 img {
135
149
  transform: scale(1);
136
- transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
150
+ transition: transform 0.35s cubic-bezier(0.65,-0.19,0.37,1.16),box-shadow 0.35s;
137
151
  }
138
152
 
139
- .c26 {
153
+ .c27 {
140
154
  display: flex;
141
155
  position: relative;
142
156
  flex-direction: column;
@@ -144,9 +158,7 @@ exports[`handles data structure correctly 1`] = `
144
158
  flex: 1 1 auto;
145
159
  background: transparent;
146
160
  border-radius: 1rem;
147
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
148
161
  text-decoration: none;
149
- overflow: hidden;
150
162
  cursor: default;
151
163
  box-sizing: border-box;
152
164
  }
@@ -160,17 +172,7 @@ exports[`handles data structure correctly 1`] = `
160
172
  border-radius: 1rem;
161
173
  }
162
174
 
163
- .c25 {
164
- width: auto;
165
- flex-shrink: 0;
166
- display: flex;
167
- flex-direction: column;
168
- align-self: stretch;
169
- border-radius: 1rem;
170
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
171
- }
172
-
173
- .c11 {
175
+ .c13 {
174
176
  width: 100%;
175
177
  background: #FFFFFF;
176
178
  display: flex;
@@ -181,14 +183,14 @@ exports[`handles data structure correctly 1`] = `
181
183
  border-radius: 0 0 1rem 1rem;
182
184
  }
183
185
 
184
- .c12 {
186
+ .c14 {
185
187
  flex: 1;
186
188
  display: flex;
187
189
  flex-direction: column;
188
190
  min-height: 0;
189
191
  }
190
192
 
191
- .c14 {
193
+ .c16 {
192
194
  width: 100%;
193
195
  display: flex;
194
196
  flex-direction: row;
@@ -224,74 +226,103 @@ exports[`handles data structure correctly 1`] = `
224
226
  }
225
227
 
226
228
  @media (min-width: 740px) {
227
- .c13 {
229
+ .c15 {
228
230
  font-size: 1rem;
229
231
  line-height: 1.25rem;
230
232
  }
231
233
  }
232
234
 
233
235
  @media (min-width: 1024px) {
234
- .c13 {
236
+ .c15 {
235
237
  font-size: 1.125rem;
236
238
  line-height: 1.375rem;
237
239
  }
238
240
  }
239
241
 
240
- @media (min-width:1024px) {
241
- .c21 {
242
+ @media (min-width: 1024px) {
243
+ .c23 {
242
244
  background: #222222;
243
245
  }
244
246
  }
245
247
 
246
248
  @media (min-width: 740px) {
247
- .c16 {
249
+ .c18 {
248
250
  font-size: 1rem;
249
251
  line-height: 1.25rem;
250
252
  }
251
253
  }
252
254
 
253
255
  @media (min-width: 1024px) {
254
- .c16 {
256
+ .c18 {
255
257
  font-size: 1.125rem;
256
258
  line-height: 1.375rem;
257
259
  }
258
260
  }
259
261
 
260
262
  @media (min-width:1024px) {
261
- .c16 {
263
+ .c18 {
262
264
  color: #222222;
263
265
  }
264
266
  }
265
267
 
266
268
  @media (min-width: 740px) {
269
+ .c6:hover .c17,
270
+ .c6:focus .c17 {
271
+ color: #E52630;
272
+ }
273
+
274
+ .c6:hover .c19,
275
+ .c6:focus .c19 {
276
+ opacity: 1;
277
+ }
278
+
279
+ .c6:hover .c22 .c24,
280
+ .c6:focus .c22 .c24 {
281
+ transform: scale(1.2);
282
+ }
283
+ }
284
+
285
+ @media (min-width: 1024px) {
267
286
  .c6 {
268
- transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
269
- transform-origin: center;
287
+ overflow: visible;
288
+ }
289
+
290
+ .c6 >div {
270
291
  transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
292
+ transform-origin: center;
271
293
  }
272
294
 
273
- .c6:hover,
274
- .c6:focus {
295
+ .c6:hover >div,
296
+ .c6:focus >div {
275
297
  transform: translateY(-10px);
276
298
  }
277
299
 
278
- .c6:hover {
279
- box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
300
+ .c6 >.c7 {
301
+ transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35),box-shadow 0.35s;
280
302
  }
281
303
 
282
- .c6:hover .c7 img {
304
+ .c6:hover .c9 img,
305
+ .c6:focus .c9 img {
283
306
  transform: scale(1.06);
284
307
  }
285
308
 
286
- .c6:hover .c15 {
287
- text-decoration: none;
309
+ .c6:hover .c17,
310
+ .c6:focus .c17 {
311
+ color: #E52630;
288
312
  }
289
313
 
290
- .c6:hover .c17 {
314
+ .c6:hover .c19,
315
+ .c6:focus .c19 {
291
316
  opacity: 1;
292
317
  }
293
318
 
294
- .c6:hover .c20 .c22 {
319
+ .c6:hover .c22,
320
+ .c6:focus .c22 {
321
+ background: #E52630;
322
+ }
323
+
324
+ .c6:hover .c22 .c24,
325
+ .c6:focus .c22 .c24 {
295
326
  transform: scale(1.2);
296
327
  }
297
328
  }
@@ -320,30 +351,6 @@ exports[`handles data structure correctly 1`] = `
320
351
  }
321
352
  }
322
353
 
323
- @media (max-width:739px) {
324
- .c25 {
325
- width: 100%;
326
- max-width: 100%;
327
- margin: 0;
328
- }
329
- }
330
-
331
- @media (min-width:740px) and (max-width:1023px) {
332
- .c25 {
333
- align-self: stretch;
334
- flex: 0 0 100%;
335
- max-width: 309px;
336
- }
337
- }
338
-
339
- @media (min-width:1024px) {
340
- .c25 {
341
- flex: 0 1 auto;
342
- width: clamp(261px,calc((100% - 4rem) / 3),363px);
343
- align-self: stretch;
344
- }
345
- }
346
-
347
354
  @media (min-width: 740px) {
348
355
  .c1 {
349
356
  padding-inline: 2rem;
@@ -402,74 +409,78 @@ exports[`handles data structure correctly 1`] = `
402
409
  className="c7 c8"
403
410
  >
404
411
  <div
405
- className="c9 lazyload"
406
- data-testid="PictureWrapper"
407
- >
408
- <img
409
- alt=""
410
- className="c10 lazyload"
411
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
412
- data-sizes="auto"
413
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
414
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
415
- data-testid="Picture"
416
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
417
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
418
- />
419
- </div>
420
- </div>
421
- <div
422
- className="c11"
423
- >
424
- <div
425
- className="c12"
412
+ className="c9 c10"
426
413
  >
427
- <p
428
- className="c13"
414
+ <div
415
+ className="c11 lazyload"
416
+ data-testid="PictureWrapper"
429
417
  >
430
- <strong>
431
- Load
432
- </strong>
433
- of text here
434
- </p>
418
+ <img
419
+ alt=""
420
+ className="c12 lazyload"
421
+ data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
422
+ data-sizes="auto"
423
+ data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
424
+ data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
425
+ data-testid="Picture"
426
+ src="@component-library/src/styleguide/assets/challenge-1.jpg"
427
+ srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
428
+ />
429
+ </div>
435
430
  </div>
436
431
  <div
437
- className="c14"
432
+ className="c13"
438
433
  >
439
- <span
440
- className="c15 c16"
434
+ <div
435
+ className="c14"
441
436
  >
442
- test go
443
- <img
444
- alt=""
445
- aria-hidden="true"
446
- className="c17 c18"
447
- src="mock.asset"
448
- />
449
- </span>
437
+ <p
438
+ className="c15"
439
+ >
440
+ <strong>
441
+ Load
442
+ </strong>
443
+ of text here
444
+ </p>
445
+ </div>
450
446
  <div
451
- className="c19"
447
+ className="c16"
452
448
  >
449
+ <span
450
+ className="c17 c18"
451
+ >
452
+ test go
453
+ <img
454
+ alt=""
455
+ aria-hidden="true"
456
+ className="c19 c20"
457
+ src="mock.asset"
458
+ />
459
+ </span>
453
460
  <div
454
- className="c20 c21"
461
+ className="c21"
455
462
  >
456
- <span
463
+ <div
457
464
  className="c22 c23"
458
465
  >
459
- <svg
460
- className="c24"
461
- fill="none"
462
- height="15"
463
- viewBox="0 0 15 15"
464
- width="15"
465
- xmlns="http://www.w3.org/2000/svg"
466
+ <span
467
+ className="c24 c25"
466
468
  >
467
- <path
468
- d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
469
- fill="currentColor"
470
- />
471
- </svg>
472
- </span>
469
+ <svg
470
+ className="c26"
471
+ fill="none"
472
+ height="15"
473
+ viewBox="0 0 15 15"
474
+ width="15"
475
+ xmlns="http://www.w3.org/2000/svg"
476
+ >
477
+ <path
478
+ d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
479
+ fill="currentColor"
480
+ />
481
+ </svg>
482
+ </span>
483
+ </div>
473
484
  </div>
474
485
  </div>
475
486
  </div>
@@ -477,45 +488,49 @@ exports[`handles data structure correctly 1`] = `
477
488
  </a>
478
489
  </div>
479
490
  <div
480
- className="c25"
491
+ className="c4"
481
492
  >
482
493
  <div
483
- className="c26"
494
+ className="c27"
484
495
  >
485
496
  <div
486
497
  className="c7 c8"
487
498
  >
488
499
  <div
489
- className="c9 lazyload"
490
- data-testid="PictureWrapper"
500
+ className="c9 c10"
491
501
  >
492
- <img
493
- alt=""
494
- className="c10 lazyload"
495
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
496
- data-sizes="auto"
497
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
498
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
499
- data-testid="Picture"
500
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
501
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
502
- />
502
+ <div
503
+ className="c11 lazyload"
504
+ data-testid="PictureWrapper"
505
+ >
506
+ <img
507
+ alt=""
508
+ className="c12 lazyload"
509
+ data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
510
+ data-sizes="auto"
511
+ data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
512
+ data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
513
+ data-testid="Picture"
514
+ src="@component-library/src/styleguide/assets/challenge-1.jpg"
515
+ srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
516
+ />
517
+ </div>
503
518
  </div>
504
- </div>
505
- <div
506
- className="c11"
507
- >
508
519
  <div
509
- className="c12"
520
+ className="c13"
510
521
  >
511
- <p
512
- className="c13"
522
+ <div
523
+ className="c14"
513
524
  >
514
- <strong>
515
- Load
516
- </strong>
517
- of text here
518
- </p>
525
+ <p
526
+ className="c15"
527
+ >
528
+ <strong>
529
+ Load
530
+ </strong>
531
+ of text here
532
+ </p>
533
+ </div>
519
534
  </div>
520
535
  </div>
521
536
  </div>
@@ -534,74 +549,78 @@ exports[`handles data structure correctly 1`] = `
534
549
  className="c7 c8"
535
550
  >
536
551
  <div
537
- className="c9 lazyload"
538
- data-testid="PictureWrapper"
539
- >
540
- <img
541
- alt=""
542
- className="c10 lazyload"
543
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
544
- data-sizes="auto"
545
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
546
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
547
- data-testid="Picture"
548
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
549
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
550
- />
551
- </div>
552
- </div>
553
- <div
554
- className="c11"
555
- >
556
- <div
557
- className="c12"
552
+ className="c9 c10"
558
553
  >
559
- <p
560
- className="c13"
554
+ <div
555
+ className="c11 lazyload"
556
+ data-testid="PictureWrapper"
561
557
  >
562
- <strong>
563
- Load
564
- </strong>
565
- of text here
566
- </p>
558
+ <img
559
+ alt=""
560
+ className="c12 lazyload"
561
+ data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
562
+ data-sizes="auto"
563
+ data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
564
+ data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
565
+ data-testid="Picture"
566
+ src="@component-library/src/styleguide/assets/challenge-1.jpg"
567
+ srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
568
+ />
569
+ </div>
567
570
  </div>
568
571
  <div
569
- className="c14"
572
+ className="c13"
570
573
  >
571
- <span
572
- className="c15 c16"
574
+ <div
575
+ className="c14"
573
576
  >
574
- test go
575
- <img
576
- alt=""
577
- aria-hidden="true"
578
- className="c17 c18"
579
- src="mock.asset"
580
- />
581
- </span>
577
+ <p
578
+ className="c15"
579
+ >
580
+ <strong>
581
+ Load
582
+ </strong>
583
+ of text here
584
+ </p>
585
+ </div>
582
586
  <div
583
- className="c19"
587
+ className="c16"
584
588
  >
589
+ <span
590
+ className="c17 c18"
591
+ >
592
+ test go
593
+ <img
594
+ alt=""
595
+ aria-hidden="true"
596
+ className="c19 c20"
597
+ src="mock.asset"
598
+ />
599
+ </span>
585
600
  <div
586
- className="c20 c21"
601
+ className="c21"
587
602
  >
588
- <span
603
+ <div
589
604
  className="c22 c23"
590
605
  >
591
- <svg
592
- className="c24"
593
- fill="none"
594
- height="15"
595
- viewBox="0 0 15 15"
596
- width="15"
597
- xmlns="http://www.w3.org/2000/svg"
606
+ <span
607
+ className="c24 c25"
598
608
  >
599
- <path
600
- d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
601
- fill="currentColor"
602
- />
603
- </svg>
604
- </span>
609
+ <svg
610
+ className="c26"
611
+ fill="none"
612
+ height="15"
613
+ viewBox="0 0 15 15"
614
+ width="15"
615
+ xmlns="http://www.w3.org/2000/svg"
616
+ >
617
+ <path
618
+ d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
619
+ fill="currentColor"
620
+ />
621
+ </svg>
622
+ </span>
623
+ </div>
605
624
  </div>
606
625
  </div>
607
626
  </div>
@@ -619,54 +638,58 @@ exports[`handles data structure correctly 1`] = `
619
638
  type="standard"
620
639
  >
621
640
  <div
622
- className="c11"
641
+ className="c7 c8"
623
642
  >
624
643
  <div
625
- className="c12"
644
+ className="c13"
626
645
  >
627
- <p
628
- className="c13"
629
- >
630
- Load of text here
631
- </p>
632
- </div>
633
- <div
634
- className="c14"
635
- >
636
- <span
637
- className="c15 c16"
646
+ <div
647
+ className="c14"
638
648
  >
639
- View card
640
- <img
641
- alt=""
642
- aria-hidden="true"
643
- className="c17 c18"
644
- src="mock.asset"
645
- />
646
- </span>
649
+ <p
650
+ className="c15"
651
+ >
652
+ Load of text here
653
+ </p>
654
+ </div>
647
655
  <div
648
- className="c19"
656
+ className="c16"
649
657
  >
658
+ <span
659
+ className="c17 c18"
660
+ >
661
+ View card
662
+ <img
663
+ alt=""
664
+ aria-hidden="true"
665
+ className="c19 c20"
666
+ src="mock.asset"
667
+ />
668
+ </span>
650
669
  <div
651
- className="c20 c21"
670
+ className="c21"
652
671
  >
653
- <span
672
+ <div
654
673
  className="c22 c23"
655
674
  >
656
- <svg
657
- className="c24"
658
- fill="none"
659
- height="15"
660
- viewBox="0 0 15 15"
661
- width="15"
662
- xmlns="http://www.w3.org/2000/svg"
675
+ <span
676
+ className="c24 c25"
663
677
  >
664
- <path
665
- d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
666
- fill="currentColor"
667
- />
668
- </svg>
669
- </span>
678
+ <svg
679
+ className="c26"
680
+ fill="none"
681
+ height="15"
682
+ viewBox="0 0 15 15"
683
+ width="15"
684
+ xmlns="http://www.w3.org/2000/svg"
685
+ >
686
+ <path
687
+ d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
688
+ fill="currentColor"
689
+ />
690
+ </svg>
691
+ </span>
692
+ </div>
670
693
  </div>
671
694
  </div>
672
695
  </div>
@@ -680,7 +703,7 @@ exports[`handles data structure correctly 1`] = `
680
703
  `;
681
704
 
682
705
  exports[`renders 2 columns layout correctly 1`] = `
683
- .c13 {
706
+ .c15 {
684
707
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
685
708
  font-weight: 400;
686
709
  text-transform: inherit;
@@ -689,7 +712,7 @@ exports[`renders 2 columns layout correctly 1`] = `
689
712
  line-height: 1.25rem;
690
713
  }
691
714
 
692
- .c13 span {
715
+ .c15 span {
693
716
  font-size: inherit;
694
717
  line-height: inherit;
695
718
  }
@@ -707,30 +730,41 @@ exports[`renders 2 columns layout correctly 1`] = `
707
730
  text-decoration: none;
708
731
  }
709
732
 
710
- .c9 {
733
+ .c11 {
711
734
  display: block;
712
735
  width: 100%;
713
736
  height: 100%;
714
737
  position: relative;
715
738
  }
716
739
 
717
- .c10 {
740
+ .c12 {
718
741
  width: 100%;
719
742
  height: 100%;
720
743
  display: block;
721
744
  object-fit: cover;
722
745
  }
723
746
 
724
- .c23 {
747
+ .c20 {
748
+ height: 4px;
749
+ width: 100%;
750
+ position: absolute;
751
+ left: 0;
752
+ bottom: -5px;
753
+ transition: opacity 0.15s 0.1s;
754
+ opacity: 0;
755
+ pointer-events: none;
756
+ }
757
+
758
+ .c25 {
725
759
  display: inline-flex;
726
760
  align-items: center;
727
761
  justify-content: center;
728
- transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
762
+ transition: transform 0.35s cubic-bezier(0.65,-0.19,0.37,1.16);
729
763
  transform: scale(1);
730
764
  transform-origin: center;
731
765
  }
732
766
 
733
- .c21 {
767
+ .c23 {
734
768
  width: 32px;
735
769
  height: 32px;
736
770
  border-radius: 50%;
@@ -742,20 +776,20 @@ exports[`renders 2 columns layout correctly 1`] = `
742
776
  overflow: hidden;
743
777
  }
744
778
 
745
- .c19 {
779
+ .c21 {
746
780
  padding-left: 1rem;
747
781
  display: flex;
748
782
  align-items: center;
749
783
  justify-content: flex-end;
750
784
  }
751
785
 
752
- .c24 {
786
+ .c26 {
753
787
  display: inline-block;
754
788
  color: #FFFFFF;
755
789
  fill: currentColor;
756
790
  }
757
791
 
758
- .c8 {
792
+ .c10 {
759
793
  width: 100%;
760
794
  overflow: hidden;
761
795
  flex-shrink: 0;
@@ -763,14 +797,14 @@ exports[`renders 2 columns layout correctly 1`] = `
763
797
  border-radius: 1rem 1rem 0 0;
764
798
  }
765
799
 
766
- .c8 img {
800
+ .c10 img {
767
801
  width: 100%;
768
802
  height: auto;
769
803
  object-fit: cover;
770
804
  display: block;
771
805
  }
772
806
 
773
- .c16 {
807
+ .c18 {
774
808
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
775
809
  font-weight: 400;
776
810
  text-transform: inherit;
@@ -782,17 +816,17 @@ exports[`renders 2 columns layout correctly 1`] = `
782
816
  text-decoration: none;
783
817
  position: relative;
784
818
  display: inline-block;
819
+ transition: color 0.35s;
785
820
  }
786
821
 
787
- .c18 {
788
- height: 4px;
789
- width: 100%;
790
- position: absolute;
791
- left: 0;
792
- bottom: -5px;
793
- transition: opacity 0.15s 0.1s;
794
- opacity: 0;
795
- pointer-events: none;
822
+ .c8 {
823
+ display: inherit;
824
+ flex-direction: inherit;
825
+ flex: inherit;
826
+ border-radius: inherit;
827
+ overflow: hidden;
828
+ transition: box-shadow 0.35s;
829
+ box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
796
830
  }
797
831
 
798
832
  .c6 {
@@ -803,19 +837,22 @@ exports[`renders 2 columns layout correctly 1`] = `
803
837
  flex: 1 1 auto;
804
838
  background: transparent;
805
839
  border-radius: 1rem;
806
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
807
840
  text-decoration: none;
808
- overflow: hidden;
809
841
  cursor: pointer;
810
842
  box-sizing: border-box;
811
843
  }
812
844
 
813
- .c6 img {
845
+ .c6:hover .c7,
846
+ .c6:focus .c7 {
847
+ box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
848
+ }
849
+
850
+ .c6 .c9 img {
814
851
  transform: scale(1);
815
- transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
852
+ transition: transform 0.35s cubic-bezier(0.65,-0.19,0.37,1.16),box-shadow 0.35s;
816
853
  }
817
854
 
818
- .c26 {
855
+ .c27 {
819
856
  display: flex;
820
857
  position: relative;
821
858
  flex-direction: column;
@@ -823,9 +860,7 @@ exports[`renders 2 columns layout correctly 1`] = `
823
860
  flex: 1 1 auto;
824
861
  background: transparent;
825
862
  border-radius: 1rem;
826
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
827
863
  text-decoration: none;
828
- overflow: hidden;
829
864
  cursor: default;
830
865
  box-sizing: border-box;
831
866
  }
@@ -839,17 +874,7 @@ exports[`renders 2 columns layout correctly 1`] = `
839
874
  border-radius: 1rem;
840
875
  }
841
876
 
842
- .c25 {
843
- width: auto;
844
- flex-shrink: 0;
845
- display: flex;
846
- flex-direction: column;
847
- align-self: stretch;
848
- border-radius: 1rem;
849
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
850
- }
851
-
852
- .c11 {
877
+ .c13 {
853
878
  width: 100%;
854
879
  background: #FFFFFF;
855
880
  display: flex;
@@ -860,14 +885,14 @@ exports[`renders 2 columns layout correctly 1`] = `
860
885
  border-radius: 0 0 1rem 1rem;
861
886
  }
862
887
 
863
- .c12 {
888
+ .c14 {
864
889
  flex: 1;
865
890
  display: flex;
866
891
  flex-direction: column;
867
892
  min-height: 0;
868
893
  }
869
894
 
870
- .c14 {
895
+ .c16 {
871
896
  width: 100%;
872
897
  display: flex;
873
898
  flex-direction: row;
@@ -903,74 +928,103 @@ exports[`renders 2 columns layout correctly 1`] = `
903
928
  }
904
929
 
905
930
  @media (min-width: 740px) {
906
- .c13 {
931
+ .c15 {
907
932
  font-size: 1rem;
908
933
  line-height: 1.25rem;
909
934
  }
910
935
  }
911
936
 
912
937
  @media (min-width: 1024px) {
913
- .c13 {
938
+ .c15 {
914
939
  font-size: 1.125rem;
915
940
  line-height: 1.375rem;
916
941
  }
917
942
  }
918
943
 
919
- @media (min-width:1024px) {
920
- .c21 {
944
+ @media (min-width: 1024px) {
945
+ .c23 {
921
946
  background: #222222;
922
947
  }
923
948
  }
924
949
 
925
950
  @media (min-width: 740px) {
926
- .c16 {
951
+ .c18 {
927
952
  font-size: 1rem;
928
953
  line-height: 1.25rem;
929
954
  }
930
955
  }
931
956
 
932
957
  @media (min-width: 1024px) {
933
- .c16 {
958
+ .c18 {
934
959
  font-size: 1.125rem;
935
960
  line-height: 1.375rem;
936
961
  }
937
962
  }
938
963
 
939
964
  @media (min-width:1024px) {
940
- .c16 {
965
+ .c18 {
941
966
  color: #222222;
942
967
  }
943
968
  }
944
969
 
945
970
  @media (min-width: 740px) {
971
+ .c6:hover .c17,
972
+ .c6:focus .c17 {
973
+ color: #E52630;
974
+ }
975
+
976
+ .c6:hover .c19,
977
+ .c6:focus .c19 {
978
+ opacity: 1;
979
+ }
980
+
981
+ .c6:hover .c22 .c24,
982
+ .c6:focus .c22 .c24 {
983
+ transform: scale(1.2);
984
+ }
985
+ }
986
+
987
+ @media (min-width: 1024px) {
946
988
  .c6 {
947
- transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
948
- transform-origin: center;
989
+ overflow: visible;
990
+ }
991
+
992
+ .c6 >div {
949
993
  transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
994
+ transform-origin: center;
950
995
  }
951
996
 
952
- .c6:hover,
953
- .c6:focus {
997
+ .c6:hover >div,
998
+ .c6:focus >div {
954
999
  transform: translateY(-10px);
955
1000
  }
956
1001
 
957
- .c6:hover {
958
- box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
1002
+ .c6 >.c7 {
1003
+ transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35),box-shadow 0.35s;
959
1004
  }
960
1005
 
961
- .c6:hover .c7 img {
1006
+ .c6:hover .c9 img,
1007
+ .c6:focus .c9 img {
962
1008
  transform: scale(1.06);
963
1009
  }
964
1010
 
965
- .c6:hover .c15 {
966
- text-decoration: none;
1011
+ .c6:hover .c17,
1012
+ .c6:focus .c17 {
1013
+ color: #E52630;
967
1014
  }
968
1015
 
969
- .c6:hover .c17 {
1016
+ .c6:hover .c19,
1017
+ .c6:focus .c19 {
970
1018
  opacity: 1;
971
1019
  }
972
1020
 
973
- .c6:hover .c20 .c22 {
1021
+ .c6:hover .c22,
1022
+ .c6:focus .c22 {
1023
+ background: #E52630;
1024
+ }
1025
+
1026
+ .c6:hover .c22 .c24,
1027
+ .c6:focus .c22 .c24 {
974
1028
  transform: scale(1.2);
975
1029
  }
976
1030
  }
@@ -992,26 +1046,9 @@ exports[`renders 2 columns layout correctly 1`] = `
992
1046
  }
993
1047
  }
994
1048
 
995
- @media (max-width:1023px) {
996
- .c25 {
997
- scroll-snap-align: start;
998
- flex: 0 0 309px;
999
- width: 309px;
1000
- flex-shrink: 0;
1001
- }
1002
- }
1003
-
1004
- @media (min-width:1024px) {
1005
- .c25 {
1006
- flex: 0 1 auto;
1007
- width: 100%;
1008
- align-self: stretch;
1009
- }
1010
- }
1011
-
1012
- @media (min-width: 740px) {
1013
- .c1 {
1014
- padding-inline: 2rem;
1049
+ @media (min-width: 740px) {
1050
+ .c1 {
1051
+ padding-inline: 2rem;
1015
1052
  }
1016
1053
  }
1017
1054
 
@@ -1107,74 +1144,78 @@ exports[`renders 2 columns layout correctly 1`] = `
1107
1144
  className="c7 c8"
1108
1145
  >
1109
1146
  <div
1110
- className="c9 lazyload"
1111
- data-testid="PictureWrapper"
1112
- >
1113
- <img
1114
- alt=""
1115
- className="c10 lazyload"
1116
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
1117
- data-sizes="auto"
1118
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
1119
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
1120
- data-testid="Picture"
1121
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
1122
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
1123
- />
1124
- </div>
1125
- </div>
1126
- <div
1127
- className="c11"
1128
- >
1129
- <div
1130
- className="c12"
1147
+ className="c9 c10"
1131
1148
  >
1132
- <p
1133
- className="c13"
1149
+ <div
1150
+ className="c11 lazyload"
1151
+ data-testid="PictureWrapper"
1134
1152
  >
1135
- <strong>
1136
- Load
1137
- </strong>
1138
- of text here
1139
- </p>
1153
+ <img
1154
+ alt=""
1155
+ className="c12 lazyload"
1156
+ data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
1157
+ data-sizes="auto"
1158
+ data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
1159
+ data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
1160
+ data-testid="Picture"
1161
+ src="@component-library/src/styleguide/assets/challenge-1.jpg"
1162
+ srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
1163
+ />
1164
+ </div>
1140
1165
  </div>
1141
1166
  <div
1142
- className="c14"
1167
+ className="c13"
1143
1168
  >
1144
- <span
1145
- className="c15 c16"
1169
+ <div
1170
+ className="c14"
1146
1171
  >
1147
- test go
1148
- <img
1149
- alt=""
1150
- aria-hidden="true"
1151
- className="c17 c18"
1152
- src="mock.asset"
1153
- />
1154
- </span>
1172
+ <p
1173
+ className="c15"
1174
+ >
1175
+ <strong>
1176
+ Load
1177
+ </strong>
1178
+ of text here
1179
+ </p>
1180
+ </div>
1155
1181
  <div
1156
- className="c19"
1182
+ className="c16"
1157
1183
  >
1184
+ <span
1185
+ className="c17 c18"
1186
+ >
1187
+ test go
1188
+ <img
1189
+ alt=""
1190
+ aria-hidden="true"
1191
+ className="c19 c20"
1192
+ src="mock.asset"
1193
+ />
1194
+ </span>
1158
1195
  <div
1159
- className="c20 c21"
1196
+ className="c21"
1160
1197
  >
1161
- <span
1198
+ <div
1162
1199
  className="c22 c23"
1163
1200
  >
1164
- <svg
1165
- className="c24"
1166
- fill="none"
1167
- height="15"
1168
- viewBox="0 0 15 15"
1169
- width="15"
1170
- xmlns="http://www.w3.org/2000/svg"
1201
+ <span
1202
+ className="c24 c25"
1171
1203
  >
1172
- <path
1173
- d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
1174
- fill="currentColor"
1175
- />
1176
- </svg>
1177
- </span>
1204
+ <svg
1205
+ className="c26"
1206
+ fill="none"
1207
+ height="15"
1208
+ viewBox="0 0 15 15"
1209
+ width="15"
1210
+ xmlns="http://www.w3.org/2000/svg"
1211
+ >
1212
+ <path
1213
+ d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
1214
+ fill="currentColor"
1215
+ />
1216
+ </svg>
1217
+ </span>
1218
+ </div>
1178
1219
  </div>
1179
1220
  </div>
1180
1221
  </div>
@@ -1182,45 +1223,49 @@ exports[`renders 2 columns layout correctly 1`] = `
1182
1223
  </a>
1183
1224
  </div>
1184
1225
  <div
1185
- className="c25"
1226
+ className="c4"
1186
1227
  >
1187
1228
  <div
1188
- className="c26"
1229
+ className="c27"
1189
1230
  >
1190
1231
  <div
1191
1232
  className="c7 c8"
1192
1233
  >
1193
1234
  <div
1194
- className="c9 lazyload"
1195
- data-testid="PictureWrapper"
1235
+ className="c9 c10"
1196
1236
  >
1197
- <img
1198
- alt=""
1199
- className="c10 lazyload"
1200
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
1201
- data-sizes="auto"
1202
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
1203
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
1204
- data-testid="Picture"
1205
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
1206
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
1207
- />
1237
+ <div
1238
+ className="c11 lazyload"
1239
+ data-testid="PictureWrapper"
1240
+ >
1241
+ <img
1242
+ alt=""
1243
+ className="c12 lazyload"
1244
+ data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
1245
+ data-sizes="auto"
1246
+ data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
1247
+ data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
1248
+ data-testid="Picture"
1249
+ src="@component-library/src/styleguide/assets/challenge-1.jpg"
1250
+ srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
1251
+ />
1252
+ </div>
1208
1253
  </div>
1209
- </div>
1210
- <div
1211
- className="c11"
1212
- >
1213
1254
  <div
1214
- className="c12"
1255
+ className="c13"
1215
1256
  >
1216
- <p
1217
- className="c13"
1257
+ <div
1258
+ className="c14"
1218
1259
  >
1219
- <strong>
1220
- Load
1221
- </strong>
1222
- of text here
1223
- </p>
1260
+ <p
1261
+ className="c15"
1262
+ >
1263
+ <strong>
1264
+ Load
1265
+ </strong>
1266
+ of text here
1267
+ </p>
1268
+ </div>
1224
1269
  </div>
1225
1270
  </div>
1226
1271
  </div>
@@ -1239,74 +1284,78 @@ exports[`renders 2 columns layout correctly 1`] = `
1239
1284
  className="c7 c8"
1240
1285
  >
1241
1286
  <div
1242
- className="c9 lazyload"
1243
- data-testid="PictureWrapper"
1244
- >
1245
- <img
1246
- alt=""
1247
- className="c10 lazyload"
1248
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
1249
- data-sizes="auto"
1250
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
1251
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
1252
- data-testid="Picture"
1253
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
1254
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
1255
- />
1256
- </div>
1257
- </div>
1258
- <div
1259
- className="c11"
1260
- >
1261
- <div
1262
- className="c12"
1287
+ className="c9 c10"
1263
1288
  >
1264
- <p
1265
- className="c13"
1289
+ <div
1290
+ className="c11 lazyload"
1291
+ data-testid="PictureWrapper"
1266
1292
  >
1267
- <strong>
1268
- Load
1269
- </strong>
1270
- of text here
1271
- </p>
1293
+ <img
1294
+ alt=""
1295
+ className="c12 lazyload"
1296
+ data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
1297
+ data-sizes="auto"
1298
+ data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
1299
+ data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
1300
+ data-testid="Picture"
1301
+ src="@component-library/src/styleguide/assets/challenge-1.jpg"
1302
+ srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
1303
+ />
1304
+ </div>
1272
1305
  </div>
1273
1306
  <div
1274
- className="c14"
1307
+ className="c13"
1275
1308
  >
1276
- <span
1277
- className="c15 c16"
1309
+ <div
1310
+ className="c14"
1278
1311
  >
1279
- test go
1280
- <img
1281
- alt=""
1282
- aria-hidden="true"
1283
- className="c17 c18"
1284
- src="mock.asset"
1285
- />
1286
- </span>
1312
+ <p
1313
+ className="c15"
1314
+ >
1315
+ <strong>
1316
+ Load
1317
+ </strong>
1318
+ of text here
1319
+ </p>
1320
+ </div>
1287
1321
  <div
1288
- className="c19"
1322
+ className="c16"
1289
1323
  >
1324
+ <span
1325
+ className="c17 c18"
1326
+ >
1327
+ test go
1328
+ <img
1329
+ alt=""
1330
+ aria-hidden="true"
1331
+ className="c19 c20"
1332
+ src="mock.asset"
1333
+ />
1334
+ </span>
1290
1335
  <div
1291
- className="c20 c21"
1336
+ className="c21"
1292
1337
  >
1293
- <span
1338
+ <div
1294
1339
  className="c22 c23"
1295
1340
  >
1296
- <svg
1297
- className="c24"
1298
- fill="none"
1299
- height="15"
1300
- viewBox="0 0 15 15"
1301
- width="15"
1302
- xmlns="http://www.w3.org/2000/svg"
1341
+ <span
1342
+ className="c24 c25"
1303
1343
  >
1304
- <path
1305
- d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
1306
- fill="currentColor"
1307
- />
1308
- </svg>
1309
- </span>
1344
+ <svg
1345
+ className="c26"
1346
+ fill="none"
1347
+ height="15"
1348
+ viewBox="0 0 15 15"
1349
+ width="15"
1350
+ xmlns="http://www.w3.org/2000/svg"
1351
+ >
1352
+ <path
1353
+ d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
1354
+ fill="currentColor"
1355
+ />
1356
+ </svg>
1357
+ </span>
1358
+ </div>
1310
1359
  </div>
1311
1360
  </div>
1312
1361
  </div>
@@ -1324,54 +1373,58 @@ exports[`renders 2 columns layout correctly 1`] = `
1324
1373
  type="standard"
1325
1374
  >
1326
1375
  <div
1327
- className="c11"
1376
+ className="c7 c8"
1328
1377
  >
1329
1378
  <div
1330
- className="c12"
1379
+ className="c13"
1331
1380
  >
1332
- <p
1333
- className="c13"
1334
- >
1335
- Load of text here
1336
- </p>
1337
- </div>
1338
- <div
1339
- className="c14"
1340
- >
1341
- <span
1342
- className="c15 c16"
1381
+ <div
1382
+ className="c14"
1343
1383
  >
1344
- View card
1345
- <img
1346
- alt=""
1347
- aria-hidden="true"
1348
- className="c17 c18"
1349
- src="mock.asset"
1350
- />
1351
- </span>
1384
+ <p
1385
+ className="c15"
1386
+ >
1387
+ Load of text here
1388
+ </p>
1389
+ </div>
1352
1390
  <div
1353
- className="c19"
1391
+ className="c16"
1354
1392
  >
1393
+ <span
1394
+ className="c17 c18"
1395
+ >
1396
+ View card
1397
+ <img
1398
+ alt=""
1399
+ aria-hidden="true"
1400
+ className="c19 c20"
1401
+ src="mock.asset"
1402
+ />
1403
+ </span>
1355
1404
  <div
1356
- className="c20 c21"
1405
+ className="c21"
1357
1406
  >
1358
- <span
1407
+ <div
1359
1408
  className="c22 c23"
1360
1409
  >
1361
- <svg
1362
- className="c24"
1363
- fill="none"
1364
- height="15"
1365
- viewBox="0 0 15 15"
1366
- width="15"
1367
- xmlns="http://www.w3.org/2000/svg"
1410
+ <span
1411
+ className="c24 c25"
1368
1412
  >
1369
- <path
1370
- d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
1371
- fill="currentColor"
1372
- />
1373
- </svg>
1374
- </span>
1413
+ <svg
1414
+ className="c26"
1415
+ fill="none"
1416
+ height="15"
1417
+ viewBox="0 0 15 15"
1418
+ width="15"
1419
+ xmlns="http://www.w3.org/2000/svg"
1420
+ >
1421
+ <path
1422
+ d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
1423
+ fill="currentColor"
1424
+ />
1425
+ </svg>
1426
+ </span>
1427
+ </div>
1375
1428
  </div>
1376
1429
  </div>
1377
1430
  </div>
@@ -1385,7 +1438,7 @@ exports[`renders 2 columns layout correctly 1`] = `
1385
1438
  `;
1386
1439
 
1387
1440
  exports[`renders carousel mode correctly 1`] = `
1388
- .c13 {
1441
+ .c15 {
1389
1442
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
1390
1443
  font-weight: 400;
1391
1444
  text-transform: inherit;
@@ -1394,7 +1447,7 @@ exports[`renders carousel mode correctly 1`] = `
1394
1447
  line-height: 1.25rem;
1395
1448
  }
1396
1449
 
1397
- .c13 span {
1450
+ .c15 span {
1398
1451
  font-size: inherit;
1399
1452
  line-height: inherit;
1400
1453
  }
@@ -1412,30 +1465,41 @@ exports[`renders carousel mode correctly 1`] = `
1412
1465
  text-decoration: none;
1413
1466
  }
1414
1467
 
1415
- .c9 {
1468
+ .c11 {
1416
1469
  display: block;
1417
1470
  width: 100%;
1418
1471
  height: 100%;
1419
1472
  position: relative;
1420
1473
  }
1421
1474
 
1422
- .c10 {
1475
+ .c12 {
1423
1476
  width: 100%;
1424
1477
  height: 100%;
1425
1478
  display: block;
1426
1479
  object-fit: cover;
1427
1480
  }
1428
1481
 
1429
- .c23 {
1482
+ .c20 {
1483
+ height: 4px;
1484
+ width: 100%;
1485
+ position: absolute;
1486
+ left: 0;
1487
+ bottom: -5px;
1488
+ transition: opacity 0.15s 0.1s;
1489
+ opacity: 0;
1490
+ pointer-events: none;
1491
+ }
1492
+
1493
+ .c25 {
1430
1494
  display: inline-flex;
1431
1495
  align-items: center;
1432
1496
  justify-content: center;
1433
- transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
1497
+ transition: transform 0.35s cubic-bezier(0.65,-0.19,0.37,1.16);
1434
1498
  transform: scale(1);
1435
1499
  transform-origin: center;
1436
1500
  }
1437
1501
 
1438
- .c21 {
1502
+ .c23 {
1439
1503
  width: 32px;
1440
1504
  height: 32px;
1441
1505
  border-radius: 50%;
@@ -1447,20 +1511,20 @@ exports[`renders carousel mode correctly 1`] = `
1447
1511
  overflow: hidden;
1448
1512
  }
1449
1513
 
1450
- .c19 {
1514
+ .c21 {
1451
1515
  padding-left: 1rem;
1452
1516
  display: flex;
1453
1517
  align-items: center;
1454
1518
  justify-content: flex-end;
1455
1519
  }
1456
1520
 
1457
- .c24 {
1521
+ .c26 {
1458
1522
  display: inline-block;
1459
1523
  color: #FFFFFF;
1460
1524
  fill: currentColor;
1461
1525
  }
1462
1526
 
1463
- .c8 {
1527
+ .c10 {
1464
1528
  width: 100%;
1465
1529
  overflow: hidden;
1466
1530
  flex-shrink: 0;
@@ -1468,14 +1532,14 @@ exports[`renders carousel mode correctly 1`] = `
1468
1532
  border-radius: 1rem 1rem 0 0;
1469
1533
  }
1470
1534
 
1471
- .c8 img {
1535
+ .c10 img {
1472
1536
  width: 100%;
1473
1537
  height: auto;
1474
1538
  object-fit: cover;
1475
1539
  display: block;
1476
1540
  }
1477
1541
 
1478
- .c16 {
1542
+ .c18 {
1479
1543
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
1480
1544
  font-weight: 400;
1481
1545
  text-transform: inherit;
@@ -1487,17 +1551,17 @@ exports[`renders carousel mode correctly 1`] = `
1487
1551
  text-decoration: none;
1488
1552
  position: relative;
1489
1553
  display: inline-block;
1554
+ transition: color 0.35s;
1490
1555
  }
1491
1556
 
1492
- .c18 {
1493
- height: 4px;
1494
- width: 100%;
1495
- position: absolute;
1496
- left: 0;
1497
- bottom: -5px;
1498
- transition: opacity 0.15s 0.1s;
1499
- opacity: 0;
1500
- pointer-events: none;
1557
+ .c8 {
1558
+ display: inherit;
1559
+ flex-direction: inherit;
1560
+ flex: inherit;
1561
+ border-radius: inherit;
1562
+ overflow: hidden;
1563
+ transition: box-shadow 0.35s;
1564
+ box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
1501
1565
  }
1502
1566
 
1503
1567
  .c6 {
@@ -1508,19 +1572,22 @@ exports[`renders carousel mode correctly 1`] = `
1508
1572
  flex: 1 1 auto;
1509
1573
  background: transparent;
1510
1574
  border-radius: 1rem;
1511
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
1512
1575
  text-decoration: none;
1513
- overflow: hidden;
1514
1576
  cursor: pointer;
1515
1577
  box-sizing: border-box;
1516
1578
  }
1517
1579
 
1518
- .c6 img {
1580
+ .c6:hover .c7,
1581
+ .c6:focus .c7 {
1582
+ box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
1583
+ }
1584
+
1585
+ .c6 .c9 img {
1519
1586
  transform: scale(1);
1520
- transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
1587
+ transition: transform 0.35s cubic-bezier(0.65,-0.19,0.37,1.16),box-shadow 0.35s;
1521
1588
  }
1522
1589
 
1523
- .c26 {
1590
+ .c27 {
1524
1591
  display: flex;
1525
1592
  position: relative;
1526
1593
  flex-direction: column;
@@ -1528,9 +1595,7 @@ exports[`renders carousel mode correctly 1`] = `
1528
1595
  flex: 1 1 auto;
1529
1596
  background: transparent;
1530
1597
  border-radius: 1rem;
1531
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
1532
1598
  text-decoration: none;
1533
- overflow: hidden;
1534
1599
  cursor: default;
1535
1600
  box-sizing: border-box;
1536
1601
  }
@@ -1544,17 +1609,7 @@ exports[`renders carousel mode correctly 1`] = `
1544
1609
  border-radius: 1rem;
1545
1610
  }
1546
1611
 
1547
- .c25 {
1548
- width: auto;
1549
- flex-shrink: 0;
1550
- display: flex;
1551
- flex-direction: column;
1552
- align-self: stretch;
1553
- border-radius: 1rem;
1554
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
1555
- }
1556
-
1557
- .c11 {
1612
+ .c13 {
1558
1613
  width: 100%;
1559
1614
  background: #FFFFFF;
1560
1615
  display: flex;
@@ -1565,14 +1620,14 @@ exports[`renders carousel mode correctly 1`] = `
1565
1620
  border-radius: 0 0 1rem 1rem;
1566
1621
  }
1567
1622
 
1568
- .c12 {
1623
+ .c14 {
1569
1624
  flex: 1;
1570
1625
  display: flex;
1571
1626
  flex-direction: column;
1572
1627
  min-height: 0;
1573
1628
  }
1574
1629
 
1575
- .c14 {
1630
+ .c16 {
1576
1631
  width: 100%;
1577
1632
  display: flex;
1578
1633
  flex-direction: row;
@@ -1608,74 +1663,103 @@ exports[`renders carousel mode correctly 1`] = `
1608
1663
  }
1609
1664
 
1610
1665
  @media (min-width: 740px) {
1611
- .c13 {
1666
+ .c15 {
1612
1667
  font-size: 1rem;
1613
1668
  line-height: 1.25rem;
1614
1669
  }
1615
1670
  }
1616
1671
 
1617
1672
  @media (min-width: 1024px) {
1618
- .c13 {
1673
+ .c15 {
1619
1674
  font-size: 1.125rem;
1620
1675
  line-height: 1.375rem;
1621
1676
  }
1622
1677
  }
1623
1678
 
1624
- @media (min-width:1024px) {
1625
- .c21 {
1679
+ @media (min-width: 1024px) {
1680
+ .c23 {
1626
1681
  background: #222222;
1627
1682
  }
1628
1683
  }
1629
1684
 
1630
1685
  @media (min-width: 740px) {
1631
- .c16 {
1686
+ .c18 {
1632
1687
  font-size: 1rem;
1633
1688
  line-height: 1.25rem;
1634
1689
  }
1635
1690
  }
1636
1691
 
1637
1692
  @media (min-width: 1024px) {
1638
- .c16 {
1693
+ .c18 {
1639
1694
  font-size: 1.125rem;
1640
1695
  line-height: 1.375rem;
1641
1696
  }
1642
1697
  }
1643
1698
 
1644
1699
  @media (min-width:1024px) {
1645
- .c16 {
1700
+ .c18 {
1646
1701
  color: #222222;
1647
1702
  }
1648
1703
  }
1649
1704
 
1650
1705
  @media (min-width: 740px) {
1706
+ .c6:hover .c17,
1707
+ .c6:focus .c17 {
1708
+ color: #E52630;
1709
+ }
1710
+
1711
+ .c6:hover .c19,
1712
+ .c6:focus .c19 {
1713
+ opacity: 1;
1714
+ }
1715
+
1716
+ .c6:hover .c22 .c24,
1717
+ .c6:focus .c22 .c24 {
1718
+ transform: scale(1.2);
1719
+ }
1720
+ }
1721
+
1722
+ @media (min-width: 1024px) {
1651
1723
  .c6 {
1652
- transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
1653
- transform-origin: center;
1724
+ overflow: visible;
1725
+ }
1726
+
1727
+ .c6 >div {
1654
1728
  transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
1729
+ transform-origin: center;
1655
1730
  }
1656
1731
 
1657
- .c6:hover,
1658
- .c6:focus {
1732
+ .c6:hover >div,
1733
+ .c6:focus >div {
1659
1734
  transform: translateY(-10px);
1660
1735
  }
1661
1736
 
1662
- .c6:hover {
1663
- box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
1737
+ .c6 >.c7 {
1738
+ transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35),box-shadow 0.35s;
1664
1739
  }
1665
1740
 
1666
- .c6:hover .c7 img {
1741
+ .c6:hover .c9 img,
1742
+ .c6:focus .c9 img {
1667
1743
  transform: scale(1.06);
1668
1744
  }
1669
1745
 
1670
- .c6:hover .c15 {
1671
- text-decoration: none;
1746
+ .c6:hover .c17,
1747
+ .c6:focus .c17 {
1748
+ color: #E52630;
1672
1749
  }
1673
1750
 
1674
- .c6:hover .c17 {
1751
+ .c6:hover .c19,
1752
+ .c6:focus .c19 {
1675
1753
  opacity: 1;
1676
1754
  }
1677
1755
 
1678
- .c6:hover .c20 .c22 {
1756
+ .c6:hover .c22,
1757
+ .c6:focus .c22 {
1758
+ background: #E52630;
1759
+ }
1760
+
1761
+ .c6:hover .c22 .c24,
1762
+ .c6:focus .c22 .c24 {
1679
1763
  transform: scale(1.2);
1680
1764
  }
1681
1765
  }
@@ -1697,23 +1781,6 @@ exports[`renders carousel mode correctly 1`] = `
1697
1781
  }
1698
1782
  }
1699
1783
 
1700
- @media (max-width:1023px) {
1701
- .c25 {
1702
- scroll-snap-align: start;
1703
- flex: 0 0 309px;
1704
- width: 309px;
1705
- flex-shrink: 0;
1706
- }
1707
- }
1708
-
1709
- @media (min-width:1024px) {
1710
- .c25 {
1711
- flex: 0 1 auto;
1712
- width: clamp(261px,calc((100% - 4rem) / 3),363px);
1713
- align-self: stretch;
1714
- }
1715
- }
1716
-
1717
1784
  @media (min-width: 740px) {
1718
1785
  .c1 {
1719
1786
  padding-inline: 2rem;
@@ -1792,74 +1859,78 @@ exports[`renders carousel mode correctly 1`] = `
1792
1859
  className="c7 c8"
1793
1860
  >
1794
1861
  <div
1795
- className="c9 lazyload"
1796
- data-testid="PictureWrapper"
1797
- >
1798
- <img
1799
- alt=""
1800
- className="c10 lazyload"
1801
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
1802
- data-sizes="auto"
1803
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
1804
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
1805
- data-testid="Picture"
1806
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
1807
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
1808
- />
1809
- </div>
1810
- </div>
1811
- <div
1812
- className="c11"
1813
- >
1814
- <div
1815
- className="c12"
1862
+ className="c9 c10"
1816
1863
  >
1817
- <p
1818
- className="c13"
1864
+ <div
1865
+ className="c11 lazyload"
1866
+ data-testid="PictureWrapper"
1819
1867
  >
1820
- <strong>
1821
- Load
1822
- </strong>
1823
- of text here
1824
- </p>
1868
+ <img
1869
+ alt=""
1870
+ className="c12 lazyload"
1871
+ data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
1872
+ data-sizes="auto"
1873
+ data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
1874
+ data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
1875
+ data-testid="Picture"
1876
+ src="@component-library/src/styleguide/assets/challenge-1.jpg"
1877
+ srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
1878
+ />
1879
+ </div>
1825
1880
  </div>
1826
1881
  <div
1827
- className="c14"
1882
+ className="c13"
1828
1883
  >
1829
- <span
1830
- className="c15 c16"
1884
+ <div
1885
+ className="c14"
1831
1886
  >
1832
- test go
1833
- <img
1834
- alt=""
1835
- aria-hidden="true"
1836
- className="c17 c18"
1837
- src="mock.asset"
1838
- />
1839
- </span>
1887
+ <p
1888
+ className="c15"
1889
+ >
1890
+ <strong>
1891
+ Load
1892
+ </strong>
1893
+ of text here
1894
+ </p>
1895
+ </div>
1840
1896
  <div
1841
- className="c19"
1897
+ className="c16"
1842
1898
  >
1899
+ <span
1900
+ className="c17 c18"
1901
+ >
1902
+ test go
1903
+ <img
1904
+ alt=""
1905
+ aria-hidden="true"
1906
+ className="c19 c20"
1907
+ src="mock.asset"
1908
+ />
1909
+ </span>
1843
1910
  <div
1844
- className="c20 c21"
1911
+ className="c21"
1845
1912
  >
1846
- <span
1913
+ <div
1847
1914
  className="c22 c23"
1848
1915
  >
1849
- <svg
1850
- className="c24"
1851
- fill="none"
1852
- height="15"
1853
- viewBox="0 0 15 15"
1854
- width="15"
1855
- xmlns="http://www.w3.org/2000/svg"
1916
+ <span
1917
+ className="c24 c25"
1856
1918
  >
1857
- <path
1858
- d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
1859
- fill="currentColor"
1860
- />
1861
- </svg>
1862
- </span>
1919
+ <svg
1920
+ className="c26"
1921
+ fill="none"
1922
+ height="15"
1923
+ viewBox="0 0 15 15"
1924
+ width="15"
1925
+ xmlns="http://www.w3.org/2000/svg"
1926
+ >
1927
+ <path
1928
+ d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
1929
+ fill="currentColor"
1930
+ />
1931
+ </svg>
1932
+ </span>
1933
+ </div>
1863
1934
  </div>
1864
1935
  </div>
1865
1936
  </div>
@@ -1867,45 +1938,49 @@ exports[`renders carousel mode correctly 1`] = `
1867
1938
  </a>
1868
1939
  </div>
1869
1940
  <div
1870
- className="c25"
1941
+ className="c4"
1871
1942
  >
1872
1943
  <div
1873
- className="c26"
1944
+ className="c27"
1874
1945
  >
1875
1946
  <div
1876
1947
  className="c7 c8"
1877
1948
  >
1878
1949
  <div
1879
- className="c9 lazyload"
1880
- data-testid="PictureWrapper"
1950
+ className="c9 c10"
1881
1951
  >
1882
- <img
1883
- alt=""
1884
- className="c10 lazyload"
1885
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
1886
- data-sizes="auto"
1887
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
1888
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
1889
- data-testid="Picture"
1890
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
1891
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
1892
- />
1952
+ <div
1953
+ className="c11 lazyload"
1954
+ data-testid="PictureWrapper"
1955
+ >
1956
+ <img
1957
+ alt=""
1958
+ className="c12 lazyload"
1959
+ data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
1960
+ data-sizes="auto"
1961
+ data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
1962
+ data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
1963
+ data-testid="Picture"
1964
+ src="@component-library/src/styleguide/assets/challenge-1.jpg"
1965
+ srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
1966
+ />
1967
+ </div>
1893
1968
  </div>
1894
- </div>
1895
- <div
1896
- className="c11"
1897
- >
1898
1969
  <div
1899
- className="c12"
1970
+ className="c13"
1900
1971
  >
1901
- <p
1902
- className="c13"
1972
+ <div
1973
+ className="c14"
1903
1974
  >
1904
- <strong>
1905
- Load
1906
- </strong>
1907
- of text here
1908
- </p>
1975
+ <p
1976
+ className="c15"
1977
+ >
1978
+ <strong>
1979
+ Load
1980
+ </strong>
1981
+ of text here
1982
+ </p>
1983
+ </div>
1909
1984
  </div>
1910
1985
  </div>
1911
1986
  </div>
@@ -1924,74 +1999,78 @@ exports[`renders carousel mode correctly 1`] = `
1924
1999
  className="c7 c8"
1925
2000
  >
1926
2001
  <div
1927
- className="c9 lazyload"
1928
- data-testid="PictureWrapper"
2002
+ className="c9 c10"
1929
2003
  >
1930
- <img
1931
- alt=""
1932
- className="c10 lazyload"
1933
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
1934
- data-sizes="auto"
1935
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
1936
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
1937
- data-testid="Picture"
1938
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
1939
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
1940
- />
1941
- </div>
1942
- </div>
1943
- <div
1944
- className="c11"
1945
- >
1946
- <div
1947
- className="c12"
1948
- >
1949
- <p
1950
- className="c13"
2004
+ <div
2005
+ className="c11 lazyload"
2006
+ data-testid="PictureWrapper"
1951
2007
  >
1952
- <strong>
1953
- Load
1954
- </strong>
1955
- of text here
1956
- </p>
2008
+ <img
2009
+ alt=""
2010
+ className="c12 lazyload"
2011
+ data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
2012
+ data-sizes="auto"
2013
+ data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
2014
+ data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
2015
+ data-testid="Picture"
2016
+ src="@component-library/src/styleguide/assets/challenge-1.jpg"
2017
+ srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
2018
+ />
2019
+ </div>
1957
2020
  </div>
1958
2021
  <div
1959
- className="c14"
2022
+ className="c13"
1960
2023
  >
1961
- <span
1962
- className="c15 c16"
2024
+ <div
2025
+ className="c14"
1963
2026
  >
1964
- test go
1965
- <img
1966
- alt=""
1967
- aria-hidden="true"
1968
- className="c17 c18"
1969
- src="mock.asset"
1970
- />
1971
- </span>
2027
+ <p
2028
+ className="c15"
2029
+ >
2030
+ <strong>
2031
+ Load
2032
+ </strong>
2033
+ of text here
2034
+ </p>
2035
+ </div>
1972
2036
  <div
1973
- className="c19"
2037
+ className="c16"
1974
2038
  >
2039
+ <span
2040
+ className="c17 c18"
2041
+ >
2042
+ test go
2043
+ <img
2044
+ alt=""
2045
+ aria-hidden="true"
2046
+ className="c19 c20"
2047
+ src="mock.asset"
2048
+ />
2049
+ </span>
1975
2050
  <div
1976
- className="c20 c21"
2051
+ className="c21"
1977
2052
  >
1978
- <span
2053
+ <div
1979
2054
  className="c22 c23"
1980
2055
  >
1981
- <svg
1982
- className="c24"
1983
- fill="none"
1984
- height="15"
1985
- viewBox="0 0 15 15"
1986
- width="15"
1987
- xmlns="http://www.w3.org/2000/svg"
2056
+ <span
2057
+ className="c24 c25"
1988
2058
  >
1989
- <path
1990
- d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
1991
- fill="currentColor"
1992
- />
1993
- </svg>
1994
- </span>
2059
+ <svg
2060
+ className="c26"
2061
+ fill="none"
2062
+ height="15"
2063
+ viewBox="0 0 15 15"
2064
+ width="15"
2065
+ xmlns="http://www.w3.org/2000/svg"
2066
+ >
2067
+ <path
2068
+ d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
2069
+ fill="currentColor"
2070
+ />
2071
+ </svg>
2072
+ </span>
2073
+ </div>
1995
2074
  </div>
1996
2075
  </div>
1997
2076
  </div>
@@ -2009,54 +2088,58 @@ exports[`renders carousel mode correctly 1`] = `
2009
2088
  type="standard"
2010
2089
  >
2011
2090
  <div
2012
- className="c11"
2091
+ className="c7 c8"
2013
2092
  >
2014
2093
  <div
2015
- className="c12"
2094
+ className="c13"
2016
2095
  >
2017
- <p
2018
- className="c13"
2019
- >
2020
- Load of text here
2021
- </p>
2022
- </div>
2023
- <div
2024
- className="c14"
2025
- >
2026
- <span
2027
- className="c15 c16"
2096
+ <div
2097
+ className="c14"
2028
2098
  >
2029
- View card
2030
- <img
2031
- alt=""
2032
- aria-hidden="true"
2033
- className="c17 c18"
2034
- src="mock.asset"
2035
- />
2036
- </span>
2099
+ <p
2100
+ className="c15"
2101
+ >
2102
+ Load of text here
2103
+ </p>
2104
+ </div>
2037
2105
  <div
2038
- className="c19"
2106
+ className="c16"
2039
2107
  >
2108
+ <span
2109
+ className="c17 c18"
2110
+ >
2111
+ View card
2112
+ <img
2113
+ alt=""
2114
+ aria-hidden="true"
2115
+ className="c19 c20"
2116
+ src="mock.asset"
2117
+ />
2118
+ </span>
2040
2119
  <div
2041
- className="c20 c21"
2120
+ className="c21"
2042
2121
  >
2043
- <span
2122
+ <div
2044
2123
  className="c22 c23"
2045
2124
  >
2046
- <svg
2047
- className="c24"
2048
- fill="none"
2049
- height="15"
2050
- viewBox="0 0 15 15"
2051
- width="15"
2052
- xmlns="http://www.w3.org/2000/svg"
2125
+ <span
2126
+ className="c24 c25"
2053
2127
  >
2054
- <path
2055
- d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
2056
- fill="currentColor"
2057
- />
2058
- </svg>
2059
- </span>
2128
+ <svg
2129
+ className="c26"
2130
+ fill="none"
2131
+ height="15"
2132
+ viewBox="0 0 15 15"
2133
+ width="15"
2134
+ xmlns="http://www.w3.org/2000/svg"
2135
+ >
2136
+ <path
2137
+ d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
2138
+ fill="currentColor"
2139
+ />
2140
+ </svg>
2141
+ </span>
2142
+ </div>
2060
2143
  </div>
2061
2144
  </div>
2062
2145
  </div>
@@ -2070,7 +2153,7 @@ exports[`renders carousel mode correctly 1`] = `
2070
2153
  `;
2071
2154
 
2072
2155
  exports[`renders correctly with data prop 1`] = `
2073
- .c13 {
2156
+ .c15 {
2074
2157
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
2075
2158
  font-weight: 400;
2076
2159
  text-transform: inherit;
@@ -2079,7 +2162,7 @@ exports[`renders correctly with data prop 1`] = `
2079
2162
  line-height: 1.25rem;
2080
2163
  }
2081
2164
 
2082
- .c13 span {
2165
+ .c15 span {
2083
2166
  font-size: inherit;
2084
2167
  line-height: inherit;
2085
2168
  }
@@ -2097,30 +2180,41 @@ exports[`renders correctly with data prop 1`] = `
2097
2180
  text-decoration: none;
2098
2181
  }
2099
2182
 
2100
- .c9 {
2183
+ .c11 {
2101
2184
  display: block;
2102
2185
  width: 100%;
2103
2186
  height: 100%;
2104
2187
  position: relative;
2105
2188
  }
2106
2189
 
2107
- .c10 {
2190
+ .c12 {
2108
2191
  width: 100%;
2109
2192
  height: 100%;
2110
2193
  display: block;
2111
2194
  object-fit: cover;
2112
2195
  }
2113
2196
 
2114
- .c23 {
2197
+ .c20 {
2198
+ height: 4px;
2199
+ width: 100%;
2200
+ position: absolute;
2201
+ left: 0;
2202
+ bottom: -5px;
2203
+ transition: opacity 0.15s 0.1s;
2204
+ opacity: 0;
2205
+ pointer-events: none;
2206
+ }
2207
+
2208
+ .c25 {
2115
2209
  display: inline-flex;
2116
2210
  align-items: center;
2117
2211
  justify-content: center;
2118
- transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
2212
+ transition: transform 0.35s cubic-bezier(0.65,-0.19,0.37,1.16);
2119
2213
  transform: scale(1);
2120
2214
  transform-origin: center;
2121
2215
  }
2122
2216
 
2123
- .c21 {
2217
+ .c23 {
2124
2218
  width: 32px;
2125
2219
  height: 32px;
2126
2220
  border-radius: 50%;
@@ -2132,20 +2226,20 @@ exports[`renders correctly with data prop 1`] = `
2132
2226
  overflow: hidden;
2133
2227
  }
2134
2228
 
2135
- .c19 {
2229
+ .c21 {
2136
2230
  padding-left: 1rem;
2137
2231
  display: flex;
2138
2232
  align-items: center;
2139
2233
  justify-content: flex-end;
2140
2234
  }
2141
2235
 
2142
- .c24 {
2236
+ .c26 {
2143
2237
  display: inline-block;
2144
2238
  color: #FFFFFF;
2145
2239
  fill: currentColor;
2146
2240
  }
2147
2241
 
2148
- .c8 {
2242
+ .c10 {
2149
2243
  width: 100%;
2150
2244
  overflow: hidden;
2151
2245
  flex-shrink: 0;
@@ -2153,14 +2247,14 @@ exports[`renders correctly with data prop 1`] = `
2153
2247
  border-radius: 1rem 1rem 0 0;
2154
2248
  }
2155
2249
 
2156
- .c8 img {
2250
+ .c10 img {
2157
2251
  width: 100%;
2158
2252
  height: auto;
2159
2253
  object-fit: cover;
2160
2254
  display: block;
2161
2255
  }
2162
2256
 
2163
- .c16 {
2257
+ .c18 {
2164
2258
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
2165
2259
  font-weight: 400;
2166
2260
  text-transform: inherit;
@@ -2172,17 +2266,17 @@ exports[`renders correctly with data prop 1`] = `
2172
2266
  text-decoration: none;
2173
2267
  position: relative;
2174
2268
  display: inline-block;
2269
+ transition: color 0.35s;
2175
2270
  }
2176
2271
 
2177
- .c18 {
2178
- height: 4px;
2179
- width: 100%;
2180
- position: absolute;
2181
- left: 0;
2182
- bottom: -5px;
2183
- transition: opacity 0.15s 0.1s;
2184
- opacity: 0;
2185
- pointer-events: none;
2272
+ .c8 {
2273
+ display: inherit;
2274
+ flex-direction: inherit;
2275
+ flex: inherit;
2276
+ border-radius: inherit;
2277
+ overflow: hidden;
2278
+ transition: box-shadow 0.35s;
2279
+ box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
2186
2280
  }
2187
2281
 
2188
2282
  .c6 {
@@ -2193,19 +2287,22 @@ exports[`renders correctly with data prop 1`] = `
2193
2287
  flex: 1 1 auto;
2194
2288
  background: transparent;
2195
2289
  border-radius: 1rem;
2196
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
2197
2290
  text-decoration: none;
2198
- overflow: hidden;
2199
2291
  cursor: pointer;
2200
2292
  box-sizing: border-box;
2201
2293
  }
2202
2294
 
2203
- .c6 img {
2295
+ .c6:hover .c7,
2296
+ .c6:focus .c7 {
2297
+ box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
2298
+ }
2299
+
2300
+ .c6 .c9 img {
2204
2301
  transform: scale(1);
2205
- transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
2302
+ transition: transform 0.35s cubic-bezier(0.65,-0.19,0.37,1.16),box-shadow 0.35s;
2206
2303
  }
2207
2304
 
2208
- .c26 {
2305
+ .c27 {
2209
2306
  display: flex;
2210
2307
  position: relative;
2211
2308
  flex-direction: column;
@@ -2213,9 +2310,7 @@ exports[`renders correctly with data prop 1`] = `
2213
2310
  flex: 1 1 auto;
2214
2311
  background: transparent;
2215
2312
  border-radius: 1rem;
2216
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
2217
2313
  text-decoration: none;
2218
- overflow: hidden;
2219
2314
  cursor: default;
2220
2315
  box-sizing: border-box;
2221
2316
  }
@@ -2229,17 +2324,7 @@ exports[`renders correctly with data prop 1`] = `
2229
2324
  border-radius: 1rem;
2230
2325
  }
2231
2326
 
2232
- .c25 {
2233
- width: auto;
2234
- flex-shrink: 0;
2235
- display: flex;
2236
- flex-direction: column;
2237
- align-self: stretch;
2238
- border-radius: 1rem;
2239
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
2240
- }
2241
-
2242
- .c11 {
2327
+ .c13 {
2243
2328
  width: 100%;
2244
2329
  background: #FFFFFF;
2245
2330
  display: flex;
@@ -2250,14 +2335,14 @@ exports[`renders correctly with data prop 1`] = `
2250
2335
  border-radius: 0 0 1rem 1rem;
2251
2336
  }
2252
2337
 
2253
- .c12 {
2338
+ .c14 {
2254
2339
  flex: 1;
2255
2340
  display: flex;
2256
2341
  flex-direction: column;
2257
2342
  min-height: 0;
2258
2343
  }
2259
2344
 
2260
- .c14 {
2345
+ .c16 {
2261
2346
  width: 100%;
2262
2347
  display: flex;
2263
2348
  flex-direction: row;
@@ -2293,74 +2378,103 @@ exports[`renders correctly with data prop 1`] = `
2293
2378
  }
2294
2379
 
2295
2380
  @media (min-width: 740px) {
2296
- .c13 {
2381
+ .c15 {
2297
2382
  font-size: 1rem;
2298
2383
  line-height: 1.25rem;
2299
2384
  }
2300
2385
  }
2301
2386
 
2302
2387
  @media (min-width: 1024px) {
2303
- .c13 {
2388
+ .c15 {
2304
2389
  font-size: 1.125rem;
2305
2390
  line-height: 1.375rem;
2306
2391
  }
2307
2392
  }
2308
2393
 
2309
- @media (min-width:1024px) {
2310
- .c21 {
2394
+ @media (min-width: 1024px) {
2395
+ .c23 {
2311
2396
  background: #222222;
2312
2397
  }
2313
2398
  }
2314
2399
 
2315
2400
  @media (min-width: 740px) {
2316
- .c16 {
2401
+ .c18 {
2317
2402
  font-size: 1rem;
2318
2403
  line-height: 1.25rem;
2319
2404
  }
2320
2405
  }
2321
2406
 
2322
2407
  @media (min-width: 1024px) {
2323
- .c16 {
2408
+ .c18 {
2324
2409
  font-size: 1.125rem;
2325
2410
  line-height: 1.375rem;
2326
2411
  }
2327
2412
  }
2328
2413
 
2329
2414
  @media (min-width:1024px) {
2330
- .c16 {
2415
+ .c18 {
2331
2416
  color: #222222;
2332
2417
  }
2333
2418
  }
2334
2419
 
2335
2420
  @media (min-width: 740px) {
2421
+ .c6:hover .c17,
2422
+ .c6:focus .c17 {
2423
+ color: #E52630;
2424
+ }
2425
+
2426
+ .c6:hover .c19,
2427
+ .c6:focus .c19 {
2428
+ opacity: 1;
2429
+ }
2430
+
2431
+ .c6:hover .c22 .c24,
2432
+ .c6:focus .c22 .c24 {
2433
+ transform: scale(1.2);
2434
+ }
2435
+ }
2436
+
2437
+ @media (min-width: 1024px) {
2336
2438
  .c6 {
2337
- transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
2338
- transform-origin: center;
2439
+ overflow: visible;
2440
+ }
2441
+
2442
+ .c6 >div {
2339
2443
  transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
2444
+ transform-origin: center;
2340
2445
  }
2341
2446
 
2342
- .c6:hover,
2343
- .c6:focus {
2447
+ .c6:hover >div,
2448
+ .c6:focus >div {
2344
2449
  transform: translateY(-10px);
2345
2450
  }
2346
2451
 
2347
- .c6:hover {
2348
- box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
2452
+ .c6 >.c7 {
2453
+ transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35),box-shadow 0.35s;
2349
2454
  }
2350
2455
 
2351
- .c6:hover .c7 img {
2456
+ .c6:hover .c9 img,
2457
+ .c6:focus .c9 img {
2352
2458
  transform: scale(1.06);
2353
2459
  }
2354
2460
 
2355
- .c6:hover .c15 {
2356
- text-decoration: none;
2461
+ .c6:hover .c17,
2462
+ .c6:focus .c17 {
2463
+ color: #E52630;
2357
2464
  }
2358
2465
 
2359
- .c6:hover .c17 {
2466
+ .c6:hover .c19,
2467
+ .c6:focus .c19 {
2360
2468
  opacity: 1;
2361
2469
  }
2362
2470
 
2363
- .c6:hover .c20 .c22 {
2471
+ .c6:hover .c22,
2472
+ .c6:focus .c22 {
2473
+ background: #E52630;
2474
+ }
2475
+
2476
+ .c6:hover .c22 .c24,
2477
+ .c6:focus .c22 .c24 {
2364
2478
  transform: scale(1.2);
2365
2479
  }
2366
2480
  }
@@ -2382,23 +2496,6 @@ exports[`renders correctly with data prop 1`] = `
2382
2496
  }
2383
2497
  }
2384
2498
 
2385
- @media (max-width:1023px) {
2386
- .c25 {
2387
- scroll-snap-align: start;
2388
- flex: 0 0 309px;
2389
- width: 309px;
2390
- flex-shrink: 0;
2391
- }
2392
- }
2393
-
2394
- @media (min-width:1024px) {
2395
- .c25 {
2396
- flex: 0 1 auto;
2397
- width: clamp(261px,calc((100% - 4rem) / 3),363px);
2398
- align-self: stretch;
2399
- }
2400
- }
2401
-
2402
2499
  @media (min-width: 740px) {
2403
2500
  .c1 {
2404
2501
  padding-inline: 2rem;
@@ -2477,74 +2574,78 @@ exports[`renders correctly with data prop 1`] = `
2477
2574
  className="c7 c8"
2478
2575
  >
2479
2576
  <div
2480
- className="c9 lazyload"
2481
- data-testid="PictureWrapper"
2482
- >
2483
- <img
2484
- alt=""
2485
- className="c10 lazyload"
2486
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
2487
- data-sizes="auto"
2488
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
2489
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
2490
- data-testid="Picture"
2491
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
2492
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
2493
- />
2494
- </div>
2495
- </div>
2496
- <div
2497
- className="c11"
2498
- >
2499
- <div
2500
- className="c12"
2577
+ className="c9 c10"
2501
2578
  >
2502
- <p
2503
- className="c13"
2579
+ <div
2580
+ className="c11 lazyload"
2581
+ data-testid="PictureWrapper"
2504
2582
  >
2505
- <strong>
2506
- Load
2507
- </strong>
2508
- of text here
2509
- </p>
2583
+ <img
2584
+ alt=""
2585
+ className="c12 lazyload"
2586
+ data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
2587
+ data-sizes="auto"
2588
+ data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
2589
+ data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
2590
+ data-testid="Picture"
2591
+ src="@component-library/src/styleguide/assets/challenge-1.jpg"
2592
+ srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
2593
+ />
2594
+ </div>
2510
2595
  </div>
2511
2596
  <div
2512
- className="c14"
2597
+ className="c13"
2513
2598
  >
2514
- <span
2515
- className="c15 c16"
2599
+ <div
2600
+ className="c14"
2516
2601
  >
2517
- test go
2518
- <img
2519
- alt=""
2520
- aria-hidden="true"
2521
- className="c17 c18"
2522
- src="mock.asset"
2523
- />
2524
- </span>
2602
+ <p
2603
+ className="c15"
2604
+ >
2605
+ <strong>
2606
+ Load
2607
+ </strong>
2608
+ of text here
2609
+ </p>
2610
+ </div>
2525
2611
  <div
2526
- className="c19"
2612
+ className="c16"
2527
2613
  >
2614
+ <span
2615
+ className="c17 c18"
2616
+ >
2617
+ test go
2618
+ <img
2619
+ alt=""
2620
+ aria-hidden="true"
2621
+ className="c19 c20"
2622
+ src="mock.asset"
2623
+ />
2624
+ </span>
2528
2625
  <div
2529
- className="c20 c21"
2626
+ className="c21"
2530
2627
  >
2531
- <span
2628
+ <div
2532
2629
  className="c22 c23"
2533
2630
  >
2534
- <svg
2535
- className="c24"
2536
- fill="none"
2537
- height="15"
2538
- viewBox="0 0 15 15"
2539
- width="15"
2540
- xmlns="http://www.w3.org/2000/svg"
2631
+ <span
2632
+ className="c24 c25"
2541
2633
  >
2542
- <path
2543
- d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
2544
- fill="currentColor"
2545
- />
2546
- </svg>
2547
- </span>
2634
+ <svg
2635
+ className="c26"
2636
+ fill="none"
2637
+ height="15"
2638
+ viewBox="0 0 15 15"
2639
+ width="15"
2640
+ xmlns="http://www.w3.org/2000/svg"
2641
+ >
2642
+ <path
2643
+ d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
2644
+ fill="currentColor"
2645
+ />
2646
+ </svg>
2647
+ </span>
2648
+ </div>
2548
2649
  </div>
2549
2650
  </div>
2550
2651
  </div>
@@ -2552,45 +2653,49 @@ exports[`renders correctly with data prop 1`] = `
2552
2653
  </a>
2553
2654
  </div>
2554
2655
  <div
2555
- className="c25"
2656
+ className="c4"
2556
2657
  >
2557
2658
  <div
2558
- className="c26"
2659
+ className="c27"
2559
2660
  >
2560
2661
  <div
2561
2662
  className="c7 c8"
2562
2663
  >
2563
2664
  <div
2564
- className="c9 lazyload"
2565
- data-testid="PictureWrapper"
2665
+ className="c9 c10"
2566
2666
  >
2567
- <img
2568
- alt=""
2569
- className="c10 lazyload"
2570
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
2571
- data-sizes="auto"
2572
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
2573
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
2574
- data-testid="Picture"
2575
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
2576
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
2577
- />
2667
+ <div
2668
+ className="c11 lazyload"
2669
+ data-testid="PictureWrapper"
2670
+ >
2671
+ <img
2672
+ alt=""
2673
+ className="c12 lazyload"
2674
+ data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
2675
+ data-sizes="auto"
2676
+ data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
2677
+ data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
2678
+ data-testid="Picture"
2679
+ src="@component-library/src/styleguide/assets/challenge-1.jpg"
2680
+ srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
2681
+ />
2682
+ </div>
2578
2683
  </div>
2579
- </div>
2580
- <div
2581
- className="c11"
2582
- >
2583
2684
  <div
2584
- className="c12"
2685
+ className="c13"
2585
2686
  >
2586
- <p
2587
- className="c13"
2687
+ <div
2688
+ className="c14"
2588
2689
  >
2589
- <strong>
2590
- Load
2591
- </strong>
2592
- of text here
2593
- </p>
2690
+ <p
2691
+ className="c15"
2692
+ >
2693
+ <strong>
2694
+ Load
2695
+ </strong>
2696
+ of text here
2697
+ </p>
2698
+ </div>
2594
2699
  </div>
2595
2700
  </div>
2596
2701
  </div>
@@ -2609,74 +2714,78 @@ exports[`renders correctly with data prop 1`] = `
2609
2714
  className="c7 c8"
2610
2715
  >
2611
2716
  <div
2612
- className="c9 lazyload"
2613
- data-testid="PictureWrapper"
2614
- >
2615
- <img
2616
- alt=""
2617
- className="c10 lazyload"
2618
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
2619
- data-sizes="auto"
2620
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
2621
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
2622
- data-testid="Picture"
2623
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
2624
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
2625
- />
2626
- </div>
2627
- </div>
2628
- <div
2629
- className="c11"
2630
- >
2631
- <div
2632
- className="c12"
2717
+ className="c9 c10"
2633
2718
  >
2634
- <p
2635
- className="c13"
2719
+ <div
2720
+ className="c11 lazyload"
2721
+ data-testid="PictureWrapper"
2636
2722
  >
2637
- <strong>
2638
- Load
2639
- </strong>
2640
- of text here
2641
- </p>
2723
+ <img
2724
+ alt=""
2725
+ className="c12 lazyload"
2726
+ data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
2727
+ data-sizes="auto"
2728
+ data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
2729
+ data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
2730
+ data-testid="Picture"
2731
+ src="@component-library/src/styleguide/assets/challenge-1.jpg"
2732
+ srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
2733
+ />
2734
+ </div>
2642
2735
  </div>
2643
2736
  <div
2644
- className="c14"
2737
+ className="c13"
2645
2738
  >
2646
- <span
2647
- className="c15 c16"
2739
+ <div
2740
+ className="c14"
2648
2741
  >
2649
- test go
2650
- <img
2651
- alt=""
2652
- aria-hidden="true"
2653
- className="c17 c18"
2654
- src="mock.asset"
2655
- />
2656
- </span>
2742
+ <p
2743
+ className="c15"
2744
+ >
2745
+ <strong>
2746
+ Load
2747
+ </strong>
2748
+ of text here
2749
+ </p>
2750
+ </div>
2657
2751
  <div
2658
- className="c19"
2752
+ className="c16"
2659
2753
  >
2754
+ <span
2755
+ className="c17 c18"
2756
+ >
2757
+ test go
2758
+ <img
2759
+ alt=""
2760
+ aria-hidden="true"
2761
+ className="c19 c20"
2762
+ src="mock.asset"
2763
+ />
2764
+ </span>
2660
2765
  <div
2661
- className="c20 c21"
2766
+ className="c21"
2662
2767
  >
2663
- <span
2768
+ <div
2664
2769
  className="c22 c23"
2665
2770
  >
2666
- <svg
2667
- className="c24"
2668
- fill="none"
2669
- height="15"
2670
- viewBox="0 0 15 15"
2671
- width="15"
2672
- xmlns="http://www.w3.org/2000/svg"
2771
+ <span
2772
+ className="c24 c25"
2673
2773
  >
2674
- <path
2675
- d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
2676
- fill="currentColor"
2677
- />
2678
- </svg>
2679
- </span>
2774
+ <svg
2775
+ className="c26"
2776
+ fill="none"
2777
+ height="15"
2778
+ viewBox="0 0 15 15"
2779
+ width="15"
2780
+ xmlns="http://www.w3.org/2000/svg"
2781
+ >
2782
+ <path
2783
+ d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
2784
+ fill="currentColor"
2785
+ />
2786
+ </svg>
2787
+ </span>
2788
+ </div>
2680
2789
  </div>
2681
2790
  </div>
2682
2791
  </div>
@@ -2694,54 +2803,58 @@ exports[`renders correctly with data prop 1`] = `
2694
2803
  type="standard"
2695
2804
  >
2696
2805
  <div
2697
- className="c11"
2806
+ className="c7 c8"
2698
2807
  >
2699
2808
  <div
2700
- className="c12"
2701
- >
2702
- <p
2703
- className="c13"
2704
- >
2705
- Load of text here
2706
- </p>
2707
- </div>
2708
- <div
2709
- className="c14"
2809
+ className="c13"
2710
2810
  >
2711
- <span
2712
- className="c15 c16"
2811
+ <div
2812
+ className="c14"
2713
2813
  >
2714
- View card
2715
- <img
2716
- alt=""
2717
- aria-hidden="true"
2718
- className="c17 c18"
2719
- src="mock.asset"
2720
- />
2721
- </span>
2814
+ <p
2815
+ className="c15"
2816
+ >
2817
+ Load of text here
2818
+ </p>
2819
+ </div>
2722
2820
  <div
2723
- className="c19"
2821
+ className="c16"
2724
2822
  >
2823
+ <span
2824
+ className="c17 c18"
2825
+ >
2826
+ View card
2827
+ <img
2828
+ alt=""
2829
+ aria-hidden="true"
2830
+ className="c19 c20"
2831
+ src="mock.asset"
2832
+ />
2833
+ </span>
2725
2834
  <div
2726
- className="c20 c21"
2835
+ className="c21"
2727
2836
  >
2728
- <span
2837
+ <div
2729
2838
  className="c22 c23"
2730
2839
  >
2731
- <svg
2732
- className="c24"
2733
- fill="none"
2734
- height="15"
2735
- viewBox="0 0 15 15"
2736
- width="15"
2737
- xmlns="http://www.w3.org/2000/svg"
2840
+ <span
2841
+ className="c24 c25"
2738
2842
  >
2739
- <path
2740
- d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
2741
- fill="currentColor"
2742
- />
2743
- </svg>
2744
- </span>
2843
+ <svg
2844
+ className="c26"
2845
+ fill="none"
2846
+ height="15"
2847
+ viewBox="0 0 15 15"
2848
+ width="15"
2849
+ xmlns="http://www.w3.org/2000/svg"
2850
+ >
2851
+ <path
2852
+ d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
2853
+ fill="currentColor"
2854
+ />
2855
+ </svg>
2856
+ </span>
2857
+ </div>
2745
2858
  </div>
2746
2859
  </div>
2747
2860
  </div>