@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
@@ -2992,6 +2992,9 @@
2992
2992
  /*
2993
2993
  * Link
2994
2994
  */
2995
+ pkt-link {
2996
+ display: inline;
2997
+ }
2995
2998
  a,
2996
2999
  .pkt-link-button {
2997
3000
  color: var(--pkt-color-text-action-normal);
@@ -3064,7 +3067,7 @@
3064
3067
  .pkt-link--external::after {
3065
3068
  display: inline-block;
3066
3069
  content: " ";
3067
- --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/new-window-small.svg);
3070
+ --svg: url(https://punkt-cdn.oslo.kommune.no/18.5/icons/new-window-small.svg);
3068
3071
  background-image: var(--svg);
3069
3072
  background-repeat: no-repeat;
3070
3073
  background-size: 18px 18px;
@@ -3174,6 +3177,12 @@
3174
3177
  padding-inline: 2rem;
3175
3178
  }
3176
3179
  }
3180
+ .pkt-grid--inline {
3181
+ display: inline-grid;
3182
+ }
3183
+ .pkt-grid--dense {
3184
+ grid-auto-flow: dense;
3185
+ }
3177
3186
  .pkt-grid--full {
3178
3187
  max-width: 100%;
3179
3188
  }
@@ -3492,6 +3501,9 @@
3492
3501
  .pkt-grid > .pkt-cell--bottom, .pkt-grid > * > .pkt-cell--bottom {
3493
3502
  align-self: self-end;
3494
3503
  }
3504
+ .pkt-grid > .pkt-cell.pkt-cell--span1, .pkt-grid > * > .pkt-cell.pkt-cell--span1 {
3505
+ grid-column-end: span 1;
3506
+ }
3495
3507
  .pkt-grid > .pkt-cell.pkt-cell--span2, .pkt-grid > * > .pkt-cell.pkt-cell--span2 {
3496
3508
  grid-column-end: span 2;
3497
3509
  }
@@ -3525,6 +3537,84 @@
3525
3537
  .pkt-grid > .pkt-cell.pkt-cell--span12, .pkt-grid > * > .pkt-cell.pkt-cell--span12 {
3526
3538
  grid-column-end: span 12;
3527
3539
  }
3540
+ .pkt-grid > .pkt-cell.pkt-cell--start1, .pkt-grid > * > .pkt-cell.pkt-cell--start1 {
3541
+ grid-column-start: 1;
3542
+ }
3543
+ .pkt-grid > .pkt-cell.pkt-cell--end1, .pkt-grid > * > .pkt-cell.pkt-cell--end1 {
3544
+ grid-column-end: 1;
3545
+ }
3546
+ .pkt-grid > .pkt-cell.pkt-cell--start2, .pkt-grid > * > .pkt-cell.pkt-cell--start2 {
3547
+ grid-column-start: 2;
3548
+ }
3549
+ .pkt-grid > .pkt-cell.pkt-cell--end2, .pkt-grid > * > .pkt-cell.pkt-cell--end2 {
3550
+ grid-column-end: 2;
3551
+ }
3552
+ .pkt-grid > .pkt-cell.pkt-cell--start3, .pkt-grid > * > .pkt-cell.pkt-cell--start3 {
3553
+ grid-column-start: 3;
3554
+ }
3555
+ .pkt-grid > .pkt-cell.pkt-cell--end3, .pkt-grid > * > .pkt-cell.pkt-cell--end3 {
3556
+ grid-column-end: 3;
3557
+ }
3558
+ .pkt-grid > .pkt-cell.pkt-cell--start4, .pkt-grid > * > .pkt-cell.pkt-cell--start4 {
3559
+ grid-column-start: 4;
3560
+ }
3561
+ .pkt-grid > .pkt-cell.pkt-cell--end4, .pkt-grid > * > .pkt-cell.pkt-cell--end4 {
3562
+ grid-column-end: 4;
3563
+ }
3564
+ .pkt-grid > .pkt-cell.pkt-cell--start5, .pkt-grid > * > .pkt-cell.pkt-cell--start5 {
3565
+ grid-column-start: 5;
3566
+ }
3567
+ .pkt-grid > .pkt-cell.pkt-cell--end5, .pkt-grid > * > .pkt-cell.pkt-cell--end5 {
3568
+ grid-column-end: 5;
3569
+ }
3570
+ .pkt-grid > .pkt-cell.pkt-cell--start6, .pkt-grid > * > .pkt-cell.pkt-cell--start6 {
3571
+ grid-column-start: 6;
3572
+ }
3573
+ .pkt-grid > .pkt-cell.pkt-cell--end6, .pkt-grid > * > .pkt-cell.pkt-cell--end6 {
3574
+ grid-column-end: 6;
3575
+ }
3576
+ .pkt-grid > .pkt-cell.pkt-cell--start7, .pkt-grid > * > .pkt-cell.pkt-cell--start7 {
3577
+ grid-column-start: 7;
3578
+ }
3579
+ .pkt-grid > .pkt-cell.pkt-cell--end7, .pkt-grid > * > .pkt-cell.pkt-cell--end7 {
3580
+ grid-column-end: 7;
3581
+ }
3582
+ .pkt-grid > .pkt-cell.pkt-cell--start8, .pkt-grid > * > .pkt-cell.pkt-cell--start8 {
3583
+ grid-column-start: 8;
3584
+ }
3585
+ .pkt-grid > .pkt-cell.pkt-cell--end8, .pkt-grid > * > .pkt-cell.pkt-cell--end8 {
3586
+ grid-column-end: 8;
3587
+ }
3588
+ .pkt-grid > .pkt-cell.pkt-cell--start9, .pkt-grid > * > .pkt-cell.pkt-cell--start9 {
3589
+ grid-column-start: 9;
3590
+ }
3591
+ .pkt-grid > .pkt-cell.pkt-cell--end9, .pkt-grid > * > .pkt-cell.pkt-cell--end9 {
3592
+ grid-column-end: 9;
3593
+ }
3594
+ .pkt-grid > .pkt-cell.pkt-cell--start10, .pkt-grid > * > .pkt-cell.pkt-cell--start10 {
3595
+ grid-column-start: 10;
3596
+ }
3597
+ .pkt-grid > .pkt-cell.pkt-cell--end10, .pkt-grid > * > .pkt-cell.pkt-cell--end10 {
3598
+ grid-column-end: 10;
3599
+ }
3600
+ .pkt-grid > .pkt-cell.pkt-cell--start11, .pkt-grid > * > .pkt-cell.pkt-cell--start11 {
3601
+ grid-column-start: 11;
3602
+ }
3603
+ .pkt-grid > .pkt-cell.pkt-cell--end11, .pkt-grid > * > .pkt-cell.pkt-cell--end11 {
3604
+ grid-column-end: 11;
3605
+ }
3606
+ .pkt-grid > .pkt-cell.pkt-cell--start12, .pkt-grid > * > .pkt-cell.pkt-cell--start12 {
3607
+ grid-column-start: 12;
3608
+ }
3609
+ .pkt-grid > .pkt-cell.pkt-cell--end12, .pkt-grid > * > .pkt-cell.pkt-cell--end12 {
3610
+ grid-column-end: 12;
3611
+ }
3612
+ .pkt-grid > .pkt-cell.pkt-cell--start13, .pkt-grid > * > .pkt-cell.pkt-cell--start13 {
3613
+ grid-column-start: 13;
3614
+ }
3615
+ .pkt-grid > .pkt-cell.pkt-cell--end13, .pkt-grid > * > .pkt-cell.pkt-cell--end13 {
3616
+ grid-column-end: 13;
3617
+ }
3528
3618
  /*
3529
3619
  * Responsiv grid
3530
3620
  */
