@oslokommune/punkt-css 18.3.1 → 18.5.0

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 (84) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/dist/css/components/backlink.css +4 -0
  3. package/dist/css/components/backlink.min.css +1 -1
  4. package/dist/css/components/breadcrumbs.css +4 -0
  5. package/dist/css/components/breadcrumbs.min.css +1 -1
  6. package/dist/css/components/calendar.css +1 -0
  7. package/dist/css/components/calendar.min.css +1 -1
  8. package/dist/css/components/card.css +64 -11
  9. package/dist/css/components/card.min.css +1 -1
  10. package/dist/css/components/consent.css +3 -0
  11. package/dist/css/components/consent.min.css +1 -0
  12. package/dist/css/components/datepicker.css +5 -0
  13. package/dist/css/components/datepicker.min.css +1 -1
  14. package/dist/css/components/footer.css +5 -0
  15. package/dist/css/components/footer.min.css +1 -1
  16. package/dist/css/components/header-global.css +4 -0
  17. package/dist/css/components/header-global.min.css +1 -1
  18. package/dist/css/components/header-menu.css +4 -0
  19. package/dist/css/components/header-menu.min.css +1 -1
  20. package/dist/css/components/header-service.css +4 -0
  21. package/dist/css/components/header-service.min.css +1 -1
  22. package/dist/css/components/header-user-menu.css +4 -0
  23. package/dist/css/components/header-user-menu.min.css +1 -1
  24. package/dist/css/components/header.css +4 -0
  25. package/dist/css/components/header.min.css +1 -1
  26. package/dist/css/components/heading.css +3 -0
  27. package/dist/css/components/heading.min.css +1 -1
  28. package/dist/css/components/inputwrapper.css +4 -0
  29. package/dist/css/components/inputwrapper.min.css +1 -1
  30. package/dist/css/components/loader.css +7 -0
  31. package/dist/css/components/loader.min.css +1 -1
  32. package/dist/css/components/modal.css +4 -0
  33. package/dist/css/components/modal.min.css +1 -1
  34. package/dist/css/components/progressbar.css +4 -0
  35. package/dist/css/components/progressbar.min.css +1 -1
  36. package/dist/css/components/searchinput.css +4 -0
  37. package/dist/css/components/searchinput.min.css +1 -1
  38. package/dist/css/elements/button.css +7 -0
  39. package/dist/css/elements/button.min.css +1 -1
  40. package/dist/css/elements/checkbox-radio.css +8 -3
  41. package/dist/css/elements/checkbox-radio.min.css +1 -1
  42. package/dist/css/elements/input.css +3 -5
  43. package/dist/css/elements/input.min.css +1 -1
  44. package/dist/css/pkt-base.css +578 -1
  45. package/dist/css/pkt-base.min.css +1 -1
  46. package/dist/css/pkt-components.css +133 -11
  47. package/dist/css/pkt-components.min.css +1 -1
  48. package/dist/css/pkt-docs.css +729 -20
  49. package/dist/css/pkt-docs.min.css +1 -1
  50. package/dist/css/pkt-elements.css +18 -8
  51. package/dist/css/pkt-elements.min.css +1 -1
  52. package/dist/css/pkt-grid.css +87 -0
  53. package/dist/css/pkt-grid.min.css +1 -1
  54. package/dist/css/pkt.css +729 -20
  55. package/dist/css/pkt.layer.css +711 -20
  56. package/dist/css/pkt.layer.min.css +1 -1
  57. package/dist/css/pkt.min.css +1 -1
  58. package/dist/scss/abstracts/variables/_index.scss +1 -1
  59. package/dist/scss/base/_grid-responsive.scss +10 -1
  60. package/dist/scss/base/_grid.scss +19 -1
  61. package/dist/scss/base/_link.scss +4 -0
  62. package/dist/scss/components/_backlink.scss +4 -0
  63. package/dist/scss/components/_breadcrumbs.scss +4 -0
  64. package/dist/scss/components/_calendar.scss +1 -0
  65. package/dist/scss/components/_card.scss +96 -19
  66. package/dist/scss/components/_consent.scss +3 -0
  67. package/dist/scss/components/_datepicker.scss +5 -0
  68. package/dist/scss/components/_footer.scss +5 -0
  69. package/dist/scss/components/_header-global.scss +4 -0
  70. package/dist/scss/components/_header-menu.scss +4 -0
  71. package/dist/scss/components/_header-service.scss +4 -0
  72. package/dist/scss/components/_header-user-menu.scss +4 -0
  73. package/dist/scss/components/_header.scss +4 -0
  74. package/dist/scss/components/_heading.scss +7 -0
  75. package/dist/scss/components/_index.scss +1 -0
  76. package/dist/scss/components/_inputwrapper.scss +4 -0
  77. package/dist/scss/components/_loader.scss +8 -0
  78. package/dist/scss/components/_modal.scss +4 -0
  79. package/dist/scss/components/_progressbar.scss +4 -0
  80. package/dist/scss/components/_searchinput.scss +4 -0
  81. package/dist/scss/elements/_button.scss +8 -0
  82. package/dist/scss/elements/_checkbox-radio.scss +5 -0
  83. package/dist/scss/elements/_input.scss +4 -5
  84. package/package.json +2 -2
