@oslokommune/punkt-css 7.1.0 → 7.1.6

package/dist/css/pkt.css

@@ -1821,6 +1821,354 @@ body {
     padding-bottom: 0.25rem !important;
   }
 }
+.m-size-6 {
+  margin: 0.375rem !important;
+}
+
+.mt-size-6 {
+  margin-top: 0.375rem !important;
+}
+
+.mr-size-6 {
+  margin-right: 0.375rem !important;
+}
+
+.mb-size-6 {
+  margin-bottom: 0.375rem !important;
+}
+
+.ml-size-6 {
+  margin-left: 0.375rem !important;
+}
+
+.mx-size-6 {
+  margin-right: 0.375rem !important;
+  margin-left: 0.375rem !important;
+}
+
+.my-size-6 {
+  margin-top: 0.375rem !important;
+  margin-bottom: 0.375rem !important;
+}
+
+.p-size-6 {
+  padding: 0.375rem !important;
+}
+
+.pt-size-6 {
+  padding-top: 0.375rem !important;
+}
+
+.pr-size-6 {
+  padding-right: 0.375rem !important;
+}
+
+.pb-size-6 {
+  padding-bottom: 0.375rem !important;
+}
+
+.pl-size-6 {
+  padding-left: 0.375rem !important;
+}
+
+.px-size-6 {
+  padding-right: 0.375rem !important;
+  padding-left: 0.375rem !important;
+}
+
+.py-size-6 {
+  padding-top: 0.375rem !important;
+  padding-bottom: 0.375rem !important;
+}
+
+@media screen and (min-width: 0) {
+  .m-size-6--mobile-up {
+    margin: 0.375rem !important;
+  }
+  .mt-size-6--mobile-up {
+    margin-top: 0.375rem !important;
+  }
+  .mr-size-6--mobile-up {
+    margin-right: 0.375rem !important;
+  }
+  .mb-size-6--mobile-up {
+    margin-bottom: 0.375rem !important;
+  }
+  .ml-size-6--mobile-up {
+    margin-left: 0.375rem !important;
+  }
+  .mx-size-6--mobile-up {
+    margin-right: 0.375rem !important;
+    margin-left: 0.375rem !important;
+  }
+  .my-size-6--mobile-up {
+    margin-top: 0.375rem !important;
+    margin-bottom: 0.375rem !important;
+  }
+  .p-size-6--mobile-up {
+    padding: 0.375rem !important;
+  }
+  .pt-size-6--mobile-up {
+    padding-top: 0.375rem !important;
+  }
+  .pr-size-6--mobile-up {
+    padding-right: 0.375rem !important;
+  }
+  .pb-size-6--mobile-up {
+    padding-bottom: 0.375rem !important;
+  }
+  .pl-size-6--mobile-up {
+    padding-left: 0.375rem !important;
+  }
+  .px-size-6--mobile-up {
+    padding-right: 0.375rem !important;
+    padding-left: 0.375rem !important;
+  }
+  .py-size-6--mobile-up {
+    padding-top: 0.375rem !important;
+    padding-bottom: 0.375rem !important;
+  }
+}
+@media screen and (min-width: 36rem) {
+  .m-size-6--phablet-up {
+    margin: 0.375rem !important;
+  }
+  .mt-size-6--phablet-up {
+    margin-top: 0.375rem !important;
+  }
+  .mr-size-6--phablet-up {
+    margin-right: 0.375rem !important;
+  }
+  .mb-size-6--phablet-up {
+    margin-bottom: 0.375rem !important;
+  }
+  .ml-size-6--phablet-up {
+    margin-left: 0.375rem !important;
+  }
+  .mx-size-6--phablet-up {
+    margin-right: 0.375rem !important;
+    margin-left: 0.375rem !important;
+  }
+  .my-size-6--phablet-up {
+    margin-top: 0.375rem !important;
+    margin-bottom: 0.375rem !important;
+  }
+  .p-size-6--phablet-up {
+    padding: 0.375rem !important;
+  }
+  .pt-size-6--phablet-up {
+    padding-top: 0.375rem !important;
+  }
+  .pr-size-6--phablet-up {
+    padding-right: 0.375rem !important;
+  }
+  .pb-size-6--phablet-up {
+    padding-bottom: 0.375rem !important;
+  }
+  .pl-size-6--phablet-up {
+    padding-left: 0.375rem !important;
+  }
+  .px-size-6--phablet-up {
+    padding-right: 0.375rem !important;
+    padding-left: 0.375rem !important;
+  }
+  .py-size-6--phablet-up {
+    padding-top: 0.375rem !important;
+    padding-bottom: 0.375rem !important;
+  }
+}
+@media screen and (min-width: 48rem) {
+  .m-size-6--tablet-up {
+    margin: 0.375rem !important;
+  }
+  .mt-size-6--tablet-up {
+    margin-top: 0.375rem !important;
+  }
+  .mr-size-6--tablet-up {
+    margin-right: 0.375rem !important;
+  }
+  .mb-size-6--tablet-up {
+    margin-bottom: 0.375rem !important;
+  }
+  .ml-size-6--tablet-up {
+    margin-left: 0.375rem !important;
+  }
+  .mx-size-6--tablet-up {
+    margin-right: 0.375rem !important;
+    margin-left: 0.375rem !important;
+  }
+  .my-size-6--tablet-up {
+    margin-top: 0.375rem !important;
+    margin-bottom: 0.375rem !important;
+  }
+  .p-size-6--tablet-up {
+    padding: 0.375rem !important;
+  }
+  .pt-size-6--tablet-up {
+    padding-top: 0.375rem !important;
+  }
+  .pr-size-6--tablet-up {
+    padding-right: 0.375rem !important;
+  }
+  .pb-size-6--tablet-up {
+    padding-bottom: 0.375rem !important;
+  }
+  .pl-size-6--tablet-up {
+    padding-left: 0.375rem !important;
+  }
+  .px-size-6--tablet-up {
+    padding-right: 0.375rem !important;
+    padding-left: 0.375rem !important;
+  }
+  .py-size-6--tablet-up {
+    padding-top: 0.375rem !important;
+    padding-bottom: 0.375rem !important;
+  }
+}
+@media screen and (min-width: 64rem) {
+  .m-size-6--tablet-big-up {
+    margin: 0.375rem !important;
+  }
+  .mt-size-6--tablet-big-up {
+    margin-top: 0.375rem !important;
+  }
+  .mr-size-6--tablet-big-up {
+    margin-right: 0.375rem !important;
+  }
+  .mb-size-6--tablet-big-up {
+    margin-bottom: 0.375rem !important;
+  }
+  .ml-size-6--tablet-big-up {
+    margin-left: 0.375rem !important;
+  }
+  .mx-size-6--tablet-big-up {
+    margin-right: 0.375rem !important;
+    margin-left: 0.375rem !important;
+  }
+  .my-size-6--tablet-big-up {
+    margin-top: 0.375rem !important;
+    margin-bottom: 0.375rem !important;
+  }
+  .p-size-6--tablet-big-up {
+    padding: 0.375rem !important;
+  }
+  .pt-size-6--tablet-big-up {
+    padding-top: 0.375rem !important;
+  }
+  .pr-size-6--tablet-big-up {
+    padding-right: 0.375rem !important;
+  }
+  .pb-size-6--tablet-big-up {
+    padding-bottom: 0.375rem !important;
+  }
+  .pl-size-6--tablet-big-up {
+    padding-left: 0.375rem !important;
+  }
+  .px-size-6--tablet-big-up {
+    padding-right: 0.375rem !important;
+    padding-left: 0.375rem !important;
+  }
+  .py-size-6--tablet-big-up {
+    padding-top: 0.375rem !important;
+    padding-bottom: 0.375rem !important;
+  }
+}
+@media screen and (min-width: 80rem) {
+  .m-size-6--laptop-up {
+    margin: 0.375rem !important;
+  }
+  .mt-size-6--laptop-up {
+    margin-top: 0.375rem !important;
+  }
+  .mr-size-6--laptop-up {
+    margin-right: 0.375rem !important;
+  }
+  .mb-size-6--laptop-up {
+    margin-bottom: 0.375rem !important;
+  }
+  .ml-size-6--laptop-up {
+    margin-left: 0.375rem !important;
+  }
+  .mx-size-6--laptop-up {
+    margin-right: 0.375rem !important;
+    margin-left: 0.375rem !important;
+  }
+  .my-size-6--laptop-up {
+    margin-top: 0.375rem !important;
+    margin-bottom: 0.375rem !important;
+  }
+  .p-size-6--laptop-up {
+    padding: 0.375rem !important;
+  }
+  .pt-size-6--laptop-up {
+    padding-top: 0.375rem !important;
+  }
+  .pr-size-6--laptop-up {
+    padding-right: 0.375rem !important;
+  }
+  .pb-size-6--laptop-up {
+    padding-bottom: 0.375rem !important;
+  }
+  .pl-size-6--laptop-up {
+    padding-left: 0.375rem !important;
+  }
+  .px-size-6--laptop-up {
+    padding-right: 0.375rem !important;
+    padding-left: 0.375rem !important;
+  }
+  .py-size-6--laptop-up {
+    padding-top: 0.375rem !important;
+    padding-bottom: 0.375rem !important;
+  }
+}
+@media screen and (min-width: 100rem) {
+  .m-size-6--desktop-up {
+    margin: 0.375rem !important;
+  }
+  .mt-size-6--desktop-up {
+    margin-top: 0.375rem !important;
+  }
+  .mr-size-6--desktop-up {
+    margin-right: 0.375rem !important;
+  }
+  .mb-size-6--desktop-up {
+    margin-bottom: 0.375rem !important;
+  }
+  .ml-size-6--desktop-up {
+    margin-left: 0.375rem !important;
+  }
+  .mx-size-6--desktop-up {
+    margin-right: 0.375rem !important;
+    margin-left: 0.375rem !important;
+  }
+  .my-size-6--desktop-up {
+    margin-top: 0.375rem !important;
+    margin-bottom: 0.375rem !important;
+  }
+  .p-size-6--desktop-up {
+    padding: 0.375rem !important;
+  }
+  .pt-size-6--desktop-up {
+    padding-top: 0.375rem !important;
+  }
+  .pr-size-6--desktop-up {
+    padding-right: 0.375rem !important;
+  }
+  .pb-size-6--desktop-up {
+    padding-bottom: 0.375rem !important;
+  }
+  .pl-size-6--desktop-up {
+    padding-left: 0.375rem !important;
+  }
+  .px-size-6--desktop-up {
+    padding-right: 0.375rem !important;
+    padding-left: 0.375rem !important;
+  }
+  .py-size-6--desktop-up {
+    padding-top: 0.375rem !important;
+    padding-bottom: 0.375rem !important;
+  }
+}
 .m-size-8 {
   margin: 0.5rem !important;
 }