@@ -5107,6 +5197,9 @@
5107
5197
  }
5108
5198
  }
5109
5199
  @media screen {
5200
+ .pkt-grid > .pkt-cell.pkt-cell--span1-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span1-mobile-up {
5201
+ grid-column-end: span 1;
5202
+ }
5110
5203
  .pkt-grid > .pkt-cell.pkt-cell--span2-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-mobile-up {
5111
5204
  grid-column-end: span 2;
5112
5205
  }
@@ -5140,8 +5233,89 @@
5140
5233
  .pkt-grid > .pkt-cell.pkt-cell--span12-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-mobile-up {
5141
5234
  grid-column-end: span 12;
5142
5235
  }
5236
+ .pkt-grid > .pkt-cell.pkt-cell--start1-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start1-mobile-up {
5237
+ grid-column-start: 1;
5238
+ }
5239
+ .pkt-grid > .pkt-cell.pkt-cell--end1-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end1-mobile-up {
5240
+ grid-column-end: 1;
5241
+ }
5242
+ .pkt-grid > .pkt-cell.pkt-cell--start2-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start2-mobile-up {
5243
+ grid-column-start: 2;
5244
+ }
5245
+ .pkt-grid > .pkt-cell.pkt-cell--end2-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end2-mobile-up {
5246
+ grid-column-end: 2;
5247
+ }
5248
+ .pkt-grid > .pkt-cell.pkt-cell--start3-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start3-mobile-up {
5249
+ grid-column-start: 3;
5250
+ }
5251
+ .pkt-grid > .pkt-cell.pkt-cell--end3-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end3-mobile-up {
5252
+ grid-column-end: 3;
5253
+ }
5254
+ .pkt-grid > .pkt-cell.pkt-cell--start4-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start4-mobile-up {
5255
+ grid-column-start: 4;
5256
+ }
5257
+ .pkt-grid > .pkt-cell.pkt-cell--end4-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end4-mobile-up {
5258
+ grid-column-end: 4;
5259
+ }
5260
+ .pkt-grid > .pkt-cell.pkt-cell--start5-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start5-mobile-up {
5261
+ grid-column-start: 5;
5262
+ }
5263
+ .pkt-grid > .pkt-cell.pkt-cell--end5-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end5-mobile-up {
5264
+ grid-column-end: 5;
5265
+ }
5266
+ .pkt-grid > .pkt-cell.pkt-cell--start6-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start6-mobile-up {
5267
+ grid-column-start: 6;
5268
+ }
5269
+ .pkt-grid > .pkt-cell.pkt-cell--end6-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end6-mobile-up {
5270
+ grid-column-end: 6;
5271
+ }
5272
+ .pkt-grid > .pkt-cell.pkt-cell--start7-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start7-mobile-up {
5273
+ grid-column-start: 7;
5274
+ }
5275
+ .pkt-grid > .pkt-cell.pkt-cell--end7-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end7-mobile-up {
5276
+ grid-column-end: 7;
5277
+ }
5278
+ .pkt-grid > .pkt-cell.pkt-cell--start8-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start8-mobile-up {
5279
+ grid-column-start: 8;
5280
+ }
5281
+ .pkt-grid > .pkt-cell.pkt-cell--end8-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end8-mobile-up {
5282
+ grid-column-end: 8;
5283
+ }
5284
+ .pkt-grid > .pkt-cell.pkt-cell--start9-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start9-mobile-up {
5285
+ grid-column-start: 9;
5286
+ }
5287
+ .pkt-grid > .pkt-cell.pkt-cell--end9-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end9-mobile-up {
5288
+ grid-column-end: 9;
5289
+ }
5290
+ .pkt-grid > .pkt-cell.pkt-cell--start10-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start10-mobile-up {
5291
+ grid-column-start: 10;
5292
+ }
5293
+ .pkt-grid > .pkt-cell.pkt-cell--end10-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end10-mobile-up {
5294
+ grid-column-end: 10;
5295
+ }
5296
+ .pkt-grid > .pkt-cell.pkt-cell--start11-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start11-mobile-up {
5297
+ grid-column-start: 11;
5298
+ }
5299
+ .pkt-grid > .pkt-cell.pkt-cell--end11-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end11-mobile-up {
5300
+ grid-column-end: 11;
5301
+ }
5302
+ .pkt-grid > .pkt-cell.pkt-cell--start12-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start12-mobile-up {
5303
+ grid-column-start: 12;
5304
+ }
5305
+ .pkt-grid > .pkt-cell.pkt-cell--end12-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end12-mobile-up {
5306
+ grid-column-end: 12;
5307
+ }
5308
+ .pkt-grid > .pkt-cell.pkt-cell--start13-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--start13-mobile-up {
5309
+ grid-column-start: 13;
5310
+ }
5311
+ .pkt-grid > .pkt-cell.pkt-cell--end13-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--end13-mobile-up {
5312
+ grid-column-end: 13;
5313
+ }
5143
5314
  }