@@ -3090,6 +3090,10 @@ strong {
3090
3090
  /*
3091
3091
  * Link
3092
3092
  */
3093
+ pkt-link {
3094
+ display: inline;
3095
+ }
3096
+
3093
3097
  a,
3094
3098
  .pkt-link-button {
3095
3099
  color: var(--pkt-color-text-action-normal);
@@ -3164,7 +3168,7 @@ a:active, a.pkt-link--active,
3164
3168
  .pkt-link--external::after {
3165
3169
  display: inline-block;
3166
3170
  content: " ";
3167
- --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/new-window-small.svg);
3171
+ --svg: url(https://punkt-cdn.oslo.kommune.no/18.5/icons/new-window-small.svg);
3168
3172
  background-image: var(--svg);
3169
3173
  background-repeat: no-repeat;
3170
3174
  background-size: 18px 18px;
@@ -3278,6 +3282,12 @@ button.pkt-link {
3278
3282
  padding-inline: 2rem;
3279
3283
  }
3280
3284
  }
3285
+ .pkt-grid--inline {
3286
+ display: inline-grid;
3287
+ }
3288
+ .pkt-grid--dense {
3289
+ grid-auto-flow: dense;
3290
+ }
3281
3291
  .pkt-grid--full {
3282
3292
  max-width: 100%;
3283
3293
  }
@@ -3596,6 +3606,9 @@ button.pkt-link {
3596
3606
  .pkt-grid > .pkt-cell--bottom, .pkt-grid > * > .pkt-cell--bottom {
3597
3607
  align-self: self-end;
3598
3608
  }
3609
+ .pkt-grid > .pkt-cell.pkt-cell--span1, .pkt-grid > * > .pkt-cell.pkt-cell--span1 {
3610
+ grid-column-end: span 1;
3611
+ }
3599
3612
  .pkt-grid > .pkt-cell.pkt-cell--span2, .pkt-grid > * > .pkt-cell.pkt-cell--span2 {
3600
3613
  grid-column-end: span 2;
3601
3614
  }
@@ -3629,6 +3642,84 @@ button.pkt-link {
3629
3642
  .pkt-grid > .pkt-cell.pkt-cell--span12, .pkt-grid > * > .pkt-cell.pkt-cell--span12 {
3630
3643
  grid-column-end: span 12;
3631
3644
  }
3645
+ .pkt-grid > .pkt-cell.pkt-cell--start1, .pkt-grid > * > .pkt-cell.pkt-cell--start1 {
3646
+ grid-column-start: 1;
3647
+ }
3648
+ .pkt-grid > .pkt-cell.pkt-cell--end1, .pkt-grid > * > .pkt-cell.pkt-cell--end1 {
3649
+ grid-column-end: 1;
3650
+ }
3651
+ .pkt-grid > .pkt-cell.pkt-cell--start2, .pkt-grid > * > .pkt-cell.pkt-cell--start2 {
3652
+ grid-column-start: 2;
3653
+ }
3654
+ .pkt-grid > .pkt-cell.pkt-cell--end2, .pkt-grid > * > .pkt-cell.pkt-cell--end2 {
3655
+ grid-column-end: 2;
3656
+ }
3657
+ .pkt-grid > .pkt-cell.pkt-cell--start3, .pkt-grid > * > .pkt-cell.pkt-cell--start3 {
3658
+ grid-column-start: 3;
3659
+ }
3660
+ .pkt-grid > .pkt-cell.pkt-cell--end3, .pkt-grid > * > .pkt-cell.pkt-cell--end3 {
3661
+ grid-column-end: 3;
3662
+ }
3663
+ .pkt-grid > .pkt-cell.pkt-cell--start4, .pkt-grid > * > .pkt-cell.pkt-cell--start4 {
3664
+ grid-column-start: 4;
3665
+ }
3666
+ .pkt-grid > .pkt-cell.pkt-cell--end4, .pkt-grid > * > .pkt-cell.pkt-cell--end4 {
3667
+ grid-column-end: 4;
3668
+ }
3669
+ .pkt-grid > .pkt-cell.pkt-cell--start5, .pkt-grid > * > .pkt-cell.pkt-cell--start5 {
3670
+ grid-column-start: 5;
3671
+ }
3672
+ .pkt-grid > .pkt-cell.pkt-cell--end5, .pkt-grid > * > .pkt-cell.pkt-cell--end5 {
3673
+ grid-column-end: 5;
3674
+ }
3675
+ .pkt-grid > .pkt-cell.pkt-cell--start6, .pkt-grid > * > .pkt-cell.pkt-cell--start6 {
3676
+ grid-column-start: 6;
3677
+ }
3678
+ .pkt-grid > .pkt-cell.pkt-cell--end6, .pkt-grid > * > .pkt-cell.pkt-cell--end6 {
3679
+ grid-column-end: 6;
3680
+ }
3681
+ .pkt-grid > .pkt-cell.pkt-cell--start7, .pkt-grid > * > .pkt-cell.pkt-cell--start7 {
3682
+ grid-column-start: 7;
3683
+ }
3684
+ .pkt-grid > .pkt-cell.pkt-cell--end7, .pkt-grid > * > .pkt-cell.pkt-cell--end7 {
3685
+ grid-column-end: 7;
3686
+ }
3687
+ .pkt-grid > .pkt-cell.pkt-cell--start8, .pkt-grid > * > .pkt-cell.pkt-cell--start8 {
3688
+ grid-column-start: 8;
3689
+ }
3690
+ .pkt-grid > .pkt-cell.pkt-cell--end8, .pkt-grid > * > .pkt-cell.pkt-cell--end8 {
3691
+ grid-column-end: 8;
3692
+ }
3693
+ .pkt-grid > .pkt-cell.pkt-cell--start9, .pkt-grid > * > .pkt-cell.pkt-cell--start9 {
3694
+ grid-column-start: 9;
3695
+ }
3696
+ .pkt-grid > .pkt-cell.pkt-cell--end9, .pkt-grid > * > .pkt-cell.pkt-cell--end9 {
3697
+ grid-column-end: 9;
3698
+ }
3699
+ .pkt-grid > .pkt-cell.pkt-cell--start10, .pkt-grid > * > .pkt-cell.pkt-cell--start10 {
3700
+ grid-column-start: 10;
3701
+ }
3702
+ .pkt-grid > .pkt-cell.pkt-cell--end10, .pkt-grid > * > .pkt-cell.pkt-cell--end10 {
3703
+ grid-column-end: 10;
3704
+ }
3705
+ .pkt-grid > .pkt-cell.pkt-cell--start11, .pkt-grid > * > .pkt-cell.pkt-cell--start11 {
3706
+ grid-column-start: 11;
3707
+ }
3708
+ .pkt-grid > .pkt-cell.pkt-cell--end11, .pkt-grid > * > .pkt-cell.pkt-cell--end11 {
3709
+ grid-column-end: 11;
3710
+ }
3711
+ .pkt-grid > .pkt-cell.pkt-cell--start12, .pkt-grid > * > .pkt-cell.pkt-cell--start12 {
3712
+ grid-column-start: 12;
3713
+ }
3714
+ .pkt-grid > .pkt-cell.pkt-cell--end12, .pkt-grid > * > .pkt-cell.pkt-cell--end12 {
3715
+ grid-column-end: 12;
3716
+ }
3717
+ .pkt-grid > .pkt-cell.pkt-cell--start13, .pkt-grid > * > .pkt-cell.pkt-cell--start13 {
3718
+ grid-column-start: 13;
3719
+ }
3720
+ .pkt-grid > .pkt-cell.pkt-cell--end13, .pkt-grid > * > .pkt-cell.pkt-cell--end13 {
3721
+ grid-column-end: 13;
3722
+ }
3632
3723
 
3633
3724
  /*
3634
3725
  * Responsiv grid
@@ -5212,6 +5303,9 @@ button.pkt-link {
5212
5303
  }
5213
5304
  }
5214
5305
  @media screen {
5306
+ .pkt-grid > .pkt-cell.pkt-cell--span1-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span1-mobile-up {
5307
+ grid-column-end: span 1;
5308
+ }
5215
5309
  .pkt-grid > .pkt-cell.pkt-cell--span2-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-mobile-up {
5216
5310
  grid-column-end: span 2;
5217
5311
  }
@@ -5245,8 +5339,89 @@ button.pkt-link {
5245
5339
  .pkt-grid > .pkt-cell.pkt-cell--span12-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-mobile-up {
5246
5340
  grid-column-end: span 12;
5247
5341
  }
5342
+ .pkt-grid > .pkt-cell.pkt-cell--start1-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start1-mobile-up {
5343
+ grid-column-start: 1;
5344
+ }
5345
+ .pkt-grid > .pkt-cell.pkt-cell--end1-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end1-mobile-up {
5346
+ grid-column-end: 1;
5347
+ }
5348
+ .pkt-grid > .pkt-cell.pkt-cell--start2-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start2-mobile-up {
5349
+ grid-column-start: 2;
5350
+ }
5351
+ .pkt-grid > .pkt-cell.pkt-cell--end2-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end2-mobile-up {
5352
+ grid-column-end: 2;
5353
+ }
5354
+ .pkt-grid > .pkt-cell.pkt-cell--start3-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start3-mobile-up {
5355
+ grid-column-start: 3;
5356
+ }
5357
+ .pkt-grid > .pkt-cell.pkt-cell--end3-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end3-mobile-up {
5358
+ grid-column-end: 3;
5359
+ }
5360
+ .pkt-grid > .pkt-cell.pkt-cell--start4-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start4-mobile-up {
5361
+ grid-column-start: 4;
5362
+ }
5363
+ .pkt-grid > .pkt-cell.pkt-cell--end4-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end4-mobile-up {
5364
+ grid-column-end: 4;
5365
+ }
5366
+ .pkt-grid > .pkt-cell.pkt-cell--start5-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start5-mobile-up {
5367
+ grid-column-start: 5;
5368
+ }
5369
+ .pkt-grid > .pkt-cell.pkt-cell--end5-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end5-mobile-up {
5370
+ grid-column-end: 5;
5371
+ }
5372
+ .pkt-grid > .pkt-cell.pkt-cell--start6-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start6-mobile-up {
5373
+ grid-column-start: 6;
5374
+ }
5375
+ .pkt-grid > .pkt-cell.pkt-cell--end6-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end6-mobile-up {
5376
+ grid-column-end: 6;
5377
+ }
5378
+ .pkt-grid > .pkt-cell.pkt-cell--start7-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start7-mobile-up {
5379
+ grid-column-start: 7;
5380
+ }
5381
+ .pkt-grid > .pkt-cell.pkt-cell--end7-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end7-mobile-up {
5382
+ grid-column-end: 7;
5383
+ }
5384
+ .pkt-grid > .pkt-cell.pkt-cell--start8-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start8-mobile-up {
5385
+ grid-column-start: 8;
5386
+ }
5387
+ .pkt-grid > .pkt-cell.pkt-cell--end8-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end8-mobile-up {
5388
+ grid-column-end: 8;
5389
+ }
5390
+ .pkt-grid > .pkt-cell.pkt-cell--start9-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start9-mobile-up {
5391
+ grid-column-start: 9;
5392
+ }
5393
+ .pkt-grid > .pkt-cell.pkt-cell--end9-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end9-mobile-up {
5394
+ grid-column-end: 9;
5395
+ }
5396
+ .pkt-grid > .pkt-cell.pkt-cell--start10-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start10-mobile-up {
5397
+ grid-column-start: 10;
5398
+ }
5399
+ .pkt-grid > .pkt-cell.pkt-cell--end10-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end10-mobile-up {
5400
+ grid-column-end: 10;
5401
+ }
5402
+ .pkt-grid > .pkt-cell.pkt-cell--start11-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start11-mobile-up {
5403
+ grid-column-start: 11;
5404
+ }
5405
+ .pkt-grid > .pkt-cell.pkt-cell--end11-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end11-mobile-up {
5406
+ grid-column-end: 11;
5407
+ }
5408
+ .pkt-grid > .pkt-cell.pkt-cell--start12-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start12-mobile-up {
5409
+ grid-column-start: 12;
5410
+ }
5411
+ .pkt-grid > .pkt-cell.pkt-cell--end12-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end12-mobile-up {
5412
+ grid-column-end: 12;
5413
+ }
5414
+ .pkt-grid > .pkt-cell.pkt-cell--start13-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start13-mobile-up {
5415
+ grid-column-start: 13;
5416
+ }
5417
+ .pkt-grid > .pkt-cell.pkt-cell--end13-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end13-mobile-up {
5418
+ grid-column-end: 13;
5419
+ }
5248
5420
  }
5249
5421
  @media screen and (min-width: 36rem) {
5422
+ .pkt-grid > .pkt-cell.pkt-cell--span1-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span1-phablet-up {
5423
+ grid-column-end: span 1;
5424
+ }
5250
5425
  .pkt-grid > .pkt-cell.pkt-cell--span2-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-phablet-up {
5251
5426
  grid-column-end: span 2;
5252
5427
  }
@@ -5280,8 +5455,89 @@ button.pkt-link {
5280
5455
  .pkt-grid > .pkt-cell.pkt-cell--span12-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-phablet-up {
5281
5456
  grid-column-end: span 12;
5282
5457
  }
5458
+ .pkt-grid > .pkt-cell.pkt-cell--start1-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start1-phablet-up {
5459
+ grid-column-start: 1;
5460
+ }
5461
+ .pkt-grid > .pkt-cell.pkt-cell--end1-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end1-phablet-up {
5462
+ grid-column-end: 1;
5463
+ }
5464
+ .pkt-grid > .pkt-cell.pkt-cell--start2-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start2-phablet-up {
5465
+ grid-column-start: 2;
5466
+ }
5467
+ .pkt-grid > .pkt-cell.pkt-cell--end2-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end2-phablet-up {
5468
+ grid-column-end: 2;
5469
+ }
5470
+ .pkt-grid > .pkt-cell.pkt-cell--start3-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start3-phablet-up {
5471
+ grid-column-start: 3;
5472
+ }
5473
+ .pkt-grid > .pkt-cell.pkt-cell--end3-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end3-phablet-up {
5474
+ grid-column-end: 3;
5475
+ }
5476
+ .pkt-grid > .pkt-cell.pkt-cell--start4-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start4-phablet-up {
5477
+ grid-column-start: 4;
5478
+ }
5479
+ .pkt-grid > .pkt-cell.pkt-cell--end4-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end4-phablet-up {
5480
+ grid-column-end: 4;
5481
+ }
5482
+ .pkt-grid > .pkt-cell.pkt-cell--start5-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start5-phablet-up {
5483
+ grid-column-start: 5;
5484
+ }
5485
+ .pkt-grid > .pkt-cell.pkt-cell--end5-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end5-phablet-up {
5486
+ grid-column-end: 5;
5487
+ }
5488
+ .pkt-grid > .pkt-cell.pkt-cell--start6-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start6-phablet-up {
5489
+ grid-column-start: 6;
5490
+ }
5491
+ .pkt-grid > .pkt-cell.pkt-cell--end6-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end6-phablet-up {
5492
+ grid-column-end: 6;
5493
+ }
5494
+ .pkt-grid > .pkt-cell.pkt-cell--start7-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start7-phablet-up {
5495
+ grid-column-start: 7;
5496
+ }
5497
+ .pkt-grid > .pkt-cell.pkt-cell--end7-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end7-phablet-up {
5498
+ grid-column-end: 7;
5499
+ }
5500
+ .pkt-grid > .pkt-cell.pkt-cell--start8-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start8-phablet-up {
5501
+ grid-column-start: 8;
5502
+ }
5503
+ .pkt-grid > .pkt-cell.pkt-cell--end8-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end8-phablet-up {
5504
+ grid-column-end: 8;
5505
+ }
5506
+ .pkt-grid > .pkt-cell.pkt-cell--start9-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start9-phablet-up {
5507
+ grid-column-start: 9;
5508
+ }
5509
+ .pkt-grid > .pkt-cell.pkt-cell--end9-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end9-phablet-up {
5510
+ grid-column-end: 9;
5511
+ }
5512
+ .pkt-grid > .pkt-cell.pkt-cell--start10-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start10-phablet-up {
5513
+ grid-column-start: 10;
5514
+ }
5515
+ .pkt-grid > .pkt-cell.pkt-cell--end10-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end10-phablet-up {
5516
+ grid-column-end: 10;
5517
+ }
5518
+ .pkt-grid > .pkt-cell.pkt-cell--start11-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start11-phablet-up {
5519
+ grid-column-start: 11;
5520
+ }
5521
+ .pkt-grid > .pkt-cell.pkt-cell--end11-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end11-phablet-up {
5522
+ grid-column-end: 11;
5523
+ }
5524
+ .pkt-grid > .pkt-cell.pkt-cell--start12-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start12-phablet-up {
5525
+ grid-column-start: 12;
5526
+ }
5527
+ .pkt-grid > .pkt-cell.pkt-cell--end12-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end12-phablet-up {
5528
+ grid-column-end: 12;
5529
+ }
5530
+ .pkt-grid > .pkt-cell.pkt-cell--start13-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start13-phablet-up {
5531
+ grid-column-start: 13;
5532
+ }
5533
+ .pkt-grid > .pkt-cell.pkt-cell--end13-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end13-phablet-up {
5534
+ grid-column-end: 13;
5535
+ }
5283
5536
  }
5284
5537
  @media screen and (min-width: 48rem) {
5538
+ .pkt-grid > .pkt-cell.pkt-cell--span1-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span1-tablet-up {
5539
+ grid-column-end: span 1;
5540
+ }
5285
5541
  .pkt-grid > .pkt-cell.pkt-cell--span2-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-tablet-up {
5286
5542
  grid-column-end: span 2;
5287
5543
  }
@@ -5315,8 +5571,89 @@ button.pkt-link {
5315
5571
  .pkt-grid > .pkt-cell.pkt-cell--span12-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-tablet-up {
5316
5572
  grid-column-end: span 12;
5317
5573
  }
5574
+ .pkt-grid > .pkt-cell.pkt-cell--start1-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start1-tablet-up {
5575
+ grid-column-start: 1;
5576
+ }
5577
+ .pkt-grid > .pkt-cell.pkt-cell--end1-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end1-tablet-up {
5578
+ grid-column-end: 1;
5579
+ }
5580
+ .pkt-grid > .pkt-cell.pkt-cell--start2-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start2-tablet-up {
5581
+ grid-column-start: 2;
5582
+ }
5583
+ .pkt-grid > .pkt-cell.pkt-cell--end2-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end2-tablet-up {
5584
+ grid-column-end: 2;
5585
+ }
5586
+ .pkt-grid > .pkt-cell.pkt-cell--start3-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start3-tablet-up {
5587
+ grid-column-start: 3;
5588
+ }
5589
+ .pkt-grid > .pkt-cell.pkt-cell--end3-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end3-tablet-up {
5590
+ grid-column-end: 3;
5591
+ }
5592
+ .pkt-grid > .pkt-cell.pkt-cell--start4-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start4-tablet-up {
5593
+ grid-column-start: 4;
5594
+ }
5595
+ .pkt-grid > .pkt-cell.pkt-cell--end4-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end4-tablet-up {
5596
+ grid-column-end: 4;
5597
+ }
5598
+ .pkt-grid > .pkt-cell.pkt-cell--start5-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start5-tablet-up {
5599
+ grid-column-start: 5;
5600
+ }
5601
+ .pkt-grid > .pkt-cell.pkt-cell--end5-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end5-tablet-up {
5602
+ grid-column-end: 5;
5603
+ }
5604
+ .pkt-grid > .pkt-cell.pkt-cell--start6-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start6-tablet-up {
5605
+ grid-column-start: 6;
5606
+ }
5607
+ .pkt-grid > .pkt-cell.pkt-cell--end6-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end6-tablet-up {
5608
+ grid-column-end: 6;
5609
+ }
5610
+ .pkt-grid > .pkt-cell.pkt-cell--start7-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start7-tablet-up {
5611
+ grid-column-start: 7;
5612
+ }
5613
+ .pkt-grid > .pkt-cell.pkt-cell--end7-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end7-tablet-up {
5614
+ grid-column-end: 7;
5615
+ }
5616
+ .pkt-grid > .pkt-cell.pkt-cell--start8-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start8-tablet-up {
5617
+ grid-column-start: 8;
5618
+ }
5619
+ .pkt-grid > .pkt-cell.pkt-cell--end8-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end8-tablet-up {
5620
+ grid-column-end: 8;
5621
+ }
5622
+ .pkt-grid > .pkt-cell.pkt-cell--start9-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start9-tablet-up {
5623
+ grid-column-start: 9;
5624
+ }
5625
+ .pkt-grid > .pkt-cell.pkt-cell--end9-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end9-tablet-up {
5626
+ grid-column-end: 9;
5627
+ }
5628
+ .pkt-grid > .pkt-cell.pkt-cell--start10-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start10-tablet-up {
5629
+ grid-column-start: 10;
5630
+ }
5631
+ .pkt-grid > .pkt-cell.pkt-cell--end10-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end10-tablet-up {
5632
+ grid-column-end: 10;
5633
+ }
5634
+ .pkt-grid > .pkt-cell.pkt-cell--start11-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start11-tablet-up {
5635
+ grid-column-start: 11;
5636
+ }
5637
+ .pkt-grid > .pkt-cell.pkt-cell--end11-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end11-tablet-up {
5638
+ grid-column-end: 11;
5639
+ }
5640
+ .pkt-grid > .pkt-cell.pkt-cell--start12-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start12-tablet-up {
5641
+ grid-column-start: 12;
5642
+ }
5643
+ .pkt-grid > .pkt-cell.pkt-cell--end12-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end12-tablet-up {
5644
+ grid-column-end: 12;
5645
+ }
5646
+ .pkt-grid > .pkt-cell.pkt-cell--start13-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start13-tablet-up {
5647
+ grid-column-start: 13;
5648
+ }
5649
+ .pkt-grid > .pkt-cell.pkt-cell--end13-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end13-tablet-up {
5650
+ grid-column-end: 13;
5651
+ }
5318
5652
  }
5319
5653
  @media screen and (min-width: 64rem) {
5654
+ .pkt-grid > .pkt-cell.pkt-cell--span1-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span1-tablet-big-up {
5655
+ grid-column-end: span 1;
5656
+ }
5320
5657
  .pkt-grid > .pkt-cell.pkt-cell--span2-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-tablet-big-up {
5321
5658
  grid-column-end: span 2;
5322
5659
  }
@@ -5350,8 +5687,89 @@ button.pkt-link {
5350
5687
  .pkt-grid > .pkt-cell.pkt-cell--span12-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-tablet-big-up {
5351
5688
  grid-column-end: span 12;
5352
5689
  }
5690
+ .pkt-grid > .pkt-cell.pkt-cell--start1-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start1-tablet-big-up {
5691
+ grid-column-start: 1;
5692
+ }
5693
+ .pkt-grid > .pkt-cell.pkt-cell--end1-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end1-tablet-big-up {
5694
+ grid-column-end: 1;
5695
+ }
5696
+ .pkt-grid > .pkt-cell.pkt-cell--start2-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start2-tablet-big-up {
5697
+ grid-column-start: 2;
5698
+ }
5699
+ .pkt-grid > .pkt-cell.pkt-cell--end2-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end2-tablet-big-up {
5700
+ grid-column-end: 2;
5701
+ }
5702
+ .pkt-grid > .pkt-cell.pkt-cell--start3-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start3-tablet-big-up {
5703
+ grid-column-start: 3;
5704
+ }
5705
+ .pkt-grid > .pkt-cell.pkt-cell--end3-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end3-tablet-big-up {
5706
+ grid-column-end: 3;
5707
+ }
5708
+ .pkt-grid > .pkt-cell.pkt-cell--start4-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start4-tablet-big-up {
5709
+ grid-column-start: 4;
5710
+ }
5711
+ .pkt-grid > .pkt-cell.pkt-cell--end4-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end4-tablet-big-up {
5712
+ grid-column-end: 4;
5713
+ }
5714
+ .pkt-grid > .pkt-cell.pkt-cell--start5-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start5-tablet-big-up {
5715
+ grid-column-start: 5;
5716
+ }
5717
+ .pkt-grid > .pkt-cell.pkt-cell--end5-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end5-tablet-big-up {
5718
+ grid-column-end: 5;
5719
+ }
5720
+ .pkt-grid > .pkt-cell.pkt-cell--start6-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start6-tablet-big-up {
5721
+ grid-column-start: 6;
5722
+ }
5723
+ .pkt-grid > .pkt-cell.pkt-cell--end6-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end6-tablet-big-up {
5724
+ grid-column-end: 6;
5725
+ }
5726
+ .pkt-grid > .pkt-cell.pkt-cell--start7-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start7-tablet-big-up {
5727
+ grid-column-start: 7;
5728
+ }
5729
+ .pkt-grid > .pkt-cell.pkt-cell--end7-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end7-tablet-big-up {
5730
+ grid-column-end: 7;
5731
+ }
5732
+ .pkt-grid > .pkt-cell.pkt-cell--start8-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start8-tablet-big-up {
5733
+ grid-column-start: 8;
5734
+ }
5735
+ .pkt-grid > .pkt-cell.pkt-cell--end8-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end8-tablet-big-up {
5736
+ grid-column-end: 8;
5737
+ }
5738
+ .pkt-grid > .pkt-cell.pkt-cell--start9-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start9-tablet-big-up {
5739
+ grid-column-start: 9;
5740
+ }
5741
+ .pkt-grid > .pkt-cell.pkt-cell--end9-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end9-tablet-big-up {
5742
+ grid-column-end: 9;
5743
+ }
5744
+ .pkt-grid > .pkt-cell.pkt-cell--start10-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start10-tablet-big-up {
5745
+ grid-column-start: 10;
5746
+ }
5747
+ .pkt-grid > .pkt-cell.pkt-cell--end10-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end10-tablet-big-up {
5748
+ grid-column-end: 10;
5749
+ }
5750
+ .pkt-grid > .pkt-cell.pkt-cell--start11-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start11-tablet-big-up {
5751
+ grid-column-start: 11;
5752
+ }
5753
+ .pkt-grid > .pkt-cell.pkt-cell--end11-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end11-tablet-big-up {
5754
+ grid-column-end: 11;
5755
+ }
5756
+ .pkt-grid > .pkt-cell.pkt-cell--start12-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start12-tablet-big-up {
5757
+ grid-column-start: 12;
5758
+ }
5759
+ .pkt-grid > .pkt-cell.pkt-cell--end12-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end12-tablet-big-up {
5760
+ grid-column-end: 12;
5761
+ }
5762
+ .pkt-grid > .pkt-cell.pkt-cell--start13-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start13-tablet-big-up {
5763
+ grid-column-start: 13;
5764
+ }
5765
+ .pkt-grid > .pkt-cell.pkt-cell--end13-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end13-tablet-big-up {
5766
+ grid-column-end: 13;
5767
+ }
5353
5768
  }
5354
5769
  @media screen and (min-width: 80rem) {
5770
+ .pkt-grid > .pkt-cell.pkt-cell--span1-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span1-laptop-up {
5771
+ grid-column-end: span 1;
5772
+ }
5355
5773
  .pkt-grid > .pkt-cell.pkt-cell--span2-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-laptop-up {
5356
5774
  grid-column-end: span 2;
5357
5775
  }
@@ -5385,8 +5803,89 @@ button.pkt-link {
5385
5803
  .pkt-grid > .pkt-cell.pkt-cell--span12-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-laptop-up {
5386
5804
  grid-column-end: span 12;
5387
5805
  }
5806
+ .pkt-grid > .pkt-cell.pkt-cell--start1-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start1-laptop-up {
5807
+ grid-column-start: 1;
5808
+ }
5809
+ .pkt-grid > .pkt-cell.pkt-cell--end1-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end1-laptop-up {
5810
+ grid-column-end: 1;
5811
+ }
5812
+ .pkt-grid > .pkt-cell.pkt-cell--start2-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start2-laptop-up {
5813
+ grid-column-start: 2;
5814
+ }
5815
+ .pkt-grid > .pkt-cell.pkt-cell--end2-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end2-laptop-up {
5816
+ grid-column-end: 2;
5817
+ }
5818
+ .pkt-grid > .pkt-cell.pkt-cell--start3-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start3-laptop-up {
5819
+ grid-column-start: 3;
5820
+ }
5821
+ .pkt-grid > .pkt-cell.pkt-cell--end3-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end3-laptop-up {
5822
+ grid-column-end: 3;
5823
+ }
5824
+ .pkt-grid > .pkt-cell.pkt-cell--start4-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start4-laptop-up {
5825
+ grid-column-start: 4;
5826
+ }
5827
+ .pkt-grid > .pkt-cell.pkt-cell--end4-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end4-laptop-up {
5828
+ grid-column-end: 4;
5829
+ }
5830
+ .pkt-grid > .pkt-cell.pkt-cell--start5-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start5-laptop-up {
5831
+ grid-column-start: 5;
5832
+ }
5833
+ .pkt-grid > .pkt-cell.pkt-cell--end5-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end5-laptop-up {
5834
+ grid-column-end: 5;
5835
+ }
5836
+ .pkt-grid > .pkt-cell.pkt-cell--start6-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start6-laptop-up {
5837
+ grid-column-start: 6;
5838
+ }
5839
+ .pkt-grid > .pkt-cell.pkt-cell--end6-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end6-laptop-up {
5840
+ grid-column-end: 6;
5841
+ }
5842
+ .pkt-grid > .pkt-cell.pkt-cell--start7-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start7-laptop-up {
5843
+ grid-column-start: 7;
5844
+ }
5845
+ .pkt-grid > .pkt-cell.pkt-cell--end7-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end7-laptop-up {
5846
+ grid-column-end: 7;
5847
+ }
5848
+ .pkt-grid > .pkt-cell.pkt-cell--start8-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start8-laptop-up {
5849
+ grid-column-start: 8;
5850
+ }
5851
+ .pkt-grid > .pkt-cell.pkt-cell--end8-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end8-laptop-up {
5852
+ grid-column-end: 8;
5853
+ }
5854
+ .pkt-grid > .pkt-cell.pkt-cell--start9-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start9-laptop-up {
5855
+ grid-column-start: 9;
5856
+ }
5857
+ .pkt-grid > .pkt-cell.pkt-cell--end9-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end9-laptop-up {
5858
+ grid-column-end: 9;
5859
+ }
5860
+ .pkt-grid > .pkt-cell.pkt-cell--start10-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start10-laptop-up {
5861
+ grid-column-start: 10;
5862
+ }
5863
+ .pkt-grid > .pkt-cell.pkt-cell--end10-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end10-laptop-up {
5864
+ grid-column-end: 10;
5865
+ }
5866
+ .pkt-grid > .pkt-cell.pkt-cell--start11-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start11-laptop-up {
5867
+ grid-column-start: 11;
5868
+ }
5869
+ .pkt-grid > .pkt-cell.pkt-cell--end11-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end11-laptop-up {
5870
+ grid-column-end: 11;
5871
+ }
5872
+ .pkt-grid > .pkt-cell.pkt-cell--start12-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start12-laptop-up {
5873
+ grid-column-start: 12;
5874
+ }
5875
+ .pkt-grid > .pkt-cell.pkt-cell--end12-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end12-laptop-up {
5876
+ grid-column-end: 12;
5877
+ }
5878
+ .pkt-grid > .pkt-cell.pkt-cell--start13-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start13-laptop-up {
5879
+ grid-column-start: 13;
5880
+ }
5881
+ .pkt-grid > .pkt-cell.pkt-cell--end13-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end13-laptop-up {
5882
+ grid-column-end: 13;
5883
+ }
5388
5884
  }
5389
5885
  @media screen and (min-width: 100rem) {
5886
+ .pkt-grid > .pkt-cell.pkt-cell--span1-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span1-desktop-up {
5887
+ grid-column-end: span 1;
5888
+ }
5390
5889
  .pkt-grid > .pkt-cell.pkt-cell--span2-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-desktop-up {
5391
5890
  grid-column-end: span 2;
5392
5891
  }
@@ -5420,6 +5919,84 @@ button.pkt-link {
5420
5919
  .pkt-grid > .pkt-cell.pkt-cell--span12-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-desktop-up {
5421
5920
  grid-column-end: span 12;
5422
5921
  }
5922
+ .pkt-grid > .pkt-cell.pkt-cell--start1-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start1-desktop-up {
5923
+ grid-column-start: 1;
5924
+ }
5925
+ .pkt-grid > .pkt-cell.pkt-cell--end1-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end1-desktop-up {
5926
+ grid-column-end: 1;
5927
+ }
5928
+ .pkt-grid > .pkt-cell.pkt-cell--start2-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start2-desktop-up {
5929
+ grid-column-start: 2;
5930
+ }
5931
+ .pkt-grid > .pkt-cell.pkt-cell--end2-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end2-desktop-up {
5932
+ grid-column-end: 2;
5933
+ }
5934
+ .pkt-grid > .pkt-cell.pkt-cell--start3-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start3-desktop-up {
5935
+ grid-column-start: 3;
5936
+ }
5937
+ .pkt-grid > .pkt-cell.pkt-cell--end3-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end3-desktop-up {
5938
+ grid-column-end: 3;
5939
+ }
5940
+ .pkt-grid > .pkt-cell.pkt-cell--start4-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start4-desktop-up {
5941
+ grid-column-start: 4;
5942
+ }
5943
+ .pkt-grid > .pkt-cell.pkt-cell--end4-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end4-desktop-up {
5944
+ grid-column-end: 4;
5945
+ }
5946
+ .pkt-grid > .pkt-cell.pkt-cell--start5-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start5-desktop-up {
5947
+ grid-column-start: 5;
5948
+ }
5949
+ .pkt-grid > .pkt-cell.pkt-cell--end5-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end5-desktop-up {
5950
+ grid-column-end: 5;
5951
+ }
5952
+ .pkt-grid > .pkt-cell.pkt-cell--start6-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start6-desktop-up {
5953
+ grid-column-start: 6;
5954
+ }
5955
+ .pkt-grid > .pkt-cell.pkt-cell--end6-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end6-desktop-up {
5956
+ grid-column-end: 6;
5957
+ }
5958
+ .pkt-grid > .pkt-cell.pkt-cell--start7-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start7-desktop-up {
5959
+ grid-column-start: 7;
5960
+ }
5961
+ .pkt-grid > .pkt-cell.pkt-cell--end7-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end7-desktop-up {
5962
+ grid-column-end: 7;
5963
+ }
5964
+ .pkt-grid > .pkt-cell.pkt-cell--start8-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start8-desktop-up {
5965
+ grid-column-start: 8;
5966
+ }
5967
+ .pkt-grid > .pkt-cell.pkt-cell--end8-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end8-desktop-up {
5968
+ grid-column-end: 8;
5969
+ }
5970
+ .pkt-grid > .pkt-cell.pkt-cell--start9-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start9-desktop-up {
5971
+ grid-column-start: 9;
5972
+ }
5973
+ .pkt-grid > .pkt-cell.pkt-cell--end9-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end9-desktop-up {
5974
+ grid-column-end: 9;
5975
+ }
5976
+ .pkt-grid > .pkt-cell.pkt-cell--start10-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start10-desktop-up {
5977
+ grid-column-start: 10;
5978
+ }
5979
+ .pkt-grid > .pkt-cell.pkt-cell--end10-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end10-desktop-up {
5980
+ grid-column-end: 10;
5981
+ }
5982
+ .pkt-grid > .pkt-cell.pkt-cell--start11-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start11-desktop-up {
5983
+ grid-column-start: 11;
5984
+ }
5985
+ .pkt-grid > .pkt-cell.pkt-cell--end11-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end11-desktop-up {
5986
+ grid-column-end: 11;
5987
+ }
5988
+ .pkt-grid > .pkt-cell.pkt-cell--start12-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start12-desktop-up {
5989
+ grid-column-start: 12;
5990
+ }
5991
+ .pkt-grid > .pkt-cell.pkt-cell--end12-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end12-desktop-up {
5992
+ grid-column-end: 12;
5993
+ }
5994
+ .pkt-grid > .pkt-cell.pkt-cell--start13-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start13-desktop-up {
5995
+ grid-column-start: 13;
5996
+ }
5997
+ .pkt-grid > .pkt-cell.pkt-cell--end13-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end13-desktop-up {
5998
+ grid-column-end: 13;
5999
+ }
5423
6000
  }
5424
6001
 
5425
6002
  .pkt-layout {
@@ -17386,6 +17963,13 @@ button.pkt-link {
17386
17963
  * Variant: label-only, icon-left, icon-right, icon-only
17387
17964
  * Background: light, dark
17388
17965
  */
17966
+ pkt-button {
17967
+ display: inline-block;
17968
+ }
17969
+ pkt-button[full-width] {
17970
+ display: block;
17971
+ }
17972
+
17389
17973
  .pkt-btn__icon svg {
17390
17974
  --ring-color: var(--pkt-color-brand-dark-blue-700);
17391
17975
  --spinner-color: var(--pkt-color-brand-blue-1000);
@@ -18032,6 +18616,11 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
18032
18616
  *
18033
18617
  *
18034
18618
  */
18619
+ pkt-checkbox,
18620
+ pkt-radiobutton {
18621
+ display: block;
18622
+ }
18623
+
18035
18624
  .pkt-input-check {
18036
18625
  display: flex;
18037
18626
  flex-direction: column;
@@ -18126,7 +18715,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
18126
18715
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
18127
18716
  }
18128
18717
  .pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]) {
18129
- --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/minus-sign.svg);
18718
+ --svg: url(https://punkt-cdn.oslo.kommune.no/18.5/icons/minus-sign.svg);
18130
18719
  position: relative;
18131
18720
  background-color: var(--pkt-color-input-border-normal);
18132
18721
  }
@@ -18152,7 +18741,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
18152
18741
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
18153
18742
  }
18154
18743
  .pkt-input-check__input-checkbox:checked[type=checkbox] {
18155
- --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/check-medium.svg);
18744
+ --svg: url(https://punkt-cdn.oslo.kommune.no/18.5/icons/check-medium.svg);
18156
18745
  position: relative;
18157
18746
  background-color: var(--pkt-color-input-border-normal);
18158
18747
  }
@@ -18210,7 +18799,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
18210
18799
  cursor: not-allowed;
18211
18800
  }
18212
18801
  .pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
18213
- --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/check-medium.svg);
18802
+ --svg: url(https://punkt-cdn.oslo.kommune.no/18.5/icons/check-medium.svg);
18214
18803
  --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
18215
18804
  filter: grayscale(100%) brightness(400%);
18216
18805
  }
