@comicrelief/component-library 8.77.5 → 8.77.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.cjs.js +605 -591
  2. package/dist/index.es.js +4154 -4141
  3. package/package.json +1 -1
  4. package/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap +1008 -1035
  5. package/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap +232 -196
  6. package/src/components/Molecules/CTA/shared/CTACard.js +15 -13
  7. package/src/components/Molecules/CTA/shared/CTACard.style.js +32 -15
  8. package/src/components/Organisms/MarketingPreferencesDS/_DefaultCopy.js +4 -4
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,21 +28,21 @@ 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
- .c18 {
45
+ .c20 {
46
46
  height: 4px;
47
47
  width: 100%;
48
48
  position: absolute;
@@ -53,7 +53,7 @@ exports[`handles data structure correctly 1`] = `
53
53
  pointer-events: none;
54
54
  }
55
55
 
56
- .c23 {
56
+ .c25 {
57
57
  display: inline-flex;
58
58
  align-items: center;
59
59
  justify-content: center;
@@ -62,7 +62,7 @@ exports[`handles data structure correctly 1`] = `
62
62
  transform-origin: center;
63
63
  }
64
64
 
65
- .c21 {
65
+ .c23 {
66
66
  width: 32px;
67
67
  height: 32px;
68
68
  border-radius: 50%;
@@ -74,20 +74,20 @@ exports[`handles data structure correctly 1`] = `
74
74
  overflow: hidden;
75
75
  }
76
76
 
77
- .c19 {
77
+ .c21 {
78
78
  padding-left: 1rem;
79
79
  display: flex;
80
80
  align-items: center;
81
81
  justify-content: flex-end;
82
82
  }
83
83
 
84
- .c24 {
84
+ .c26 {
85
85
  display: inline-block;
86
86
  color: #FFFFFF;
87
87
  fill: currentColor;
88
88
  }
89
89
 
90
- .c8 {
90
+ .c10 {
91
91
  width: 100%;
92
92
  overflow: hidden;
93
93
  flex-shrink: 0;
@@ -95,14 +95,14 @@ exports[`handles data structure correctly 1`] = `
95
95
  border-radius: 1rem 1rem 0 0;
96
96
  }
97
97
 
98
- .c8 img {
98
+ .c10 img {
99
99
  width: 100%;
100
100
  height: auto;
101
101
  object-fit: cover;
102
102
  display: block;
103
103
  }
104
104
 
105
- .c16 {
105
+ .c18 {
106
106
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
107
107
  font-weight: 400;
108
108
  text-transform: inherit;
@@ -117,6 +117,16 @@ exports[`handles data structure correctly 1`] = `
117
117
  transition: color 0.35s;
118
118
  }
119
119
 
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;
128
+ }
129
+
120
130
  .c6 {
121
131
  display: flex;
122
132
  position: relative;
@@ -125,25 +135,22 @@ exports[`handles data structure correctly 1`] = `
125
135
  flex: 1 1 auto;
126
136
  background: transparent;
127
137
  border-radius: 1rem;
128
- transition: box-shadow 0.35s;
129
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
130
138
  text-decoration: none;
131
- overflow: hidden;
132
139
  cursor: pointer;
133
140
  box-sizing: border-box;
134
141
  }
135
142
 
136
- .c6:hover,
137
- .c6:focus {
143
+ .c6:hover .c7,
144
+ .c6:focus .c7 {
138
145
  box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
139
146
  }
140
147
 
141
- .c6 .c7 img {
148
+ .c6 .c9 img {
142
149
  transform: scale(1);
143
150
  transition: transform 0.35s cubic-bezier(0.65,-0.19,0.37,1.16),box-shadow 0.35s;
144
151
  }
145
152
 
146
- .c26 {
153
+ .c27 {
147
154
  display: flex;
148
155
  position: relative;
149
156
  flex-direction: column;
@@ -151,19 +158,11 @@ exports[`handles data structure correctly 1`] = `
151
158
  flex: 1 1 auto;
152
159
  background: transparent;
153
160
  border-radius: 1rem;
154
- transition: box-shadow 0.35s;
155
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
156
161
  text-decoration: none;
157
- overflow: hidden;
158
162
  cursor: default;
159
163
  box-sizing: border-box;
160
164
  }
161
165
 
162
- .c26:hover,
163
- .c26:focus {
164
- box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
165
- }
166
-
167
166
  .c4 {
168
167
  width: auto;
169
168
  flex-shrink: 0;
@@ -173,17 +172,7 @@ exports[`handles data structure correctly 1`] = `
173
172
  border-radius: 1rem;
174
173
  }
175
174
 
176
- .c25 {
177
- width: auto;
178
- flex-shrink: 0;
179
- display: flex;
180
- flex-direction: column;
181
- align-self: stretch;
182
- border-radius: 1rem;
183
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
184
- }
185
-
186
- .c11 {
175
+ .c13 {
187
176
  width: 100%;
188
177
  background: #FFFFFF;
189
178
  display: flex;
@@ -194,14 +183,14 @@ exports[`handles data structure correctly 1`] = `
194
183
  border-radius: 0 0 1rem 1rem;
195
184
  }
196
185
 
197
- .c12 {
186
+ .c14 {
198
187
  flex: 1;
199
188
  display: flex;
200
189
  flex-direction: column;
201
190
  min-height: 0;
202
191
  }
203
192
 
204
- .c14 {
193
+ .c16 {
205
194
  width: 100%;
206
195
  display: flex;
207
196
  flex-direction: row;
@@ -237,96 +226,103 @@ exports[`handles data structure correctly 1`] = `
237
226
  }
238
227
 
239
228
  @media (min-width: 740px) {
240
- .c13 {
229
+ .c15 {
241
230
  font-size: 1rem;
242
231
  line-height: 1.25rem;
243
232
  }
244
233
  }
245
234
 
246
235
  @media (min-width: 1024px) {
247
- .c13 {
236
+ .c15 {
248
237
  font-size: 1.125rem;
249
238
  line-height: 1.375rem;
250
239
  }
251
240
  }
252
241
 
253
242
  @media (min-width: 1024px) {
254
- .c21 {
243
+ .c23 {
255
244
  background: #222222;
256
245
  }
257
246
  }
258
247
 
259
248
  @media (min-width: 740px) {
260
- .c16 {
249
+ .c18 {
261
250
  font-size: 1rem;
262
251
  line-height: 1.25rem;
263
252
  }
264
253
  }
265
254
 
266
255
  @media (min-width: 1024px) {
267
- .c16 {
256
+ .c18 {
268
257
  font-size: 1.125rem;
269
258
  line-height: 1.375rem;
270
259
  }
271
260
  }
272
261
 
273
262
  @media (min-width:1024px) {
274
- .c16 {
263
+ .c18 {
275
264
  color: #222222;
276
265
  }
277
266
  }
278
267
 
279
268
  @media (min-width: 740px) {
280
- .c6:hover .c15,
281
- .c6:focus .c15 {
269
+ .c6:hover .c17,
270
+ .c6:focus .c17 {
282
271
  color: #E52630;
283
272
  }
284
273
 
285
- .c6:hover .c17,
286
- .c6:focus .c17 {
274
+ .c6:hover .c19,
275
+ .c6:focus .c19 {
287
276
  opacity: 1;
288
277
  }
289
278
 
290
- .c6:hover .c20 .c22,
291
- .c6:focus .c20 .c22 {
279
+ .c6:hover .c22 .c24,
280
+ .c6:focus .c22 .c24 {
292
281
  transform: scale(1.2);
293
282
  }
294
283
  }
295
284
 
296
285
  @media (min-width: 1024px) {
297
286
  .c6 {
298
- transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
287
+ overflow: visible;
288
+ }
289
+
290
+ .c6 >div {
291
+ transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
299
292
  transform-origin: center;
300
- transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35),box-shadow 0.35s;
301
293
  }
302
294
 
303
- .c6:hover,
304
- .c6:focus {
295
+ .c6:hover >div,
296
+ .c6:focus >div {
305
297
  transform: translateY(-10px);
306
298
  }
307
299
 
308
- .c6:hover .c7 img,
309
- .c6:focus .c7 img {
310
- transform: scale(1.06);
300
+ .c6 >.c7 {
301
+ transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35),box-shadow 0.35s;
311
302
  }
312
303
 
313
- .c6:hover .c15,
314
- .c6:focus .c15 {
315
- color: #E52630;
304
+ .c6:hover .c9 img,
305
+ .c6:focus .c9 img {
306
+ transform: scale(1.06);
316
307
  }
317
308
 
318
309
  .c6:hover .c17,
319
310
  .c6:focus .c17 {
311
+ color: #E52630;
312
+ }
313
+
314
+ .c6:hover .c19,
315
+ .c6:focus .c19 {
320
316
  opacity: 1;
321
317
  }
322
318
 
323
- .c6:hover .c20,
324
- .c6:focus .c20 {
319
+ .c6:hover .c22,
320
+ .c6:focus .c22 {
325
321
  background: #E52630;
326
322
  }
327
323
 
328
- .c6:hover .c20 .c22,
329
- .c6:focus .c20 .c22 {
324
+ .c6:hover .c22 .c24,
325
+ .c6:focus .c22 .c24 {
330
326
  transform: scale(1.2);
331
327
  }
332
328
  }
@@ -355,30 +351,6 @@ exports[`handles data structure correctly 1`] = `
355
351
  }
356
352
  }
357
353
 
358
- @media (max-width:739px) {
359
- .c25 {
360
- width: 100%;
361
- max-width: 100%;
362
- margin: 0;
363
- }
364
- }
365
-
366
- @media (min-width:740px) and (max-width:1023px) {
367
- .c25 {
368
- align-self: stretch;
369
- flex: 0 0 100%;
370
- max-width: 309px;
371
- }
372
- }
373
-
374
- @media (min-width:1024px) {
375
- .c25 {
376
- flex: 0 1 auto;
377
- width: clamp(261px,calc((100% - 4rem) / 3),363px);
378
- align-self: stretch;
379
- }
380
- }
381
-
382
354
  @media (min-width: 740px) {
383
355
  .c1 {
384
356
  padding-inline: 2rem;
@@ -437,74 +409,78 @@ exports[`handles data structure correctly 1`] = `
437
409
  className="c7 c8"
438
410
  >
439
411
  <div
440
- className="c9 lazyload"
441
- data-testid="PictureWrapper"
442
- >
443
- <img
444
- alt=""
445
- className="c10 lazyload"
446
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
447
- data-sizes="auto"
448
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
449
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
450
- data-testid="Picture"
451
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
452
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
453
- />
454
- </div>
455
- </div>
456
- <div
457
- className="c11"
458
- >
459
- <div
460
- className="c12"
412
+ className="c9 c10"
461
413
  >
462
- <p
463
- className="c13"
414
+ <div
415
+ className="c11 lazyload"
416
+ data-testid="PictureWrapper"
464
417
  >
465
- <strong>
466
- Load
467
- </strong>
468
- of text here
469
- </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>
470
430
  </div>
471
431
  <div
472
- className="c14"
432
+ className="c13"
473
433
  >
474
- <span
475
- className="c15 c16"
434
+ <div
435
+ className="c14"
476
436
  >
477
- test go
478
- <img
479
- alt=""
480
- aria-hidden="true"
481
- className="c17 c18"
482
- src="mock.asset"
483
- />
484
- </span>
437
+ <p
438
+ className="c15"
439
+ >
440
+ <strong>
441
+ Load
442
+ </strong>
443
+ of text here
444
+ </p>
445
+ </div>
485
446
  <div
486
- className="c19"
447
+ className="c16"
487
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>
488
460
  <div
489
- className="c20 c21"
461
+ className="c21"
490
462
  >
491
- <span
463
+ <div
492
464
  className="c22 c23"
493
465
  >
494
- <svg
495
- className="c24"
496
- fill="none"
497
- height="15"
498
- viewBox="0 0 15 15"
499
- width="15"
500
- xmlns="http://www.w3.org/2000/svg"
466
+ <span
467
+ className="c24 c25"
501
468
  >
502
- <path
503
- 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"
504
- fill="currentColor"
505
- />
506
- </svg>
507
- </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>
508
484
  </div>
509
485
  </div>
510
486
  </div>
@@ -512,45 +488,49 @@ exports[`handles data structure correctly 1`] = `
512
488
  </a>
513
489
  </div>
514
490
  <div
515
- className="c25"
491
+ className="c4"
516
492
  >
517
493
  <div
518
- className="c26"
494
+ className="c27"
519
495
  >
520
496
  <div
521
497
  className="c7 c8"
522
498
  >
523
499
  <div
524
- className="c9 lazyload"
525
- data-testid="PictureWrapper"
500
+ className="c9 c10"
526
501
  >
527
- <img
528
- alt=""
529
- className="c10 lazyload"
530
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
531
- data-sizes="auto"
532
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
533
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
534
- data-testid="Picture"
535
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
536
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
537
- />
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>
538
518
  </div>
539
- </div>
540
- <div
541
- className="c11"
542
- >
543
519
  <div
544
- className="c12"
520
+ className="c13"
545
521
  >
546
- <p
547
- className="c13"
522
+ <div
523
+ className="c14"
548
524
  >
549
- <strong>
550
- Load
551
- </strong>
552
- of text here
553
- </p>
525
+ <p
526
+ className="c15"
527
+ >
528
+ <strong>
529
+ Load
530
+ </strong>
531
+ of text here
532
+ </p>
533
+ </div>
554
534
  </div>
555
535
  </div>
556
536
  </div>
@@ -569,74 +549,78 @@ exports[`handles data structure correctly 1`] = `
569
549
  className="c7 c8"
570
550
  >
571
551
  <div
572
- className="c9 lazyload"
573
- data-testid="PictureWrapper"
574
- >
575
- <img
576
- alt=""
577
- className="c10 lazyload"
578
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
579
- data-sizes="auto"
580
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
581
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
582
- data-testid="Picture"
583
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
584
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
585
- />
586
- </div>
587
- </div>
588
- <div
589
- className="c11"
590
- >
591
- <div
592
- className="c12"
552
+ className="c9 c10"
593
553
  >
594
- <p
595
- className="c13"
554
+ <div
555
+ className="c11 lazyload"
556
+ data-testid="PictureWrapper"
596
557
  >
597
- <strong>
598
- Load
599
- </strong>
600
- of text here
601
- </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>
602
570
  </div>
603
571
  <div
604
- className="c14"
572
+ className="c13"
605
573
  >
606
- <span
607
- className="c15 c16"
574
+ <div
575
+ className="c14"
608
576
  >
609
- test go
610
- <img
611
- alt=""
612
- aria-hidden="true"
613
- className="c17 c18"
614
- src="mock.asset"
615
- />
616
- </span>
577
+ <p
578
+ className="c15"
579
+ >
580
+ <strong>
581
+ Load
582
+ </strong>
583
+ of text here
584
+ </p>
585
+ </div>
617
586
  <div
618
- className="c19"
587
+ className="c16"
619
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>
620
600
  <div
621
- className="c20 c21"
601
+ className="c21"
622
602
  >
623
- <span
603
+ <div
624
604
  className="c22 c23"
625
605
  >
626
- <svg
627
- className="c24"
628
- fill="none"
629
- height="15"
630
- viewBox="0 0 15 15"
631
- width="15"
632
- xmlns="http://www.w3.org/2000/svg"
606
+ <span
607
+ className="c24 c25"
633
608
  >
634
- <path
635
- 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"
636
- fill="currentColor"
637
- />
638
- </svg>
639
- </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>
640
624
  </div>
641
625
  </div>
642
626
  </div>
@@ -654,54 +638,58 @@ exports[`handles data structure correctly 1`] = `
654
638
  type="standard"
655
639
  >
656
640
  <div
657
- className="c11"
641
+ className="c7 c8"
658
642
  >
659
643
  <div
660
- className="c12"
644
+ className="c13"
661
645
  >
662
- <p
663
- className="c13"
664
- >
665
- Load of text here
666
- </p>
667
- </div>
668
- <div
669
- className="c14"
670
- >
671
- <span
672
- className="c15 c16"
646
+ <div
647
+ className="c14"
673
648
  >
674
- View card
675
- <img
676
- alt=""
677
- aria-hidden="true"
678
- className="c17 c18"
679
- src="mock.asset"
680
- />
681
- </span>
649
+ <p
650
+ className="c15"
651
+ >
652
+ Load of text here
653
+ </p>
654
+ </div>
682
655
  <div
683
- className="c19"
656
+ className="c16"
684
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>
685
669
  <div
686
- className="c20 c21"
670
+ className="c21"
687
671
  >
688
- <span
672
+ <div
689
673
  className="c22 c23"
690
674
  >
691
- <svg
692
- className="c24"
693
- fill="none"
694
- height="15"
695
- viewBox="0 0 15 15"
696
- width="15"
697
- xmlns="http://www.w3.org/2000/svg"
675
+ <span
676
+ className="c24 c25"
698
677
  >
699
- <path
700
- 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"
701
- fill="currentColor"
702
- />
703
- </svg>
704
- </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>
705
693
  </div>
706
694
  </div>
707
695
  </div>
@@ -715,7 +703,7 @@ exports[`handles data structure correctly 1`] = `
715
703
  `;
716
704
 
717
705
  exports[`renders 2 columns layout correctly 1`] = `
718
- .c13 {
706
+ .c15 {
719
707
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
720
708
  font-weight: 400;
721
709
  text-transform: inherit;
@@ -724,7 +712,7 @@ exports[`renders 2 columns layout correctly 1`] = `
724
712
  line-height: 1.25rem;
725
713
  }
726
714
 
727
- .c13 span {
715
+ .c15 span {
728
716
  font-size: inherit;
729
717
  line-height: inherit;
730
718
  }
@@ -742,21 +730,21 @@ exports[`renders 2 columns layout correctly 1`] = `
742
730
  text-decoration: none;
743
731
  }
744
732
 
745
- .c9 {
733
+ .c11 {
746
734
  display: block;
747
735
  width: 100%;
748
736
  height: 100%;
749
737
  position: relative;
750
738
  }
751
739
 
752
- .c10 {
740
+ .c12 {
753
741
  width: 100%;
754
742
  height: 100%;
755
743
  display: block;
756
744
  object-fit: cover;
757
745
  }
758
746
 
759
- .c18 {
747
+ .c20 {
760
748
  height: 4px;
761
749
  width: 100%;
762
750
  position: absolute;
@@ -767,7 +755,7 @@ exports[`renders 2 columns layout correctly 1`] = `
767
755
  pointer-events: none;
768
756
  }
769
757
 
770
- .c23 {
758
+ .c25 {
771
759
  display: inline-flex;
772
760
  align-items: center;
773
761
  justify-content: center;
@@ -776,7 +764,7 @@ exports[`renders 2 columns layout correctly 1`] = `
776
764
  transform-origin: center;
777
765
  }
778
766
 
779
- .c21 {
767
+ .c23 {
780
768
  width: 32px;
781
769
  height: 32px;
782
770
  border-radius: 50%;
@@ -788,20 +776,20 @@ exports[`renders 2 columns layout correctly 1`] = `
788
776
  overflow: hidden;
789
777
  }
790
778
 
791
- .c19 {
779
+ .c21 {
792
780
  padding-left: 1rem;
793
781
  display: flex;
794
782
  align-items: center;
795
783
  justify-content: flex-end;
796
784
  }
797
785
 
798
- .c24 {
786
+ .c26 {
799
787
  display: inline-block;
800
788
  color: #FFFFFF;
801
789
  fill: currentColor;
802
790
  }
803
791
 
804
- .c8 {
792
+ .c10 {
805
793
  width: 100%;
806
794
  overflow: hidden;
807
795
  flex-shrink: 0;
@@ -809,14 +797,14 @@ exports[`renders 2 columns layout correctly 1`] = `
809
797
  border-radius: 1rem 1rem 0 0;
810
798
  }
811
799
 
812
- .c8 img {
800
+ .c10 img {
813
801
  width: 100%;
814
802
  height: auto;
815
803
  object-fit: cover;
816
804
  display: block;
817
805
  }
818
806
 
819
- .c16 {
807
+ .c18 {
820
808
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
821
809
  font-weight: 400;
822
810
  text-transform: inherit;
@@ -831,6 +819,16 @@ exports[`renders 2 columns layout correctly 1`] = `
831
819
  transition: color 0.35s;
832
820
  }
833
821
 
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;
830
+ }
831
+
834
832
  .c6 {
835
833
  display: flex;
836
834
  position: relative;
@@ -839,25 +837,22 @@ exports[`renders 2 columns layout correctly 1`] = `
839
837
  flex: 1 1 auto;
840
838
  background: transparent;
841
839
  border-radius: 1rem;
842
- transition: box-shadow 0.35s;
843
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
844
840
  text-decoration: none;
845
- overflow: hidden;
846
841
  cursor: pointer;
847
842
  box-sizing: border-box;
848
843
  }
849
844
 
850
- .c6:hover,
851
- .c6:focus {
845
+ .c6:hover .c7,
846
+ .c6:focus .c7 {
852
847
  box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
853
848
  }
854
849
 
855
- .c6 .c7 img {
850
+ .c6 .c9 img {
856
851
  transform: scale(1);
857
852
  transition: transform 0.35s cubic-bezier(0.65,-0.19,0.37,1.16),box-shadow 0.35s;
858
853
  }
859
854
 
860
- .c26 {
855
+ .c27 {
861
856
  display: flex;
862
857
  position: relative;
863
858
  flex-direction: column;
@@ -865,19 +860,11 @@ exports[`renders 2 columns layout correctly 1`] = `
865
860
  flex: 1 1 auto;
866
861
  background: transparent;
867
862
  border-radius: 1rem;
868
- transition: box-shadow 0.35s;
869
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
870
863
  text-decoration: none;
871
- overflow: hidden;
872
864
  cursor: default;
873
865
  box-sizing: border-box;
874
866
  }
875
867
 
876
- .c26:hover,
877
- .c26:focus {
878
- box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
879
- }
880
-
881
868
  .c4 {
882
869
  width: auto;
883
870
  flex-shrink: 0;
@@ -887,17 +874,7 @@ exports[`renders 2 columns layout correctly 1`] = `
887
874
  border-radius: 1rem;
888
875
  }
889
876
 
890
- .c25 {
891
- width: auto;
892
- flex-shrink: 0;
893
- display: flex;
894
- flex-direction: column;
895
- align-self: stretch;
896
- border-radius: 1rem;
897
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
898
- }
899
-
900
- .c11 {
877
+ .c13 {
901
878
  width: 100%;
902
879
  background: #FFFFFF;
903
880
  display: flex;
@@ -908,14 +885,14 @@ exports[`renders 2 columns layout correctly 1`] = `
908
885
  border-radius: 0 0 1rem 1rem;
909
886
  }
910
887
 
911
- .c12 {
888
+ .c14 {
912
889
  flex: 1;
913
890
  display: flex;
914
891
  flex-direction: column;
915
892
  min-height: 0;
916
893
  }
917
894
 
918
- .c14 {
895
+ .c16 {
919
896
  width: 100%;
920
897
  display: flex;
921
898
  flex-direction: row;
@@ -951,96 +928,103 @@ exports[`renders 2 columns layout correctly 1`] = `
951
928
  }
952
929
 
953
930
  @media (min-width: 740px) {
954
- .c13 {
931
+ .c15 {
955
932
  font-size: 1rem;
956
933
  line-height: 1.25rem;
957
934
  }
958
935
  }
959
936
 
960
937
  @media (min-width: 1024px) {
961
- .c13 {
938
+ .c15 {
962
939
  font-size: 1.125rem;
963
940
  line-height: 1.375rem;
964
941
  }
965
942
  }
966
943
 
967
944
  @media (min-width: 1024px) {
968
- .c21 {
945
+ .c23 {
969
946
  background: #222222;
970
947
  }
971
948
  }
972
949
 
973
950
  @media (min-width: 740px) {
974
- .c16 {
951
+ .c18 {
975
952
  font-size: 1rem;
976
953
  line-height: 1.25rem;
977
954
  }
978
955
  }
979
956
 
980
957
  @media (min-width: 1024px) {
981
- .c16 {
958
+ .c18 {
982
959
  font-size: 1.125rem;
983
960
  line-height: 1.375rem;
984
961
  }
985
962
  }
986
963
 
987
964
  @media (min-width:1024px) {
988
- .c16 {
965
+ .c18 {
989
966
  color: #222222;
990
967
  }
991
968
  }
992
969
 
993
970
  @media (min-width: 740px) {
994
- .c6:hover .c15,
995
- .c6:focus .c15 {
971
+ .c6:hover .c17,
972
+ .c6:focus .c17 {
996
973
  color: #E52630;
997
974
  }
998
975
 
999
- .c6:hover .c17,
1000
- .c6:focus .c17 {
976
+ .c6:hover .c19,
977
+ .c6:focus .c19 {
1001
978
  opacity: 1;
1002
979
  }
1003
980
 
1004
- .c6:hover .c20 .c22,
1005
- .c6:focus .c20 .c22 {
981
+ .c6:hover .c22 .c24,
982
+ .c6:focus .c22 .c24 {
1006
983
  transform: scale(1.2);
1007
984
  }
1008
985
  }
1009
986
 
1010
987
  @media (min-width: 1024px) {
1011
988
  .c6 {
1012
- transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
989
+ overflow: visible;
990
+ }
991
+
992
+ .c6 >div {
993
+ transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
1013
994
  transform-origin: center;
1014
- transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35),box-shadow 0.35s;
1015
995
  }
1016
996
 
1017
- .c6:hover,
1018
- .c6:focus {
997
+ .c6:hover >div,
998
+ .c6:focus >div {
1019
999
  transform: translateY(-10px);
1020
1000
  }
1021
1001
 
1022
- .c6:hover .c7 img,
1023
- .c6:focus .c7 img {
1024
- transform: scale(1.06);
1002
+ .c6 >.c7 {
1003
+ transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35),box-shadow 0.35s;
1025
1004
  }
1026
1005
 
1027
- .c6:hover .c15,
1028
- .c6:focus .c15 {
1029
- color: #E52630;
1006
+ .c6:hover .c9 img,
1007
+ .c6:focus .c9 img {
1008
+ transform: scale(1.06);
1030
1009
  }
1031
1010
 
1032
1011
  .c6:hover .c17,
1033
1012
  .c6:focus .c17 {
1013
+ color: #E52630;
1014
+ }
1015
+
1016
+ .c6:hover .c19,
1017
+ .c6:focus .c19 {
1034
1018
  opacity: 1;
1035
1019
  }
1036
1020
 
1037
- .c6:hover .c20,
1038
- .c6:focus .c20 {
1021
+ .c6:hover .c22,
1022
+ .c6:focus .c22 {
1039
1023
  background: #E52630;
1040
1024
  }
1041
1025
 
1042
- .c6:hover .c20 .c22,
1043
- .c6:focus .c20 .c22 {
1026
+ .c6:hover .c22 .c24,
1027
+ .c6:focus .c22 .c24 {
1044
1028
  transform: scale(1.2);
1045
1029
  }
1046
1030
  }
@@ -1062,23 +1046,6 @@ exports[`renders 2 columns layout correctly 1`] = `
1062
1046
  }
1063
1047
  }
1064
1048
 
1065
- @media (max-width:1023px) {
1066
- .c25 {
1067
- scroll-snap-align: start;
1068
- flex: 0 0 309px;
1069
- width: 309px;
1070
- flex-shrink: 0;
1071
- }
1072
- }
1073
-
1074
- @media (min-width:1024px) {
1075
- .c25 {
1076
- flex: 0 1 auto;
1077
- width: 100%;
1078
- align-self: stretch;
1079
- }
1080
- }
1081
-
1082
1049
  @media (min-width: 740px) {
1083
1050
  .c1 {
1084
1051
  padding-inline: 2rem;
@@ -1177,74 +1144,78 @@ exports[`renders 2 columns layout correctly 1`] = `
1177
1144
  className="c7 c8"
1178
1145
  >
1179
1146
  <div
1180
- className="c9 lazyload"
1181
- data-testid="PictureWrapper"
1182
- >
1183
- <img
1184
- alt=""
1185
- className="c10 lazyload"
1186
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
1187
- data-sizes="auto"
1188
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
1189
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
1190
- data-testid="Picture"
1191
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
1192
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
1193
- />
1194
- </div>
1195
- </div>
1196
- <div
1197
- className="c11"
1198
- >
1199
- <div
1200
- className="c12"
1147
+ className="c9 c10"
1201
1148
  >
1202
- <p
1203
- className="c13"
1149
+ <div
1150
+ className="c11 lazyload"
1151
+ data-testid="PictureWrapper"
1204
1152
  >
1205
- <strong>
1206
- Load
1207
- </strong>
1208
- of text here
1209
- </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>
1210
1165
  </div>
1211
1166
  <div
1212
- className="c14"
1167
+ className="c13"
1213
1168
  >
1214
- <span
1215
- className="c15 c16"
1169
+ <div
1170
+ className="c14"
1216
1171
  >
1217
- test go
1218
- <img
1219
- alt=""
1220
- aria-hidden="true"
1221
- className="c17 c18"
1222
- src="mock.asset"
1223
- />
1224
- </span>
1172
+ <p
1173
+ className="c15"
1174
+ >
1175
+ <strong>
1176
+ Load
1177
+ </strong>
1178
+ of text here
1179
+ </p>
1180
+ </div>
1225
1181
  <div
1226
- className="c19"
1182
+ className="c16"
1227
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>
1228
1195
  <div
1229
- className="c20 c21"
1196
+ className="c21"
1230
1197
  >
1231
- <span
1198
+ <div
1232
1199
  className="c22 c23"
1233
1200
  >
1234
- <svg
1235
- className="c24"
1236
- fill="none"
1237
- height="15"
1238
- viewBox="0 0 15 15"
1239
- width="15"
1240
- xmlns="http://www.w3.org/2000/svg"
1201
+ <span
1202
+ className="c24 c25"
1241
1203
  >
1242
- <path
1243
- 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"
1244
- fill="currentColor"
1245
- />
1246
- </svg>
1247
- </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>
1248
1219
  </div>
1249
1220
  </div>
1250
1221
  </div>
@@ -1252,45 +1223,49 @@ exports[`renders 2 columns layout correctly 1`] = `
1252
1223
  </a>
1253
1224
  </div>
1254
1225
  <div
1255
- className="c25"
1226
+ className="c4"
1256
1227
  >
1257
1228
  <div
1258
- className="c26"
1229
+ className="c27"
1259
1230
  >
1260
1231
  <div
1261
1232
  className="c7 c8"
1262
1233
  >
1263
1234
  <div
1264
- className="c9 lazyload"
1265
- data-testid="PictureWrapper"
1235
+ className="c9 c10"
1266
1236
  >
1267
- <img
1268
- alt=""
1269
- className="c10 lazyload"
1270
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
1271
- data-sizes="auto"
1272
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
1273
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
1274
- data-testid="Picture"
1275
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
1276
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
1277
- />
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>
1278
1253
  </div>
1279
- </div>
1280
- <div
1281
- className="c11"
1282
- >
1283
1254
  <div
1284
- className="c12"
1255
+ className="c13"
1285
1256
  >
1286
- <p
1287
- className="c13"
1257
+ <div
1258
+ className="c14"
1288
1259
  >
1289
- <strong>
1290
- Load
1291
- </strong>
1292
- of text here
1293
- </p>
1260
+ <p
1261
+ className="c15"
1262
+ >
1263
+ <strong>
1264
+ Load
1265
+ </strong>
1266
+ of text here
1267
+ </p>
1268
+ </div>
1294
1269
  </div>
1295
1270
  </div>
1296
1271
  </div>
@@ -1309,74 +1284,78 @@ exports[`renders 2 columns layout correctly 1`] = `
1309
1284
  className="c7 c8"
1310
1285
  >
1311
1286
  <div
1312
- className="c9 lazyload"
1313
- data-testid="PictureWrapper"
1287
+ className="c9 c10"
1314
1288
  >
1315
- <img
1316
- alt=""
1317
- className="c10 lazyload"
1318
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
1319
- data-sizes="auto"
1320
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
1321
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
1322
- data-testid="Picture"
1323
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
1324
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
1325
- />
1326
- </div>
1327
- </div>
1328
- <div
1329
- className="c11"
1330
- >
1331
- <div
1332
- className="c12"
1333
- >
1334
- <p
1335
- className="c13"
1289
+ <div
1290
+ className="c11 lazyload"
1291
+ data-testid="PictureWrapper"
1336
1292
  >
1337
- <strong>
1338
- Load
1339
- </strong>
1340
- of text here
1341
- </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>
1342
1305
  </div>
1343
1306
  <div
1344
- className="c14"
1307
+ className="c13"
1345
1308
  >
1346
- <span
1347
- className="c15 c16"
1309
+ <div
1310
+ className="c14"
1348
1311
  >
1349
- test go
1350
- <img
1351
- alt=""
1352
- aria-hidden="true"
1353
- className="c17 c18"
1354
- src="mock.asset"
1355
- />
1356
- </span>
1312
+ <p
1313
+ className="c15"
1314
+ >
1315
+ <strong>
1316
+ Load
1317
+ </strong>
1318
+ of text here
1319
+ </p>
1320
+ </div>
1357
1321
  <div
1358
- className="c19"
1322
+ className="c16"
1359
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>
1360
1335
  <div
1361
- className="c20 c21"
1336
+ className="c21"
1362
1337
  >
1363
- <span
1338
+ <div
1364
1339
  className="c22 c23"
1365
1340
  >
1366
- <svg
1367
- className="c24"
1368
- fill="none"
1369
- height="15"
1370
- viewBox="0 0 15 15"
1371
- width="15"
1372
- xmlns="http://www.w3.org/2000/svg"
1341
+ <span
1342
+ className="c24 c25"
1373
1343
  >
1374
- <path
1375
- 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"
1376
- fill="currentColor"
1377
- />
1378
- </svg>
1379
- </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>
1380
1359
  </div>
1381
1360
  </div>
1382
1361
  </div>
@@ -1394,54 +1373,58 @@ exports[`renders 2 columns layout correctly 1`] = `
1394
1373
  type="standard"
1395
1374
  >
1396
1375
  <div
1397
- className="c11"
1376
+ className="c7 c8"
1398
1377
  >
1399
1378
  <div
1400
- className="c12"
1401
- >
1402
- <p
1403
- className="c13"
1404
- >
1405
- Load of text here
1406
- </p>
1407
- </div>
1408
- <div
1409
- className="c14"
1379
+ className="c13"
1410
1380
  >
1411
- <span
1412
- className="c15 c16"
1381
+ <div
1382
+ className="c14"
1413
1383
  >
1414
- View card
1415
- <img
1416
- alt=""
1417
- aria-hidden="true"
1418
- className="c17 c18"
1419
- src="mock.asset"
1420
- />
1421
- </span>
1384
+ <p
1385
+ className="c15"
1386
+ >
1387
+ Load of text here
1388
+ </p>
1389
+ </div>
1422
1390
  <div
1423
- className="c19"
1391
+ className="c16"
1424
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>
1425
1404
  <div
1426
- className="c20 c21"
1405
+ className="c21"
1427
1406
  >
1428
- <span
1407
+ <div
1429
1408
  className="c22 c23"
1430
1409
  >
1431
- <svg
1432
- className="c24"
1433
- fill="none"
1434
- height="15"
1435
- viewBox="0 0 15 15"
1436
- width="15"
1437
- xmlns="http://www.w3.org/2000/svg"
1410
+ <span
1411
+ className="c24 c25"
1438
1412
  >
1439
- <path
1440
- 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"
1441
- fill="currentColor"
1442
- />
1443
- </svg>
1444
- </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>
1445
1428
  </div>
1446
1429
  </div>
1447
1430
  </div>
@@ -1455,7 +1438,7 @@ exports[`renders 2 columns layout correctly 1`] = `
1455
1438
  `;
1456
1439
 
1457
1440
  exports[`renders carousel mode correctly 1`] = `
1458
- .c13 {
1441
+ .c15 {
1459
1442
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
1460
1443
  font-weight: 400;
1461
1444
  text-transform: inherit;
@@ -1464,7 +1447,7 @@ exports[`renders carousel mode correctly 1`] = `
1464
1447
  line-height: 1.25rem;
1465
1448
  }
1466
1449
 
1467
- .c13 span {
1450
+ .c15 span {
1468
1451
  font-size: inherit;
1469
1452
  line-height: inherit;
1470
1453
  }
@@ -1482,21 +1465,21 @@ exports[`renders carousel mode correctly 1`] = `
1482
1465
  text-decoration: none;
1483
1466
  }
1484
1467
 
1485
- .c9 {
1468
+ .c11 {
1486
1469
  display: block;
1487
1470
  width: 100%;
1488
1471
  height: 100%;
1489
1472
  position: relative;
1490
1473
  }
1491
1474
 
1492
- .c10 {
1475
+ .c12 {
1493
1476
  width: 100%;
1494
1477
  height: 100%;
1495
1478
  display: block;
1496
1479
  object-fit: cover;
1497
1480
  }
1498
1481
 
1499
- .c18 {
1482
+ .c20 {
1500
1483
  height: 4px;
1501
1484
  width: 100%;
1502
1485
  position: absolute;
@@ -1507,7 +1490,7 @@ exports[`renders carousel mode correctly 1`] = `
1507
1490
  pointer-events: none;
1508
1491
  }
1509
1492
 
1510
- .c23 {
1493
+ .c25 {
1511
1494
  display: inline-flex;
1512
1495
  align-items: center;
1513
1496
  justify-content: center;
@@ -1516,7 +1499,7 @@ exports[`renders carousel mode correctly 1`] = `
1516
1499
  transform-origin: center;
1517
1500
  }
1518
1501
 
1519
- .c21 {
1502
+ .c23 {
1520
1503
  width: 32px;
1521
1504
  height: 32px;
1522
1505
  border-radius: 50%;
@@ -1528,20 +1511,20 @@ exports[`renders carousel mode correctly 1`] = `
1528
1511
  overflow: hidden;
1529
1512
  }
1530
1513
 
1531
- .c19 {
1514
+ .c21 {
1532
1515
  padding-left: 1rem;
1533
1516
  display: flex;
1534
1517
  align-items: center;
1535
1518
  justify-content: flex-end;
1536
1519
  }
1537
1520
 
1538
- .c24 {
1521
+ .c26 {
1539
1522
  display: inline-block;
1540
1523
  color: #FFFFFF;
1541
1524
  fill: currentColor;
1542
1525
  }
1543
1526
 
1544
- .c8 {
1527
+ .c10 {
1545
1528
  width: 100%;
1546
1529
  overflow: hidden;
1547
1530
  flex-shrink: 0;
@@ -1549,14 +1532,14 @@ exports[`renders carousel mode correctly 1`] = `
1549
1532
  border-radius: 1rem 1rem 0 0;
1550
1533
  }
1551
1534
 
1552
- .c8 img {
1535
+ .c10 img {
1553
1536
  width: 100%;
1554
1537
  height: auto;
1555
1538
  object-fit: cover;
1556
1539
  display: block;
1557
1540
  }
1558
1541
 
1559
- .c16 {
1542
+ .c18 {
1560
1543
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
1561
1544
  font-weight: 400;
1562
1545
  text-transform: inherit;
@@ -1571,6 +1554,16 @@ exports[`renders carousel mode correctly 1`] = `
1571
1554
  transition: color 0.35s;
1572
1555
  }
1573
1556
 
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;
1565
+ }
1566
+
1574
1567
  .c6 {
1575
1568
  display: flex;
1576
1569
  position: relative;
@@ -1579,25 +1572,22 @@ exports[`renders carousel mode correctly 1`] = `
1579
1572
  flex: 1 1 auto;
1580
1573
  background: transparent;
1581
1574
  border-radius: 1rem;
1582
- transition: box-shadow 0.35s;
1583
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
1584
1575
  text-decoration: none;
1585
- overflow: hidden;
1586
1576
  cursor: pointer;
1587
1577
  box-sizing: border-box;
1588
1578
  }
1589
1579
 
1590
- .c6:hover,
1591
- .c6:focus {
1580
+ .c6:hover .c7,
1581
+ .c6:focus .c7 {
1592
1582
  box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
1593
1583
  }
1594
1584
 
1595
- .c6 .c7 img {
1585
+ .c6 .c9 img {
1596
1586
  transform: scale(1);
1597
1587
  transition: transform 0.35s cubic-bezier(0.65,-0.19,0.37,1.16),box-shadow 0.35s;
1598
1588
  }
1599
1589
 
1600
- .c26 {
1590
+ .c27 {
1601
1591
  display: flex;
1602
1592
  position: relative;
1603
1593
  flex-direction: column;
@@ -1605,19 +1595,11 @@ exports[`renders carousel mode correctly 1`] = `
1605
1595
  flex: 1 1 auto;
1606
1596
  background: transparent;
1607
1597
  border-radius: 1rem;
1608
- transition: box-shadow 0.35s;
1609
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
1610
1598
  text-decoration: none;
1611
- overflow: hidden;
1612
1599
  cursor: default;
1613
1600
  box-sizing: border-box;
1614
1601
  }
1615
1602
 
1616
- .c26:hover,
1617
- .c26:focus {
1618
- box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
1619
- }
1620
-
1621
1603
  .c4 {
1622
1604
  width: auto;
1623
1605
  flex-shrink: 0;
@@ -1627,17 +1609,7 @@ exports[`renders carousel mode correctly 1`] = `
1627
1609
  border-radius: 1rem;
1628
1610
  }
1629
1611
 
1630
- .c25 {
1631
- width: auto;
1632
- flex-shrink: 0;
1633
- display: flex;
1634
- flex-direction: column;
1635
- align-self: stretch;
1636
- border-radius: 1rem;
1637
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
1638
- }
1639
-
1640
- .c11 {
1612
+ .c13 {
1641
1613
  width: 100%;
1642
1614
  background: #FFFFFF;
1643
1615
  display: flex;
@@ -1648,14 +1620,14 @@ exports[`renders carousel mode correctly 1`] = `
1648
1620
  border-radius: 0 0 1rem 1rem;
1649
1621
  }
1650
1622
 
1651
- .c12 {
1623
+ .c14 {
1652
1624
  flex: 1;
1653
1625
  display: flex;
1654
1626
  flex-direction: column;
1655
1627
  min-height: 0;
1656
1628
  }
1657
1629
 
1658
- .c14 {
1630
+ .c16 {
1659
1631
  width: 100%;
1660
1632
  display: flex;
1661
1633
  flex-direction: row;
@@ -1691,96 +1663,103 @@ exports[`renders carousel mode correctly 1`] = `
1691
1663
  }
1692
1664
 
1693
1665
  @media (min-width: 740px) {
1694
- .c13 {
1666
+ .c15 {
1695
1667
  font-size: 1rem;
1696
1668
  line-height: 1.25rem;
1697
1669
  }
1698
1670
  }
1699
1671
 
1700
1672
  @media (min-width: 1024px) {
1701
- .c13 {
1673
+ .c15 {
1702
1674
  font-size: 1.125rem;
1703
1675
  line-height: 1.375rem;
1704
1676
  }
1705
1677
  }
1706
1678
 
1707
1679
  @media (min-width: 1024px) {
1708
- .c21 {
1680
+ .c23 {
1709
1681
  background: #222222;
1710
1682
  }
1711
1683
  }
1712
1684
 
1713
1685
  @media (min-width: 740px) {
1714
- .c16 {
1686
+ .c18 {
1715
1687
  font-size: 1rem;
1716
1688
  line-height: 1.25rem;
1717
1689
  }
1718
1690
  }
1719
1691
 
1720
1692
  @media (min-width: 1024px) {
1721
- .c16 {
1693
+ .c18 {
1722
1694
  font-size: 1.125rem;
1723
1695
  line-height: 1.375rem;
1724
1696
  }
1725
1697
  }
1726
1698
 
1727
1699
  @media (min-width:1024px) {
1728
- .c16 {
1700
+ .c18 {
1729
1701
  color: #222222;
1730
1702
  }
1731
1703
  }
1732
1704
 
1733
1705
  @media (min-width: 740px) {
1734
- .c6:hover .c15,
1735
- .c6:focus .c15 {
1706
+ .c6:hover .c17,
1707
+ .c6:focus .c17 {
1736
1708
  color: #E52630;
1737
1709
  }
1738
1710
 
1739
- .c6:hover .c17,
1740
- .c6:focus .c17 {
1711
+ .c6:hover .c19,
1712
+ .c6:focus .c19 {
1741
1713
  opacity: 1;
1742
1714
  }
1743
1715
 
1744
- .c6:hover .c20 .c22,
1745
- .c6:focus .c20 .c22 {
1716
+ .c6:hover .c22 .c24,
1717
+ .c6:focus .c22 .c24 {
1746
1718
  transform: scale(1.2);
1747
1719
  }
1748
1720
  }
1749
1721
 
1750
1722
  @media (min-width: 1024px) {
1751
1723
  .c6 {
1752
- transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
1724
+ overflow: visible;
1725
+ }
1726
+
1727
+ .c6 >div {
1728
+ transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
1753
1729
  transform-origin: center;
1754
- transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35),box-shadow 0.35s;
1755
1730
  }
1756
1731
 
1757
- .c6:hover,
1758
- .c6:focus {
1732
+ .c6:hover >div,
1733
+ .c6:focus >div {
1759
1734
  transform: translateY(-10px);
1760
1735
  }
1761
1736
 
1762
- .c6:hover .c7 img,
1763
- .c6:focus .c7 img {
1764
- transform: scale(1.06);
1737
+ .c6 >.c7 {
1738
+ transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35),box-shadow 0.35s;
1765
1739
  }
1766
1740
 
1767
- .c6:hover .c15,
1768
- .c6:focus .c15 {
1769
- color: #E52630;
1741
+ .c6:hover .c9 img,
1742
+ .c6:focus .c9 img {
1743
+ transform: scale(1.06);
1770
1744
  }
1771
1745
 
1772
1746
  .c6:hover .c17,
1773
1747
  .c6:focus .c17 {
1748
+ color: #E52630;
1749
+ }
1750
+
1751
+ .c6:hover .c19,
1752
+ .c6:focus .c19 {
1774
1753
  opacity: 1;
1775
1754
  }
1776
1755
 
1777
- .c6:hover .c20,
1778
- .c6:focus .c20 {
1756
+ .c6:hover .c22,
1757
+ .c6:focus .c22 {
1779
1758
  background: #E52630;
1780
1759
  }
1781
1760
 
1782
- .c6:hover .c20 .c22,
1783
- .c6:focus .c20 .c22 {
1761
+ .c6:hover .c22 .c24,
1762
+ .c6:focus .c22 .c24 {
1784
1763
  transform: scale(1.2);
1785
1764
  }
1786
1765
  }
@@ -1802,23 +1781,6 @@ exports[`renders carousel mode correctly 1`] = `
1802
1781
  }
1803
1782
  }
1804
1783
 
1805
- @media (max-width:1023px) {
1806
- .c25 {
1807
- scroll-snap-align: start;
1808
- flex: 0 0 309px;
1809
- width: 309px;
1810
- flex-shrink: 0;
1811
- }
1812
- }
1813
-
1814
- @media (min-width:1024px) {
1815
- .c25 {
1816
- flex: 0 1 auto;
1817
- width: clamp(261px,calc((100% - 4rem) / 3),363px);
1818
- align-self: stretch;
1819
- }
1820
- }
1821
-
1822
1784
  @media (min-width: 740px) {
1823
1785
  .c1 {
1824
1786
  padding-inline: 2rem;
@@ -1897,74 +1859,78 @@ exports[`renders carousel mode correctly 1`] = `
1897
1859
  className="c7 c8"
1898
1860
  >
1899
1861
  <div
1900
- className="c9 lazyload"
1901
- data-testid="PictureWrapper"
1902
- >
1903
- <img
1904
- alt=""
1905
- className="c10 lazyload"
1906
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
1907
- data-sizes="auto"
1908
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
1909
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
1910
- data-testid="Picture"
1911
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
1912
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
1913
- />
1914
- </div>
1915
- </div>
1916
- <div
1917
- className="c11"
1918
- >
1919
- <div
1920
- className="c12"
1862
+ className="c9 c10"
1921
1863
  >
1922
- <p
1923
- className="c13"
1864
+ <div
1865
+ className="c11 lazyload"
1866
+ data-testid="PictureWrapper"
1924
1867
  >
1925
- <strong>
1926
- Load
1927
- </strong>
1928
- of text here
1929
- </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>
1930
1880
  </div>
1931
1881
  <div
1932
- className="c14"
1882
+ className="c13"
1933
1883
  >
1934
- <span
1935
- className="c15 c16"
1884
+ <div
1885
+ className="c14"
1936
1886
  >
1937
- test go
1938
- <img
1939
- alt=""
1940
- aria-hidden="true"
1941
- className="c17 c18"
1942
- src="mock.asset"
1943
- />
1944
- </span>
1887
+ <p
1888
+ className="c15"
1889
+ >
1890
+ <strong>
1891
+ Load
1892
+ </strong>
1893
+ of text here
1894
+ </p>
1895
+ </div>
1945
1896
  <div
1946
- className="c19"
1897
+ className="c16"
1947
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>
1948
1910
  <div
1949
- className="c20 c21"
1911
+ className="c21"
1950
1912
  >
1951
- <span
1913
+ <div
1952
1914
  className="c22 c23"
1953
1915
  >
1954
- <svg
1955
- className="c24"
1956
- fill="none"
1957
- height="15"
1958
- viewBox="0 0 15 15"
1959
- width="15"
1960
- xmlns="http://www.w3.org/2000/svg"
1916
+ <span
1917
+ className="c24 c25"
1961
1918
  >
1962
- <path
1963
- 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"
1964
- fill="currentColor"
1965
- />
1966
- </svg>
1967
- </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>
1968
1934
  </div>
1969
1935
  </div>
1970
1936
  </div>
@@ -1972,45 +1938,49 @@ exports[`renders carousel mode correctly 1`] = `
1972
1938
  </a>
1973
1939
  </div>
1974
1940
  <div
1975
- className="c25"
1941
+ className="c4"
1976
1942
  >
1977
1943
  <div
1978
- className="c26"
1944
+ className="c27"
1979
1945
  >
1980
1946
  <div
1981
1947
  className="c7 c8"
1982
1948
  >
1983
1949
  <div
1984
- className="c9 lazyload"
1985
- data-testid="PictureWrapper"
1950
+ className="c9 c10"
1986
1951
  >
1987
- <img
1988
- alt=""
1989
- className="c10 lazyload"
1990
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
1991
- data-sizes="auto"
1992
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
1993
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
1994
- data-testid="Picture"
1995
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
1996
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
1997
- />
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>
1998
1968
  </div>
1999
- </div>
2000
- <div
2001
- className="c11"
2002
- >
2003
1969
  <div
2004
- className="c12"
1970
+ className="c13"
2005
1971
  >
2006
- <p
2007
- className="c13"
1972
+ <div
1973
+ className="c14"
2008
1974
  >
2009
- <strong>
2010
- Load
2011
- </strong>
2012
- of text here
2013
- </p>
1975
+ <p
1976
+ className="c15"
1977
+ >
1978
+ <strong>
1979
+ Load
1980
+ </strong>
1981
+ of text here
1982
+ </p>
1983
+ </div>
2014
1984
  </div>
2015
1985
  </div>
2016
1986
  </div>
@@ -2029,74 +1999,78 @@ exports[`renders carousel mode correctly 1`] = `
2029
1999
  className="c7 c8"
2030
2000
  >
2031
2001
  <div
2032
- className="c9 lazyload"
2033
- data-testid="PictureWrapper"
2034
- >
2035
- <img
2036
- alt=""
2037
- className="c10 lazyload"
2038
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
2039
- data-sizes="auto"
2040
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
2041
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
2042
- data-testid="Picture"
2043
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
2044
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
2045
- />
2046
- </div>
2047
- </div>
2048
- <div
2049
- className="c11"
2050
- >
2051
- <div
2052
- className="c12"
2002
+ className="c9 c10"
2053
2003
  >
2054
- <p
2055
- className="c13"
2004
+ <div
2005
+ className="c11 lazyload"
2006
+ data-testid="PictureWrapper"
2056
2007
  >
2057
- <strong>
2058
- Load
2059
- </strong>
2060
- of text here
2061
- </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>
2062
2020
  </div>
2063
2021
  <div
2064
- className="c14"
2022
+ className="c13"
2065
2023
  >
2066
- <span
2067
- className="c15 c16"
2024
+ <div
2025
+ className="c14"
2068
2026
  >
2069
- test go
2070
- <img
2071
- alt=""
2072
- aria-hidden="true"
2073
- className="c17 c18"
2074
- src="mock.asset"
2075
- />
2076
- </span>
2027
+ <p
2028
+ className="c15"
2029
+ >
2030
+ <strong>
2031
+ Load
2032
+ </strong>
2033
+ of text here
2034
+ </p>
2035
+ </div>
2077
2036
  <div
2078
- className="c19"
2037
+ className="c16"
2079
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>
2080
2050
  <div
2081
- className="c20 c21"
2051
+ className="c21"
2082
2052
  >
2083
- <span
2053
+ <div
2084
2054
  className="c22 c23"
2085
2055
  >
2086
- <svg
2087
- className="c24"
2088
- fill="none"
2089
- height="15"
2090
- viewBox="0 0 15 15"
2091
- width="15"
2092
- xmlns="http://www.w3.org/2000/svg"
2056
+ <span
2057
+ className="c24 c25"
2093
2058
  >
2094
- <path
2095
- 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"
2096
- fill="currentColor"
2097
- />
2098
- </svg>
2099
- </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>
2100
2074
  </div>
2101
2075
  </div>
2102
2076
  </div>
@@ -2114,54 +2088,58 @@ exports[`renders carousel mode correctly 1`] = `
2114
2088
  type="standard"
2115
2089
  >
2116
2090
  <div
2117
- className="c11"
2091
+ className="c7 c8"
2118
2092
  >
2119
2093
  <div
2120
- className="c12"
2094
+ className="c13"
2121
2095
  >
2122
- <p
2123
- className="c13"
2124
- >
2125
- Load of text here
2126
- </p>
2127
- </div>
2128
- <div
2129
- className="c14"
2130
- >
2131
- <span
2132
- className="c15 c16"
2096
+ <div
2097
+ className="c14"
2133
2098
  >
2134
- View card
2135
- <img
2136
- alt=""
2137
- aria-hidden="true"
2138
- className="c17 c18"
2139
- src="mock.asset"
2140
- />
2141
- </span>
2099
+ <p
2100
+ className="c15"
2101
+ >
2102
+ Load of text here
2103
+ </p>
2104
+ </div>
2142
2105
  <div
2143
- className="c19"
2106
+ className="c16"
2144
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>
2145
2119
  <div
2146
- className="c20 c21"
2120
+ className="c21"
2147
2121
  >
2148
- <span
2122
+ <div
2149
2123
  className="c22 c23"
2150
2124
  >
2151
- <svg
2152
- className="c24"
2153
- fill="none"
2154
- height="15"
2155
- viewBox="0 0 15 15"
2156
- width="15"
2157
- xmlns="http://www.w3.org/2000/svg"
2125
+ <span
2126
+ className="c24 c25"
2158
2127
  >
2159
- <path
2160
- 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"
2161
- fill="currentColor"
2162
- />
2163
- </svg>
2164
- </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>
2165
2143
  </div>
2166
2144
  </div>
2167
2145
  </div>
@@ -2175,7 +2153,7 @@ exports[`renders carousel mode correctly 1`] = `
2175
2153
  `;
2176
2154
 
2177
2155
  exports[`renders correctly with data prop 1`] = `
2178
- .c13 {
2156
+ .c15 {
2179
2157
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
2180
2158
  font-weight: 400;
2181
2159
  text-transform: inherit;
@@ -2184,7 +2162,7 @@ exports[`renders correctly with data prop 1`] = `
2184
2162
  line-height: 1.25rem;
2185
2163
  }
2186
2164
 
2187
- .c13 span {
2165
+ .c15 span {
2188
2166
  font-size: inherit;
2189
2167
  line-height: inherit;
2190
2168
  }
@@ -2202,21 +2180,21 @@ exports[`renders correctly with data prop 1`] = `
2202
2180
  text-decoration: none;
2203
2181
  }
2204
2182
 
2205
- .c9 {
2183
+ .c11 {
2206
2184
  display: block;
2207
2185
  width: 100%;
2208
2186
  height: 100%;
2209
2187
  position: relative;
2210
2188
  }
2211
2189
 
2212
- .c10 {
2190
+ .c12 {
2213
2191
  width: 100%;
2214
2192
  height: 100%;
2215
2193
  display: block;
2216
2194
  object-fit: cover;
2217
2195
  }
2218
2196
 
2219
- .c18 {
2197
+ .c20 {
2220
2198
  height: 4px;
2221
2199
  width: 100%;
2222
2200
  position: absolute;
@@ -2227,7 +2205,7 @@ exports[`renders correctly with data prop 1`] = `
2227
2205
  pointer-events: none;
2228
2206
  }
2229
2207
 
2230
- .c23 {
2208
+ .c25 {
2231
2209
  display: inline-flex;
2232
2210
  align-items: center;
2233
2211
  justify-content: center;
@@ -2236,7 +2214,7 @@ exports[`renders correctly with data prop 1`] = `
2236
2214
  transform-origin: center;
2237
2215
  }
2238
2216
 
2239
- .c21 {
2217
+ .c23 {
2240
2218
  width: 32px;
2241
2219
  height: 32px;
2242
2220
  border-radius: 50%;
@@ -2248,20 +2226,20 @@ exports[`renders correctly with data prop 1`] = `
2248
2226
  overflow: hidden;
2249
2227
  }
2250
2228
 
2251
- .c19 {
2229
+ .c21 {
2252
2230
  padding-left: 1rem;
2253
2231
  display: flex;
2254
2232
  align-items: center;
2255
2233
  justify-content: flex-end;
2256
2234
  }
2257
2235
 
2258
- .c24 {
2236
+ .c26 {
2259
2237
  display: inline-block;
2260
2238
  color: #FFFFFF;
2261
2239
  fill: currentColor;
2262
2240
  }
2263
2241
 
2264
- .c8 {
2242
+ .c10 {
2265
2243
  width: 100%;
2266
2244
  overflow: hidden;
2267
2245
  flex-shrink: 0;
@@ -2269,14 +2247,14 @@ exports[`renders correctly with data prop 1`] = `
2269
2247
  border-radius: 1rem 1rem 0 0;
2270
2248
  }
2271
2249
 
2272
- .c8 img {
2250
+ .c10 img {
2273
2251
  width: 100%;
2274
2252
  height: auto;
2275
2253
  object-fit: cover;
2276
2254
  display: block;
2277
2255
  }
2278
2256
 
2279
- .c16 {
2257
+ .c18 {
2280
2258
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
2281
2259
  font-weight: 400;
2282
2260
  text-transform: inherit;
@@ -2291,6 +2269,16 @@ exports[`renders correctly with data prop 1`] = `
2291
2269
  transition: color 0.35s;
2292
2270
  }
2293
2271
 
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;
2280
+ }
2281
+
2294
2282
  .c6 {
2295
2283
  display: flex;
2296
2284
  position: relative;
@@ -2299,25 +2287,22 @@ exports[`renders correctly with data prop 1`] = `
2299
2287
  flex: 1 1 auto;
2300
2288
  background: transparent;
2301
2289
  border-radius: 1rem;
2302
- transition: box-shadow 0.35s;
2303
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
2304
2290
  text-decoration: none;
2305
- overflow: hidden;
2306
2291
  cursor: pointer;
2307
2292
  box-sizing: border-box;
2308
2293
  }
2309
2294
 
2310
- .c6:hover,
2311
- .c6:focus {
2295
+ .c6:hover .c7,
2296
+ .c6:focus .c7 {
2312
2297
  box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
2313
2298
  }
2314
2299
 
2315
- .c6 .c7 img {
2300
+ .c6 .c9 img {
2316
2301
  transform: scale(1);
2317
2302
  transition: transform 0.35s cubic-bezier(0.65,-0.19,0.37,1.16),box-shadow 0.35s;
2318
2303
  }
2319
2304
 
2320
- .c26 {
2305
+ .c27 {
2321
2306
  display: flex;
2322
2307
  position: relative;
2323
2308
  flex-direction: column;
@@ -2325,19 +2310,11 @@ exports[`renders correctly with data prop 1`] = `
2325
2310
  flex: 1 1 auto;
2326
2311
  background: transparent;
2327
2312
  border-radius: 1rem;
2328
- transition: box-shadow 0.35s;
2329
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
2330
2313
  text-decoration: none;
2331
- overflow: hidden;
2332
2314
  cursor: default;
2333
2315
  box-sizing: border-box;
2334
2316
  }
2335
2317
 
2336
- .c26:hover,
2337
- .c26:focus {
2338
- box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
2339
- }
2340
-
2341
2318
  .c4 {
2342
2319
  width: auto;
2343
2320
  flex-shrink: 0;
@@ -2347,17 +2324,7 @@ exports[`renders correctly with data prop 1`] = `
2347
2324
  border-radius: 1rem;
2348
2325
  }
2349
2326
 
2350
- .c25 {
2351
- width: auto;
2352
- flex-shrink: 0;
2353
- display: flex;
2354
- flex-direction: column;
2355
- align-self: stretch;
2356
- border-radius: 1rem;
2357
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
2358
- }
2359
-
2360
- .c11 {
2327
+ .c13 {
2361
2328
  width: 100%;
2362
2329
  background: #FFFFFF;
2363
2330
  display: flex;
@@ -2368,14 +2335,14 @@ exports[`renders correctly with data prop 1`] = `
2368
2335
  border-radius: 0 0 1rem 1rem;
2369
2336
  }
2370
2337
 
2371
- .c12 {
2338
+ .c14 {
2372
2339
  flex: 1;
2373
2340
  display: flex;
2374
2341
  flex-direction: column;
2375
2342
  min-height: 0;
2376
2343
  }
2377
2344
 
2378
- .c14 {
2345
+ .c16 {
2379
2346
  width: 100%;
2380
2347
  display: flex;
2381
2348
  flex-direction: row;
@@ -2411,96 +2378,103 @@ exports[`renders correctly with data prop 1`] = `
2411
2378
  }
2412
2379
 
2413
2380
  @media (min-width: 740px) {
2414
- .c13 {
2381
+ .c15 {
2415
2382
  font-size: 1rem;
2416
2383
  line-height: 1.25rem;
2417
2384
  }
2418
2385
  }
2419
2386
 
2420
2387
  @media (min-width: 1024px) {
2421
- .c13 {
2388
+ .c15 {
2422
2389
  font-size: 1.125rem;
2423
2390
  line-height: 1.375rem;
2424
2391
  }
2425
2392
  }
2426
2393
 
2427
2394
  @media (min-width: 1024px) {
2428
- .c21 {
2395
+ .c23 {
2429
2396
  background: #222222;
2430
2397
  }
2431
2398
  }
2432
2399
 
2433
2400
  @media (min-width: 740px) {
2434
- .c16 {
2401
+ .c18 {
2435
2402
  font-size: 1rem;
2436
2403
  line-height: 1.25rem;
2437
2404
  }
2438
2405
  }
2439
2406
 
2440
2407
  @media (min-width: 1024px) {
2441
- .c16 {
2408
+ .c18 {
2442
2409
  font-size: 1.125rem;
2443
2410
  line-height: 1.375rem;
2444
2411
  }
2445
2412
  }
2446
2413
 
2447
2414
  @media (min-width:1024px) {
2448
- .c16 {
2415
+ .c18 {
2449
2416
  color: #222222;
2450
2417
  }
2451
2418
  }
2452
2419
 
2453
2420
  @media (min-width: 740px) {
2454
- .c6:hover .c15,
2455
- .c6:focus .c15 {
2421
+ .c6:hover .c17,
2422
+ .c6:focus .c17 {
2456
2423
  color: #E52630;
2457
2424
  }
2458
2425
 
2459
- .c6:hover .c17,
2460
- .c6:focus .c17 {
2426
+ .c6:hover .c19,
2427
+ .c6:focus .c19 {
2461
2428
  opacity: 1;
2462
2429
  }
2463
2430
 
2464
- .c6:hover .c20 .c22,
2465
- .c6:focus .c20 .c22 {
2431
+ .c6:hover .c22 .c24,
2432
+ .c6:focus .c22 .c24 {
2466
2433
  transform: scale(1.2);
2467
2434
  }
2468
2435
  }
2469
2436
 
2470
2437
  @media (min-width: 1024px) {
2471
2438
  .c6 {
2472
- transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
2439
+ overflow: visible;
2440
+ }
2441
+
2442
+ .c6 >div {
2443
+ transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
2473
2444
  transform-origin: center;
2474
- transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35),box-shadow 0.35s;
2475
2445
  }
2476
2446
 
2477
- .c6:hover,
2478
- .c6:focus {
2447
+ .c6:hover >div,
2448
+ .c6:focus >div {
2479
2449
  transform: translateY(-10px);
2480
2450
  }
2481
2451
 
2482
- .c6:hover .c7 img,
2483
- .c6:focus .c7 img {
2484
- transform: scale(1.06);
2452
+ .c6 >.c7 {
2453
+ transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35),box-shadow 0.35s;
2485
2454
  }
2486
2455
 
2487
- .c6:hover .c15,
2488
- .c6:focus .c15 {
2489
- color: #E52630;
2456
+ .c6:hover .c9 img,
2457
+ .c6:focus .c9 img {
2458
+ transform: scale(1.06);
2490
2459
  }
2491
2460
 
2492
2461
  .c6:hover .c17,
2493
2462
  .c6:focus .c17 {
2463
+ color: #E52630;
2464
+ }
2465
+
2466
+ .c6:hover .c19,
2467
+ .c6:focus .c19 {
2494
2468
  opacity: 1;
2495
2469
  }
2496
2470
 
2497
- .c6:hover .c20,
2498
- .c6:focus .c20 {
2471
+ .c6:hover .c22,
2472
+ .c6:focus .c22 {
2499
2473
  background: #E52630;
2500
2474
  }
2501
2475
 
2502
- .c6:hover .c20 .c22,
2503
- .c6:focus .c20 .c22 {
2476
+ .c6:hover .c22 .c24,
2477
+ .c6:focus .c22 .c24 {
2504
2478
  transform: scale(1.2);
2505
2479
  }
2506
2480
  }
@@ -2522,23 +2496,6 @@ exports[`renders correctly with data prop 1`] = `
2522
2496
  }
2523
2497
  }
2524
2498
 
2525
- @media (max-width:1023px) {
2526
- .c25 {
2527
- scroll-snap-align: start;
2528
- flex: 0 0 309px;
2529
- width: 309px;
2530
- flex-shrink: 0;
2531
- }
2532
- }
2533
-
2534
- @media (min-width:1024px) {
2535
- .c25 {
2536
- flex: 0 1 auto;
2537
- width: clamp(261px,calc((100% - 4rem) / 3),363px);
2538
- align-self: stretch;
2539
- }
2540
- }
2541
-
2542
2499
  @media (min-width: 740px) {
2543
2500
  .c1 {
2544
2501
  padding-inline: 2rem;
@@ -2617,74 +2574,78 @@ exports[`renders correctly with data prop 1`] = `
2617
2574
  className="c7 c8"
2618
2575
  >
2619
2576
  <div
2620
- className="c9 lazyload"
2621
- data-testid="PictureWrapper"
2622
- >
2623
- <img
2624
- alt=""
2625
- className="c10 lazyload"
2626
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
2627
- data-sizes="auto"
2628
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
2629
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
2630
- data-testid="Picture"
2631
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
2632
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
2633
- />
2634
- </div>
2635
- </div>
2636
- <div
2637
- className="c11"
2638
- >
2639
- <div
2640
- className="c12"
2577
+ className="c9 c10"
2641
2578
  >
2642
- <p
2643
- className="c13"
2579
+ <div
2580
+ className="c11 lazyload"
2581
+ data-testid="PictureWrapper"
2644
2582
  >
2645
- <strong>
2646
- Load
2647
- </strong>
2648
- of text here
2649
- </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>
2650
2595
  </div>
2651
2596
  <div
2652
- className="c14"
2597
+ className="c13"
2653
2598
  >
2654
- <span
2655
- className="c15 c16"
2599
+ <div
2600
+ className="c14"
2656
2601
  >
2657
- test go
2658
- <img
2659
- alt=""
2660
- aria-hidden="true"
2661
- className="c17 c18"
2662
- src="mock.asset"
2663
- />
2664
- </span>
2602
+ <p
2603
+ className="c15"
2604
+ >
2605
+ <strong>
2606
+ Load
2607
+ </strong>
2608
+ of text here
2609
+ </p>
2610
+ </div>
2665
2611
  <div
2666
- className="c19"
2612
+ className="c16"
2667
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>
2668
2625
  <div
2669
- className="c20 c21"
2626
+ className="c21"
2670
2627
  >
2671
- <span
2628
+ <div
2672
2629
  className="c22 c23"
2673
2630
  >
2674
- <svg
2675
- className="c24"
2676
- fill="none"
2677
- height="15"
2678
- viewBox="0 0 15 15"
2679
- width="15"
2680
- xmlns="http://www.w3.org/2000/svg"
2631
+ <span
2632
+ className="c24 c25"
2681
2633
  >
2682
- <path
2683
- 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"
2684
- fill="currentColor"
2685
- />
2686
- </svg>
2687
- </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>
2688
2649
  </div>
2689
2650
  </div>
2690
2651
  </div>
@@ -2692,45 +2653,49 @@ exports[`renders correctly with data prop 1`] = `
2692
2653
  </a>
2693
2654
  </div>
2694
2655
  <div
2695
- className="c25"
2656
+ className="c4"
2696
2657
  >
2697
2658
  <div
2698
- className="c26"
2659
+ className="c27"
2699
2660
  >
2700
2661
  <div
2701
2662
  className="c7 c8"
2702
2663
  >
2703
2664
  <div
2704
- className="c9 lazyload"
2705
- data-testid="PictureWrapper"
2665
+ className="c9 c10"
2706
2666
  >
2707
- <img
2708
- alt=""
2709
- className="c10 lazyload"
2710
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
2711
- data-sizes="auto"
2712
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
2713
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
2714
- data-testid="Picture"
2715
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
2716
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
2717
- />
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>
2718
2683
  </div>
2719
- </div>
2720
- <div
2721
- className="c11"
2722
- >
2723
2684
  <div
2724
- className="c12"
2685
+ className="c13"
2725
2686
  >
2726
- <p
2727
- className="c13"
2687
+ <div
2688
+ className="c14"
2728
2689
  >
2729
- <strong>
2730
- Load
2731
- </strong>
2732
- of text here
2733
- </p>
2690
+ <p
2691
+ className="c15"
2692
+ >
2693
+ <strong>
2694
+ Load
2695
+ </strong>
2696
+ of text here
2697
+ </p>
2698
+ </div>
2734
2699
  </div>
2735
2700
  </div>
2736
2701
  </div>
@@ -2749,74 +2714,78 @@ exports[`renders correctly with data prop 1`] = `
2749
2714
  className="c7 c8"
2750
2715
  >
2751
2716
  <div
2752
- className="c9 lazyload"
2753
- data-testid="PictureWrapper"
2754
- >
2755
- <img
2756
- alt=""
2757
- className="c10 lazyload"
2758
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
2759
- data-sizes="auto"
2760
- data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
2761
- data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
2762
- data-testid="Picture"
2763
- src="@component-library/src/styleguide/assets/challenge-1.jpg"
2764
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
2765
- />
2766
- </div>
2767
- </div>
2768
- <div
2769
- className="c11"
2770
- >
2771
- <div
2772
- className="c12"
2717
+ className="c9 c10"
2773
2718
  >
2774
- <p
2775
- className="c13"
2719
+ <div
2720
+ className="c11 lazyload"
2721
+ data-testid="PictureWrapper"
2776
2722
  >
2777
- <strong>
2778
- Load
2779
- </strong>
2780
- of text here
2781
- </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>
2782
2735
  </div>
2783
2736
  <div
2784
- className="c14"
2737
+ className="c13"
2785
2738
  >
2786
- <span
2787
- className="c15 c16"
2739
+ <div
2740
+ className="c14"
2788
2741
  >
2789
- test go
2790
- <img
2791
- alt=""
2792
- aria-hidden="true"
2793
- className="c17 c18"
2794
- src="mock.asset"
2795
- />
2796
- </span>
2742
+ <p
2743
+ className="c15"
2744
+ >
2745
+ <strong>
2746
+ Load
2747
+ </strong>
2748
+ of text here
2749
+ </p>
2750
+ </div>
2797
2751
  <div
2798
- className="c19"
2752
+ className="c16"
2799
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>
2800
2765
  <div
2801
- className="c20 c21"
2766
+ className="c21"
2802
2767
  >
2803
- <span
2768
+ <div
2804
2769
  className="c22 c23"
2805
2770
  >
2806
- <svg
2807
- className="c24"
2808
- fill="none"
2809
- height="15"
2810
- viewBox="0 0 15 15"
2811
- width="15"
2812
- xmlns="http://www.w3.org/2000/svg"
2771
+ <span
2772
+ className="c24 c25"
2813
2773
  >
2814
- <path
2815
- 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"
2816
- fill="currentColor"
2817
- />
2818
- </svg>
2819
- </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>
2820
2789
  </div>
2821
2790
  </div>
2822
2791
  </div>
@@ -2834,54 +2803,58 @@ exports[`renders correctly with data prop 1`] = `
2834
2803
  type="standard"
2835
2804
  >
2836
2805
  <div
2837
- className="c11"
2806
+ className="c7 c8"
2838
2807
  >
2839
2808
  <div
2840
- className="c12"
2841
- >
2842
- <p
2843
- className="c13"
2844
- >
2845
- Load of text here
2846
- </p>
2847
- </div>
2848
- <div
2849
- className="c14"
2809
+ className="c13"
2850
2810
  >
2851
- <span
2852
- className="c15 c16"
2811
+ <div
2812
+ className="c14"
2853
2813
  >
2854
- View card
2855
- <img
2856
- alt=""
2857
- aria-hidden="true"
2858
- className="c17 c18"
2859
- src="mock.asset"
2860
- />
2861
- </span>
2814
+ <p
2815
+ className="c15"
2816
+ >
2817
+ Load of text here
2818
+ </p>
2819
+ </div>
2862
2820
  <div
2863
- className="c19"
2821
+ className="c16"
2864
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>
2865
2834
  <div
2866
- className="c20 c21"
2835
+ className="c21"
2867
2836
  >
2868
- <span
2837
+ <div
2869
2838
  className="c22 c23"
2870
2839
  >
2871
- <svg
2872
- className="c24"
2873
- fill="none"
2874
- height="15"
2875
- viewBox="0 0 15 15"
2876
- width="15"
2877
- xmlns="http://www.w3.org/2000/svg"
2840
+ <span
2841
+ className="c24 c25"
2878
2842
  >
2879
- <path
2880
- 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"
2881
- fill="currentColor"
2882
- />
2883
- </svg>
2884
- </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>
2885
2858
  </div>
2886
2859
  </div>
2887
2860
  </div>