5144
5315
  @media screen and (min-width: 36rem) {
5316
+ .pkt-grid > .pkt-cell.pkt-cell--span1-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span1-phablet-up {
5317
+ grid-column-end: span 1;
5318
+ }
5145
5319
  .pkt-grid > .pkt-cell.pkt-cell--span2-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-phablet-up {
5146
5320
  grid-column-end: span 2;
5147
5321
  }
@@ -5175,8 +5349,89 @@
5175
5349
  .pkt-grid > .pkt-cell.pkt-cell--span12-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-phablet-up {
5176
5350
  grid-column-end: span 12;
5177
5351
  }
5352
+ .pkt-grid > .pkt-cell.pkt-cell--start1-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start1-phablet-up {
5353
+ grid-column-start: 1;
5354
+ }
5355
+ .pkt-grid > .pkt-cell.pkt-cell--end1-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end1-phablet-up {
5356
+ grid-column-end: 1;
5357
+ }
5358
+ .pkt-grid > .pkt-cell.pkt-cell--start2-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start2-phablet-up {
5359
+ grid-column-start: 2;
5360
+ }
5361
+ .pkt-grid > .pkt-cell.pkt-cell--end2-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end2-phablet-up {
5362
+ grid-column-end: 2;
5363
+ }
5364
+ .pkt-grid > .pkt-cell.pkt-cell--start3-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start3-phablet-up {
5365
+ grid-column-start: 3;
5366
+ }
5367
+ .pkt-grid > .pkt-cell.pkt-cell--end3-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end3-phablet-up {
5368
+ grid-column-end: 3;
5369
+ }
5370
+ .pkt-grid > .pkt-cell.pkt-cell--start4-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start4-phablet-up {
5371
+ grid-column-start: 4;
5372
+ }
5373
+ .pkt-grid > .pkt-cell.pkt-cell--end4-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end4-phablet-up {
5374
+ grid-column-end: 4;
5375
+ }
5376
+ .pkt-grid > .pkt-cell.pkt-cell--start5-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start5-phablet-up {
5377
+ grid-column-start: 5;
5378
+ }
5379
+ .pkt-grid > .pkt-cell.pkt-cell--end5-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end5-phablet-up {
5380
+ grid-column-end: 5;
5381
+ }
5382
+ .pkt-grid > .pkt-cell.pkt-cell--start6-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start6-phablet-up {
5383
+ grid-column-start: 6;
5384
+ }
5385
+ .pkt-grid > .pkt-cell.pkt-cell--end6-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end6-phablet-up {
5386
+ grid-column-end: 6;
5387
+ }
5388
+ .pkt-grid > .pkt-cell.pkt-cell--start7-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start7-phablet-up {
5389
+ grid-column-start: 7;
5390
+ }
5391
+ .pkt-grid > .pkt-cell.pkt-cell--end7-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end7-phablet-up {
5392
+ grid-column-end: 7;
5393
+ }
5394
+ .pkt-grid > .pkt-cell.pkt-cell--start8-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start8-phablet-up {
5395
+ grid-column-start: 8;
5396
+ }
5397
+ .pkt-grid > .pkt-cell.pkt-cell--end8-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end8-phablet-up {
5398
+ grid-column-end: 8;
5399
+ }
5400
+ .pkt-grid > .pkt-cell.pkt-cell--start9-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start9-phablet-up {
5401
+ grid-column-start: 9;
5402
+ }
5403
+ .pkt-grid > .pkt-cell.pkt-cell--end9-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end9-phablet-up {
5404
+ grid-column-end: 9;
5405
+ }
5406
+ .pkt-grid > .pkt-cell.pkt-cell--start10-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start10-phablet-up {
5407
+ grid-column-start: 10;
5408
+ }
5409
+ .pkt-grid > .pkt-cell.pkt-cell--end10-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end10-phablet-up {
5410
+ grid-column-end: 10;
5411
+ }
5412
+ .pkt-grid > .pkt-cell.pkt-cell--start11-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start11-phablet-up {
5413
+ grid-column-start: 11;
5414
+ }
5415
+ .pkt-grid > .pkt-cell.pkt-cell--end11-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end11-phablet-up {
5416
+ grid-column-end: 11;
5417
+ }
5418
+ .pkt-grid > .pkt-cell.pkt-cell--start12-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start12-phablet-up {
5419
+ grid-column-start: 12;
5420
+ }
5421
+ .pkt-grid > .pkt-cell.pkt-cell--end12-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end12-phablet-up {
5422
+ grid-column-end: 12;
5423
+ }
5424
+ .pkt-grid > .pkt-cell.pkt-cell--start13-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start13-phablet-up {
5425
+ grid-column-start: 13;
5426
+ }
5427
+ .pkt-grid > .pkt-cell.pkt-cell--end13-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end13-phablet-up {
5428
+ grid-column-end: 13;
5429
+ }
5178
5430
  }