@@ -18380,7 +18969,8 @@ pkt-select {
18380
18969
  width: fit-content;
18381
18970
  }
18382
18971
 
18383
- :where(.pkt-textinput:has(.pkt-input:not(.pkt-input--fullwidth):not([size]):not([cols]))) {
18972
+ :where(.pkt-textinput:has(.pkt-input:not(.pkt-input--fullwidth):not([size]):not([cols])),
18973
+ .pkt-select:has(.pkt-input:not(.pkt-input--fullwidth):not([size]):not([cols]))) {
18384
18974
  width: min(31rem, 100%);
18385
18975
  }
18386
18976
 
@@ -18453,9 +19043,6 @@ pkt-select {
18453
19043
  .pkt-input:where([size], [cols]) {
18454
19044
  width: auto;
18455
19045
  }
18456
- .pkt-input:where(select):not(.pkt-input--fullwidth) {
18457
- width: auto;
18458
- }
18459
19046
  .pkt-input__container:where(:has(> :is(input[size], textarea[cols]))) {
18460
19047
  width: fit-content;
18461
19048
  align-self: flex-start;
@@ -18473,7 +19060,7 @@ pkt-select {
18473
19060
  padding-right: 3rem;
18474
19061
  }
18475
19062
  .pkt-input:is(select):not([multiple]) {
18476
- --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/chevron-thin-down.svg);
19063
+ --svg: url(https://punkt-cdn.oslo.kommune.no/18.5/icons/chevron-thin-down.svg);
18477
19064
  background-image: var(--svg);
18478
19065
  background-repeat: no-repeat;
18479
19066
  background-position: right 0.7rem top 50%;
@@ -19598,6 +20185,10 @@ pkt-alert {
19598
20185
  /*
19599
20186
  * Back link component
19600
20187
  */
20188
+ pkt-backlink {
20189
+ display: block;
20190
+ }
20191
+
19601
20192
  .pkt-back-link .pkt-link {
19602
20193
  display: inline-flex;
19603
20194
  align-items: center;
@@ -19684,6 +20275,10 @@ pkt-alert {
19684
20275
  /*
19685
20276
  * Breadcrumbs component
19686
20277
  */
20278
+ pkt-breadcrumbs {
20279
+ display: block;
20280
+ }
20281
+
19687
20282
  .pkt-breadcrumbs {
19688
20283
  position: relative;
19689
20284
  letter-spacing: -0.2px;
@@ -19808,6 +20403,7 @@ pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input {
19808
20403
  .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select),
19809
20404
  pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select) {
19810
20405
  text-align: right;
20406
+ width: auto;
19811
20407
  }
19812
20408
  .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker > .pkt-cal-input-year,
19813
20409
  pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker > .pkt-cal-input-year {
@@ -19999,15 +20595,9 @@ pkt-card {
19999
20595
  .pkt-card.pkt-card--padding-none {
20000
20596
  padding: 0;
20001
20597
  }
20002
- .pkt-card .pkt-card__heading h1,
20003
- .pkt-card .pkt-card__heading h2,
20004
- .pkt-card .pkt-card__heading h3,
20005
- .pkt-card .pkt-card__heading h4,
20006
- .pkt-card .pkt-card__heading h5 {
20598
+ .pkt-card.pkt-card .pkt-card__heading {
20007
20599
  padding: 0;
20008
20600
  margin: 0;
20009
- font-size: 1.875rem;
20010
- font-weight: 400;
20011
20601
  margin-block-end: 0.5rem;
20012
20602
  hyphens: auto;
20013
20603
  overflow-wrap: break-word;
@@ -20017,19 +20607,23 @@ pkt-card {
20017
20607
  text-underline-offset: 0.15em;
20018
20608
  }
20019
20609
  .pkt-card p.pkt-card__subheading {
20610
+ letter-spacing: -0.2px;
20611
+ font-weight: 300;
20612
+ font-size: 1.25rem;
20613
+ line-height: 2rem;
20020
20614
  padding: 0;
20021
20615
  margin: 0;
20022
- line-height: unset;
20023
20616
  margin-block-end: 1rem;
20024
- font-size: 1.25rem;
20025
- font-weight: 300;
20026
20617
  hyphens: auto;
20027
20618
  overflow-wrap: break-word;
20028
20619
  }
20029
20620
  .pkt-card .pkt-card__metadata {
20621
+ letter-spacing: -0.2px;
20622
+ font-weight: 300;
20623
+ font-size: 1rem;
20624
+ line-height: 1.5rem;
20030
20625
  margin-block-start: 1rem;
20031
20626
  margin-block-end: 0;
20032
- line-height: unset;
20033
20627
  gap: 0.5rem;
20034
20628
  }
20035
20629
  .pkt-card .pkt-card__metadata-lead {
@@ -20078,6 +20672,21 @@ pkt-card {
20078
20672
  max-height: 400px;
20079
20673
  max-width: 400px;
20080
20674
  }
20675
+ .pkt-card.pkt-card--zoom .pkt-card__image img {
20676
+ transform: scale(1);
20677
+ transition: transform 0.5s ease-in-out;
20678
+ }
20679
+ .pkt-card.pkt-card--zoom:hover .pkt-card__image img, .pkt-card.pkt-card--zoom:focus-within .pkt-card__image img {
20680
+ transform: scale(1.1);
20681
+ }
20682
+ @media (prefers-reduced-motion: reduce) {
20683
+ .pkt-card.pkt-card--zoom .pkt-card__image img {
20684
+ transition: none;
20685
+ }
20686
+ .pkt-card.pkt-card--zoom:hover .pkt-card__image img, .pkt-card.pkt-card--zoom:focus-within .pkt-card__image img {
20687
+ transform: none;
20688
+ }
20689
+ }
20081
20690
  .pkt-card.pkt-card--horizontal .pkt-card__image {
20082
20691
  max-width: 400px;
20083
20692
  margin-inline-end: 2rem;
@@ -20107,6 +20716,46 @@ pkt-card {
20107
20716
  aspect-ratio: 19/10;
20108
20717
  }
20109
20718
  }
20719
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-auto {
20720
+ aspect-ratio: auto;
20721
+ }
20722
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-auto img {
20723
+ height: auto;
20724
+ }
20725
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-1-1 {
20726
+ aspect-ratio: 1;
20727
+ }
20728
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-4-3 {
20729
+ aspect-ratio: 4/3;
20730
+ }
20731
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-3-2 {
20732
+ aspect-ratio: 3/2;
20733
+ }
20734
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-16-9 {
20735
+ aspect-ratio: 16/9;
20736
+ }
20737
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-19-10 {
20738
+ aspect-ratio: 19/10;
20739
+ }
20740
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-restricted {
20741
+ aspect-ratio: auto;
20742
+ }
20743
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-restricted img {
20744
+ width: 100%;
20745
+ height: 12.5rem;
20746
+ object-fit: cover;
20747
+ object-position: center;
20748
+ }
20749
+ @media screen and (min-width: 48rem) {
20750
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-restricted img {
20751
+ height: 14.375rem;
20752
+ }
20753
+ }
20754
+ @media screen and (min-width: 64rem) {
20755
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-restricted img {
20756
+ height: 18.125rem;
20757
+ }
20758
+ }
20110
20759
  .pkt-card .pkt-card__wrapper .pkt-card__link::before {
20111
20760
  content: "";
20112
20761
  position: absolute;
@@ -20431,6 +21080,15 @@ pkt-combobox {
20431
21080
  line-height: 1.375rem;
20432
21081
  }
20433
21082
 
21083
+ pkt-consent {
21084
+ display: inline;
21085
+ }
21086
+
21087
+ pkt-date-tags,
21088
+ pkt-datepicker-popup {
21089
+ display: block;
21090
+ }
21091
+
20434
21092
  .pkt-datepicker,
20435
21093
  pkt-datepicker {
20436
21094
  display: block;
@@ -21475,6 +22133,11 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
21475
22133
  * --pkt-footer-fg tekstfarge
21476
22134
  * --pkt-footer-link-hover hover-farge på lenker (default: text-action-active)
21477
22135
  */
22136
+ pkt-footer,
22137
+ pkt-footer-simple {
22138
+ display: block;
22139
+ }
22140
+
21478
22141
  .pkt-footer,
21479
22142
  .pkt-footer-simple {
21480
22143
  display: block;
@@ -21758,6 +22421,10 @@ a.pkt-footer-simple__link:hover {
21758
22421
  /*
21759
22422
  * Header component
21760
22423
  */
22424
+ pkt-header {
22425
+ display: block;
22426
+ }
22427
+
21761
22428
  .pkt-header {
21762
22429
  background-color: var(--pkt-color-background-default);
21763
22430
  border-bottom: 1px solid var(--pkt-color-border-subtle);
@@ -22079,6 +22746,10 @@ a.pkt-footer-simple__link:hover {
22079
22746
  * `$mobile-height` is the logo height on mobile (the service header drops to
22080
22747
  * 32px, the global header to 3.2rem).
22081
22748
  */
22749
+ pkt-header-global {
22750
+ display: block;
22751
+ }
22752
+
22082
22753
  .pkt-header-global-spacer {
22083
22754
  height: 6.5rem;
22084
22755
  }
@@ -22318,6 +22989,10 @@ a.pkt-footer-simple__link:hover {
22318
22989
  /*
22319
22990
  * Header menu (global mega menu)
22320
22991
  */
22992
+ pkt-header-menu {
22993
+ display: block;
22994
+ }
22995
+
22321
22996
  .pkt-header-menu {
22322
22997
  display: none;
22323
22998
  background-color: var(--pkt-color-background-default);
@@ -22903,6 +23578,10 @@ a.pkt-footer-simple__link:hover {
22903
23578
  * override downward. --mobile blocks come after --tablet so they win on
22904
23579
  * source order when both are present.
22905
23580
  */
23581
+ pkt-header-service {
23582
+ display: block;
23583
+ }
23584
+
22906
23585
  .pkt-header-service-spacer {
22907
23586
  height: 6.5rem;
22908
23587
  }
@@ -23385,6 +24064,10 @@ a.pkt-footer-simple__link:hover {
23385
24064
  /*
23386
24065
  * Header User Menu component
23387
24066
  */
24067
+ pkt-header-user-menu {
24068
+ display: block;
24069
+ }
24070
+
23388
24071
  .pkt-header-service__user-menu::after {
23389
24072
  content: "";
23390
24073
  position: absolute;
@@ -23520,6 +24203,9 @@ pkt-heading {
23520
24203
  font-weight: 600;
23521
24204
  line-height: 1.2;
23522
24205
  }
24206
+ .pkt-heading.pkt-heading {
24207
+ margin-block: 0;
24208
+ }
23523
24209
  .pkt-heading--xlarge {
23524
24210
  letter-spacing: -0.2px;
23525
24211
  font-weight: 400;
@@ -23688,6 +24374,10 @@ pkt-icon > svg {
23688
24374
  }
23689
24375
 
23690
24376
  /* inputwrapper */
24377
+ pkt-helptext {
24378
+ display: block;
24379
+ }
24380
+
23691
24381
  pkt-input-wrapper {
23692
24382
  display: block;
23693
24383
  }
@@ -24246,6 +24936,13 @@ pkt-listbox {
24246
24936
  /*
24247
24937
  * Loader component
24248
24938
  */
24939
+ pkt-loader {
24940
+ display: block;
24941
+ }
24942
+ pkt-loader[inline] {
24943
+ display: inline-block;
24944
+ }
24945
+
24249
24946
  .pkt-loader {
24250
24947
  color: currentColor;
24251
24948
  width: fit-content;
@@ -24382,6 +25079,10 @@ pkt-listbox {
24382
25079
  /*
24383
25080
  * Modal component
24384
25081
  */
25082
+ pkt-modal {
25083
+ display: contents;
25084
+ }
25085
+
24385
25086
  .pkt-modal {
24386
25087
  border: none;
24387
25088
  padding: 0;
@@ -24779,6 +25480,10 @@ pkt-messagebox {
24779
25480
  top: -15px;
24780
25481
  }
24781
25482
 
25483
+ pkt-progressbar {
25484
+ display: block;
25485
+ }
25486
+
24782
25487
  .pkt-progressbar {
24783
25488
  --pkt-progress-width: 0%;
24784
25489
  --pkt-progress-label-width: 5rem;
@@ -24837,6 +25542,10 @@ pkt-messagebox {
24837
25542
  transition: margin-left 0.5s ease;
24838
25543
  }
24839
25544
 
25545
+ pkt-searchinput {
25546
+ display: block;
25547
+ }
25548
+
24840
25549
  .pkt-searchinput {
24841
25550
  position: relative;
24842
25551
  letter-spacing: -0.2px;