@@ -4257,6 +4605,354 @@ body {
     padding-bottom: 3rem !important;
   }
 }
+.m-size-52 {
+  margin: 3.25rem !important;
+}
+
+.mt-size-52 {
+  margin-top: 3.25rem !important;
+}
+
+.mr-size-52 {
+  margin-right: 3.25rem !important;
+}
+
+.mb-size-52 {
+  margin-bottom: 3.25rem !important;
+}
+
+.ml-size-52 {
+  margin-left: 3.25rem !important;
+}
+
+.mx-size-52 {
+  margin-right: 3.25rem !important;
+  margin-left: 3.25rem !important;
+}
+
+.my-size-52 {
+  margin-top: 3.25rem !important;
+  margin-bottom: 3.25rem !important;
+}
+
+.p-size-52 {
+  padding: 3.25rem !important;
+}
+
+.pt-size-52 {
+  padding-top: 3.25rem !important;
+}
+
+.pr-size-52 {
+  padding-right: 3.25rem !important;
+}
+
+.pb-size-52 {
+  padding-bottom: 3.25rem !important;
+}
+
+.pl-size-52 {
+  padding-left: 3.25rem !important;
+}
+
+.px-size-52 {
+  padding-right: 3.25rem !important;
+  padding-left: 3.25rem !important;
+}
+
+.py-size-52 {
+  padding-top: 3.25rem !important;
+  padding-bottom: 3.25rem !important;
+}
+
+@media screen and (min-width: 0) {
+  .m-size-52--mobile-up {
+    margin: 3.25rem !important;
+  }
+  .mt-size-52--mobile-up {
+    margin-top: 3.25rem !important;
+  }
+  .mr-size-52--mobile-up {
+    margin-right: 3.25rem !important;
+  }
+  .mb-size-52--mobile-up {
+    margin-bottom: 3.25rem !important;
+  }
+  .ml-size-52--mobile-up {
+    margin-left: 3.25rem !important;
+  }
+  .mx-size-52--mobile-up {
+    margin-right: 3.25rem !important;
+    margin-left: 3.25rem !important;
+  }
+  .my-size-52--mobile-up {
+    margin-top: 3.25rem !important;
+    margin-bottom: 3.25rem !important;
+  }
+  .p-size-52--mobile-up {
+    padding: 3.25rem !important;
+  }
+  .pt-size-52--mobile-up {
+    padding-top: 3.25rem !important;
+  }
+  .pr-size-52--mobile-up {
+    padding-right: 3.25rem !important;
+  }
+  .pb-size-52--mobile-up {
+    padding-bottom: 3.25rem !important;
+  }
+  .pl-size-52--mobile-up {
+    padding-left: 3.25rem !important;
+  }
+  .px-size-52--mobile-up {
+    padding-right: 3.25rem !important;
+    padding-left: 3.25rem !important;
+  }
+  .py-size-52--mobile-up {
+    padding-top: 3.25rem !important;
+    padding-bottom: 3.25rem !important;
+  }
+}
+@media screen and (min-width: 36rem) {
+  .m-size-52--phablet-up {
+    margin: 3.25rem !important;
+  }
+  .mt-size-52--phablet-up {
+    margin-top: 3.25rem !important;
+  }
+  .mr-size-52--phablet-up {
+    margin-right: 3.25rem !important;
+  }
+  .mb-size-52--phablet-up {
+    margin-bottom: 3.25rem !important;
+  }
+  .ml-size-52--phablet-up {
+    margin-left: 3.25rem !important;
+  }
+  .mx-size-52--phablet-up {
+    margin-right: 3.25rem !important;
+    margin-left: 3.25rem !important;
+  }
+  .my-size-52--phablet-up {
+    margin-top: 3.25rem !important;
+    margin-bottom: 3.25rem !important;
+  }
+  .p-size-52--phablet-up {
+    padding: 3.25rem !important;
+  }
+  .pt-size-52--phablet-up {
+    padding-top: 3.25rem !important;
+  }
+  .pr-size-52--phablet-up {
+    padding-right: 3.25rem !important;
+  }
+  .pb-size-52--phablet-up {
+    padding-bottom: 3.25rem !important;
+  }
+  .pl-size-52--phablet-up {
+    padding-left: 3.25rem !important;
+  }
+  .px-size-52--phablet-up {
+    padding-right: 3.25rem !important;
+    padding-left: 3.25rem !important;
+  }
+  .py-size-52--phablet-up {
+    padding-top: 3.25rem !important;
+    padding-bottom: 3.25rem !important;
+  }
+}
+@media screen and (min-width: 48rem) {
+  .m-size-52--tablet-up {
+    margin: 3.25rem !important;
+  }
+  .mt-size-52--tablet-up {
+    margin-top: 3.25rem !important;
+  }
+  .mr-size-52--tablet-up {
+    margin-right: 3.25rem !important;
+  }
+  .mb-size-52--tablet-up {
+    margin-bottom: 3.25rem !important;
+  }
+  .ml-size-52--tablet-up {
+    margin-left: 3.25rem !important;
+  }
+  .mx-size-52--tablet-up {
+    margin-right: 3.25rem !important;
+    margin-left: 3.25rem !important;
+  }
+  .my-size-52--tablet-up {
+    margin-top: 3.25rem !important;
+    margin-bottom: 3.25rem !important;
+  }
+  .p-size-52--tablet-up {
+    padding: 3.25rem !important;
+  }
+  .pt-size-52--tablet-up {
+    padding-top: 3.25rem !important;
+  }
+  .pr-size-52--tablet-up {
+    padding-right: 3.25rem !important;
+  }
+  .pb-size-52--tablet-up {
+    padding-bottom: 3.25rem !important;
+  }
+  .pl-size-52--tablet-up {
+    padding-left: 3.25rem !important;
+  }
+  .px-size-52--tablet-up {
+    padding-right: 3.25rem !important;
+    padding-left: 3.25rem !important;
+  }
+  .py-size-52--tablet-up {
+    padding-top: 3.25rem !important;
+    padding-bottom: 3.25rem !important;
+  }
+}
+@media screen and (min-width: 64rem) {
+  .m-size-52--tablet-big-up {
+    margin: 3.25rem !important;
+  }
+  .mt-size-52--tablet-big-up {
+    margin-top: 3.25rem !important;
+  }
+  .mr-size-52--tablet-big-up {
+    margin-right: 3.25rem !important;
+  }
+  .mb-size-52--tablet-big-up {
+    margin-bottom: 3.25rem !important;
+  }
+  .ml-size-52--tablet-big-up {
+    margin-left: 3.25rem !important;
+  }
+  .mx-size-52--tablet-big-up {
+    margin-right: 3.25rem !important;
+    margin-left: 3.25rem !important;
+  }
+  .my-size-52--tablet-big-up {
+    margin-top: 3.25rem !important;
+    margin-bottom: 3.25rem !important;
+  }
+  .p-size-52--tablet-big-up {
+    padding: 3.25rem !important;
+  }
+  .pt-size-52--tablet-big-up {
+    padding-top: 3.25rem !important;
+  }
+  .pr-size-52--tablet-big-up {
+    padding-right: 3.25rem !important;
+  }
+  .pb-size-52--tablet-big-up {
+    padding-bottom: 3.25rem !important;
+  }
+  .pl-size-52--tablet-big-up {
+    padding-left: 3.25rem !important;
+  }
+  .px-size-52--tablet-big-up {
+    padding-right: 3.25rem !important;
+    padding-left: 3.25rem !important;
+  }
+  .py-size-52--tablet-big-up {
+    padding-top: 3.25rem !important;
+    padding-bottom: 3.25rem !important;
+  }
+}
+@media screen and (min-width: 80rem) {
+  .m-size-52--laptop-up {
+    margin: 3.25rem !important;
+  }
+  .mt-size-52--laptop-up {
+    margin-top: 3.25rem !important;
+  }
+  .mr-size-52--laptop-up {
+    margin-right: 3.25rem !important;
+  }
+  .mb-size-52--laptop-up {
+    margin-bottom: 3.25rem !important;
+  }
+  .ml-size-52--laptop-up {
+    margin-left: 3.25rem !important;
+  }
+  .mx-size-52--laptop-up {
+    margin-right: 3.25rem !important;
+    margin-left: 3.25rem !important;
+  }
+  .my-size-52--laptop-up {
+    margin-top: 3.25rem !important;
+    margin-bottom: 3.25rem !important;
+  }
+  .p-size-52--laptop-up {
+    padding: 3.25rem !important;
+  }
+  .pt-size-52--laptop-up {
+    padding-top: 3.25rem !important;
+  }
+  .pr-size-52--laptop-up {
+    padding-right: 3.25rem !important;
+  }
+  .pb-size-52--laptop-up {
+    padding-bottom: 3.25rem !important;
+  }
+  .pl-size-52--laptop-up {
+    padding-left: 3.25rem !important;
+  }
+  .px-size-52--laptop-up {
+    padding-right: 3.25rem !important;
+    padding-left: 3.25rem !important;
+  }
+  .py-size-52--laptop-up {
+    padding-top: 3.25rem !important;
+    padding-bottom: 3.25rem !important;
+  }
+}
+@media screen and (min-width: 100rem) {
+  .m-size-52--desktop-up {
+    margin: 3.25rem !important;
+  }
+  .mt-size-52--desktop-up {
+    margin-top: 3.25rem !important;
+  }
+  .mr-size-52--desktop-up {
+    margin-right: 3.25rem !important;
+  }
+  .mb-size-52--desktop-up {
+    margin-bottom: 3.25rem !important;
+  }
+  .ml-size-52--desktop-up {
+    margin-left: 3.25rem !important;
+  }
+  .mx-size-52--desktop-up {
+    margin-right: 3.25rem !important;
+    margin-left: 3.25rem !important;
+  }
+  .my-size-52--desktop-up {
+    margin-top: 3.25rem !important;
+    margin-bottom: 3.25rem !important;
+  }
+  .p-size-52--desktop-up {
+    padding: 3.25rem !important;
+  }
+  .pt-size-52--desktop-up {
+    padding-top: 3.25rem !important;
+  }
+  .pr-size-52--desktop-up {
+    padding-right: 3.25rem !important;
+  }
+  .pb-size-52--desktop-up {
+    padding-bottom: 3.25rem !important;
+  }
+  .pl-size-52--desktop-up {
+    padding-left: 3.25rem !important;
+  }
+  .px-size-52--desktop-up {
+    padding-right: 3.25rem !important;
+    padding-left: 3.25rem !important;
+  }
+  .py-size-52--desktop-up {
+    padding-top: 3.25rem !important;
+    padding-bottom: 3.25rem !important;
+  }
+}
 .m-size-56 {
   margin: 3.5rem !important;
 }