5179
5431
  @media screen and (min-width: 48rem) {
5432
+ .pkt-grid > .pkt-cell.pkt-cell--span1-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span1-tablet-up {
5433
+ grid-column-end: span 1;
5434
+ }
5180
5435
  .pkt-grid > .pkt-cell.pkt-cell--span2-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-tablet-up {
5181
5436
  grid-column-end: span 2;
5182
5437
  }
@@ -5210,8 +5465,89 @@
5210
5465
  .pkt-grid > .pkt-cell.pkt-cell--span12-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-tablet-up {
5211
5466
  grid-column-end: span 12;
5212
5467
  }
5468
+ .pkt-grid > .pkt-cell.pkt-cell--start1-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start1-tablet-up {
5469
+ grid-column-start: 1;
5470
+ }
5471
+ .pkt-grid > .pkt-cell.pkt-cell--end1-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end1-tablet-up {
5472
+ grid-column-end: 1;
5473
+ }
5474
+ .pkt-grid > .pkt-cell.pkt-cell--start2-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start2-tablet-up {
5475
+ grid-column-start: 2;
5476
+ }
5477
+ .pkt-grid > .pkt-cell.pkt-cell--end2-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end2-tablet-up {
5478
+ grid-column-end: 2;
5479
+ }
5480
+ .pkt-grid > .pkt-cell.pkt-cell--start3-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start3-tablet-up {
5481
+ grid-column-start: 3;
5482
+ }
5483
+ .pkt-grid > .pkt-cell.pkt-cell--end3-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end3-tablet-up {
5484
+ grid-column-end: 3;
5485
+ }
5486
+ .pkt-grid > .pkt-cell.pkt-cell--start4-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start4-tablet-up {
5487
+ grid-column-start: 4;
5488
+ }
5489
+ .pkt-grid > .pkt-cell.pkt-cell--end4-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end4-tablet-up {
5490
+ grid-column-end: 4;
5491
+ }
5492
+ .pkt-grid > .pkt-cell.pkt-cell--start5-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start5-tablet-up {
5493
+ grid-column-start: 5;
5494
+ }
5495
+ .pkt-grid > .pkt-cell.pkt-cell--end5-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end5-tablet-up {
5496
+ grid-column-end: 5;
5497
+ }
5498
+ .pkt-grid > .pkt-cell.pkt-cell--start6-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start6-tablet-up {
5499
+ grid-column-start: 6;
5500
+ }
5501
+ .pkt-grid > .pkt-cell.pkt-cell--end6-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end6-tablet-up {
5502
+ grid-column-end: 6;
5503
+ }
5504
+ .pkt-grid > .pkt-cell.pkt-cell--start7-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start7-tablet-up {
5505
+ grid-column-start: 7;
5506
+ }
5507
+ .pkt-grid > .pkt-cell.pkt-cell--end7-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end7-tablet-up {
5508
+ grid-column-end: 7;
5509
+ }
5510
+ .pkt-grid > .pkt-cell.pkt-cell--start8-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start8-tablet-up {
5511
+ grid-column-start: 8;
5512
+ }
5513
+ .pkt-grid > .pkt-cell.pkt-cell--end8-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end8-tablet-up {
5514
+ grid-column-end: 8;
5515
+ }
5516
+ .pkt-grid > .pkt-cell.pkt-cell--start9-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start9-tablet-up {
5517
+ grid-column-start: 9;
5518
+ }
5519
+ .pkt-grid > .pkt-cell.pkt-cell--end9-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end9-tablet-up {
5520
+ grid-column-end: 9;
5521
+ }
5522
+ .pkt-grid > .pkt-cell.pkt-cell--start10-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start10-tablet-up {
5523
+ grid-column-start: 10;
5524
+ }
5525
+ .pkt-grid > .pkt-cell.pkt-cell--end10-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end10-tablet-up {
5526
+ grid-column-end: 10;
5527
+ }
5528
+ .pkt-grid > .pkt-cell.pkt-cell--start11-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start11-tablet-up {
5529
+ grid-column-start: 11;
5530
+ }
5531
+ .pkt-grid > .pkt-cell.pkt-cell--end11-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end11-tablet-up {
5532
+ grid-column-end: 11;
5533
+ }
5534
+ .pkt-grid > .pkt-cell.pkt-cell--start12-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start12-tablet-up {
5535
+ grid-column-start: 12;
5536
+ }
5537
+ .pkt-grid > .pkt-cell.pkt-cell--end12-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end12-tablet-up {
5538
+ grid-column-end: 12;
5539
+ }
5540
+ .pkt-grid > .pkt-cell.pkt-cell--start13-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--start13-tablet-up {
5541
+ grid-column-start: 13;
5542
+ }
5543
+ .pkt-grid > .pkt-cell.pkt-cell--end13-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--end13-tablet-up {
5544
+ grid-column-end: 13;
5545
+ }
5213
5546
  }
5214
5547
  @media screen and (min-width: 64rem) {
5548
+ .pkt-grid > .pkt-cell.pkt-cell--span1-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span1-tablet-big-up {
5549
+ grid-column-end: span 1;
5550
+ }
5215
5551
  .pkt-grid > .pkt-cell.pkt-cell--span2-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-tablet-big-up {
5216
5552
  grid-column-end: span 2;
5217
5553
  }
@@ -5245,8 +5581,89 @@
5245
5581
  .pkt-grid > .pkt-cell.pkt-cell--span12-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-tablet-big-up {
5246
5582
  grid-column-end: span 12;
5247
5583
  }
5584
+ .pkt-grid > .pkt-cell.pkt-cell--start1-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start1-tablet-big-up {
5585
+ grid-column-start: 1;
5586
+ }
5587
+ .pkt-grid > .pkt-cell.pkt-cell--end1-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end1-tablet-big-up {
5588
+ grid-column-end: 1;
5589
+ }
5590
+ .pkt-grid > .pkt-cell.pkt-cell--start2-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start2-tablet-big-up {
5591
+ grid-column-start: 2;
5592
+ }
5593
+ .pkt-grid > .pkt-cell.pkt-cell--end2-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end2-tablet-big-up {
5594
+ grid-column-end: 2;
5595
+ }
5596
+ .pkt-grid > .pkt-cell.pkt-cell--start3-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start3-tablet-big-up {
5597
+ grid-column-start: 3;
5598
+ }
5599
+ .pkt-grid > .pkt-cell.pkt-cell--end3-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end3-tablet-big-up {
5600
+ grid-column-end: 3;
5601
+ }
5602
+ .pkt-grid > .pkt-cell.pkt-cell--start4-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start4-tablet-big-up {
5603
+ grid-column-start: 4;
5604
+ }
5605
+ .pkt-grid > .pkt-cell.pkt-cell--end4-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end4-tablet-big-up {
5606
+ grid-column-end: 4;
5607
+ }
5608
+ .pkt-grid > .pkt-cell.pkt-cell--start5-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start5-tablet-big-up {
5609
+ grid-column-start: 5;
5610
+ }
5611
+ .pkt-grid > .pkt-cell.pkt-cell--end5-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end5-tablet-big-up {
5612
+ grid-column-end: 5;
5613
+ }
5614
+ .pkt-grid > .pkt-cell.pkt-cell--start6-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start6-tablet-big-up {
5615
+ grid-column-start: 6;
5616
+ }
5617
+ .pkt-grid > .pkt-cell.pkt-cell--end6-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end6-tablet-big-up {
5618
+ grid-column-end: 6;
5619
+ }
5620
+ .pkt-grid > .pkt-cell.pkt-cell--start7-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start7-tablet-big-up {
5621
+ grid-column-start: 7;
5622
+ }
5623
+ .pkt-grid > .pkt-cell.pkt-cell--end7-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end7-tablet-big-up {
5624
+ grid-column-end: 7;
5625
+ }
5626
+ .pkt-grid > .pkt-cell.pkt-cell--start8-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start8-tablet-big-up {
5627
+ grid-column-start: 8;
5628
+ }
5629
+ .pkt-grid > .pkt-cell.pkt-cell--end8-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end8-tablet-big-up {
5630
+ grid-column-end: 8;
5631
+ }
5632
+ .pkt-grid > .pkt-cell.pkt-cell--start9-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start9-tablet-big-up {
5633
+ grid-column-start: 9;
5634
+ }
5635
+ .pkt-grid > .pkt-cell.pkt-cell--end9-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end9-tablet-big-up {
5636
+ grid-column-end: 9;
5637
+ }
5638
+ .pkt-grid > .pkt-cell.pkt-cell--start10-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start10-tablet-big-up {
5639
+ grid-column-start: 10;
5640
+ }
5641
+ .pkt-grid > .pkt-cell.pkt-cell--end10-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end10-tablet-big-up {
5642
+ grid-column-end: 10;
5643
+ }
5644
+ .pkt-grid > .pkt-cell.pkt-cell--start11-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start11-tablet-big-up {
5645
+ grid-column-start: 11;
5646
+ }
5647
+ .pkt-grid > .pkt-cell.pkt-cell--end11-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end11-tablet-big-up {
5648
+ grid-column-end: 11;
5649
+ }
5650
+ .pkt-grid > .pkt-cell.pkt-cell--start12-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start12-tablet-big-up {
5651
+ grid-column-start: 12;
5652
+ }
5653
+ .pkt-grid > .pkt-cell.pkt-cell--end12-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end12-tablet-big-up {
5654
+ grid-column-end: 12;
5655
+ }
5656
+ .pkt-grid > .pkt-cell.pkt-cell--start13-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--start13-tablet-big-up {
5657
+ grid-column-start: 13;
5658
+ }
5659
+ .pkt-grid > .pkt-cell.pkt-cell--end13-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--end13-tablet-big-up {
5660
+ grid-column-end: 13;
5661
+ }
5248
5662
  }
