@fremtind/jokul 5.0.0-next.0 → 5.0.0-next.10

package/styles/base.css

@@ -0,0 +1,2024 @@
+@charset "UTF-8";
+@layer jokul {
+  @layer resets, theme, global, components, utility;
+}
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+@layer jokul.resets {
+  /* Document
+     ========================================================================== */
+  /**
+   * 1. Correct the line height in all browsers.
+   * 2. Prevent adjustments of font size after orientation changes in iOS.
+   */
+  html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+  /* Sections
+     ========================================================================== */
+  /**
+   * Remove the margin in all browsers.
+   */
+  body {
+    margin: 0;
+  }
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+  /* Grouping content
+     ========================================================================== */
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  /* Text-level semantics
+     ========================================================================== */
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  /**
+   * Add the correct font size in all browsers.
+   */
+  small {
+    font-size: 80%;
+  }
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  /* Forms
+     ========================================================================== */
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+  button,
+  select {
+    /* 1 */
+    text-transform: none;
+  }
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+  button,
+  [type=button],
+  [type=reset],
+  [type=submit] {
+    -webkit-appearance: button;
+  }
+  /**
+   * Correct the padding in Firefox.
+   */
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+  legend {
+    box-sizing: border-box; /* 1 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 2 */
+    white-space: normal; /* 1 */
+  }
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+  progress {
+    vertical-align: baseline;
+  }
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+  [type=number]::-webkit-inner-spin-button,
+  [type=number]::-webkit-outer-spin-button {
+    height: auto;
+  }
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+  [type=search] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+  [type=search]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+  /* Interactive
+     ========================================================================== */
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+  details {
+    display: block;
+  }
+  /*
+   * Add the correct display in all browsers.
+   */
+  summary {
+    display: list-item;
+  }
+}
+@layer jokul.resets {
+  /* Text blocks
+     ========================================================================== */
+  /**
+   * Remove default margins from all block-level text elements
+   * such as `p` and headings
+   */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    margin: 0;
+  }
+  /* Forms
+     ========================================================================== */
+  /**
+   * Remove margins from fieldset element.
+   */
+  fieldset {
+    margin: 0;
+    border: 0;
+    padding: 0;
+    display: block;
+    line-height: 1;
+  }
+  /* Forms
+     ========================================================================== */
+  /**
+   * Remove borders from table elements.
+   */
+  table {
+    border-collapse: collapse;
+  }
+  /**
+   * Remove margins from table elements.
+   */
+  table,
+  thead,
+  tbody,
+  tr,
+  td,
+  th {
+    margin: 0;
+    padding: 0;
+  }
+  /*
+   * https://css-tricks.com/the-hidden-attribute-is-visibly-weak/
+   * tl;dr – hidden er en User Agent style, så hvis et element har noen som helst display som ikke er
+   * hidden vil ikke hidden-attributtet gjøre noe som helst visuelt. Her gjør vi det til vår egen author style.
+   */
+  .jkl [hidden] {
+    display: none !important;
+  }
+}
+@layer jokul.theme {
+  @font-face {
+    font-family: Jokul;
+    font-display: fallback;
+    font-weight: 400;
+    font-style: normal;
+    src: url("/fonts/InterVariable.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: Jokul;
+    font-display: fallback;
+    font-weight: 700;
+    font-style: normal;
+    src: url("/fonts/InterVariable.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "Jokul Display";
+    font-display: fallback;
+    font-weight: 400;
+    font-style: normal;
+    src: url("/fonts/InterVariable.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "Jokul Mono";
+    font-display: fallback;
+    font-weight: 400;
+    font-style: normal;
+    src: url("/fonts/InterVariable.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "Jokul Icons";
+    font-weight: 300 400;
+    font-style: normal;
+    src: url("/fonts/Fremtind-Material-Symbols.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "Adjusted Arial Fallback";
+    font-weight: 400;
+    font-style: normal;
+    src: local(arial);
+    size-adjust: 104%;
+    ascent-override: 82%;
+    descent-override: normal;
+    line-gap-override: 32%;
+  }
+  @font-face {
+    font-family: "Adjusted Arial Fallback";
+    font-weight: 700;
+    font-style: normal;
+    src: local(arial);
+    size-adjust: 108%;
+    ascent-override: 83%;
+    descent-override: normal;
+    line-gap-override: 28%;
+  }
+  @font-face {
+    font-family: "Adjusted Arial Display Fallback";
+    font-weight: 400;
+    font-style: normal;
+    src: local(arial);
+    size-adjust: 102%;
+    ascent-override: 76%;
+    descent-override: normal;
+    line-gap-override: 40%;
+  }
+  @font-face {
+    font-family: "Adjusted Courier New Fallback";
+    font-weight: 400;
+    font-style: normal;
+    src: local(courier new);
+    size-adjust: 100%;
+    ascent-override: 83%;
+    descent-override: normal;
+    line-gap-override: 27%;
+  }
+  @font-face {
+    font-family: "Jokul Icons Fallback";
+    src: local(courier new);
+    font-weight: 300 400;
+    font-style: normal;
+    size-adjust: 0%;
+  }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.theme {
+  :root {
+    --jkl-spacing-2: var(--jkl-spacing-2);
+    --jkl-spacing-4: var(--jkl-spacing-4);
+    --jkl-spacing-8: var(--jkl-spacing-8);
+    --jkl-spacing-12: var(--jkl-spacing-12);
+    --jkl-spacing-16: var(--jkl-spacing-16);
+    --jkl-spacing-24: var(--jkl-spacing-24);
+    --jkl-spacing-32: var(--jkl-spacing-32);
+    --jkl-spacing-40: var(--jkl-spacing-40);
+    --jkl-spacing-64: var(--jkl-spacing-64);
+    --jkl-spacing-104: var(--jkl-spacing-104);
+    --jkl-spacing-168: var(--jkl-spacing-168);
+    --jkl-spacing-16-24: var(--jkl-spacing-16);
+    --jkl-spacing-24-40: var(--jkl-spacing-24);
+    --jkl-spacing-24-32: var(--jkl-spacing-24);
+    --jkl-spacing-32-40: var(--jkl-spacing-32);
+    --jkl-spacing-40-64: var(--jkl-spacing-40);
+    --jkl-spacing-64-104: var(--jkl-spacing-64);
+    --jkl-spacing-104-168: var(--jkl-spacing-104);
+    --jkl-spacing-16-16-24: var(--jkl-spacing-16);
+    --jkl-spacing-16-24-32: var(--jkl-spacing-16);
+    --jkl-spacing-16-24-40: var(--jkl-spacing-16);
+    --jkl-spacing-24-24-32: var(--jkl-spacing-24);
+    --jkl-spacing-24-24-40: var(--jkl-spacing-24);
+    --jkl-spacing-24-32-40: var(--jkl-spacing-24);
+    --jkl-spacing-32-32-40: var(--jkl-spacing-32);
+    --jkl-spacing-32-40-64: var(--jkl-spacing-32);
+    --jkl-spacing-40-40-64: var(--jkl-spacing-40);
+    --jkl-spacing-40-64-104: var(--jkl-spacing-40);
+    --jkl-spacing-64-64-104: var(--jkl-spacing-64);
+    --jkl-spacing-64-104-168: var(--jkl-spacing-64);
+    --jkl-spacing-104-104-168: var(--jkl-spacing-104);
+  }
+  @media (min-width: 680px) {
+    :root {
+      --jkl-spacing-16-24: var(--jkl-spacing-24);
+      --jkl-spacing-24-40: var(--jkl-spacing-40);
+      --jkl-spacing-24-32: var(--jkl-spacing-32);
+      --jkl-spacing-32-40: var(--jkl-spacing-40);
+      --jkl-spacing-40-64: var(--jkl-spacing-64);
+      --jkl-spacing-64-104: var(--jkl-spacing-104);
+      --jkl-spacing-104-168: var(--jkl-spacing-168);
+      --jkl-spacing-16-16-24: var(--jkl-spacing-16);
+      --jkl-spacing-16-24-32: var(--jkl-spacing-24);
+      --jkl-spacing-16-24-40: var(--jkl-spacing-24);
+      --jkl-spacing-24-24-32: var(--jkl-spacing-24);
+      --jkl-spacing-24-24-40: var(--jkl-spacing-24);
+      --jkl-spacing-24-32-40: var(--jkl-spacing-32);
+      --jkl-spacing-32-32-40: var(--jkl-spacing-32);
+      --jkl-spacing-32-40-64: var(--jkl-spacing-40);
+      --jkl-spacing-40-40-64: var(--jkl-spacing-40);
+      --jkl-spacing-40-64-104: var(--jkl-spacing-64);
+      --jkl-spacing-64-64-104: var(--jkl-spacing-64);
+      --jkl-spacing-64-104-168: var(--jkl-spacing-104);
+      --jkl-spacing-104-104-168: var(--jkl-spacing-104);
+    }
+  }
+  @media (min-width: 1200px) {
+    :root {
+      --jkl-spacing-16-16-24: var(--jkl-spacing-24);
+      --jkl-spacing-16-24-32: var(--jkl-spacing-32);
+      --jkl-spacing-16-24-40: var(--jkl-spacing-40);
+      --jkl-spacing-24-24-32: var(--jkl-spacing-32);
+      --jkl-spacing-24-24-40: var(--jkl-spacing-40);
+      --jkl-spacing-24-32-40: var(--jkl-spacing-40);
+      --jkl-spacing-32-32-40: var(--jkl-spacing-40);
+      --jkl-spacing-32-40-64: var(--jkl-spacing-64);
+      --jkl-spacing-40-40-64: var(--jkl-spacing-64);
+      --jkl-spacing-40-64-104: var(--jkl-spacing-104);
+      --jkl-spacing-64-64-104: var(--jkl-spacing-104);
+      --jkl-spacing-64-104-168: var(--jkl-spacing-168);
+      --jkl-spacing-104-104-168: var(--jkl-spacing-168);
+    }
+  }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.theme {
+  :root {
+    color-scheme: light dark;
+    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
+    --jkl-color-background-page: #F3F0ED;
+    --jkl-color-background-page: light-dark(#F3F0ED, #0E0D0C);
+    --jkl-color-background-container: #FFFFFF;
+    --jkl-color-background-container: light-dark(#FFFFFF, #3E3A36);
+    --jkl-color-background-container-accent: #E6E2DB;
+    --jkl-color-background-container-accent: light-dark(#E6E2DB, #2A2724);
+    --jkl-color-background-contrast: #1B1917;
+    --jkl-color-background-contrast: light-dark(#1B1917, #F3F0ED);
+    --jkl-color-text-default: #1B1917;
+    --jkl-color-text-default: light-dark(#1B1917, #F9F9F9);
+    --jkl-color-text-subdued: #636060;
+    --jkl-color-text-subdued: light-dark(#636060, #C8C5C3);
+    --jkl-color-text-accent: #000000;
+    --jkl-color-text-accent: light-dark(#000000, #FFFFFF);
+    --jkl-color-text-on-contrast: #F9F9F9;
+    --jkl-color-text-on-contrast: light-dark(#F9F9F9, #1B1917);
+    --jkl-color-border-default: #636060;
+    --jkl-color-border-default: light-dark(#636060, #C8C5C3);
+    --jkl-color-border-subdued: #C8C5C3;
+    --jkl-color-border-subdued: light-dark(#C8C5C3, #636060);
+    --jkl-color-border-strong: #1B1917;
+    --jkl-color-border-strong: light-dark(#1B1917, #F9F9F9);
+    --jkl-color-warning-background-page: #FFFFFF;
+    --jkl-color-warning-background-page: light-dark(#FFFFFF, #000000);
+    --jkl-color-warning-background-container: #F1DFD1;
+    --jkl-color-warning-background-container: light-dark(#F1DFD1, #61441F);
+    --jkl-color-warning-background-container-accent: #EAC7A8;
+    --jkl-color-warning-background-container-accent: light-dark(#EAC7A8, #75542B);
+    --jkl-color-warning-background-contrast: #8B6539;
+    --jkl-color-warning-background-contrast: light-dark(#8B6539, #8B6539);
+    --jkl-color-warning-text-default: #000000;
+    --jkl-color-warning-text-default: light-dark(#000000, #FFFFFF);
+    --jkl-color-warning-text-subdued: #3E3A36;
+    --jkl-color-warning-text-subdued: light-dark(#3E3A36, #DFD8CE);
+    --jkl-color-warning-text-accent: #000000;
+    --jkl-color-warning-text-accent: light-dark(#000000, #FFFFFF);
+    --jkl-color-warning-text-on-contrast: #FFFFFF;
+    --jkl-color-warning-text-on-contrast: light-dark(#FFFFFF, #000000);
+    --jkl-color-warning-border-default: #A17747;
+    --jkl-color-warning-border-default: light-dark(#A17747, #B68957);
+    --jkl-color-warning-border-subdued: #E3B07A;
+    --jkl-color-warning-border-subdued: light-dark(#E3B07A, #75542B);
+    --jkl-color-warning-border-strong: #61441F;
+    --jkl-color-warning-border-strong: light-dark(#61441F, #A17747);
+    --jkl-color-success-background-page: #FFFFFF;
+    --jkl-color-success-background-page: light-dark(#FFFFFF, #000000);
+    --jkl-color-success-background-container: #C6E6CD;
+    --jkl-color-success-background-container: light-dark(#C6E6CD, #15341E);
+    --jkl-color-success-background-container-accent: #ACD3B5;
+    --jkl-color-success-background-container-accent: light-dark(#ACD3B5, #24492E);
+    --jkl-color-success-background-contrast: #345F40;
+    --jkl-color-success-background-contrast: light-dark(#345F40, #467653);
+    --jkl-color-success-text-default: #000000;
+    --jkl-color-success-text-default: light-dark(#000000, #FFFFFF);
+    --jkl-color-success-text-subdued: #3E3A36;
+    --jkl-color-success-text-subdued: light-dark(#3E3A36, #DFD8CE);
+    --jkl-color-success-text-accent: #000000;
+    --jkl-color-success-text-accent: light-dark(#000000, #FFFFFF);
+    --jkl-color-success-text-on-contrast: #FFFFFF;
+    --jkl-color-success-text-on-contrast: light-dark(#FFFFFF, #000000);
+    --jkl-color-success-border-default: #467653;
+    --jkl-color-success-border-default: light-dark(#467653, #598D67);
+    --jkl-color-success-border-subdued: #8CBC98;
+    --jkl-color-success-border-subdued: light-dark(#8CBC98, #24492E);
+    --jkl-color-success-border-strong: #15341E;
+    --jkl-color-success-border-strong: light-dark(#15341E, #467653);
+    --jkl-color-info-background-page: #FFFFFF;
+    --jkl-color-info-background-page: light-dark(#FFFFFF, #000000);
+    --jkl-color-info-background-container: #E3E3F4;
+    --jkl-color-info-background-container: light-dark(#E3E3F4, #1E1E81);
+    --jkl-color-info-background-container-accent: #D3D3F6;
+    --jkl-color-info-background-container-accent: light-dark(#D3D3F6, #2D2DB3);
+    --jkl-color-info-background-contrast: #4646D1;
+    --jkl-color-info-background-contrast: light-dark(#4646D1, #6262DC);
+    --jkl-color-info-text-default: #000000;
+    --jkl-color-info-text-default: light-dark(#000000, #FFFFFF);
+    --jkl-color-info-text-subdued: #3E3A36;
+    --jkl-color-info-text-subdued: light-dark(#3E3A36, #DFD8CE);
+    --jkl-color-info-text-accent: #000000;
+    --jkl-color-info-text-accent: light-dark(#000000, #FFFFFF);
+    --jkl-color-info-text-on-contrast: #FFFFFF;
+    --jkl-color-info-text-on-contrast: light-dark(#FFFFFF, #000000);
+    --jkl-color-info-border-default: #6262DC;
+    --jkl-color-info-border-default: light-dark(#6262DC, #7E7EE4);
+    --jkl-color-info-border-subdued: #B7B7F0;
+    --jkl-color-info-border-subdued: light-dark(#B7B7F0, #2D2DB3);
+    --jkl-color-info-border-strong: #1E1E81;
+    --jkl-color-info-border-strong: light-dark(#1E1E81, #6262DC);
+    --jkl-color-error-background-page: #FFFFFF;
+    --jkl-color-error-background-page: light-dark(#FFFFFF, #000000);
+    --jkl-color-error-background-container: #F3DEDE;
+    --jkl-color-error-background-container: light-dark(#F3DEDE, #610F0F);
+    --jkl-color-error-background-container-accent: #F2C9C9;
+    --jkl-color-error-background-container-accent: light-dark(#F2C9C9, #891919);
+    --jkl-color-error-background-contrast: #B32424;
+    --jkl-color-error-background-contrast: light-dark(#B32424, #DF3030);
+    --jkl-color-error-text-default: #000000;
+    --jkl-color-error-text-default: light-dark(#000000, #FFFFFF);
+    --jkl-color-error-text-subdued: #3E3A36;
+    --jkl-color-error-text-subdued: light-dark(#3E3A36, #DFD8CE);
+    --jkl-color-error-text-accent: #610F0F;
+    --jkl-color-error-text-accent: light-dark(#610F0F, #F6B3B3);
+    --jkl-color-error-text-on-contrast: #FFFFFF;
+    --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-error-border-default: #DF3030;
+    --jkl-color-error-border-default: light-dark(#DF3030, #F15D5D);
+    --jkl-color-error-border-subdued: #F6B3B3;
+    --jkl-color-error-border-subdued: light-dark(#F6B3B3, #891919);
+    --jkl-color-error-border-strong: #610F0F;
+    --jkl-color-error-border-strong: light-dark(#610F0F, #DF3030);
+    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
+  }
+  [data-theme=light] {
+    color-scheme: light;
+  }
+  [data-theme=dark] {
+    color-scheme: dark;
+  }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.theme {
+  :root,
+  [data-size],
+  [data-size=medium] {
+    --jkl-unit-10: 8px;
+    --jkl-unit-base: 8px;
+    --jkl-font-size-1: 14px;
+    --jkl-font-size-2: 16px;
+    --jkl-font-size-3: 18px;
+    --jkl-font-size-4: 20px;
+    --jkl-font-size-5: 24px;
+    --jkl-font-size-6: 28px;
+    --jkl-font-size-7: 32px;
+    --jkl-font-size-8: 40px;
+    --jkl-font-size-9: 48px;
+    --jkl-font-size-10: 56px;
+  }
+  [data-size=small] {
+    --jkl-unit-10: 5px;
+    --jkl-unit-base: 5px;
+    --jkl-font-size-1: 12px;
+    --jkl-font-size-2: 14px;
+    --jkl-font-size-3: 16px;
+    --jkl-font-size-4: 18px;
+    --jkl-font-size-5: 20px;
+    --jkl-font-size-6: 24px;
+    --jkl-font-size-7: 28px;
+    --jkl-font-size-8: 32px;
+    --jkl-font-size-9: 40px;
+    --jkl-font-size-10: 48px;
+  }
+  [data-size=large] {
+    --jkl-unit-10: 11px;
+    --jkl-unit-base: 11px;
+    --jkl-font-size-1: 14px;
+    --jkl-font-size-2: 16px;
+    --jkl-font-size-3: 18px;
+    --jkl-font-size-4: 20px;
+    --jkl-font-size-5: 24px;
+    --jkl-font-size-6: 28px;
+    --jkl-font-size-7: 32px;
+    --jkl-font-size-8: 40px;
+    --jkl-font-size-9: 48px;
+    --jkl-font-size-10: 56px;
+  }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.theme {
+  :root,
+  [data-size],
+  [data-theme] {
+    --jkl-unit-0: 0;
+    --jkl-spacing-0: 0rem;
+    --jkl-spacing-2: 0.125rem;
+    --jkl-spacing-4: 0.25rem;
+    --jkl-spacing-8: 0.5rem;
+    --jkl-spacing-12: 0.75rem;
+    --jkl-spacing-16: 1rem;
+    --jkl-spacing-24: 1.5rem;
+    --jkl-spacing-32: 2rem;
+    --jkl-spacing-40: 2.5rem;
+    --jkl-spacing-64: 4rem;
+    --jkl-spacing-104: 6.5rem;
+    --jkl-spacing-168: 10.5rem;
+    --jkl-spacing-none: 0;
+    --jkl-border-width-1: 0.0625rem;
+    --jkl-border-width-2: 0.125rem;
+    --jkl-border-width-3: 0.1875rem;
+    --jkl-border-radius-none: 0;
+    --jkl-border-radius-xs: 0.25rem;
+    --jkl-border-radius-s: 0.5rem;
+    --jkl-border-radius-m: 0.75rem;
+    --jkl-border-radius-l: 1rem;
+    --jkl-border-radius-full: 9999px;
+    --jkl-breakpoint-small: 0;
+    --jkl-breakpoint-medium: 680px;
+    --jkl-breakpoint-large: 1200px;
+    --jkl-breakpoint-xl: 1600px;
+    --jkl-motion-timing-energetic: 75ms;
+    --jkl-motion-timing-snappy: 100ms;
+    --jkl-motion-timing-productive: 150ms;
+    --jkl-motion-timing-polite: 200ms;
+    --jkl-motion-timing-expressive: 250ms;
+    --jkl-motion-timing-lazy: 400ms;
+    --jkl-motion-easing-standard: ease;
+    --jkl-motion-easing-entrance: ease-out;
+    --jkl-motion-easing-exit: ease-in;
+    --jkl-motion-easing-ease-in-bounce-out: cubic-bezier(0, 0, 0.375, 1.17);
+    --jkl-motion-easing-focus: cubic-bezier(0.6, 0.2, 0.35, 1);
+    --jkl-font-weight-normal: 400;
+    --jkl-font-weight-bold: 700;
+    --jkl-font-family-regular: "Jokul", "Adjusted Arial Fallback", arial, sans-serif;
+    --jkl-font-family-display: "Jokul Display", "Adjusted Arial Display Fallback", arial, sans-serif;
+    --jkl-font-family-mono: "Jokul Mono", "Adjusted Courier New Fallback", -apple-system, blinkmacsystemfont, monospace;
+    --jkl-line-height-flush: 1;
+    --jkl-line-height-tight: 1.3;
+    --jkl-line-height-relaxed: 1.6;
+    --jkl-unit-15: calc(var(--jkl-unit-base) * 1.5);
+    --jkl-unit-20: calc(var(--jkl-unit-base) * 2);
+    --jkl-unit-25: calc(var(--jkl-unit-base) * 2.5);
+    --jkl-unit-30: calc(var(--jkl-unit-base) * 3);
+    --jkl-unit-35: calc(var(--jkl-unit-base) * 3.5);
+    --jkl-unit-40: calc(var(--jkl-unit-base) * 4);
+    --jkl-unit-50: calc(var(--jkl-unit-base) * 5);
+    --jkl-unit-60: calc(var(--jkl-unit-base) * 6);
+    --jkl-unit-70: calc(var(--jkl-unit-base) * 7);
+    --jkl-unit-80: calc(var(--jkl-unit-base) * 8);
+    --jkl-unit-90: calc(var(--jkl-unit-base) * 9);
+    --jkl-unit-100: calc(var(--jkl-unit-base) * 10);
+    --jkl-unit-130: calc(var(--jkl-unit-base) * 13);
+    --jkl-unit-210: calc(var(--jkl-unit-base) * 21);
+    --jkl-unit-02: calc(var(--jkl-unit-base) * 0.25);
+    --jkl-unit-05: calc(var(--jkl-unit-base) * 0.5);
+    --jkl-spacing-2xs: var(--jkl-spacing-4);
+    --jkl-spacing-xs: var(--jkl-spacing-8);
+    --jkl-spacing-s: var(--jkl-spacing-16);
+    --jkl-spacing-m: var(--jkl-spacing-24);
+    --jkl-spacing-l: var(--jkl-spacing-40);
+    --jkl-spacing-xl: var(--jkl-spacing-64);
+    --jkl-spacing-2xl: var(--jkl-spacing-104);
+    --jkl-text-style-title: var(--jkl-font-weight-normal) var(--jkl-font-size-10)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+    --jkl-text-style-title-small: var(--jkl-font-weight-normal) var(--jkl-font-size-9)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+    --jkl-text-style-heading-1: var(--jkl-font-weight-normal) var(--jkl-font-size-8)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+    --jkl-text-style-heading-2: var(--jkl-font-weight-normal) var(--jkl-font-size-7)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+    --jkl-text-style-heading-3: var(--jkl-font-weight-bold) var(--jkl-font-size-6)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+    --jkl-text-style-heading-4: var(--jkl-font-weight-bold) var(--jkl-font-size-5)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+    --jkl-text-style-heading-5: var(--jkl-font-weight-bold) var(--jkl-font-size-4)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+    --jkl-text-style-paragraph-large: var(--jkl-font-weight-normal) var(--jkl-font-size-5)/var(--jkl-line-height-relaxed) var(--jkl-font-family-regular);
+    --jkl-text-style-paragraph-medium: var(--jkl-font-weight-normal) var(--jkl-font-size-3)/var(--jkl-line-height-relaxed) var(--jkl-font-family-regular);
+    --jkl-text-style-paragraph-small: var(--jkl-font-weight-normal) var(--jkl-font-size-2)/var(--jkl-line-height-relaxed) var(--jkl-font-family-regular);
+    --jkl-text-style-text-large: var(--jkl-font-weight-normal) var(--jkl-font-size-5)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+    --jkl-text-style-text-medium: var(--jkl-font-weight-normal) var(--jkl-font-size-3)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+    --jkl-text-style-text-small: var(--jkl-font-weight-normal) var(--jkl-font-size-2)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+    --jkl-text-style-text-micro: var(--jkl-font-weight-normal) var(--jkl-font-size-1)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+  }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.theme {
+  [data-brand=dnb] {
+    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
+    --jkl-color-background-page: #FFFFFF;
+    --jkl-color-background-page: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-background-container: #D8F3EC;
+    --jkl-color-background-container: light-dark(#D8F3EC, #D8F3EC);
+    --jkl-color-background-container-accent: #A5E1D2;
+    --jkl-color-background-container-accent: light-dark(#A5E1D2, #A5E1D2);
+    --jkl-color-background-contrast: #007272;
+    --jkl-color-background-contrast: light-dark(#007272, #007272);
+    --jkl-color-text-default: #333333;
+    --jkl-color-text-default: light-dark(#333333, #333333);
+    --jkl-color-text-subdued: #737373;
+    --jkl-color-text-subdued: light-dark(#737373, #737373);
+    --jkl-color-text-accent: #FFFFFF;
+    --jkl-color-text-accent: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-text-on-contrast: #FFFFFF;
+    --jkl-color-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-border-default: #007272;
+    --jkl-color-border-default: light-dark(#007272, #007272);
+    --jkl-color-border-subdued: #FFFFFF;
+    --jkl-color-border-subdued: light-dark(#FFFFFF, #F7F4F2);
+    --jkl-color-border-strong: #FFFFFF;
+    --jkl-color-border-strong: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-warning-background-page: #FFFFFF;
+    --jkl-color-warning-background-page: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-warning-background-container: #FBF6EC;
+    --jkl-color-warning-background-container: light-dark(#FBF6EC, #FBF6EC);
+    --jkl-color-warning-background-container-accent: #FFFFFF;
+    --jkl-color-warning-background-container-accent: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-warning-background-contrast: #FDBB31;
+    --jkl-color-warning-background-contrast: light-dark(#FDBB31, #FDBB31);
+    --jkl-color-warning-text-default: #333333;
+    --jkl-color-warning-text-default: light-dark(#333333, #333333);
+    --jkl-color-warning-text-subdued: #737373;
+    --jkl-color-warning-text-subdued: light-dark(#737373, #737373);
+    --jkl-color-warning-text-accent: #805B0E;
+    --jkl-color-warning-text-accent: light-dark(#805B0E, #805B0E);
+    --jkl-color-warning-text-on-contrast: #FFFFFF;
+    --jkl-color-warning-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-warning-border-default: #FDBB31;
+    --jkl-color-warning-border-default: light-dark(#FDBB31, #FDBB31);
+    --jkl-color-warning-border-subdued: #FFFFFF;
+    --jkl-color-warning-border-subdued: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-warning-border-strong: #FFFFFF;
+    --jkl-color-warning-border-strong: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-success-background-page: #FFFFFF;
+    --jkl-color-success-background-page: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-success-background-container: #EBF4F2;
+    --jkl-color-success-background-container: light-dark(#EBF4F2, #EBF4F2);
+    --jkl-color-success-background-container-accent: #FFFFFF;
+    --jkl-color-success-background-container-accent: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-success-background-contrast: #007B5E;
+    --jkl-color-success-background-contrast: light-dark(#007B5E, #007B5E);
+    --jkl-color-success-text-default: #333333;
+    --jkl-color-success-text-default: light-dark(#333333, #333333);
+    --jkl-color-success-text-subdued: #737373;
+    --jkl-color-success-text-subdued: light-dark(#737373, #737373);
+    --jkl-color-success-text-accent: #28B482;
+    --jkl-color-success-text-accent: light-dark(#28B482, #28B482);
+    --jkl-color-success-text-on-contrast: #FFFFFF;
+    --jkl-color-success-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-success-border-default: #007B5E;
+    --jkl-color-success-border-default: light-dark(#007B5E, #007B5E);
+    --jkl-color-success-border-subdued: #FFFFFF;
+    --jkl-color-success-border-subdued: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-success-border-strong: #FFFFFF;
+    --jkl-color-success-border-strong: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-info-background-page: #FFFFFF;
+    --jkl-color-info-background-page: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-info-background-container: #FFFFFF;
+    --jkl-color-info-background-container: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-info-background-container-accent: #FFFFFF;
+    --jkl-color-info-background-container-accent: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-info-background-contrast: #007272;
+    --jkl-color-info-background-contrast: light-dark(#007272, #007272);
+    --jkl-color-info-text-default: #333333;
+    --jkl-color-info-text-default: light-dark(#333333, #333333);
+    --jkl-color-info-text-subdued: #737373;
+    --jkl-color-info-text-subdued: light-dark(#737373, #737373);
+    --jkl-color-info-text-accent: #FFFFFF;
+    --jkl-color-info-text-accent: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-info-text-on-contrast: #FFFFFF;
+    --jkl-color-info-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-info-border-default: #007272;
+    --jkl-color-info-border-default: light-dark(#007272, #007272);
+    --jkl-color-info-border-subdued: #FFFFFF;
+    --jkl-color-info-border-subdued: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-info-border-strong: #FFFFFF;
+    --jkl-color-info-border-strong: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-error-background-page: #FFFFFF;
+    --jkl-color-error-background-page: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-error-background-container: #FCEEEE;
+    --jkl-color-error-background-container: light-dark(#FCEEEE, #FCEEEE);
+    --jkl-color-error-background-container-accent: #FFFFFF;
+    --jkl-color-error-background-container-accent: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-error-background-contrast: #D52525;
+    --jkl-color-error-background-contrast: light-dark(#D52525, #D52525);
+    --jkl-color-error-text-default: #333333;
+    --jkl-color-error-text-default: light-dark(#333333, #333333);
+    --jkl-color-error-text-subdued: #737373;
+    --jkl-color-error-text-subdued: light-dark(#737373, #737373);
+    --jkl-color-error-text-accent: #FFFFFF;
+    --jkl-color-error-text-accent: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-error-text-on-contrast: #FFFFFF;
+    --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-error-border-default: #D52525;
+    --jkl-color-error-border-default: light-dark(#D52525, #D52525);
+    --jkl-color-error-border-subdued: #FFFFFF;
+    --jkl-color-error-border-subdued: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-error-border-strong: #FFFFFF;
+    --jkl-color-error-border-strong: light-dark(#FFFFFF, #FFFFFF);
+    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
+  }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.theme {
+  @font-face {
+    font-family: "DNB Sans";
+    font-display: fallback;
+    font-weight: 400;
+    font-style: normal;
+    src: url("/fonts/brands/dnb/DNB-Regular.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "DNB Sans";
+    font-display: fallback;
+    font-weight: 500;
+    font-style: normal;
+    src: url("/fonts/brands/dnb/DNB-Medium.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "DNB Sans";
+    font-display: fallback;
+    font-weight: 700;
+    font-style: normal;
+    src: url("/fonts/brands/dnb/DNB-Bold.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "DNB Mono";
+    font-display: fallback;
+    font-weight: 400;
+    font-style: normal;
+    src: url("/fonts/brands/dnb/DNBMono-Regular.woff2") format("woff2");
+  }
+  [data-brand=dnb] {
+    --jkl-font-family-regular: "DNB Sans", "Adjusted Arial Fallback", arial, sans-serif;
+    --jkl-font-family-display: "DNB Sans", "Adjusted Arial Display Fallback", arial, sans-serif;
+    --jkl-font-family-mono: "DNB Mono", "Adjusted Courier New Fallback", -apple-system, blinkmacsystemfont, monospace;
+  }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.theme {
+  [data-brand=eika] {
+    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
+    --jkl-color-background-page: #FFFFFF;
+    --jkl-color-background-page: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-background-container: #FBFAFA;
+    --jkl-color-background-container: light-dark(#FBFAFA, #ECE5E0);
+    --jkl-color-background-container-accent: #ECE5E0;
+    --jkl-color-background-container-accent: light-dark(#ECE5E0, #ECE5E0);
+    --jkl-color-background-contrast: #00383D;
+    --jkl-color-background-contrast: light-dark(#00383D, #00383D);
+    --jkl-color-text-default: #00383D;
+    --jkl-color-text-default: light-dark(#00383D, #00383D);
+    --jkl-color-text-subdued: #4D7477;
+    --jkl-color-text-subdued: light-dark(#4D7477, #4D7477);
+    --jkl-color-text-accent: #00383D;
+    --jkl-color-text-accent: light-dark(#00383D, #00383D);
+    --jkl-color-text-on-contrast: #FFFFFF;
+    --jkl-color-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-border-default: #ECE5E0;
+    --jkl-color-border-default: light-dark(#ECE5E0, #ECE5E0);
+    --jkl-color-border-subdued: #F7F4F2;
+    --jkl-color-border-subdued: light-dark(#F7F4F2, #F7F4F2);
+    --jkl-color-border-strong: #4D7477;
+    --jkl-color-border-strong: light-dark(#4D7477, #4D7477);
+    --jkl-color-warning-background-page: #FFFFFF;
+    --jkl-color-warning-background-page: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-warning-background-container: #FFE5C7;
+    --jkl-color-warning-background-container: light-dark(#FFE5C7, #FFE5C7);
+    --jkl-color-warning-background-container-accent: #ECE5E0;
+    --jkl-color-warning-background-container-accent: light-dark(#ECE5E0, #ECE5E0);
+    --jkl-color-warning-background-contrast: #FFBD74;
+    --jkl-color-warning-background-contrast: light-dark(#FFBD74, #FFBD74);
+    --jkl-color-warning-text-default: #00383D;
+    --jkl-color-warning-text-default: light-dark(#00383D, #00383D);
+    --jkl-color-warning-text-subdued: #4D7477;
+    --jkl-color-warning-text-subdued: light-dark(#4D7477, #4D7477);
+    --jkl-color-warning-text-accent: #00383D;
+    --jkl-color-warning-text-accent: light-dark(#00383D, #00383D);
+    --jkl-color-warning-text-on-contrast: #FFFFFF;
+    --jkl-color-warning-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-warning-border-default: #ECE5E0;
+    --jkl-color-warning-border-default: light-dark(#ECE5E0, #ECE5E0);
+    --jkl-color-warning-border-subdued: #F7F4F2;
+    --jkl-color-warning-border-subdued: light-dark(#F7F4F2, #F7F4F2);
+    --jkl-color-warning-border-strong: #4D7477;
+    --jkl-color-warning-border-strong: light-dark(#4D7477, #4D7477);
+    --jkl-color-success-background-page: #FFFFFF;
+    --jkl-color-success-background-page: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-success-background-container: #ECF7D4;
+    --jkl-color-success-background-container: light-dark(#ECF7D4, #ECF7D4);
+    --jkl-color-success-background-container-accent: #ECE5E0;
+    --jkl-color-success-background-container-accent: light-dark(#ECE5E0, #ECE5E0);
+    --jkl-color-success-background-contrast: #00383D;
+    --jkl-color-success-background-contrast: light-dark(#00383D, #00383D);
+    --jkl-color-success-text-default: #00383D;
+    --jkl-color-success-text-default: light-dark(#00383D, #00383D);
+    --jkl-color-success-text-subdued: #4D7477;
+    --jkl-color-success-text-subdued: light-dark(#4D7477, #4D7477);
+    --jkl-color-success-text-accent: #00383D;
+    --jkl-color-success-text-accent: light-dark(#00383D, #00383D);
+    --jkl-color-success-text-on-contrast: #FFFFFF;
+    --jkl-color-success-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-success-border-default: #ECE5E0;
+    --jkl-color-success-border-default: light-dark(#ECE5E0, #ECE5E0);
+    --jkl-color-success-border-subdued: #F7F4F2;
+    --jkl-color-success-border-subdued: light-dark(#F7F4F2, #F7F4F2);
+    --jkl-color-success-border-strong: #4D7477;
+    --jkl-color-success-border-strong: light-dark(#4D7477, #4D7477);
+    --jkl-color-info-background-page: #FFFFFF;
+    --jkl-color-info-background-page: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-info-background-container: #E6F3F5;
+    --jkl-color-info-background-container: light-dark(#E6F3F5, #E6F3F5);
+    --jkl-color-info-background-container-accent: #ECE5E0;
+    --jkl-color-info-background-container-accent: light-dark(#ECE5E0, #ECE5E0);
+    --jkl-color-info-background-contrast: #00383D;
+    --jkl-color-info-background-contrast: light-dark(#00383D, #00383D);
+    --jkl-color-info-text-default: #00383D;
+    --jkl-color-info-text-default: light-dark(#00383D, #00383D);
+    --jkl-color-info-text-subdued: #4D7477;
+    --jkl-color-info-text-subdued: light-dark(#4D7477, #4D7477);
+    --jkl-color-info-text-accent: #00383D;
+    --jkl-color-info-text-accent: light-dark(#00383D, #00383D);
+    --jkl-color-info-text-on-contrast: #FFFFFF;
+    --jkl-color-info-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-info-border-default: #ECE5E0;
+    --jkl-color-info-border-default: light-dark(#ECE5E0, #ECE5E0);
+    --jkl-color-info-border-subdued: #F7F4F2;
+    --jkl-color-info-border-subdued: light-dark(#F7F4F2, #F7F4F2);
+    --jkl-color-info-border-strong: #4D7477;
+    --jkl-color-info-border-strong: light-dark(#4D7477, #4D7477);
+    --jkl-color-error-background-page: #FFFFFF;
+    --jkl-color-error-background-page: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-error-background-container: #FDDEE6;
+    --jkl-color-error-background-container: light-dark(#FDDEE6, #FDDEE6);
+    --jkl-color-error-background-container-accent: #ECE5E0;
+    --jkl-color-error-background-container-accent: light-dark(#ECE5E0, #ECE5E0);
+    --jkl-color-error-background-contrast: #B83653;
+    --jkl-color-error-background-contrast: light-dark(#B83653, #B83653);
+    --jkl-color-error-text-default: #00383D;
+    --jkl-color-error-text-default: light-dark(#00383D, #00383D);
+    --jkl-color-error-text-subdued: #4D7477;
+    --jkl-color-error-text-subdued: light-dark(#4D7477, #4D7477);
+    --jkl-color-error-text-accent: #00383D;
+    --jkl-color-error-text-accent: light-dark(#00383D, #00383D);
+    --jkl-color-error-text-on-contrast: #FFFFFF;
+    --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-error-border-default: #ECE5E0;
+    --jkl-color-error-border-default: light-dark(#ECE5E0, #ECE5E0);
+    --jkl-color-error-border-subdued: #F7F4F2;
+    --jkl-color-error-border-subdued: light-dark(#F7F4F2, #F7F4F2);
+    --jkl-color-error-border-strong: #4D7477;
+    --jkl-color-error-border-strong: light-dark(#4D7477, #4D7477);
+    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
+  }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.theme {
+  @font-face {
+    font-family: "Open Sans";
+    font-display: fallback;
+    font-weight: 300;
+    font-style: normal;
+    src: url("/fonts/brands/eika/OpenSans-Light.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "Open Sans";
+    font-display: fallback;
+    font-weight: 400;
+    font-style: normal;
+    src: url("/fonts/brands/eika/OpenSans-Regular.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "Open Sans";
+    font-display: fallback;
+    font-weight: 600;
+    font-style: normal;
+    src: url("/fonts/brands/eika/OpenSans-SemiBold.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "Open Sans";
+    font-display: fallback;
+    font-weight: 700;
+    font-style: normal;
+    src: url("/fonts/brands/eika/OpenSans-Bold.woff2") format("woff2");
+  }
+  [data-brand=eika] {
+    --jkl-font-family-regular: "Open Sans", "Adjusted Arial Fallback", arial, sans-serif;
+    --jkl-font-family-display: "Open Sans", "Adjusted Arial Display Fallback", arial, sans-serif;
+    --jkl-font-family-mono: "Adjusted Courier New Fallback", -apple-system, blinkmacsystemfont, monospace;
+  }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.theme {
+  [data-brand=sparebank1] {
+    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
+    --jkl-color-background-page: #FDF7F3;
+    --jkl-color-background-page: light-dark(#FDF7F3, #131313);
+    --jkl-color-background-container: #FFFFFF;
+    --jkl-color-background-container: light-dark(#FFFFFF, #222222);
+    --jkl-color-background-container-accent: #E1EEF3;
+    --jkl-color-background-container-accent: light-dark(#E1EEF3, #0F1F2C);
+    --jkl-color-background-contrast: #0C4686;
+    --jkl-color-background-contrast: light-dark(#0C4686, #00509A);
+    --jkl-color-text-default: #191919;
+    --jkl-color-text-default: light-dark(#191919, #FFFFFF);
+    --jkl-color-text-subdued: #484848;
+    --jkl-color-text-subdued: light-dark(#484848, #BABABA);
+    --jkl-color-text-accent: #0C2053;
+    --jkl-color-text-accent: light-dark(#0C2053, #D1E3F2);
+    --jkl-color-text-on-contrast: #FFFFFF;
+    --jkl-color-text-on-contrast: light-dark(#FFFFFF, #060D0D);
+    --jkl-color-border-default: #CDCFCF;
+    --jkl-color-border-default: light-dark(#CDCFCF, #383D3D);
+    --jkl-color-border-subdued: #ECEDED;
+    --jkl-color-border-subdued: light-dark(#ECEDED, #191F1F);
+    --jkl-color-border-strong: #0C4686;
+    --jkl-color-border-strong: light-dark(#0C4686, #94BAE1);
+    --jkl-color-warning-background-page: #FFFFFF;
+    --jkl-color-warning-background-page: light-dark(#FFFFFF, #060D0D);
+    --jkl-color-warning-background-container: #FDEBCD;
+    --jkl-color-warning-background-container: light-dark(#FDEBCD, #401A00);
+    --jkl-color-warning-background-container-accent: #FDEBCD;
+    --jkl-color-warning-background-container-accent: light-dark(#FDEBCD, #401A00);
+    --jkl-color-warning-background-contrast: #0C4686;
+    --jkl-color-warning-background-contrast: light-dark(#0C4686, #00509A);
+    --jkl-color-warning-text-default: #5D2700;
+    --jkl-color-warning-text-default: light-dark(#5D2700, #FFBF6A);
+    --jkl-color-warning-text-subdued: #484848;
+    --jkl-color-warning-text-subdued: light-dark(#484848, #BABABA);
+    --jkl-color-warning-text-accent: #5D2700;
+    --jkl-color-warning-text-accent: light-dark(#5D2700, #FFBF6A);
+    --jkl-color-warning-text-on-contrast: #FFFFFF;
+    --jkl-color-warning-text-on-contrast: light-dark(#FFFFFF, #060D0D);
+    --jkl-color-warning-border-default: #C56709;
+    --jkl-color-warning-border-default: light-dark(#C56709, #C56709);
+    --jkl-color-warning-border-subdued: #ECEDED;
+    --jkl-color-warning-border-subdued: light-dark(#ECEDED, #191F1F);
+    --jkl-color-warning-border-strong: #0C4686;
+    --jkl-color-warning-border-strong: light-dark(#0C4686, #94BAE1);
+    --jkl-color-success-background-page: #FFFFFF;
+    --jkl-color-success-background-page: light-dark(#FFFFFF, #060D0D);
+    --jkl-color-success-background-container: #DAF5E8;
+    --jkl-color-success-background-container: light-dark(#DAF5E8, #0D3B2A);
+    --jkl-color-success-background-container-accent: #DAF5E8;
+    --jkl-color-success-background-container-accent: light-dark(#DAF5E8, #0D3B2A);
+    --jkl-color-success-background-contrast: #0C4686;
+    --jkl-color-success-background-contrast: light-dark(#0C4686, #00509A);
+    --jkl-color-success-text-default: #0D4430;
+    --jkl-color-success-text-default: light-dark(#0D4430, #A9E2C6);
+    --jkl-color-success-text-subdued: #484848;
+    --jkl-color-success-text-subdued: light-dark(#484848, #BABABA);
+    --jkl-color-success-text-accent: #0D4430;
+    --jkl-color-success-text-accent: light-dark(#0D4430, #A9E2C6);
+    --jkl-color-success-text-on-contrast: #FFFFFF;
+    --jkl-color-success-text-on-contrast: light-dark(#FFFFFF, #060D0D);
+    --jkl-color-success-border-default: #3F9D76;
+    --jkl-color-success-border-default: light-dark(#3F9D76, #3F9D76);
+    --jkl-color-success-border-subdued: #ECEDED;
+    --jkl-color-success-border-subdued: light-dark(#ECEDED, #191F1F);
+    --jkl-color-success-border-strong: #0C4686;
+    --jkl-color-success-border-strong: light-dark(#0C4686, #94BAE1);
+    --jkl-color-info-background-page: #FFFFFF;
+    --jkl-color-info-background-page: light-dark(#FFFFFF, #060D0D);
+    --jkl-color-info-background-container: #E1EEF3;
+    --jkl-color-info-background-container: light-dark(#E1EEF3, #163149);
+    --jkl-color-info-background-container-accent: #C4DEE8;
+    --jkl-color-info-background-container-accent: light-dark(#C4DEE8, #204666);
+    --jkl-color-info-background-contrast: #0C4686;
+    --jkl-color-info-background-contrast: light-dark(#0C4686, #00509A);
+    --jkl-color-info-text-default: #204666;
+    --jkl-color-info-text-default: light-dark(#204666, #BBDAE7);
+    --jkl-color-info-text-subdued: #484848;
+    --jkl-color-info-text-subdued: light-dark(#484848, #BABABA);
+    --jkl-color-info-text-accent: #204666;
+    --jkl-color-info-text-accent: light-dark(#204666, #BBDAE7);
+    --jkl-color-info-text-on-contrast: #FFFFFF;
+    --jkl-color-info-text-on-contrast: light-dark(#FFFFFF, #060D0D);
+    --jkl-color-info-border-default: #558BB5;
+    --jkl-color-info-border-default: light-dark(#558BB5, #558BB5);
+    --jkl-color-info-border-subdued: #ECEDED;
+    --jkl-color-info-border-subdued: light-dark(#ECEDED, #191F1F);
+    --jkl-color-info-border-strong: #0C4686;
+    --jkl-color-info-border-strong: light-dark(#0C4686, #94BAE1);
+    --jkl-color-error-background-page: #FFFFFF;
+    --jkl-color-error-background-page: light-dark(#FFFFFF, #060D0D);
+    --jkl-color-error-background-container: #FFDFDB;
+    --jkl-color-error-background-container: light-dark(#FFDFDB, #591011);
+    --jkl-color-error-background-container-accent: #FFB6AF;
+    --jkl-color-error-background-container-accent: light-dark(#FFB6AF, #711314);
+    --jkl-color-error-background-contrast: #0C4686;
+    --jkl-color-error-background-contrast: light-dark(#0C4686, #00509A);
+    --jkl-color-error-text-default: #711314;
+    --jkl-color-error-text-default: light-dark(#711314, #FFA49E);
+    --jkl-color-error-text-subdued: #484848;
+    --jkl-color-error-text-subdued: light-dark(#484848, #BABABA);
+    --jkl-color-error-text-accent: #711314;
+    --jkl-color-error-text-accent: light-dark(#711314, #FFA49E);
+    --jkl-color-error-text-on-contrast: #FFFFFF;
+    --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #060D0D);
+    --jkl-color-error-border-default: #E03A3C;
+    --jkl-color-error-border-default: light-dark(#E03A3C, #E03A3C);
+    --jkl-color-error-border-subdued: #ECEDED;
+    --jkl-color-error-border-subdued: light-dark(#ECEDED, #191F1F);
+    --jkl-color-error-border-strong: #0C4686;
+    --jkl-color-error-border-strong: light-dark(#0C4686, #94BAE1);
+    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
+  }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.theme {
+  @font-face {
+    font-family: "SpareBank1 Sans";
+    font-display: fallback;
+    font-weight: 400;
+    font-style: normal;
+    src: url("/fonts/brands/sparebank1/SpareBank1-Regular-Web.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "SpareBank1 Sans";
+    font-display: fallback;
+    font-weight: 500;
+    font-style: normal;
+    src: url("/fonts/brands/sparebank1/SpareBank1-Medium-Web.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "SpareBank1 Title";
+    font-display: fallback;
+    font-weight: 500;
+    font-style: normal;
+    src: url("/fonts/brands/sparebank1/SpareBank1-Title-Medium-Web.woff2") format("woff2");
+  }
+  [data-brand=sparebank1] {
+    --jkl-font-family-regular: "SpareBank1 Sans", "Adjusted Arial Fallback", arial, sans-serif;
+    --jkl-font-family-display: "SpareBank1 Title", "Adjusted Arial Display Fallback", arial, sans-serif;
+    --jkl-font-family-mono: "Adjusted Courier New Fallback", -apple-system, blinkmacsystemfont, monospace;
+  }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.theme {
+  [data-brand=fremtind] {
+    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
+    --jkl-color-background-page: #F3F0ED;
+    --jkl-color-background-page: light-dark(#F3F0ED, #0E0D0C);
+    --jkl-color-background-container: #FFFFFF;
+    --jkl-color-background-container: light-dark(#FFFFFF, #3E3A36);
+    --jkl-color-background-container-accent: #E6E2DB;
+    --jkl-color-background-container-accent: light-dark(#E6E2DB, #2A2724);
+    --jkl-color-background-contrast: #1B1917;
+    --jkl-color-background-contrast: light-dark(#1B1917, #F3F0ED);
+    --jkl-color-text-default: #1B1917;
+    --jkl-color-text-default: light-dark(#1B1917, #F9F9F9);
+    --jkl-color-text-subdued: #636060;
+    --jkl-color-text-subdued: light-dark(#636060, #C8C5C3);
+    --jkl-color-text-accent: #000000;
+    --jkl-color-text-accent: light-dark(#000000, #FFFFFF);
+    --jkl-color-text-on-contrast: #F9F9F9;
+    --jkl-color-text-on-contrast: light-dark(#F9F9F9, #1B1917);
+    --jkl-color-border-default: #636060;
+    --jkl-color-border-default: light-dark(#636060, #C8C5C3);
+    --jkl-color-border-subdued: #C8C5C3;
+    --jkl-color-border-subdued: light-dark(#C8C5C3, #636060);
+    --jkl-color-border-strong: #1B1917;
+    --jkl-color-border-strong: light-dark(#1B1917, #F9F9F9);
+    --jkl-color-warning-background-page: #FFFFFF;
+    --jkl-color-warning-background-page: light-dark(#FFFFFF, #000000);
+    --jkl-color-warning-background-container: #F1DFD1;
+    --jkl-color-warning-background-container: light-dark(#F1DFD1, #61441F);
+    --jkl-color-warning-background-container-accent: #EAC7A8;
+    --jkl-color-warning-background-container-accent: light-dark(#EAC7A8, #75542B);
+    --jkl-color-warning-background-contrast: #8B6539;
+    --jkl-color-warning-background-contrast: light-dark(#8B6539, #8B6539);
+    --jkl-color-warning-text-default: #000000;
+    --jkl-color-warning-text-default: light-dark(#000000, #FFFFFF);
+    --jkl-color-warning-text-subdued: #3E3A36;
+    --jkl-color-warning-text-subdued: light-dark(#3E3A36, #DFD8CE);
+    --jkl-color-warning-text-accent: #000000;
+    --jkl-color-warning-text-accent: light-dark(#000000, #FFFFFF);
+    --jkl-color-warning-text-on-contrast: #FFFFFF;
+    --jkl-color-warning-text-on-contrast: light-dark(#FFFFFF, #000000);
+    --jkl-color-warning-border-default: #A17747;
+    --jkl-color-warning-border-default: light-dark(#A17747, #B68957);
+    --jkl-color-warning-border-subdued: #E3B07A;
+    --jkl-color-warning-border-subdued: light-dark(#E3B07A, #75542B);
+    --jkl-color-warning-border-strong: #61441F;
+    --jkl-color-warning-border-strong: light-dark(#61441F, #A17747);
+    --jkl-color-success-background-page: #FFFFFF;
+    --jkl-color-success-background-page: light-dark(#FFFFFF, #000000);
+    --jkl-color-success-background-container: #C6E6CD;
+    --jkl-color-success-background-container: light-dark(#C6E6CD, #15341E);
+    --jkl-color-success-background-container-accent: #ACD3B5;
+    --jkl-color-success-background-container-accent: light-dark(#ACD3B5, #24492E);
+    --jkl-color-success-background-contrast: #345F40;
+    --jkl-color-success-background-contrast: light-dark(#345F40, #467653);
+    --jkl-color-success-text-default: #000000;
+    --jkl-color-success-text-default: light-dark(#000000, #FFFFFF);
+    --jkl-color-success-text-subdued: #3E3A36;
+    --jkl-color-success-text-subdued: light-dark(#3E3A36, #DFD8CE);
+    --jkl-color-success-text-accent: #000000;
+    --jkl-color-success-text-accent: light-dark(#000000, #FFFFFF);
+    --jkl-color-success-text-on-contrast: #FFFFFF;
+    --jkl-color-success-text-on-contrast: light-dark(#FFFFFF, #000000);
+    --jkl-color-success-border-default: #467653;
+    --jkl-color-success-border-default: light-dark(#467653, #598D67);
+    --jkl-color-success-border-subdued: #8CBC98;
+    --jkl-color-success-border-subdued: light-dark(#8CBC98, #24492E);
+    --jkl-color-success-border-strong: #15341E;
+    --jkl-color-success-border-strong: light-dark(#15341E, #467653);
+    --jkl-color-info-background-page: #FFFFFF;
+    --jkl-color-info-background-page: light-dark(#FFFFFF, #000000);
+    --jkl-color-info-background-container: #E3E3F4;
+    --jkl-color-info-background-container: light-dark(#E3E3F4, #1E1E81);
+    --jkl-color-info-background-container-accent: #D3D3F6;
+    --jkl-color-info-background-container-accent: light-dark(#D3D3F6, #2D2DB3);
+    --jkl-color-info-background-contrast: #4646D1;
+    --jkl-color-info-background-contrast: light-dark(#4646D1, #6262DC);
+    --jkl-color-info-text-default: #000000;
+    --jkl-color-info-text-default: light-dark(#000000, #FFFFFF);
+    --jkl-color-info-text-subdued: #3E3A36;
+    --jkl-color-info-text-subdued: light-dark(#3E3A36, #DFD8CE);
+    --jkl-color-info-text-accent: #000000;
+    --jkl-color-info-text-accent: light-dark(#000000, #FFFFFF);
+    --jkl-color-info-text-on-contrast: #FFFFFF;
+    --jkl-color-info-text-on-contrast: light-dark(#FFFFFF, #000000);
+    --jkl-color-info-border-default: #6262DC;
+    --jkl-color-info-border-default: light-dark(#6262DC, #7E7EE4);
+    --jkl-color-info-border-subdued: #B7B7F0;
+    --jkl-color-info-border-subdued: light-dark(#B7B7F0, #2D2DB3);
+    --jkl-color-info-border-strong: #1E1E81;
+    --jkl-color-info-border-strong: light-dark(#1E1E81, #6262DC);
+    --jkl-color-error-background-page: #FFFFFF;
+    --jkl-color-error-background-page: light-dark(#FFFFFF, #000000);
+    --jkl-color-error-background-container: #F3DEDE;
+    --jkl-color-error-background-container: light-dark(#F3DEDE, #610F0F);
+    --jkl-color-error-background-container-accent: #F2C9C9;
+    --jkl-color-error-background-container-accent: light-dark(#F2C9C9, #891919);
+    --jkl-color-error-background-contrast: #B32424;
+    --jkl-color-error-background-contrast: light-dark(#B32424, #DF3030);
+    --jkl-color-error-text-default: #000000;
+    --jkl-color-error-text-default: light-dark(#000000, #FFFFFF);
+    --jkl-color-error-text-subdued: #3E3A36;
+    --jkl-color-error-text-subdued: light-dark(#3E3A36, #DFD8CE);
+    --jkl-color-error-text-accent: #610F0F;
+    --jkl-color-error-text-accent: light-dark(#610F0F, #F6B3B3);
+    --jkl-color-error-text-on-contrast: #FFFFFF;
+    --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+    --jkl-color-error-border-default: #DF3030;
+    --jkl-color-error-border-default: light-dark(#DF3030, #F15D5D);
+    --jkl-color-error-border-subdued: #F6B3B3;
+    --jkl-color-error-border-subdued: light-dark(#F6B3B3, #891919);
+    --jkl-color-error-border-strong: #610F0F;
+    --jkl-color-error-border-strong: light-dark(#610F0F, #DF3030);
+    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
+  }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.theme {
+  @font-face {
+    font-family: "Inter";
+    font-display: fallback;
+    font-weight: 400;
+    font-style: normal;
+    src: url("/fonts/brands/fremtind/InterVariable.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "Inter";
+    font-display: fallback;
+    font-weight: 700;
+    font-style: normal;
+    src: url("/fonts/brands/fremtind/InterVariable.woff2") format("woff2");
+  }
+  [data-brand=fremtind] {
+    --jkl-font-family-regular: Inter, "Adjusted Arial Fallback", arial, sans-serif;
+    --jkl-font-family-display: Inter, "Adjusted Arial Display Fallback", arial, sans-serif;
+    --jkl-font-family-mono: monospace, -apple-system, blinkmacsystemfont;
+  }
+}
+@layer jokul.global {
+  /* Legger til støtte for fontskalering via OS-innstillinger på Apple-enheter */
+  @supports (font: -apple-system-body) {
+    @media (pointer: coarse) {
+      :root {
+        /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+        font: -apple-system-body;
+      }
+    }
+  }
+  .jkl {
+    --jkl-background-color: var(--jkl-color-background-page);
+    --jkl-color: var(--jkl-color-text-default);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: var(--jkl-background-color);
+    color: var(--jkl-color);
+    font-family: var(--jkl-font-family-regular);
+  }
+  .jkl strong {
+    font-weight: var(--jkl-font-weight-bold);
+  }
+  @media screen and (prefers-reduced-motion: reduce) {
+    *,
+    *::after,
+    *::before {
+      animation-duration: 0ms !important;
+      animation-delay: 0ms !important;
+      transition: none !important;
+    }
+  }
+}
+@layer jokul.global {
+  [popover] {
+    opacity: 0;
+    transition: opacity, overlay allow-discrete, display allow-discrete;
+    transition-timing-function: var(--jkl-motion-easing-standard);
+    transition-duration: var(--jkl-motion-timing-productive);
+  }
+  [popover]:popover-open {
+    opacity: 1;
+  }
+  @starting-style {
+    [popover]:popover-open {
+      opacity: 0;
+    }
+  }
+}
+@layer jokul.utility {
+  .jkl-body {
+    font: var(--jkl-text-style-paragraph-medium);
+  }
+  .jkl-bold {
+    font: var(--jkl-text-style-paragraph-medium);
+    font-weight: var(--jkl-font-weight-bold);
+  }
+  .jkl-small {
+    font: var(--jkl-text-style-paragraph-small);
+  }
+  .jkl-title {
+    font: var(--jkl-text-style-title);
+  }
+  .jkl-title-small {
+    font: var(--jkl-text-style-title-small);
+  }
+  .jkl-heading-1 {
+    font: var(--jkl-text-style-heading-1);
+  }
+  .jkl-heading-2 {
+    font: var(--jkl-text-style-heading-2);
+  }
+  .jkl-heading-3 {
+    font: var(--jkl-text-style-heading-3);
+  }
+  .jkl-heading-4 {
+    font: var(--jkl-text-style-heading-4);
+  }
+  .jkl-heading-5 {
+    font: var(--jkl-text-style-heading-5);
+  }
+  .jkl-paragraph-large {
+    font: var(--jkl-text-style-paragraph-large);
+  }
+  .jkl-paragraph-medium {
+    font: var(--jkl-text-style-paragraph-medium);
+  }
+  .jkl-paragraph-small {
+    font: var(--jkl-text-style-paragraph-small);
+  }
+  .jkl-text-large {
+    font: var(--jkl-text-style-text-large);
+  }
+  .jkl-text-medium {
+    font: var(--jkl-text-style-text-medium);
+  }
+  .jkl-text-small {
+    font: var(--jkl-text-style-text-small);
+  }
+  .jkl-text-micro {
+    font: var(--jkl-text-style-text-micro);
+  }
+}
+@layer jokul.utility {
+  .jkl-sr-only {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
+    clip-path: inset(50%) !important; /* 2 */
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important; /* 3 */
+  }
+  .jkl-sr-only--focusable:focus, .jkl-sr-only--focusable:active {
+    clip: auto !important;
+    clip-path: none !important;
+    height: auto !important;
+    margin: auto !important;
+    overflow: visible !important;
+    width: auto !important;
+    white-space: normal !important;
+  }
+}
+@layer jokul.utility {
+  .jkl-spacing-2--all {
+    margin: var(--jkl-spacing-2);
+  }
+  .jkl-spacing-2--top {
+    margin-top: var(--jkl-spacing-2);
+  }
+  .jkl-spacing-2--bottom {
+    margin-bottom: var(--jkl-spacing-2);
+  }
+  .jkl-spacing-2--left {
+    margin-left: var(--jkl-spacing-2);
+  }
+  .jkl-spacing-2--right {
+    margin-right: var(--jkl-spacing-2);
+  }
+  .jkl-spacing-4--all {
+    margin: var(--jkl-spacing-4);
+  }
+  .jkl-spacing-4--top {
+    margin-top: var(--jkl-spacing-4);
+  }
+  .jkl-spacing-4--bottom {
+    margin-bottom: var(--jkl-spacing-4);
+  }
+  .jkl-spacing-4--left {
+    margin-left: var(--jkl-spacing-4);
+  }
+  .jkl-spacing-4--right {
+    margin-right: var(--jkl-spacing-4);
+  }
+  .jkl-spacing-8--all {
+    margin: var(--jkl-spacing-8);
+  }
+  .jkl-spacing-8--top {
+    margin-top: var(--jkl-spacing-8);
+  }
+  .jkl-spacing-8--bottom {
+    margin-bottom: var(--jkl-spacing-8);
+  }
+  .jkl-spacing-8--left {
+    margin-left: var(--jkl-spacing-8);
+  }
+  .jkl-spacing-8--right {
+    margin-right: var(--jkl-spacing-8);
+  }
+  .jkl-spacing-12--all {
+    margin: var(--jkl-spacing-12);
+  }
+  .jkl-spacing-12--top {
+    margin-top: var(--jkl-spacing-12);
+  }
+  .jkl-spacing-12--bottom {
+    margin-bottom: var(--jkl-spacing-12);
+  }
+  .jkl-spacing-12--left {
+    margin-left: var(--jkl-spacing-12);
+  }
+  .jkl-spacing-12--right {
+    margin-right: var(--jkl-spacing-12);
+  }
+  .jkl-spacing-16--all {
+    margin: var(--jkl-spacing-16);
+  }
+  .jkl-spacing-16--top {
+    margin-top: var(--jkl-spacing-16);
+  }
+  .jkl-spacing-16--bottom {
+    margin-bottom: var(--jkl-spacing-16);
+  }
+  .jkl-spacing-16--left {
+    margin-left: var(--jkl-spacing-16);
+  }
+  .jkl-spacing-16--right {
+    margin-right: var(--jkl-spacing-16);
+  }
+  .jkl-spacing-24--all {
+    margin: var(--jkl-spacing-24);
+  }
+  .jkl-spacing-24--top {
+    margin-top: var(--jkl-spacing-24);
+  }
+  .jkl-spacing-24--bottom {
+    margin-bottom: var(--jkl-spacing-24);
+  }
+  .jkl-spacing-24--left {
+    margin-left: var(--jkl-spacing-24);
+  }
+  .jkl-spacing-24--right {
+    margin-right: var(--jkl-spacing-24);
+  }
+  .jkl-spacing-32--all {
+    margin: var(--jkl-spacing-32);
+  }
+  .jkl-spacing-32--top {
+    margin-top: var(--jkl-spacing-32);
+  }
+  .jkl-spacing-32--bottom {
+    margin-bottom: var(--jkl-spacing-32);
+  }
+  .jkl-spacing-32--left {
+    margin-left: var(--jkl-spacing-32);
+  }
+  .jkl-spacing-32--right {
+    margin-right: var(--jkl-spacing-32);
+  }
+  .jkl-spacing-40--all {
+    margin: var(--jkl-spacing-40);
+  }
+  .jkl-spacing-40--top {
+    margin-top: var(--jkl-spacing-40);
+  }
+  .jkl-spacing-40--bottom {
+    margin-bottom: var(--jkl-spacing-40);
+  }
+  .jkl-spacing-40--left {
+    margin-left: var(--jkl-spacing-40);
+  }
+  .jkl-spacing-40--right {
+    margin-right: var(--jkl-spacing-40);
+  }
+  .jkl-spacing-64--all {
+    margin: var(--jkl-spacing-64);
+  }
+  .jkl-spacing-64--top {
+    margin-top: var(--jkl-spacing-64);
+  }
+  .jkl-spacing-64--bottom {
+    margin-bottom: var(--jkl-spacing-64);
+  }
+  .jkl-spacing-64--left {
+    margin-left: var(--jkl-spacing-64);
+  }
+  .jkl-spacing-64--right {
+    margin-right: var(--jkl-spacing-64);
+  }
+  .jkl-spacing-104--all {
+    margin: var(--jkl-spacing-104);
+  }
+  .jkl-spacing-104--top {
+    margin-top: var(--jkl-spacing-104);
+  }
+  .jkl-spacing-104--bottom {
+    margin-bottom: var(--jkl-spacing-104);
+  }
+  .jkl-spacing-104--left {
+    margin-left: var(--jkl-spacing-104);
+  }
+  .jkl-spacing-104--right {
+    margin-right: var(--jkl-spacing-104);
+  }
+  .jkl-spacing-168--all {
+    margin: var(--jkl-spacing-168);
+  }
+  .jkl-spacing-168--top {
+    margin-top: var(--jkl-spacing-168);
+  }
+  .jkl-spacing-168--bottom {
+    margin-bottom: var(--jkl-spacing-168);
+  }
+  .jkl-spacing-168--left {
+    margin-left: var(--jkl-spacing-168);
+  }
+  .jkl-spacing-168--right {
+    margin-right: var(--jkl-spacing-168);
+  }
+  .jkl-spacing-16-24--all {
+    margin: var(--jkl-spacing-16-24);
+  }
+  .jkl-spacing-16-24--top {
+    margin-top: var(--jkl-spacing-16-24);
+  }
+  .jkl-spacing-16-24--bottom {
+    margin-bottom: var(--jkl-spacing-16-24);
+  }
+  .jkl-spacing-16-24--left {
+    margin-left: var(--jkl-spacing-16-24);
+  }
+  .jkl-spacing-16-24--right {
+    margin-right: var(--jkl-spacing-16-24);
+  }
+  .jkl-spacing-24-40--all {
+    margin: var(--jkl-spacing-24-40);
+  }
+  .jkl-spacing-24-40--top {
+    margin-top: var(--jkl-spacing-24-40);
+  }
+  .jkl-spacing-24-40--bottom {
+    margin-bottom: var(--jkl-spacing-24-40);
+  }
+  .jkl-spacing-24-40--left {
+    margin-left: var(--jkl-spacing-24-40);
+  }
+  .jkl-spacing-24-40--right {
+    margin-right: var(--jkl-spacing-24-40);
+  }
+  .jkl-spacing-24-32--all {
+    margin: var(--jkl-spacing-24-32);
+  }
+  .jkl-spacing-24-32--top {
+    margin-top: var(--jkl-spacing-24-32);
+  }
+  .jkl-spacing-24-32--bottom {
+    margin-bottom: var(--jkl-spacing-24-32);
+  }
+  .jkl-spacing-24-32--left {
+    margin-left: var(--jkl-spacing-24-32);
+  }
+  .jkl-spacing-24-32--right {
+    margin-right: var(--jkl-spacing-24-32);
+  }
+  .jkl-spacing-32-40--all {
+    margin: var(--jkl-spacing-32-40);
+  }
+  .jkl-spacing-32-40--top {
+    margin-top: var(--jkl-spacing-32-40);
+  }
+  .jkl-spacing-32-40--bottom {
+    margin-bottom: var(--jkl-spacing-32-40);
+  }
+  .jkl-spacing-32-40--left {
+    margin-left: var(--jkl-spacing-32-40);
+  }
+  .jkl-spacing-32-40--right {
+    margin-right: var(--jkl-spacing-32-40);
+  }
+  .jkl-spacing-40-64--all {
+    margin: var(--jkl-spacing-40-64);
+  }
+  .jkl-spacing-40-64--top {
+    margin-top: var(--jkl-spacing-40-64);
+  }
+  .jkl-spacing-40-64--bottom {
+    margin-bottom: var(--jkl-spacing-40-64);
+  }
+  .jkl-spacing-40-64--left {
+    margin-left: var(--jkl-spacing-40-64);
+  }
+  .jkl-spacing-40-64--right {
+    margin-right: var(--jkl-spacing-40-64);
+  }
+  .jkl-spacing-64-104--all {
+    margin: var(--jkl-spacing-64-104);
+  }
+  .jkl-spacing-64-104--top {
+    margin-top: var(--jkl-spacing-64-104);
+  }
+  .jkl-spacing-64-104--bottom {
+    margin-bottom: var(--jkl-spacing-64-104);
+  }
+  .jkl-spacing-64-104--left {
+    margin-left: var(--jkl-spacing-64-104);
+  }
+  .jkl-spacing-64-104--right {
+    margin-right: var(--jkl-spacing-64-104);
+  }
+  .jkl-spacing-104-168--all {
+    margin: var(--jkl-spacing-104-168);
+  }
+  .jkl-spacing-104-168--top {
+    margin-top: var(--jkl-spacing-104-168);
+  }
+  .jkl-spacing-104-168--bottom {
+    margin-bottom: var(--jkl-spacing-104-168);
+  }
+  .jkl-spacing-104-168--left {
+    margin-left: var(--jkl-spacing-104-168);
+  }
+  .jkl-spacing-104-168--right {
+    margin-right: var(--jkl-spacing-104-168);
+  }
+  .jkl-spacing-16-16-24--all {
+    margin: var(--jkl-spacing-16-16-24);
+  }
+  .jkl-spacing-16-16-24--top {
+    margin-top: var(--jkl-spacing-16-16-24);
+  }
+  .jkl-spacing-16-16-24--bottom {
+    margin-bottom: var(--jkl-spacing-16-16-24);
+  }
+  .jkl-spacing-16-16-24--left {
+    margin-left: var(--jkl-spacing-16-16-24);
+  }
+  .jkl-spacing-16-16-24--right {
+    margin-right: var(--jkl-spacing-16-16-24);
+  }
+  .jkl-spacing-16-24-32--all {
+    margin: var(--jkl-spacing-16-24-32);
+  }
+  .jkl-spacing-16-24-32--top {
+    margin-top: var(--jkl-spacing-16-24-32);
+  }
+  .jkl-spacing-16-24-32--bottom {
+    margin-bottom: var(--jkl-spacing-16-24-32);
+  }
+  .jkl-spacing-16-24-32--left {
+    margin-left: var(--jkl-spacing-16-24-32);
+  }
+  .jkl-spacing-16-24-32--right {
+    margin-right: var(--jkl-spacing-16-24-32);
+  }
+  .jkl-spacing-16-24-40--all {
+    margin: var(--jkl-spacing-16-24-40);
+  }
+  .jkl-spacing-16-24-40--top {
+    margin-top: var(--jkl-spacing-16-24-40);
+  }
+  .jkl-spacing-16-24-40--bottom {
+    margin-bottom: var(--jkl-spacing-16-24-40);
+  }
+  .jkl-spacing-16-24-40--left {
+    margin-left: var(--jkl-spacing-16-24-40);
+  }
+  .jkl-spacing-16-24-40--right {
+    margin-right: var(--jkl-spacing-16-24-40);
+  }
+  .jkl-spacing-24-24-32--all {
+    margin: var(--jkl-spacing-24-24-32);
+  }
+  .jkl-spacing-24-24-32--top {
+    margin-top: var(--jkl-spacing-24-24-32);
+  }
+  .jkl-spacing-24-24-32--bottom {
+    margin-bottom: var(--jkl-spacing-24-24-32);
+  }
+  .jkl-spacing-24-24-32--left {
+    margin-left: var(--jkl-spacing-24-24-32);
+  }
+  .jkl-spacing-24-24-32--right {
+    margin-right: var(--jkl-spacing-24-24-32);
+  }
+  .jkl-spacing-24-24-40--all {
+    margin: var(--jkl-spacing-24-24-40);
+  }
+  .jkl-spacing-24-24-40--top {
+    margin-top: var(--jkl-spacing-24-24-40);
+  }
+  .jkl-spacing-24-24-40--bottom {
+    margin-bottom: var(--jkl-spacing-24-24-40);
+  }
+  .jkl-spacing-24-24-40--left {
+    margin-left: var(--jkl-spacing-24-24-40);
+  }
+  .jkl-spacing-24-24-40--right {
+    margin-right: var(--jkl-spacing-24-24-40);
+  }
+  .jkl-spacing-24-32-40--all {
+    margin: var(--jkl-spacing-24-32-40);
+  }
+  .jkl-spacing-24-32-40--top {
+    margin-top: var(--jkl-spacing-24-32-40);
+  }
+  .jkl-spacing-24-32-40--bottom {
+    margin-bottom: var(--jkl-spacing-24-32-40);
+  }
+  .jkl-spacing-24-32-40--left {
+    margin-left: var(--jkl-spacing-24-32-40);
+  }
+  .jkl-spacing-24-32-40--right {
+    margin-right: var(--jkl-spacing-24-32-40);
+  }
+  .jkl-spacing-32-32-40--all {
+    margin: var(--jkl-spacing-32-32-40);
+  }
+  .jkl-spacing-32-32-40--top {
+    margin-top: var(--jkl-spacing-32-32-40);
+  }
+  .jkl-spacing-32-32-40--bottom {
+    margin-bottom: var(--jkl-spacing-32-32-40);
+  }
+  .jkl-spacing-32-32-40--left {
+    margin-left: var(--jkl-spacing-32-32-40);
+  }
+  .jkl-spacing-32-32-40--right {
+    margin-right: var(--jkl-spacing-32-32-40);
+  }
+  .jkl-spacing-32-40-64--all {
+    margin: var(--jkl-spacing-32-40-64);
+  }
+  .jkl-spacing-32-40-64--top {
+    margin-top: var(--jkl-spacing-32-40-64);
+  }
+  .jkl-spacing-32-40-64--bottom {
+    margin-bottom: var(--jkl-spacing-32-40-64);
+  }
+  .jkl-spacing-32-40-64--left {
+    margin-left: var(--jkl-spacing-32-40-64);
+  }
+  .jkl-spacing-32-40-64--right {
+    margin-right: var(--jkl-spacing-32-40-64);
+  }
+  .jkl-spacing-40-40-64--all {
+    margin: var(--jkl-spacing-40-40-64);
+  }
+  .jkl-spacing-40-40-64--top {
+    margin-top: var(--jkl-spacing-40-40-64);
+  }
+  .jkl-spacing-40-40-64--bottom {
+    margin-bottom: var(--jkl-spacing-40-40-64);
+  }
+  .jkl-spacing-40-40-64--left {
+    margin-left: var(--jkl-spacing-40-40-64);
+  }
+  .jkl-spacing-40-40-64--right {
+    margin-right: var(--jkl-spacing-40-40-64);
+  }
+  .jkl-spacing-40-64-104--all {
+    margin: var(--jkl-spacing-40-64-104);
+  }
+  .jkl-spacing-40-64-104--top {
+    margin-top: var(--jkl-spacing-40-64-104);
+  }
+  .jkl-spacing-40-64-104--bottom {
+    margin-bottom: var(--jkl-spacing-40-64-104);
+  }
+  .jkl-spacing-40-64-104--left {
+    margin-left: var(--jkl-spacing-40-64-104);
+  }
+  .jkl-spacing-40-64-104--right {
+    margin-right: var(--jkl-spacing-40-64-104);
+  }
+  .jkl-spacing-64-64-104--all {
+    margin: var(--jkl-spacing-64-64-104);
+  }
+  .jkl-spacing-64-64-104--top {
+    margin-top: var(--jkl-spacing-64-64-104);
+  }
+  .jkl-spacing-64-64-104--bottom {
+    margin-bottom: var(--jkl-spacing-64-64-104);
+  }
+  .jkl-spacing-64-64-104--left {
+    margin-left: var(--jkl-spacing-64-64-104);
+  }
+  .jkl-spacing-64-64-104--right {
+    margin-right: var(--jkl-spacing-64-64-104);
+  }
+  .jkl-spacing-64-104-168--all {
+    margin: var(--jkl-spacing-64-104-168);
+  }
+  .jkl-spacing-64-104-168--top {
+    margin-top: var(--jkl-spacing-64-104-168);
+  }
+  .jkl-spacing-64-104-168--bottom {
+    margin-bottom: var(--jkl-spacing-64-104-168);
+  }
+  .jkl-spacing-64-104-168--left {
+    margin-left: var(--jkl-spacing-64-104-168);
+  }
+  .jkl-spacing-64-104-168--right {
+    margin-right: var(--jkl-spacing-64-104-168);
+  }
+  .jkl-spacing-104-104-168--all {
+    margin: var(--jkl-spacing-104-104-168);
+  }
+  .jkl-spacing-104-104-168--top {
+    margin-top: var(--jkl-spacing-104-104-168);
+  }
+  .jkl-spacing-104-104-168--bottom {
+    margin-bottom: var(--jkl-spacing-104-104-168);
+  }
+  .jkl-spacing-104-104-168--left {
+    margin-left: var(--jkl-spacing-104-104-168);
+  }
+  .jkl-spacing-104-104-168--right {
+    margin-right: var(--jkl-spacing-104-104-168);
+  }
+  .jkl-spacing-0--all {
+    margin: var(--jkl-spacing-0);
+  }
+  .jkl-spacing-0--top {
+    margin-top: var(--jkl-spacing-0);
+  }
+  .jkl-spacing-0--bottom {
+    margin-bottom: var(--jkl-spacing-0);
+  }
+  .jkl-spacing-0--left {
+    margin-left: var(--jkl-spacing-0);
+  }
+  .jkl-spacing-0--right {
+    margin-right: var(--jkl-spacing-0);
+  }
+  .jkl-spacing-none--all {
+    margin: var(--jkl-spacing-none);
+  }
+  .jkl-spacing-none--top {
+    margin-top: var(--jkl-spacing-none);
+  }
+  .jkl-spacing-none--bottom {
+    margin-bottom: var(--jkl-spacing-none);
+  }
+  .jkl-spacing-none--left {
+    margin-left: var(--jkl-spacing-none);
+  }
+  .jkl-spacing-none--right {
+    margin-right: var(--jkl-spacing-none);
+  }
+  .jkl-spacing-2xs--all {
+    margin: var(--jkl-spacing-2xs);
+  }
+  .jkl-spacing-2xs--top {
+    margin-top: var(--jkl-spacing-2xs);
+  }
+  .jkl-spacing-2xs--bottom {
+    margin-bottom: var(--jkl-spacing-2xs);
+  }
+  .jkl-spacing-2xs--left {
+    margin-left: var(--jkl-spacing-2xs);
+  }
+  .jkl-spacing-2xs--right {
+    margin-right: var(--jkl-spacing-2xs);
+  }
+  .jkl-spacing-xs--all {
+    margin: var(--jkl-spacing-xs);
+  }
+  .jkl-spacing-xs--top {
+    margin-top: var(--jkl-spacing-xs);
+  }
+  .jkl-spacing-xs--bottom {
+    margin-bottom: var(--jkl-spacing-xs);
+  }
+  .jkl-spacing-xs--left {
+    margin-left: var(--jkl-spacing-xs);
+  }
+  .jkl-spacing-xs--right {
+    margin-right: var(--jkl-spacing-xs);
+  }
+  .jkl-spacing-s--all {
+    margin: var(--jkl-spacing-s);
+  }
+  .jkl-spacing-s--top {
+    margin-top: var(--jkl-spacing-s);
+  }
+  .jkl-spacing-s--bottom {
+    margin-bottom: var(--jkl-spacing-s);
+  }
+  .jkl-spacing-s--left {
+    margin-left: var(--jkl-spacing-s);
+  }
+  .jkl-spacing-s--right {
+    margin-right: var(--jkl-spacing-s);
+  }
+  .jkl-spacing-m--all {
+    margin: var(--jkl-spacing-m);
+  }
+  .jkl-spacing-m--top {
+    margin-top: var(--jkl-spacing-m);
+  }
+  .jkl-spacing-m--bottom {
+    margin-bottom: var(--jkl-spacing-m);
+  }
+  .jkl-spacing-m--left {
+    margin-left: var(--jkl-spacing-m);
+  }
+  .jkl-spacing-m--right {
+    margin-right: var(--jkl-spacing-m);
+  }
+  .jkl-spacing-l--all {
+    margin: var(--jkl-spacing-l);
+  }
+  .jkl-spacing-l--top {
+    margin-top: var(--jkl-spacing-l);
+  }
+  .jkl-spacing-l--bottom {
+    margin-bottom: var(--jkl-spacing-l);
+  }
+  .jkl-spacing-l--left {
+    margin-left: var(--jkl-spacing-l);
+  }
+  .jkl-spacing-l--right {
+    margin-right: var(--jkl-spacing-l);
+  }
+  .jkl-spacing-xl--all {
+    margin: var(--jkl-spacing-xl);
+  }
+  .jkl-spacing-xl--top {
+    margin-top: var(--jkl-spacing-xl);
+  }
+  .jkl-spacing-xl--bottom {
+    margin-bottom: var(--jkl-spacing-xl);
+  }
+  .jkl-spacing-xl--left {
+    margin-left: var(--jkl-spacing-xl);
+  }
+  .jkl-spacing-xl--right {
+    margin-right: var(--jkl-spacing-xl);
+  }
+  .jkl-spacing-2xl--all {
+    margin: var(--jkl-spacing-2xl);
+  }
+  .jkl-spacing-2xl--top {
+    margin-top: var(--jkl-spacing-2xl);
+  }
+  .jkl-spacing-2xl--bottom {
+    margin-bottom: var(--jkl-spacing-2xl);
+  }
+  .jkl-spacing-2xl--left {
+    margin-left: var(--jkl-spacing-2xl);
+  }
+  .jkl-spacing-2xl--right {
+    margin-right: var(--jkl-spacing-2xl);
+  }
+}