@fremtind/jokul 0.1.1

package/src/core/styles/core.css

@@ -0,0 +1,1614 @@
+@charset "UTF-8";
+/**
+ * Do not edit directly
+ * Generated on Tue, 10 Sep 2024 05:21:22 GMT
+ */
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/* 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;
+}
+
+/* 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;
+}
+
+/**
+ * Do not edit directly
+ * Generated on Tue, 10 Sep 2024 05:21:22 GMT
+ */
+:root {
+  --jkl-color-brand-snohvit: #f9f9f9;
+  --jkl-color-brand-varde: #e0dbd4;
+  --jkl-color-brand-granitt: #1b1917;
+  --jkl-color-brand-hvit: #ffffff;
+  --jkl-color-brand-svart: #000000;
+  --jkl-color-brand-skifer: #313030;
+  --jkl-color-brand-fjellgra: #444141;
+  --jkl-color-brand-stein: #636060;
+  --jkl-color-brand-svaberg: #c8c5c3;
+  --jkl-color-brand-dis: #ece9e5;
+  --jkl-color-brand-sand: #f4f2ef;
+  --jkl-color-functional-info: #d3d3f6;
+  --jkl-color-functional-info-dark: #a9a9ca;
+  --jkl-color-functional-success: #acd3b5;
+  --jkl-color-functional-success-dark: #94b79b;
+  --jkl-color-functional-warning: #efdd9e;
+  --jkl-color-functional-warning-dark: #decc8d;
+  --jkl-color-functional-error: #f6b3b3;
+  --jkl-color-functional-error-dark: #de9e9e;
+  --jkl-spacing-0: 0;
+  --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-typography-weight-normal: 400;
+  --jkl-typography-weight-bold: 700;
+  --jkl-typography-font-size-16: 1rem;
+  --jkl-typography-font-size-18: 1.125rem;
+  --jkl-typography-font-size-20: 1.25rem;
+  --jkl-typography-font-size-21: 1.3125rem;
+  --jkl-typography-font-size-23: 1.4375rem;
+  --jkl-typography-font-size-25: 1.5625rem;
+  --jkl-typography-font-size-26: 1.625rem;
+  --jkl-typography-font-size-28: 1.75rem;
+  --jkl-typography-font-size-30: 1.875rem;
+  --jkl-typography-font-size-36: 2.25rem;
+  --jkl-typography-font-size-44: 2.75rem;
+  --jkl-typography-font-size-56: 3.5rem;
+  --jkl-typography-line-height-24: 1.5rem;
+  --jkl-typography-line-height-28: 1.75rem;
+  --jkl-typography-line-height-32: 2rem;
+  --jkl-typography-line-height-36: 2.25rem;
+  --jkl-typography-line-height-40: 2.5rem;
+  --jkl-typography-line-height-44: 2.75rem;
+  --jkl-typography-line-height-52: 3.25rem;
+  --jkl-typography-line-height-64: 4rem;
+  --jkl-typography-title-small-font-size: 2.25rem;
+  --jkl-typography-title-small-line-height: 2.75rem;
+  --jkl-typography-title-small-font-weight: 400;
+  --jkl-typography-title-base-font-size: 3.5rem;
+  --jkl-typography-title-base-line-height: 4rem;
+  --jkl-typography-title-base-font-weight: 400;
+  --jkl-typography-title-small-small-font-size: 1.875rem;
+  --jkl-typography-title-small-small-line-height: 2.25rem;
+  --jkl-typography-title-small-small-font-weight: 400;
+  --jkl-typography-title-small-base-font-size: 2.75rem;
+  --jkl-typography-title-small-base-line-height: 3.25rem;
+  --jkl-typography-title-small-base-font-weight: 400;
+  --jkl-typography-heading-1-small-font-size: 1.625rem;
+  --jkl-typography-heading-1-small-line-height: 2rem;
+  --jkl-typography-heading-1-small-font-weight: 400;
+  --jkl-typography-heading-1-base-font-size: 2.25rem;
+  --jkl-typography-heading-1-base-line-height: 2.75rem;
+  --jkl-typography-heading-1-base-font-weight: 400;
+  --jkl-typography-heading-2-small-font-size: 1.4375rem;
+  --jkl-typography-heading-2-small-line-height: 2rem;
+  --jkl-typography-heading-2-small-font-weight: 400;
+  --jkl-typography-heading-2-base-font-size: 1.75rem;
+  --jkl-typography-heading-2-base-line-height: 2.5rem;
+  --jkl-typography-heading-2-base-font-weight: 400;
+  --jkl-typography-heading-3-small-font-size: 1.3125rem;
+  --jkl-typography-heading-3-small-line-height: 1.75rem;
+  --jkl-typography-heading-3-small-font-weight: 700;
+  --jkl-typography-heading-3-base-font-size: 1.5625rem;
+  --jkl-typography-heading-3-base-line-height: 2rem;
+  --jkl-typography-heading-3-base-font-weight: 700;
+  --jkl-typography-heading-4-small-font-size: 1.125rem;
+  --jkl-typography-heading-4-small-line-height: 1.5rem;
+  --jkl-typography-heading-4-small-font-weight: 700;
+  --jkl-typography-heading-4-base-font-size: 1.3125rem;
+  --jkl-typography-heading-4-base-line-height: 1.75rem;
+  --jkl-typography-heading-4-base-font-weight: 700;
+  --jkl-typography-heading-5-small-font-size: 1rem;
+  --jkl-typography-heading-5-small-line-height: 1.5rem;
+  --jkl-typography-heading-5-small-font-weight: 700;
+  --jkl-typography-heading-5-base-font-size: 1rem;
+  --jkl-typography-heading-5-base-line-height: 1.5rem;
+  --jkl-typography-heading-5-base-font-weight: 700;
+  --jkl-typography-body-small-font-size: 1.125rem;
+  --jkl-typography-body-small-line-height: 1.75rem;
+  --jkl-typography-body-small-font-weight: 400;
+  --jkl-typography-body-base-font-size: 1.25rem;
+  --jkl-typography-body-base-line-height: 2rem;
+  --jkl-typography-body-base-font-weight: 400;
+  --jkl-typography-small-small-font-size: 1rem;
+  --jkl-typography-small-small-line-height: 1.5rem;
+  --jkl-typography-small-small-font-weight: 400;
+  --jkl-typography-small-base-font-size: 1rem;
+  --jkl-typography-small-base-line-height: 1.5rem;
+  --jkl-typography-small-base-font-weight: 400;
+}
+
+/**
+ * Do not edit directly
+ * Generated on Tue, 10 Sep 2024 05:21:22 GMT
+ */
+:root {
+  --jkl-color-svart: #000000;
+  --jkl-color-granitt: #1b1917;
+  --jkl-color-skifer: #313030;
+  --jkl-color-fjellgra: #444141;
+  --jkl-color-stein: #636060;
+  --jkl-color-svaberg: #c8c5c3;
+  --jkl-color-varde: #e0dbd4;
+  --jkl-color-dis: #ece9e5;
+  --jkl-color-sand: #f4f2ef;
+  --jkl-color-snohvit: #f9f9f9;
+  --jkl-color-hvit: #ffffff;
+  --jkl-color-suksess: #acd3b5;
+  --jkl-color-suksess-dark: #94b79b;
+  --jkl-color-feil: #f6b3b3;
+  --jkl-color-feil-dark: #de9e9e;
+  --jkl-color-info: #d3d3f6;
+  --jkl-color-info-dark: #a9a9ca;
+  --jkl-color-advarsel: #efdd9e;
+  --jkl-color-advarsel-dark: #decc8d;
+}
+
+/**
+ * Do not edit directly
+ * Generated on Tue, 10 Sep 2024 05:21:22 GMT
+ */
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --jkl-color-background-page: #f4f2ef;
+    --jkl-color-background-page-variant: #f9f9f9;
+    --jkl-color-background-container: #f9f9f9;
+    --jkl-color-background-container-low: #ece9e5;
+    --jkl-color-background-container-high: #ffffff;
+    --jkl-color-background-container-inverted: #1b1917;
+    --jkl-color-background-container-subdued: #c8c5c3;
+    --jkl-color-background-input-base: rgba(0, 0, 0, 0);
+    --jkl-color-background-input-focus: #ffffff;
+    --jkl-color-background-action: #1b1917;
+    --jkl-color-background-interactive: rgba(0, 0, 0, 0);
+    --jkl-color-background-interactive-hover: #ece9e5;
+    --jkl-color-background-interactive-selected: #e0dbd4;
+    --jkl-color-background-alert-neutral: #e0dbd4;
+    --jkl-color-background-alert-info: #d3d3f6;
+    --jkl-color-background-alert-success: #acd3b5;
+    --jkl-color-background-alert-warning: #efdd9e;
+    --jkl-color-background-alert-error: #f6b3b3;
+    --jkl-color-text-default: #1b1917;
+    --jkl-color-text-subdued: #636060;
+    --jkl-color-text-inverted: #f9f9f9;
+    --jkl-color-text-on-action: #f9f9f9;
+    --jkl-color-text-interactive: #1b1917;
+    --jkl-color-text-interactive-hover: #636060;
+    --jkl-color-text-on-alert: #1b1917;
+    --jkl-color-border-action: #1b1917;
+    --jkl-color-border-input: #636060;
+    --jkl-color-border-input-focus: #1b1917;
+    --jkl-color-border-separator: #c8c5c3;
+    --jkl-color-border-separator-strong: #636060;
+    --jkl-color-border-separator-hover: #1b1917;
+    --jkl-color-border-subdued: #c8c5c3;
+  }
+}
+[data-theme=light] {
+  --jkl-color-background-page: #f4f2ef;
+  --jkl-color-background-page-variant: #f9f9f9;
+  --jkl-color-background-container: #f9f9f9;
+  --jkl-color-background-container-low: #ece9e5;
+  --jkl-color-background-container-high: #ffffff;
+  --jkl-color-background-container-inverted: #1b1917;
+  --jkl-color-background-container-subdued: #c8c5c3;
+  --jkl-color-background-input-base: rgba(0, 0, 0, 0);
+  --jkl-color-background-input-focus: #ffffff;
+  --jkl-color-background-action: #1b1917;
+  --jkl-color-background-interactive: rgba(0, 0, 0, 0);
+  --jkl-color-background-interactive-hover: #ece9e5;
+  --jkl-color-background-interactive-selected: #e0dbd4;
+  --jkl-color-background-alert-neutral: #e0dbd4;
+  --jkl-color-background-alert-info: #d3d3f6;
+  --jkl-color-background-alert-success: #acd3b5;
+  --jkl-color-background-alert-warning: #efdd9e;
+  --jkl-color-background-alert-error: #f6b3b3;
+  --jkl-color-text-default: #1b1917;
+  --jkl-color-text-subdued: #636060;
+  --jkl-color-text-inverted: #f9f9f9;
+  --jkl-color-text-on-action: #f9f9f9;
+  --jkl-color-text-interactive: #1b1917;
+  --jkl-color-text-interactive-hover: #636060;
+  --jkl-color-text-on-alert: #1b1917;
+  --jkl-color-border-action: #1b1917;
+  --jkl-color-border-input: #636060;
+  --jkl-color-border-input-focus: #1b1917;
+  --jkl-color-border-separator: #c8c5c3;
+  --jkl-color-border-separator-strong: #636060;
+  --jkl-color-border-separator-hover: #1b1917;
+  --jkl-color-border-subdued: #c8c5c3;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --jkl-color-background-page: #1b1917;
+    --jkl-color-background-page-variant: #1b1917;
+    --jkl-color-background-container: #313030;
+    --jkl-color-background-container-low: #000000;
+    --jkl-color-background-container-high: #313030;
+    --jkl-color-background-container-inverted: #f9f9f9;
+    --jkl-color-background-container-subdued: #636060;
+    --jkl-color-background-input-base: rgba(0, 0, 0, 0);
+    --jkl-color-background-input-focus: #313030;
+    --jkl-color-background-action: #f9f9f9;
+    --jkl-color-background-interactive: rgba(0, 0, 0, 0);
+    --jkl-color-background-interactive-hover: #444141;
+    --jkl-color-background-interactive-selected: #636060;
+    --jkl-color-background-alert-neutral: #e0dbd4;
+    --jkl-color-background-alert-info: #a9a9ca;
+    --jkl-color-background-alert-success: #94b79b;
+    --jkl-color-background-alert-warning: #decc8d;
+    --jkl-color-background-alert-error: #de9e9e;
+    --jkl-color-text-default: #f9f9f9;
+    --jkl-color-text-subdued: #c8c5c3;
+    --jkl-color-text-inverted: #1b1917;
+    --jkl-color-text-on-action: #1b1917;
+    --jkl-color-text-interactive: #f9f9f9;
+    --jkl-color-text-interactive-hover: #c8c5c3;
+    --jkl-color-text-on-alert: #1b1917;
+    --jkl-color-border-action: #f9f9f9;
+    --jkl-color-border-input: #c8c5c3;
+    --jkl-color-border-input-focus: #f9f9f9;
+    --jkl-color-border-separator: #636060;
+    --jkl-color-border-separator-strong: #c8c5c3;
+    --jkl-color-border-separator-hover: #f9f9f9;
+    --jkl-color-border-subdued: #636060;
+  }
+}
+[data-theme=dark] {
+  --jkl-color-background-page: #1b1917;
+  --jkl-color-background-page-variant: #1b1917;
+  --jkl-color-background-container: #313030;
+  --jkl-color-background-container-low: #000000;
+  --jkl-color-background-container-high: #313030;
+  --jkl-color-background-container-inverted: #f9f9f9;
+  --jkl-color-background-container-subdued: #636060;
+  --jkl-color-background-input-base: rgba(0, 0, 0, 0);
+  --jkl-color-background-input-focus: #313030;
+  --jkl-color-background-action: #f9f9f9;
+  --jkl-color-background-interactive: rgba(0, 0, 0, 0);
+  --jkl-color-background-interactive-hover: #444141;
+  --jkl-color-background-interactive-selected: #636060;
+  --jkl-color-background-alert-neutral: #e0dbd4;
+  --jkl-color-background-alert-info: #a9a9ca;
+  --jkl-color-background-alert-success: #94b79b;
+  --jkl-color-background-alert-warning: #decc8d;
+  --jkl-color-background-alert-error: #de9e9e;
+  --jkl-color-text-default: #f9f9f9;
+  --jkl-color-text-subdued: #c8c5c3;
+  --jkl-color-text-inverted: #1b1917;
+  --jkl-color-text-on-action: #1b1917;
+  --jkl-color-text-interactive: #f9f9f9;
+  --jkl-color-text-interactive-hover: #c8c5c3;
+  --jkl-color-text-on-alert: #1b1917;
+  --jkl-color-border-action: #f9f9f9;
+  --jkl-color-border-input: #c8c5c3;
+  --jkl-color-border-input-focus: #f9f9f9;
+  --jkl-color-border-separator: #636060;
+  --jkl-color-border-separator-strong: #c8c5c3;
+  --jkl-color-border-separator-hover: #f9f9f9;
+  --jkl-color-border-subdued: #636060;
+}
+
+.jkl-title {
+  font-size: 2.25rem;
+  line-height: 2.75rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+}
+@media (min-width: 680px) {
+  .jkl-title {
+    font-size: 3.5rem;
+    line-height: 4rem;
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+  }
+}
+
+.jkl-title-small {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+}
+@media (min-width: 680px) {
+  .jkl-title-small {
+    font-size: 2.75rem;
+    line-height: 3.25rem;
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+  }
+}
+
+.jkl-heading-1 {
+  font-size: 1.625rem;
+  line-height: 2rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+}
+@media (min-width: 680px) {
+  .jkl-heading-1 {
+    font-size: 2.25rem;
+    line-height: 2.75rem;
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+  }
+}
+
+.jkl-heading-2 {
+  font-size: 1.4375rem;
+  line-height: 2rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+}
+@media (min-width: 680px) {
+  .jkl-heading-2 {
+    font-size: 1.75rem;
+    line-height: 2.5rem;
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+  }
+}
+
+.jkl-heading-3 {
+  font-size: 1.3125rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+  --jkl-icon-weight: 500;
+}
+@media (min-width: 680px) {
+  .jkl-heading-3 {
+    font-size: 1.5625rem;
+    line-height: 2rem;
+    font-weight: 700;
+    --jkl-icon-weight: 500;
+  }
+}
+
+.jkl-heading-4 {
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  --jkl-icon-weight: 500;
+}
+@media (min-width: 680px) {
+  .jkl-heading-4 {
+    font-size: 1.3125rem;
+    line-height: 1.75rem;
+    font-weight: 700;
+    --jkl-icon-weight: 500;
+  }
+}
+
+.jkl-heading-5 {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  --jkl-icon-weight: 500;
+}
+
+.jkl-body {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+}
+@media (min-width: 680px) {
+  .jkl-body {
+    font-size: 1.25rem;
+    line-height: 2rem;
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+  }
+}
+
+.jkl-bold {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+  --jkl-icon-weight: 500;
+  font-weight: 700;
+}
+@media (min-width: 680px) {
+  .jkl-bold {
+    font-size: 1.25rem;
+    line-height: 2rem;
+    font-weight: 400;
+    --jkl-icon-weight: 300;
+    --jkl-icon-weight: 500;
+    font-weight: 700;
+  }
+}
+
+.jkl-small {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+}
+
+:root {
+  --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-16-24: 1rem;
+  --jkl-spacing-24-40: 1.5rem;
+  --jkl-spacing-24-32: 1.5rem;
+  --jkl-spacing-32-40: 2rem;
+  --jkl-spacing-40-64: 2.5rem;
+  --jkl-spacing-64-104: 4rem;
+  --jkl-spacing-104-168: 6.5rem;
+  --jkl-spacing-16-16-24: 1rem;
+  --jkl-spacing-16-24-32: 1rem;
+  --jkl-spacing-16-24-40: 1rem;
+  --jkl-spacing-24-24-32: 1.5rem;
+  --jkl-spacing-24-24-40: 1.5rem;
+  --jkl-spacing-24-32-40: 1.5rem;
+  --jkl-spacing-32-32-40: 2rem;
+  --jkl-spacing-32-40-64: 2rem;
+  --jkl-spacing-40-40-64: 2.5rem;
+  --jkl-spacing-40-64-104: 2.5rem;
+  --jkl-spacing-64-64-104: 4rem;
+  --jkl-spacing-64-104-168: 4rem;
+  --jkl-spacing-104-104-168: 6.5rem;
+}
+@media (min-width: 680px) {
+  :root {
+    --jkl-spacing-16-24: 1.5rem;
+    --jkl-spacing-24-40: 2.5rem;
+    --jkl-spacing-24-32: 2rem;
+    --jkl-spacing-32-40: 2.5rem;
+    --jkl-spacing-40-64: 4rem;
+    --jkl-spacing-64-104: 6.5rem;
+    --jkl-spacing-104-168: 10.5rem;
+    --jkl-spacing-16-16-24: 1rem;
+    --jkl-spacing-16-24-32: 1.5rem;
+    --jkl-spacing-16-24-40: 1.5rem;
+    --jkl-spacing-24-24-32: 1.5rem;
+    --jkl-spacing-24-24-40: 1.5rem;
+    --jkl-spacing-24-32-40: 2rem;
+    --jkl-spacing-32-32-40: 2rem;
+    --jkl-spacing-32-40-64: 2.5rem;
+    --jkl-spacing-40-40-64: 2.5rem;
+    --jkl-spacing-40-64-104: 4rem;
+    --jkl-spacing-64-64-104: 4rem;
+    --jkl-spacing-64-104-168: 6.5rem;
+    --jkl-spacing-104-104-168: 6.5rem;
+  }
+}
+@media (min-width: 1200px) {
+  :root {
+    --jkl-spacing-16-16-24: 1.5rem;
+    --jkl-spacing-16-24-32: 2rem;
+    --jkl-spacing-16-24-40: 2.5rem;
+    --jkl-spacing-24-24-32: 2rem;
+    --jkl-spacing-24-24-40: 2.5rem;
+    --jkl-spacing-24-32-40: 2.5rem;
+    --jkl-spacing-32-32-40: 2.5rem;
+    --jkl-spacing-32-40-64: 4rem;
+    --jkl-spacing-40-40-64: 4rem;
+    --jkl-spacing-40-64-104: 6.5rem;
+    --jkl-spacing-64-64-104: 6.5rem;
+    --jkl-spacing-64-104-168: 10.5rem;
+    --jkl-spacing-104-104-168: 10.5rem;
+  }
+}
+
+.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-3xs--all {
+  margin: 0.125rem;
+}
+.jkl-spacing-3xs--top {
+  margin-top: 0.125rem;
+}
+.jkl-spacing-3xs--bottom {
+  margin-bottom: 0.125rem;
+}
+.jkl-spacing-3xs--left {
+  margin-left: 0.125rem;
+}
+.jkl-spacing-3xs--right {
+  margin-right: 0.125rem;
+}
+
+.jkl-spacing-2xs--all {
+  margin: 0.25rem;
+}
+.jkl-spacing-2xs--top {
+  margin-top: 0.25rem;
+}
+.jkl-spacing-2xs--bottom {
+  margin-bottom: 0.25rem;
+}
+.jkl-spacing-2xs--left {
+  margin-left: 0.25rem;
+}
+.jkl-spacing-2xs--right {
+  margin-right: 0.25rem;
+}
+
+.jkl-spacing-xs--all {
+  margin: 0.5rem;
+}
+.jkl-spacing-xs--top {
+  margin-top: 0.5rem;
+}
+.jkl-spacing-xs--bottom {
+  margin-bottom: 0.5rem;
+}
+.jkl-spacing-xs--left {
+  margin-left: 0.5rem;
+}
+.jkl-spacing-xs--right {
+  margin-right: 0.5rem;
+}
+
+.jkl-spacing-s--all {
+  margin: 0.75rem;
+}
+.jkl-spacing-s--top {
+  margin-top: 0.75rem;
+}
+.jkl-spacing-s--bottom {
+  margin-bottom: 0.75rem;
+}
+.jkl-spacing-s--left {
+  margin-left: 0.75rem;
+}
+.jkl-spacing-s--right {
+  margin-right: 0.75rem;
+}
+
+.jkl-spacing-m--all {
+  margin: 1rem;
+}
+.jkl-spacing-m--top {
+  margin-top: 1rem;
+}
+.jkl-spacing-m--bottom {
+  margin-bottom: 1rem;
+}
+.jkl-spacing-m--left {
+  margin-left: 1rem;
+}
+.jkl-spacing-m--right {
+  margin-right: 1rem;
+}
+
+.jkl-spacing-l--all {
+  margin: 1.5rem;
+}
+.jkl-spacing-l--top {
+  margin-top: 1.5rem;
+}
+.jkl-spacing-l--bottom {
+  margin-bottom: 1.5rem;
+}
+.jkl-spacing-l--left {
+  margin-left: 1.5rem;
+}
+.jkl-spacing-l--right {
+  margin-right: 1.5rem;
+}
+
+.jkl-spacing-xl--all {
+  margin: 2.5rem;
+}
+.jkl-spacing-xl--top {
+  margin-top: 2.5rem;
+}
+.jkl-spacing-xl--bottom {
+  margin-bottom: 2.5rem;
+}
+.jkl-spacing-xl--left {
+  margin-left: 2.5rem;
+}
+.jkl-spacing-xl--right {
+  margin-right: 2.5rem;
+}
+
+.jkl-spacing-2xl--all {
+  margin: 4rem;
+}
+.jkl-spacing-2xl--top {
+  margin-top: 4rem;
+}
+.jkl-spacing-2xl--bottom {
+  margin-bottom: 4rem;
+}
+.jkl-spacing-2xl--left {
+  margin-left: 4rem;
+}
+.jkl-spacing-2xl--right {
+  margin-right: 4rem;
+}
+
+.jkl-spacing-3xl--all {
+  margin: 6.5rem;
+}
+.jkl-spacing-3xl--top {
+  margin-top: 6.5rem;
+}
+.jkl-spacing-3xl--bottom {
+  margin-bottom: 6.5rem;
+}
+.jkl-spacing-3xl--left {
+  margin-left: 6.5rem;
+}
+.jkl-spacing-3xl--right {
+  margin-right: 6.5rem;
+}
+
+.jkl-spacing-4xl--all {
+  margin: 10.5rem;
+}
+.jkl-spacing-4xl--top {
+  margin-top: 10.5rem;
+}
+.jkl-spacing-4xl--bottom {
+  margin-bottom: 10.5rem;
+}
+.jkl-spacing-4xl--left {
+  margin-left: 10.5rem;
+}
+.jkl-spacing-4xl--right {
+  margin-right: 10.5rem;
+}
+
+.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;
+}
+
+/* Used by contextual-menu to figure out if it should render a compact or comfortable view */
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-density: "comfortable";
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-density: "compact";
+}
+
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --jkl-background-color: #f9f9f9;
+    --jkl-color: #1b1917;
+    --jkl-error: #f6b3b3;
+    --jkl-info: #d3d3f6;
+    --jkl-warning: #efdd9e;
+    --jkl-success: #acd3b5;
+  }
+}
+[data-theme=light] {
+  --jkl-background-color: #f9f9f9;
+  --jkl-color: #1b1917;
+  --jkl-error: #f6b3b3;
+  --jkl-info: #d3d3f6;
+  --jkl-warning: #efdd9e;
+  --jkl-success: #acd3b5;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --jkl-background-color: #1b1917;
+    --jkl-color: #f9f9f9;
+    --jkl-error: #de9e9e;
+    --jkl-info: #a9a9ca;
+    --jkl-warning: #decc8d;
+    --jkl-success: #94b79b;
+  }
+}
+[data-theme=dark] {
+  --jkl-background-color: #1b1917;
+  --jkl-color: #f9f9f9;
+  --jkl-error: #de9e9e;
+  --jkl-info: #a9a9ca;
+  --jkl-warning: #decc8d;
+  --jkl-success: #94b79b;
+}
+
+:root {
+  --jkl-title-font-size: 2.25rem;
+  --jkl-title-line-height: 2.75rem;
+  --jkl-title-font-weight: 400;
+  --jkl-title---jkl-icon-weight: 300;
+  --jkl-title-small-font-size: 1.875rem;
+  --jkl-title-small-line-height: 2.25rem;
+  --jkl-title-small-font-weight: 400;
+  --jkl-title-small---jkl-icon-weight: 300;
+  --jkl-heading-1-font-size: 1.625rem;
+  --jkl-heading-1-line-height: 2rem;
+  --jkl-heading-1-font-weight: 400;
+  --jkl-heading-1---jkl-icon-weight: 300;
+  --jkl-heading-2-font-size: 1.4375rem;
+  --jkl-heading-2-line-height: 2rem;
+  --jkl-heading-2-font-weight: 400;
+  --jkl-heading-2---jkl-icon-weight: 300;
+  --jkl-heading-3-font-size: 1.3125rem;
+  --jkl-heading-3-line-height: 1.75rem;
+  --jkl-heading-3-font-weight: 700;
+  --jkl-heading-3---jkl-icon-weight: 500;
+  --jkl-heading-4-font-size: 1.125rem;
+  --jkl-heading-4-line-height: 1.5rem;
+  --jkl-heading-4-font-weight: 700;
+  --jkl-heading-4---jkl-icon-weight: 500;
+  --jkl-heading-5-font-size: 1rem;
+  --jkl-heading-5-line-height: 1.5rem;
+  --jkl-heading-5-font-weight: 700;
+  --jkl-heading-5---jkl-icon-weight: 500;
+  --jkl-body-font-size: 1.125rem;
+  --jkl-body-line-height: 1.75rem;
+  --jkl-body-font-weight: 400;
+  --jkl-body---jkl-icon-weight: 300;
+  --jkl-small-font-size: 1rem;
+  --jkl-small-line-height: 1.5rem;
+  --jkl-small-font-weight: 400;
+  --jkl-small---jkl-icon-weight: 300;
+}
+@media (min-width: 680px) {
+  :root {
+    --jkl-title-font-size: 3.5rem;
+    --jkl-title-line-height: 4rem;
+    --jkl-title-font-weight: 400;
+    --jkl-title---jkl-icon-weight: 300;
+    --jkl-title-small-font-size: 2.75rem;
+    --jkl-title-small-line-height: 3.25rem;
+    --jkl-title-small-font-weight: 400;
+    --jkl-title-small---jkl-icon-weight: 300;
+    --jkl-heading-1-font-size: 2.25rem;
+    --jkl-heading-1-line-height: 2.75rem;
+    --jkl-heading-1-font-weight: 400;
+    --jkl-heading-1---jkl-icon-weight: 300;
+    --jkl-heading-2-font-size: 1.75rem;
+    --jkl-heading-2-line-height: 2.5rem;
+    --jkl-heading-2-font-weight: 400;
+    --jkl-heading-2---jkl-icon-weight: 300;
+    --jkl-heading-3-font-size: 1.5625rem;
+    --jkl-heading-3-line-height: 2rem;
+    --jkl-heading-3-font-weight: 700;
+    --jkl-heading-3---jkl-icon-weight: 500;
+    --jkl-heading-4-font-size: 1.3125rem;
+    --jkl-heading-4-line-height: 1.75rem;
+    --jkl-heading-4-font-weight: 700;
+    --jkl-heading-4---jkl-icon-weight: 500;
+    --jkl-heading-5-font-size: 1rem;
+    --jkl-heading-5-line-height: 1.5rem;
+    --jkl-heading-5-font-weight: 700;
+    --jkl-heading-5---jkl-icon-weight: 500;
+    --jkl-body-font-size: 1.25rem;
+    --jkl-body-line-height: 2rem;
+    --jkl-body-font-weight: 400;
+    --jkl-body---jkl-icon-weight: 300;
+    --jkl-small-font-size: 1rem;
+    --jkl-small-line-height: 1.5rem;
+    --jkl-small-font-weight: 400;
+    --jkl-small---jkl-icon-weight: 300;
+  }
+}
+
+.jkl {
+  font-family: "Fremtind Grotesk", "Adjusted Arial Fallback", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: var(--jkl-background-color);
+  color: var(--jkl-color);
+}
+.jkl strong {
+  --jkl-icon-weight: 500;
+  font-weight: 700;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  *,
+  *::after,
+  *::before {
+    animation-duration: 0ms !important;
+    animation-delay: 0ms !important;
+    transition: none !important;
+  }
+}