5249
5663
  @media screen and (min-width: 80rem) {
5664
+ .pkt-grid > .pkt-cell.pkt-cell--span1-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span1-laptop-up {
5665
+ grid-column-end: span 1;
5666
+ }
5250
5667
  .pkt-grid > .pkt-cell.pkt-cell--span2-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-laptop-up {
5251
5668
  grid-column-end: span 2;
5252
5669
  }
@@ -5280,8 +5697,89 @@
5280
5697
  .pkt-grid > .pkt-cell.pkt-cell--span12-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-laptop-up {
5281
5698
  grid-column-end: span 12;
5282
5699
  }
5700
+ .pkt-grid > .pkt-cell.pkt-cell--start1-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start1-laptop-up {
5701
+ grid-column-start: 1;
5702
+ }
5703
+ .pkt-grid > .pkt-cell.pkt-cell--end1-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end1-laptop-up {
5704
+ grid-column-end: 1;
5705
+ }
5706
+ .pkt-grid > .pkt-cell.pkt-cell--start2-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start2-laptop-up {
5707
+ grid-column-start: 2;
5708
+ }
5709
+ .pkt-grid > .pkt-cell.pkt-cell--end2-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end2-laptop-up {
5710
+ grid-column-end: 2;
5711
+ }
5712
+ .pkt-grid > .pkt-cell.pkt-cell--start3-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start3-laptop-up {
5713
+ grid-column-start: 3;
5714
+ }
5715
+ .pkt-grid > .pkt-cell.pkt-cell--end3-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end3-laptop-up {
5716
+ grid-column-end: 3;
5717
+ }
5718
+ .pkt-grid > .pkt-cell.pkt-cell--start4-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start4-laptop-up {
5719
+ grid-column-start: 4;
5720
+ }
5721
+ .pkt-grid > .pkt-cell.pkt-cell--end4-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end4-laptop-up {
5722
+ grid-column-end: 4;
5723
+ }
5724
+ .pkt-grid > .pkt-cell.pkt-cell--start5-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start5-laptop-up {
5725
+ grid-column-start: 5;
5726
+ }
5727
+ .pkt-grid > .pkt-cell.pkt-cell--end5-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end5-laptop-up {
5728
+ grid-column-end: 5;
5729
+ }
5730
+ .pkt-grid > .pkt-cell.pkt-cell--start6-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start6-laptop-up {
5731
+ grid-column-start: 6;
5732
+ }
5733
+ .pkt-grid > .pkt-cell.pkt-cell--end6-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end6-laptop-up {
5734
+ grid-column-end: 6;
5735
+ }
5736
+ .pkt-grid > .pkt-cell.pkt-cell--start7-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start7-laptop-up {
5737
+ grid-column-start: 7;
5738
+ }
5739
+ .pkt-grid > .pkt-cell.pkt-cell--end7-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end7-laptop-up {
5740
+ grid-column-end: 7;
5741
+ }
5742
+ .pkt-grid > .pkt-cell.pkt-cell--start8-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start8-laptop-up {
5743
+ grid-column-start: 8;
5744
+ }
5745
+ .pkt-grid > .pkt-cell.pkt-cell--end8-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end8-laptop-up {
5746
+ grid-column-end: 8;
5747
+ }
5748
+ .pkt-grid > .pkt-cell.pkt-cell--start9-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start9-laptop-up {
5749
+ grid-column-start: 9;
5750
+ }
5751
+ .pkt-grid > .pkt-cell.pkt-cell--end9-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end9-laptop-up {
5752
+ grid-column-end: 9;
5753
+ }
5754
+ .pkt-grid > .pkt-cell.pkt-cell--start10-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start10-laptop-up {
5755
+ grid-column-start: 10;
5756
+ }
5757
+ .pkt-grid > .pkt-cell.pkt-cell--end10-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end10-laptop-up {
5758
+ grid-column-end: 10;
5759
+ }
5760
+ .pkt-grid > .pkt-cell.pkt-cell--start11-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start11-laptop-up {
5761
+ grid-column-start: 11;
5762
+ }
5763
+ .pkt-grid > .pkt-cell.pkt-cell--end11-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end11-laptop-up {
5764
+ grid-column-end: 11;
5765
+ }
5766
+ .pkt-grid > .pkt-cell.pkt-cell--start12-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start12-laptop-up {
5767
+ grid-column-start: 12;
5768
+ }
5769
+ .pkt-grid > .pkt-cell.pkt-cell--end12-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end12-laptop-up {
5770
+ grid-column-end: 12;
5771
+ }
5772
+ .pkt-grid > .pkt-cell.pkt-cell--start13-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start13-laptop-up {
5773
+ grid-column-start: 13;
5774
+ }
5775
+ .pkt-grid > .pkt-cell.pkt-cell--end13-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end13-laptop-up {
5776
+ grid-column-end: 13;
5777
+ }
5283
5778
  }
