@fremtind/jkl-core/core.css

Jøkul core styles

@charset "UTF-8";
/**
 * Do not edit directly
 * Generated on Mon, 28 Oct 2024 14:24:14 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 */
  -webkit-text-decoration: underline dotted;
          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 Mon, 28 Oct 2024 14:24:14 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 Mon, 28 Oct 2024 14:24:14 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 Mon, 28 Oct 2024 14:24:14 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-text-on-alert-subdued: #444141;
    --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-text-on-alert-subdued: #444141;
  --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-text-on-alert-subdued: #444141;
    --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-text-on-alert-subdued: #444141;
  --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;
  --jkl-icon-size: 1.2em;
}
@media (min-width: 680px) {
  .jkl-title {
    font-size: 3.5rem;
    line-height: 4rem;
    font-weight: 400;
    --jkl-icon-weight: 300;
    --jkl-icon-size: 1.2em;
  }
}

.jkl-title-small {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 400;
  --jkl-icon-weight: 300;
  --jkl-icon-size: 1.2em;
}
@media (min-width: 680px) {
  .jkl-title-small {
    font-size: 2.75rem;
    line-height: 3.25rem;
    font-weight: 400;
    --jkl-icon-weight: 300;
    --jkl-icon-size: 1.2em;
  }
}

.jkl-heading-1 {
  font-size: 1.625rem;
  line-height: 2rem;
  font-weight: 400;
  --jkl-icon-weight: 300;
  --jkl-icon-size: 1.2em;
}
@media (min-width: 680px) {
  .jkl-heading-1 {
    font-size: 2.25rem;
    line-height: 2.75rem;
    font-weight: 400;
    --jkl-icon-weight: 300;
    --jkl-icon-size: 1.2em;
  }
}

.jkl-heading-2 {
  font-size: 1.4375rem;
  line-height: 2rem;
  font-weight: 400;
  --jkl-icon-weight: 300;
  --jkl-icon-size: 1.2em;
}
@media (min-width: 680px) {
  .jkl-heading-2 {
    font-size: 1.75rem;
    line-height: 2.5rem;
    font-weight: 400;
    --jkl-icon-weight: 300;
    --jkl-icon-size: 1.2em;
  }
}

.jkl-heading-3 {
  font-size: 1.3125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --jkl-icon-weight: 500;
  --jkl-icon-size: 1.2em;
}
@media (min-width: 680px) {
  .jkl-heading-3 {
    font-size: 1.5625rem;
    line-height: 2rem;
    font-weight: 700;
    --jkl-icon-weight: 500;
    --jkl-icon-size: 1.2em;
  }
}

.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-icon-size: 1.25rem;
  --jkl-icon-opsz: 20;
}

.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;
  --jkl-icon-size: 1.25rem;
  --jkl-icon-opsz: 20;
}

.jkl-link {
  --link-color: var(--jkl-color-text-default);
  color: var(--link-color);
  outline: none;
  text-decoration: none;
  transition-timing-function: ease;
  transition-duration: 75ms;
  transition-property: color;
}
.jkl-link__content {
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 1px;
}
.jkl-link__icon {
  -webkit-margin-start: 0.2em;
          margin-inline-start: 0.2em;
  -webkit-margin-before: -0.1em;
          margin-block-start: -0.1em;
  vertical-align: middle;
}
.jkl-link:hover:not(:focus) {
  --link-color: var(--jkl-color-text-subdued);
}
.jkl-link:focus-visible {
  outline: 3px solid var(--jkl-color-border-action);
  outline-offset: 0;
}
@media screen and (forced-colors: active) {
  .jkl-link {
    outline: revert;
    -webkit-text-decoration: revert;
            text-decoration: revert;
  }
}

.jkl-nav-link {
  color: var(--jkl-color-text-default);
  box-sizing: border-box;
  font-weight: 400;
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.09375rem;
  outline: 0;
  border-style: none;
  outline-style: none;
  padding-right: 0.15rem;
  margin-right: -0.15rem;
}
.jkl-nav-link:active, .jkl-nav-link:hover, .jkl-nav-link:focus {
  outline: 0;
  outline-style: none;
}
@media screen and (forced-colors: active) {
  .jkl-nav-link {
    outline: revert;
    border-style: revert;
    outline-style: revert;
  }
  .jkl-nav-link:active, .jkl-nav-link:hover, .jkl-nav-link:focus {
    outline: revert;
    outline-style: revert;
  }
}
.jkl-nav-link:hover:not(:focus) {
  color: var(--jkl-color-text-subdued);
}
.jkl-nav-link:focus-visible {
  outline: 3px solid var(--jkl-color-border-action);
  outline-offset: 0;
}
.jkl-nav-link:focus-visible .jkl-nav-link__icon, .jkl-nav-link:hover:not(:focus) .jkl-nav-link__icon {
  transform: translateX(0.3rem);
}
.jkl-nav-link__icon {
  -webkit-margin-start: 0.1em;
          margin-inline-start: 0.1em;
  -webkit-margin-before: -0.1em;
          margin-block-start: -0.1em;
  vertical-align: middle;
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: transform;
}
.jkl-nav-link--active {
  --jkl-icon-weight: 500;
  font-weight: 700;
  letter-spacing: -0.014em;
}
.jkl-nav-link--back {
  padding-right: 0;
  margin-right: 0;
  padding-left: 0.15rem;
  margin-left: -0.15rem;
}
.jkl-nav-link--back .jkl-nav-link__icon {
  margin-inline: 0 0.1em;
}
.jkl-nav-link--back:focus-visible .jkl-nav-link__icon, .jkl-nav-link--back:hover:not(:focus) .jkl-nav-link__icon {
  padding-left: 0;
  transform: translateX(-0.3rem);
}

: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 */
  -webkit-clip-path: inset(50%) !important;
          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;
  -webkit-clip-path: none !important;
          clip-path: none !important;
  height: auto !important;
  margin: auto !important;
  overflow: visible !important;
  width: auto !important;
  white-space: normal !important;
}

/* Used by 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---jkl-icon-size: 1.2em;
  --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-title-small---jkl-icon-size: 1.2em;
  --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-1---jkl-icon-size: 1.2em;
  --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-2---jkl-icon-size: 1.2em;
  --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-3---jkl-icon-size: 1.2em;
  --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-heading-5---jkl-icon-size: 1.25rem;
  --jkl-heading-5---jkl-icon-opsz: 20;
  --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;
  --jkl-small---jkl-icon-size: 1.25rem;
  --jkl-small---jkl-icon-opsz: 20;
}
@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---jkl-icon-size: 1.2em;
    --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-title-small---jkl-icon-size: 1.2em;
    --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-1---jkl-icon-size: 1.2em;
    --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-2---jkl-icon-size: 1.2em;
    --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-3---jkl-icon-size: 1.2em;
    --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-heading-5---jkl-icon-size: 1.25rem;
    --jkl-heading-5---jkl-icon-opsz: 20;
    --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-small---jkl-icon-size: 1.25rem;
    --jkl-small---jkl-icon-opsz: 20;
  }
}

.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;
  }
}