@@ -9625,6 +10321,15 @@ body {
 .pkt-grid--rowgap-size-4 {
   row-gap: 0.25rem;
 }
+.pkt-grid--gap-size-6 {
+  gap: 0.375rem;
+}
+.pkt-grid--colgap-size-6 {
+  column-gap: 0.375rem;
+}
+.pkt-grid--rowgap-size-6 {
+  row-gap: 0.375rem;
+}
 .pkt-grid--gap-size-8 {
   gap: 0.5rem;
 }
@@ -9688,6 +10393,15 @@ body {
 .pkt-grid--rowgap-size-48 {
   row-gap: 3rem;
 }
+.pkt-grid--gap-size-52 {
+  gap: 3.25rem;
+}
+.pkt-grid--colgap-size-52 {
+  column-gap: 3.25rem;
+}
+.pkt-grid--rowgap-size-52 {
+  row-gap: 3.25rem;
+}
 .pkt-grid--gap-size-56 {
   gap: 3.5rem;
 }
@@ -9851,6 +10565,15 @@ body {
   .pkt-grid--rowgap-size-4-mobile-up {
     row-gap: 0.25rem;
   }
+  .pkt-grid--gap-size-6-mobile-up {
+    gap: 0.375rem;
+  }
+  .pkt-grid--colgap-size-6-mobile-up {
+    column-gap: 0.375rem;
+  }
+  .pkt-grid--rowgap-size-6-mobile-up {
+    row-gap: 0.375rem;
+  }
   .pkt-grid--gap-size-8-mobile-up {
     gap: 0.5rem;
   }
@@ -9914,6 +10637,15 @@ body {
   .pkt-grid--rowgap-size-48-mobile-up {
     row-gap: 3rem;
   }
+  .pkt-grid--gap-size-52-mobile-up {
+    gap: 3.25rem;
+  }
+  .pkt-grid--colgap-size-52-mobile-up {
+    column-gap: 3.25rem;
+  }
+  .pkt-grid--rowgap-size-52-mobile-up {
+    row-gap: 3.25rem;
+  }
   .pkt-grid--gap-size-56-mobile-up {
     gap: 3.5rem;
   }
@@ -10078,6 +10810,15 @@ body {
   .pkt-grid--rowgap-size-4-phablet-up {
     row-gap: 0.25rem;
   }
+  .pkt-grid--gap-size-6-phablet-up {
+    gap: 0.375rem;
+  }
+  .pkt-grid--colgap-size-6-phablet-up {
+    column-gap: 0.375rem;
+  }
+  .pkt-grid--rowgap-size-6-phablet-up {
+    row-gap: 0.375rem;
+  }
   .pkt-grid--gap-size-8-phablet-up {
     gap: 0.5rem;
   }
@@ -10141,6 +10882,15 @@ body {
   .pkt-grid--rowgap-size-48-phablet-up {
     row-gap: 3rem;
   }
+  .pkt-grid--gap-size-52-phablet-up {
+    gap: 3.25rem;
+  }
+  .pkt-grid--colgap-size-52-phablet-up {
+    column-gap: 3.25rem;
+  }
+  .pkt-grid--rowgap-size-52-phablet-up {
+    row-gap: 3.25rem;
+  }
   .pkt-grid--gap-size-56-phablet-up {
     gap: 3.5rem;
   }
@@ -10305,6 +11055,15 @@ body {
   .pkt-grid--rowgap-size-4-tablet-up {
     row-gap: 0.25rem;
   }
+  .pkt-grid--gap-size-6-tablet-up {
+    gap: 0.375rem;
+  }
+  .pkt-grid--colgap-size-6-tablet-up {
+    column-gap: 0.375rem;
+  }
+  .pkt-grid--rowgap-size-6-tablet-up {
+    row-gap: 0.375rem;
+  }
   .pkt-grid--gap-size-8-tablet-up {
     gap: 0.5rem;
   }
@@ -10368,6 +11127,15 @@ body {
   .pkt-grid--rowgap-size-48-tablet-up {
     row-gap: 3rem;
   }
+  .pkt-grid--gap-size-52-tablet-up {
+    gap: 3.25rem;
+  }
+  .pkt-grid--colgap-size-52-tablet-up {
+    column-gap: 3.25rem;
+  }
+  .pkt-grid--rowgap-size-52-tablet-up {
+    row-gap: 3.25rem;
+  }
   .pkt-grid--gap-size-56-tablet-up {
     gap: 3.5rem;
   }
@@ -10532,6 +11300,15 @@ body {
   .pkt-grid--rowgap-size-4-tablet-big-up {
     row-gap: 0.25rem;
   }
+  .pkt-grid--gap-size-6-tablet-big-up {
+    gap: 0.375rem;
+  }
+  .pkt-grid--colgap-size-6-tablet-big-up {
+    column-gap: 0.375rem;
+  }
+  .pkt-grid--rowgap-size-6-tablet-big-up {
+    row-gap: 0.375rem;
+  }
   .pkt-grid--gap-size-8-tablet-big-up {
     gap: 0.5rem;
   }
@@ -10595,6 +11372,15 @@ body {
   .pkt-grid--rowgap-size-48-tablet-big-up {
     row-gap: 3rem;
   }
+  .pkt-grid--gap-size-52-tablet-big-up {
+    gap: 3.25rem;
+  }
+  .pkt-grid--colgap-size-52-tablet-big-up {
+    column-gap: 3.25rem;
+  }
+  .pkt-grid--rowgap-size-52-tablet-big-up {
+    row-gap: 3.25rem;
+  }
   .pkt-grid--gap-size-56-tablet-big-up {
     gap: 3.5rem;
   }
@@ -10759,6 +11545,15 @@ body {
   .pkt-grid--rowgap-size-4-laptop-up {
     row-gap: 0.25rem;
   }
+  .pkt-grid--gap-size-6-laptop-up {
+    gap: 0.375rem;
+  }
+  .pkt-grid--colgap-size-6-laptop-up {
+    column-gap: 0.375rem;
+  }
+  .pkt-grid--rowgap-size-6-laptop-up {
+    row-gap: 0.375rem;
+  }
   .pkt-grid--gap-size-8-laptop-up {
     gap: 0.5rem;
   }
@@ -10822,6 +11617,15 @@ body {
   .pkt-grid--rowgap-size-48-laptop-up {
     row-gap: 3rem;
   }
+  .pkt-grid--gap-size-52-laptop-up {
+    gap: 3.25rem;
+  }
+  .pkt-grid--colgap-size-52-laptop-up {
+    column-gap: 3.25rem;
+  }
+  .pkt-grid--rowgap-size-52-laptop-up {
+    row-gap: 3.25rem;
+  }
   .pkt-grid--gap-size-56-laptop-up {
     gap: 3.5rem;
   }
@@ -10986,6 +11790,15 @@ body {
   .pkt-grid--rowgap-size-4-desktop-up {
     row-gap: 0.25rem;
   }
+  .pkt-grid--gap-size-6-desktop-up {
+    gap: 0.375rem;
+  }
+  .pkt-grid--colgap-size-6-desktop-up {
+    column-gap: 0.375rem;
+  }
+  .pkt-grid--rowgap-size-6-desktop-up {
+    row-gap: 0.375rem;
+  }
   .pkt-grid--gap-size-8-desktop-up {
     gap: 0.5rem;
   }
@@ -11049,6 +11862,15 @@ body {
   .pkt-grid--rowgap-size-48-desktop-up {
     row-gap: 3rem;
   }
+  .pkt-grid--gap-size-52-desktop-up {
+    gap: 3.25rem;
+  }
+  .pkt-grid--colgap-size-52-desktop-up {
+    column-gap: 3.25rem;
+  }
+  .pkt-grid--rowgap-size-52-desktop-up {
+    row-gap: 3.25rem;
+  }
   .pkt-grid--gap-size-56-desktop-up {
     gap: 3.5rem;
   }
@@ -13723,10 +14545,11 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   align-items: center;
   gap: 1rem;
   margin: 0;
-  padding: 0;
+  padding: 0.375rem 0 0;
 }
 @media screen and (min-width: 80rem) {
   .pkt-header__logo {
+    padding: 0.25rem 0 0;
     gap: 1.5rem;
   }
 }
@@ -13736,7 +14559,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   padding: 0;
 }
 .pkt-header__logo-service {
-  padding-top: 0.28rem;
+  padding-top: 0.2rem;
   display: none;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -13753,7 +14576,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 @media screen and (min-width: 80rem) {
   .pkt-header__logo-service {
-    padding-top: 0.45rem;
+    padding-top: 0.4rem;
     font-size: 1.5rem;
     font-weight: 300;
     letter-spacing: -0.2px;
@@ -13761,8 +14584,8 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   }
 }
 .pkt-header__logo-svg {
-  height: 3.5rem;
-  width: 6.7741935484rem;
+  height: 3.25rem;
+  width: 6.2903225806rem;
 }
 @media screen and (min-width: 80rem) {
   .pkt-header__logo-svg {
@@ -14075,24 +14898,56 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   border-color: var(--color-red);
 }
 .pkt-inputwrapper--error .pkt-textinput__input:hover,
-.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,
-.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,
-.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix,
-.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,
-.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
+.pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input,
+.pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input-prefix,
+.pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input-suffix,
+.pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input-icon {
   border-color: var(--color-red);
 }
 .pkt-inputwrapper--error .pkt-textinput__input:focus-within,
-.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-icon,
-.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input,
-.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-prefix,
-.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-icon,
-.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon,
-.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input,
-.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-suffix,
-.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon {
+.pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input,
+.pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input-prefix,
+.pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input-suffix,
+.pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input-icon {
   border-color: var(--color-red);
 }
+.pkt-inputwrapper--disabled {
+  color: var(--color-disabled);
+  cursor: inherit;
+}
+.pkt-inputwrapper--disabled .pkt-textinput__input,
+.pkt-inputwrapper--disabled .pkt-textinput__input-prefix,
+.pkt-inputwrapper--disabled .pkt-textinput__input-suffix,
+.pkt-inputwrapper--disabled .pkt-textinput__input-icon {
+  border-color: var(--color-disabled);
+  background-color: var(--color-disabled-light);
+}
+.pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input,
+.pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input-prefix,
+.pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input-suffix,
+.pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input-icon {
+  border-color: var(--color-disabled);
+}
+.pkt-inputwrapper--disabled .pkt-textinput__input:hover {
+  border-color: var(--color-disabled);
+  box-shadow: none;
+}
+.pkt-inputwrapper--disabled .pkt-textinput__input:focus {
+  border-color: var(--color-disabled);
+  box-shadow: none;
+  outline: none;
+}
+.pkt-inputwrapper--disabled .pkt-textinput__container:active .pkt-textinput__input {
+  border-right: none;
+  box-shadow: none;
+  outline: none;
+}
+[data-mode=dark] .pkt-textinput__input-prefix,
+[data-mode=dark] .pkt-textinput__input-suffix,
+[data-mode=dark] .pkt-textinput__input-icon {
+  background-color: var(--color-white);
+  color: var(--color-blue-dark);
+}
 
 /* 
  * Header element
@@ -14327,6 +15182,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   border-color: var(--color-active);
 }
 .pkt-textinput__input:disabled, .pkt-textinput__input:disabled::placeholder, .pkt-textinput__input[readonly] {
+  opacity: 1;
   background-color: var(--color-disabled-light);
   border-color: var(--color-disabled);
   cursor: inherit;
@@ -14334,39 +15190,19 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-textinput__input:disabled:active {
   border: 2px solid var(--color-disabled);
 }
-.pkt-textinput__input-prefix-wrapper {
-  display: flex;
-  align-items: center;
-  align-self: stretch;
-}
-.pkt-textinput__input-prefix-wrapper :not(:first-child) {
-  border-left: none;
-}
-.pkt-textinput__input-prefix-wrapper :first-child {
-  border-right: none;
-}
-.pkt-textinput__input-prefix-wrapper input:focus {
-  box-shadow: none;
-}
-.pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input, .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix {
-  border-color: var(--color-hover);
-}
-.pkt-textinput__input-prefix-wrapper:focus-within {
-  outline: 2px solid var(--color-active);
-}
-.pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input, .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-prefix {
-  border-color: var(--color-active);
-}
-.pkt-textinput__input-prefix {
+.pkt-textinput__input-prefix, .pkt-textinput__input-suffix, .pkt-textinput__input-icon {
   font-size: 1.125rem;
   font-weight: 300;
   letter-spacing: -0.2px;
   line-height: 1.75rem;
-  align-items: center;
   display: flex;
+  align-items: center;
   width: auto;
   height: 3rem;
   border: 2px solid var(--color-blue-dark);
+  flex-shrink: 0;
+}
+.pkt-textinput__input-prefix {
   padding: 0.5rem 0rem 0.5rem 1rem;
 }
 .pkt-textinput__input-prefix::after {
@@ -14376,43 +15212,8 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   height: 100%;
   background-color: var(--color-blue-dark);
 }
-.pkt-textinput__input-suffix-wrapper {
-  display: flex;
-  align-items: center;
-  align-self: stretch;
-}
-.pkt-textinput__input-suffix-wrapper :not(:first-child) {
-  border-left: none;
-}
-.pkt-textinput__input-suffix-wrapper :first-child {
-  border-right: none;
-}
-.pkt-textinput__input-suffix-wrapper p {
-  margin: 0;
-}
-.pkt-textinput__input-suffix-wrapper input:focus {
-  box-shadow: none;
-}
-.pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input, .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix, .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
-  border-color: var(--color-hover);
-}
-.pkt-textinput__input-suffix-wrapper:focus-within {
-  outline: 2px solid var(--color-active);
-}
-.pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon, .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input, .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-suffix, .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon {
-  border-color: var(--color-active);
-}
 .pkt-textinput__input-suffix {
-  font-size: 1.125rem;
-  font-weight: 300;
-  letter-spacing: -0.2px;
-  line-height: 1.75rem;
-  display: flex;
-  align-items: center;
-  width: auto;
-  border: 2px solid var(--color-blue-dark);
   padding: 0.5rem 1rem 0.5rem 0rem;
-  flex-shrink: 0;
 }
 .pkt-textinput__input-suffix svg {
   width: 1.5rem;
@@ -14427,16 +15228,8 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   background-color: var(--color-blue-dark);
 }
 .pkt-textinput__input-icon {
-  font-size: 1.125rem;
-  font-weight: 300;
-  letter-spacing: -0.2px;
-  line-height: 1.75rem;
-  display: flex;
-  flex-shrink: 0;
   padding: 0.5rem 1rem;
-  align-items: center;
   align-self: stretch;
-  border: 2px solid var(--color-blue-dark);
 }
 .pkt-textinput__input-icon svg {
   width: 1.5rem;
@@ -14450,6 +15243,39 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-textinput__input--counter-error:focus {
   box-shadow: 0 0 0 2px var(--color-red);
 }
+.pkt-textinput__container {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+}
+.pkt-textinput__container :first-child:not(:only-child) {
+  border-right: none;
+}
+.pkt-textinput__container :last-child:not(:only-child) {
+  border-left: none;
+}
+.pkt-textinput__container :not(:first-child):not(:last-child) {
+  border-left: none;
+  border-right: none;
+}
+.pkt-textinput__container p {
+  margin: 0;
+}
+.pkt-textinput__container input:focus {
+  box-shadow: none;
+}
+.pkt-textinput__container:hover .pkt-textinput__input, .pkt-textinput__container:hover .pkt-textinput__input-prefix, .pkt-textinput__container:hover .pkt-textinput__input-suffix, .pkt-textinput__container:hover .pkt-textinput__input-icon {
+  border-color: var(--color-hover);
+}
+.pkt-textinput__container:focus-within {
+  outline: 2px solid var(--color-active);
+}
+.pkt-textinput__container:focus-within .pkt-textinput__input,
+.pkt-textinput__container:focus-within .pkt-textinput__input-prefix,
+.pkt-textinput__container:focus-within .pkt-textinput__input-suffix,
+.pkt-textinput__container:focus-within .pkt-textinput__input-icon {
+  border-color: var(--color-active);
+}
 .pkt-textinput__counter {
   font-size: 0.875rem;
   font-weight: 300;
@@ -14464,43 +15290,4 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   letter-spacing: -0.2px;
   line-height: 1.375rem;
   color: var(--color-red);
-}
-.pkt-inputwrapper--disabled {
-  color: var(--color-disabled);
-  cursor: inherit;
-}
-.pkt-inputwrapper--disabled .pkt-textinput__input,
-.pkt-inputwrapper--disabled .pkt-textinput__input-prefix,
-.pkt-inputwrapper--disabled .pkt-textinput__input-suffix,
-.pkt-inputwrapper--disabled .pkt-textinput__input-icon {
-  border-color: var(--color-disabled);
-  background-color: var(--color-disabled-light);
-}
-.pkt-inputwrapper--disabled .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,
-.pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,
-.pkt-inputwrapper--disabled .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix,
-.pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,
-.pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
-  border-color: var(--color-disabled);
-}
-.pkt-inputwrapper--disabled .pkt-textinput__input:hover {
-  border-color: var(--color-disabled);
-  box-shadow: none;
-}
-.pkt-inputwrapper--disabled .pkt-textinput__input:focus {
-  border-color: var(--color-disabled);
-  box-shadow: none;
-  outline: none;
-}
-.pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:active .pkt-textinput__input {
-  border-right: none;
-  box-shadow: none;
-  outline: none;
-}
-
-[data-mode=dark] .pkt-textinput__input-prefix,
-[data-mode=dark] .pkt-textinput__input-suffix,
-[data-mode=dark] .pkt-textinput__input-icon {
-  background-color: var(--color-white);
-  color: var(--color-blue-dark);
 }