5284
5779
  @media screen and (min-width: 100rem) {
5780
+ .pkt-grid > .pkt-cell.pkt-cell--span1-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span1-desktop-up {
5781
+ grid-column-end: span 1;
5782
+ }
5285
5783
  .pkt-grid > .pkt-cell.pkt-cell--span2-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-desktop-up {
5286
5784
  grid-column-end: span 2;
5287
5785
  }
@@ -5315,6 +5813,84 @@
5315
5813
  .pkt-grid > .pkt-cell.pkt-cell--span12-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-desktop-up {
5316
5814
  grid-column-end: span 12;
5317
5815
  }
5816
+ .pkt-grid > .pkt-cell.pkt-cell--start1-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start1-desktop-up {
5817
+ grid-column-start: 1;
5818
+ }
5819
+ .pkt-grid > .pkt-cell.pkt-cell--end1-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end1-desktop-up {
5820
+ grid-column-end: 1;
5821
+ }
5822
+ .pkt-grid > .pkt-cell.pkt-cell--start2-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start2-desktop-up {
5823
+ grid-column-start: 2;
5824
+ }
5825
+ .pkt-grid > .pkt-cell.pkt-cell--end2-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end2-desktop-up {
5826
+ grid-column-end: 2;
5827
+ }
5828
+ .pkt-grid > .pkt-cell.pkt-cell--start3-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start3-desktop-up {
5829
+ grid-column-start: 3;
5830
+ }
5831
+ .pkt-grid > .pkt-cell.pkt-cell--end3-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end3-desktop-up {
5832
+ grid-column-end: 3;
5833
+ }
5834
+ .pkt-grid > .pkt-cell.pkt-cell--start4-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start4-desktop-up {
5835
+ grid-column-start: 4;
5836
+ }
5837
+ .pkt-grid > .pkt-cell.pkt-cell--end4-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end4-desktop-up {
5838
+ grid-column-end: 4;
5839
+ }
5840
+ .pkt-grid > .pkt-cell.pkt-cell--start5-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start5-desktop-up {
5841
+ grid-column-start: 5;
5842
+ }
5843
+ .pkt-grid > .pkt-cell.pkt-cell--end5-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end5-desktop-up {
5844
+ grid-column-end: 5;
5845
+ }
5846
+ .pkt-grid > .pkt-cell.pkt-cell--start6-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start6-desktop-up {
5847
+ grid-column-start: 6;
5848
+ }
5849
+ .pkt-grid > .pkt-cell.pkt-cell--end6-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end6-desktop-up {
5850
+ grid-column-end: 6;
5851
+ }
5852
+ .pkt-grid > .pkt-cell.pkt-cell--start7-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start7-desktop-up {
5853
+ grid-column-start: 7;
5854
+ }
5855
+ .pkt-grid > .pkt-cell.pkt-cell--end7-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end7-desktop-up {
5856
+ grid-column-end: 7;
5857
+ }
5858
+ .pkt-grid > .pkt-cell.pkt-cell--start8-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start8-desktop-up {
5859
+ grid-column-start: 8;
5860
+ }
5861
+ .pkt-grid > .pkt-cell.pkt-cell--end8-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end8-desktop-up {
5862
+ grid-column-end: 8;
5863
+ }
5864
+ .pkt-grid > .pkt-cell.pkt-cell--start9-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start9-desktop-up {
5865
+ grid-column-start: 9;
5866
+ }
5867
+ .pkt-grid > .pkt-cell.pkt-cell--end9-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end9-desktop-up {
5868
+ grid-column-end: 9;
5869
+ }
5870
+ .pkt-grid > .pkt-cell.pkt-cell--start10-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start10-desktop-up {
5871
+ grid-column-start: 10;
5872
+ }
5873
+ .pkt-grid > .pkt-cell.pkt-cell--end10-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end10-desktop-up {
5874
+ grid-column-end: 10;
5875
+ }
5876
+ .pkt-grid > .pkt-cell.pkt-cell--start11-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start11-desktop-up {
5877
+ grid-column-start: 11;
5878
+ }
5879
+ .pkt-grid > .pkt-cell.pkt-cell--end11-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end11-desktop-up {
5880
+ grid-column-end: 11;
5881
+ }
5882
+ .pkt-grid > .pkt-cell.pkt-cell--start12-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start12-desktop-up {
5883
+ grid-column-start: 12;
5884
+ }
5885
+ .pkt-grid > .pkt-cell.pkt-cell--end12-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end12-desktop-up {
5886
+ grid-column-end: 12;
5887
+ }
5888
+ .pkt-grid > .pkt-cell.pkt-cell--start13-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--start13-desktop-up {
5889
+ grid-column-start: 13;
5890
+ }
5891
+ .pkt-grid > .pkt-cell.pkt-cell--end13-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--end13-desktop-up {
5892
+ grid-column-end: 13;
5893
+ }
5318
5894
  }
5319
5895
  .pkt-layout {
5320
5896
  display: grid;
@@ -16275,6 +16851,12 @@
16275
16851
  * Variant: label-only, icon-left, icon-right, icon-only
16276
16852
  * Background: light, dark
16277
16853
  */
16854
+ pkt-button {
16855
+ display: inline-block;
16856
+ }
16857
+ pkt-button[full-width] {
16858
+ display: block;
16859
+ }
16278
16860
  .pkt-btn__icon svg {
16279
16861
  --ring-color: var(--pkt-color-brand-dark-blue-700);
16280
16862
  --spinner-color: var(--pkt-color-brand-blue-1000);
@@ -16910,6 +17492,10 @@
16910
17492
  *
16911
17493
  *
16912
17494
  */
17495
+ pkt-checkbox,
17496
+ pkt-radiobutton {
17497
+ display: block;
17498
+ }
16913
17499
  .pkt-input-check {
16914
17500
  display: flex;
16915
17501
  flex-direction: column;
@@ -17004,7 +17590,7 @@
17004
17590
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
17005
17591
  }
17006
17592
  .pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]) {
17007
- --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/minus-sign.svg);
17593
+ --svg: url(https://punkt-cdn.oslo.kommune.no/18.5/icons/minus-sign.svg);
17008
17594
  position: relative;
17009
17595
  background-color: var(--pkt-color-input-border-normal);
17010
17596
  }
@@ -17030,7 +17616,7 @@
17030
17616
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
17031
17617
  }
17032
17618
  .pkt-input-check__input-checkbox:checked[type=checkbox] {
17033
- --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/check-medium.svg);
17619
+ --svg: url(https://punkt-cdn.oslo.kommune.no/18.5/icons/check-medium.svg);
17034
17620
  position: relative;
17035
17621
  background-color: var(--pkt-color-input-border-normal);
17036
17622
  }
@@ -17088,7 +17674,7 @@
17088
17674
  cursor: not-allowed;
17089
17675
  }
17090
17676
  .pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
17091
- --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/check-medium.svg);
17677
+ --svg: url(https://punkt-cdn.oslo.kommune.no/18.5/icons/check-medium.svg);
17092
17678
  --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
17093
17679
  filter: grayscale(100%) brightness(400%);
17094
17680
  }
@@ -17249,7 +17835,8 @@
17249
17835
  display: inline-block;
17250
17836
  width: fit-content;
17251
17837
  }
17252
- :where(.pkt-textinput:has(.pkt-input:not(.pkt-input--fullwidth):not([size]):not([cols]))) {
17838
+ :where(.pkt-textinput:has(.pkt-input:not(.pkt-input--fullwidth):not([size]):not([cols])),
17839
+ .pkt-select:has(.pkt-input:not(.pkt-input--fullwidth):not([size]):not([cols]))) {
17253
17840
  width: min(31rem, 100%);
17254
17841
  }
17255
17842
  .pkt-textinput:has(.pkt-input--fullwidth),
@@ -17320,9 +17907,6 @@
17320
17907
  .pkt-input:where([size], [cols]) {
17321
17908
  width: auto;
17322
17909
  }
17323
- .pkt-input:where(select):not(.pkt-input--fullwidth) {
17324
- width: auto;
17325
- }
17326
17910
  .pkt-input__container:where(:has(> :is(input[size], textarea[cols]))) {
17327
17911
  width: fit-content;
17328
17912
  align-self: flex-start;
@@ -17340,7 +17924,7 @@
17340
17924
  padding-right: 3rem;
17341
17925
  }
17342
17926
  .pkt-input:is(select):not([multiple]) {
17343
- --svg: url(https://punkt-cdn.oslo.kommune.no/18.3/icons/chevron-thin-down.svg);
17927
+ --svg: url(https://punkt-cdn.oslo.kommune.no/18.5/icons/chevron-thin-down.svg);
17344
17928
  background-image: var(--svg);
17345
17929
  background-repeat: no-repeat;
17346
17930
  background-position: right 0.7rem top 50%;
@@ -18414,6 +18998,9 @@
18414
18998
  /*
18415
18999
  * Back link component
18416
19000
  */
19001
+ pkt-backlink {
19002
+ display: block;
19003
+ }
18417
19004
  .pkt-back-link .pkt-link {
18418
19005
  display: inline-flex;
18419
19006
  align-items: center;
@@ -18498,6 +19085,9 @@
18498
19085
  /*
18499
19086
  * Breadcrumbs component
18500
19087
  */
19088
+ pkt-breadcrumbs {
19089
+ display: block;
19090
+ }
18501
19091
  .pkt-breadcrumbs {
18502
19092
  position: relative;
18503
19093
  letter-spacing: -0.2px;
@@ -18621,6 +19211,7 @@
18621
19211
  .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select),
18622
19212
  pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select) {
18623
19213
  text-align: right;
19214
+ width: auto;
18624
19215
  }
18625
19216
  .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker > .pkt-cal-input-year,
18626
19217
  pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker > .pkt-cal-input-year {
@@ -18810,15 +19401,9 @@
18810
19401
  .pkt-card.pkt-card--padding-none {
18811
19402
  padding: 0;
18812
19403
  }
18813
- .pkt-card .pkt-card__heading h1,
18814
- .pkt-card .pkt-card__heading h2,
18815
- .pkt-card .pkt-card__heading h3,
18816
- .pkt-card .pkt-card__heading h4,
18817
- .pkt-card .pkt-card__heading h5 {
19404
+ .pkt-card.pkt-card .pkt-card__heading {
18818
19405
  padding: 0;
18819
19406
  margin: 0;
18820
- font-size: 1.875rem;
18821
- font-weight: 400;
18822
19407
  margin-block-end: 0.5rem;
18823
19408
  hyphens: auto;
18824
19409
  overflow-wrap: break-word;
@@ -18828,19 +19413,23 @@
18828
19413
  text-underline-offset: 0.15em;
18829
19414
  }
18830
19415
  .pkt-card p.pkt-card__subheading {
19416
+ letter-spacing: -0.2px;
19417
+ font-weight: 300;
19418
+ font-size: 1.25rem;
19419
+ line-height: 2rem;
18831
19420
  padding: 0;
18832
19421
  margin: 0;
18833
- line-height: unset;
18834
19422
  margin-block-end: 1rem;
18835
- font-size: 1.25rem;
18836
- font-weight: 300;
18837
19423
  hyphens: auto;
18838
19424
  overflow-wrap: break-word;
18839
19425
  }
18840
19426
  .pkt-card .pkt-card__metadata {
19427
+ letter-spacing: -0.2px;
19428
+ font-weight: 300;
19429
+ font-size: 1rem;
19430
+ line-height: 1.5rem;
18841
19431
  margin-block-start: 1rem;
18842
19432
  margin-block-end: 0;
18843
- line-height: unset;
18844
19433
  gap: 0.5rem;
18845
19434
  }
18846
19435
  .pkt-card .pkt-card__metadata-lead {
@@ -18889,6 +19478,21 @@
18889
19478
  max-height: 400px;
18890
19479
  max-width: 400px;
18891
19480
  }
19481
+ .pkt-card.pkt-card--zoom .pkt-card__image img {
19482
+ transform: scale(1);
19483
+ transition: transform 0.5s ease-in-out;
19484
+ }
19485
+ .pkt-card.pkt-card--zoom:hover .pkt-card__image img, .pkt-card.pkt-card--zoom:focus-within .pkt-card__image img {
19486
+ transform: scale(1.1);
19487
+ }
19488
+ @media (prefers-reduced-motion: reduce) {
19489
+ .pkt-card.pkt-card--zoom .pkt-card__image img {
19490
+ transition: none;
19491
+ }
19492
+ .pkt-card.pkt-card--zoom:hover .pkt-card__image img, .pkt-card.pkt-card--zoom:focus-within .pkt-card__image img {
19493
+ transform: none;
19494
+ }
19495
+ }
18892
19496
  .pkt-card.pkt-card--horizontal .pkt-card__image {
18893
19497
  max-width: 400px;
18894
19498
  margin-inline-end: 2rem;
@@ -18918,6 +19522,46 @@
18918
19522
  aspect-ratio: 19/10;
18919
19523
  }
18920
19524
  }
19525
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-auto {
19526
+ aspect-ratio: auto;
19527
+ }
19528
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-auto img {
19529
+ height: auto;
19530
+ }
19531
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-1-1 {
19532
+ aspect-ratio: 1;
19533
+ }
19534
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-4-3 {
19535
+ aspect-ratio: 4/3;
19536
+ }
19537
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-3-2 {
19538
+ aspect-ratio: 3/2;
19539
+ }
19540
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-16-9 {
19541
+ aspect-ratio: 16/9;
19542
+ }
19543
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-aspect-19-10 {
19544
+ aspect-ratio: 19/10;
19545
+ }
19546
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-restricted {
19547
+ aspect-ratio: auto;
19548
+ }
19549
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-restricted img {
19550
+ width: 100%;
19551
+ height: 12.5rem;
19552
+ object-fit: cover;
19553
+ object-position: center;
19554
+ }
19555
+ @media screen and (min-width: 48rem) {
19556
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-restricted img {
19557
+ height: 14.375rem;
19558
+ }
19559
+ }
19560
+ @media screen and (min-width: 64rem) {
19561
+ .pkt-card.pkt-card .pkt-card__image.pkt-card__image-restricted img {
19562
+ height: 18.125rem;
19563
+ }
19564
+ }
18921
19565
  .pkt-card .pkt-card__wrapper .pkt-card__link::before {
18922
19566
  content: "";
18923
19567
  position: absolute;
@@ -19238,6 +19882,13 @@
19238
19882
  font-size: 0.875rem;
19239
19883
  line-height: 1.375rem;
19240
19884
  }
19885
+ pkt-consent {
19886
+ display: inline;
19887
+ }
19888
+ pkt-date-tags,
19889
+ pkt-datepicker-popup {
19890
+ display: block;
19891
+ }
19241
19892
  .pkt-datepicker,
19242
19893
  pkt-datepicker {
19243
19894
  display: block;
@@ -20256,6 +20907,10 @@
20256
20907
  * --pkt-footer-fg tekstfarge
20257
20908
  * --pkt-footer-link-hover hover-farge på lenker (default: text-action-active)
20258
20909
  */
20910
+ pkt-footer,
20911
+ pkt-footer-simple {
20912
+ display: block;
20913
+ }
20259
20914
  .pkt-footer,
20260
20915
  .pkt-footer-simple {
20261
20916
  display: block;
@@ -20535,6 +21190,9 @@
20535
21190
  /*
20536
21191
  * Header component
20537
21192
  */
21193
+ pkt-header {
21194
+ display: block;
21195
+ }
20538
21196
  .pkt-header {
20539
21197
  background-color: var(--pkt-color-background-default);
20540
21198
  border-bottom: 1px solid var(--pkt-color-border-subtle);
@@ -20854,6 +21512,9 @@
20854
21512
  * `$mobile-height` is the logo height on mobile (the service header drops to
20855
21513
  * 32px, the global header to 3.2rem).
20856
21514
  */
21515
+ pkt-header-global {
21516
+ display: block;
21517
+ }
20857
21518
  .pkt-header-global-spacer {
20858
21519
  height: 6.5rem;
20859
21520
  }
@@ -21090,6 +21751,9 @@
21090
21751
  /*
21091
21752
  * Header menu (global mega menu)
21092
21753
  */
21754
+ pkt-header-menu {
21755
+ display: block;
21756
+ }
21093
21757
  .pkt-header-menu {
21094
21758
  display: none;
21095
21759
  background-color: var(--pkt-color-background-default);
@@ -21674,6 +22338,9 @@
21674
22338
  * override downward. --mobile blocks come after --tablet so they win on
21675
22339
  * source order when both are present.
21676
22340
  */
22341
+ pkt-header-service {
22342
+ display: block;
22343
+ }
21677
22344
  .pkt-header-service-spacer {
21678
22345
  height: 6.5rem;
21679
22346
  }
@@ -22151,6 +22818,9 @@
22151
22818
  /*
22152
22819
  * Header User Menu component
22153
22820
  */
22821
+ pkt-header-user-menu {
22822
+ display: block;
22823
+ }
22154
22824
  .pkt-header-service__user-menu::after {
22155
22825
  content: "";
22156
22826
  position: absolute;
@@ -22282,6 +22952,9 @@
22282
22952
  font-weight: 600;
22283
22953
  line-height: 1.2;
22284
22954
  }
22955
+ .pkt-heading.pkt-heading {
22956
+ margin-block: 0;
22957
+ }
22285
22958
  .pkt-heading--xlarge {
22286
22959
  letter-spacing: -0.2px;
22287
22960
  font-weight: 400;
@@ -22447,6 +23120,9 @@
22447
23120
  width: 4rem;
22448
23121
  }
22449
23122
  /* inputwrapper */
23123
+ pkt-helptext {
23124
+ display: block;
23125
+ }
22450
23126
  pkt-input-wrapper {
22451
23127
  display: block;
22452
23128
  }
@@ -22996,6 +23672,12 @@
22996
23672
  /*
22997
23673
  * Loader component
22998
23674
  */
23675
+ pkt-loader {
23676
+ display: block;
23677
+ }
23678
+ pkt-loader[inline] {
23679
+ display: inline-block;
23680
+ }
22999
23681
  .pkt-loader {
23000
23682
  color: currentColor;
23001
23683
  width: fit-content;
@@ -23131,6 +23813,9 @@
23131
23813
  /*
23132
23814
  * Modal component
23133
23815
  */
23816
+ pkt-modal {
23817
+ display: contents;
23818
+ }
23134
23819
  .pkt-modal {
23135
23820
  border: none;
23136
23821
  padding: 0;
@@ -23509,6 +24194,9 @@
23509
24194
  .pkt-messagebox--compact .pkt-messagebox__close > .pkt-btn {
23510
24195
  top: -15px;
23511
24196
  }
24197
+ pkt-progressbar {
24198
+ display: block;
24199
+ }
23512
24200
  .pkt-progressbar {
23513
24201
  --pkt-progress-width: 0%;
23514
24202
  --pkt-progress-label-width: 5rem;
@@ -23566,6 +24254,9 @@
23566
24254
  margin-inline-start: max(0%, min(100% - var(--pkt-progress-label-width), var(--pkt-progress-width) - var(--pkt-progress-label-width) / 2));
23567
24255
  transition: margin-left 0.5s ease;
23568
24256
  }
24257
+ pkt-searchinput {
24258
+ display: block;
24259
+ }
23569
24260
  .pkt-searchinput {
23570
24261
  position: relative;
23571
24262
  letter-spacing: -0.2px;