@fremtind/jokul 6.0.0-next.3 → 6.0.0-next.4

package/styles/components.css

@@ -425,7 +425,7 @@
     display: inline-flex;
   }
   .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
-    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uaosqf0 forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-ukc31za forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -479,7 +479,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-uaosqf0 {
+  @keyframes jkl-support-icon-entrance-ukc31za {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -839,22 +839,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-uaosqf3;
+    animation-name: jkl-loader-left-spin-ukc31zj;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-uaosqfo;
+    animation-name: jkl-loader-middle-spin-ukc320f;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-uaosqg1;
+    animation-name: jkl-loader-right-spin-ukc320j;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-uaosqf3 {
+  @keyframes jkl-loader-left-spin-ukc31zj {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -868,7 +868,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-uaosqfo {
+  @keyframes jkl-loader-middle-spin-ukc320f {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -885,7 +885,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-uaosqg1 {
+  @keyframes jkl-loader-right-spin-ukc320j {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -925,7 +925,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-uaosqgo;
+      animation: 2s ease infinite jkl-blink-ukc3212;
     }
   }
   .jkl-skeleton-input {
@@ -973,10 +973,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-uaosqgo;
+      animation: 2s ease-in-out infinite jkl-blink-ukc3212;
     }
   }
-  @keyframes jkl-blink-uaosqgo {
+  @keyframes jkl-blink-ukc3212 {
     0% {
       opacity: 1;
     }
@@ -2140,10 +2140,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-uaosqhy var(--duration) linear forwards;
+    animation: jkl-downcount-ukc3228 var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-uaosqhy {
+  @keyframes jkl-downcount-ukc3228 {
     from {
       width: 100%;
     }
@@ -2394,1351 +2394,21 @@
   }
 }
 @layer jokul.components {
-  :root {
-    --container-m: 43.75rem;
-    --container-l: 60rem;
-    --container-xl: 75rem;
-    --container-2xl: 90rem;
-    --container-full: 100%;
-  }
-}
-@layer jokul.components {
-  :is(.jkl-flex) {
+  .jkl-flex {
+    --wrap: initial;
+    --gap: initial;
+    --align-items: initial;
+    --align-content: initial;
+    --justify-content: initial;
+    --flex-direction: initial;
     box-sizing: border-box;
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-  :where(.fill > *) {
-    flex-grow: 1;
-  }
-  :where(.jkl-flex > *) {
-    --jkl-flex-gap: 0px;
-    --jkl-flex-layout: auto;
-    box-sizing: border-box;
-    flex-basis: calc((100% - (12 / var(--jkl-flex-layout) - 1) * var(--jkl-flex-gap)) / 12 * var(--jkl-flex-layout));
-    min-width: calc(var(--jkl-flex-layout) * 0px);
-    min-height: calc(var(--jkl-flex-layout) * 0px);
-  }
-  :where(.wrap-nowrap > *) {
-    flex-shrink: calc(var(--jkl-flex-layout) * 0);
-  }
-}
-@layer jokul.components {
-  .display-inline-flex {
-    display: inline-flex;
-  }
-  .flex-wrap-wrap-reverse {
-    flex-wrap: wrap-reverse;
-  }
-  .flex-wrap-nowrap {
-    flex-wrap: nowrap;
-  }
-  .flex-direction-column {
-    flex-direction: column;
-  }
-  .flex-direction-column-reverse {
-    flex-direction: column-reverse;
-  }
-  .flex-direction-row-reverse {
-    flex-direction: row-reverse;
-  }
-  .text-align-left {
-    text-align: left;
-  }
-  .text-align-center {
-    text-align: center;
-  }
-  .text-align-right {
-    text-align: right;
-  }
-  .align-items-start {
-    align-items: start;
-  }
-  .align-items-center {
-    align-items: center;
-  }
-  .align-items-end {
-    align-items: end;
-  }
-  .align-items-baseline {
-    align-items: baseline;
-  }
-  .align-items-stretch {
-    align-items: stretch;
-  }
-  .align-content-start {
-    align-content: start;
-  }
-  .align-content-center {
-    align-content: center;
-  }
-  .align-content-end {
-    align-content: end;
-  }
-  .align-content-stretch {
-    align-content: stretch;
-  }
-  .align-content-baseline {
-    align-content: baseline;
-  }
-  .align-content-space-around {
-    align-content: space-around;
-  }
-  .align-content-space-between {
-    align-content: space-between;
-  }
-  .align-content-space-evenly {
-    align-content: space-evenly;
-  }
-  .justify-content-start {
-    justify-content: start;
-  }
-  .justify-content-center {
-    justify-content: center;
-  }
-  .justify-content-end {
-    justify-content: end;
-  }
-  .justify-content-space-around {
-    justify-content: space-around;
-  }
-  .justify-content-space-between {
-    justify-content: space-between;
-  }
-  .justify-content-space-evenly {
-    justify-content: space-evenly;
-  }
-  :is(.center-m, .center-l, .center-xl, .center-2xl) {
-    box-sizing: border-box;
-    margin-inline: auto;
-    width: calc(100% - var(--jkl-unit-50));
-  }
-  @media (width >= 0) {
-    .center-small {
-      max-width: var(--container-m);
-    }
-  }
-  @media (width >= 680px) {
-    .center-medium {
-      max-width: var(--container-l);
-    }
-  }
-  @media (width >= 1200px) {
-    .center-large {
-      max-width: var(--container-xl);
-    }
-  }
-  @media (width >= 1600px) {
-    .center-xl {
-      max-width: var(--container-2xl);
-    }
-  }
-  .screen-small-2\.10 > :where(:nth-child(odd)) {
-    --jkl-flex-layout: 2;
-  }
-  .screen-small-2\.10 > :where(:nth-child(even)) {
-    --jkl-flex-layout: 10;
-  }
-  .screen-small-10\.2 > :where(:nth-child(odd)) {
-    --jkl-flex-layout: 10;
-  }
-  .screen-small-10\.2 > :where(:nth-child(even)) {
-    --jkl-flex-layout: 2;
-  }
-  .screen-small-3\.9 > :where(:nth-child(odd)) {
-    --jkl-flex-layout: 3;
-  }
-  .screen-small-3\.9 > :where(:nth-child(even)) {
-    --jkl-flex-layout: 9;
-  }
-  .screen-small-9\.3 > :where(:nth-child(odd)) {
-    --jkl-flex-layout: 9;
-  }
-  .screen-small-9\.3 > :where(:nth-child(even)) {
-    --jkl-flex-layout: 3;
-  }
-  .screen-small-4\.8 > :where(:nth-child(odd)) {
-    --jkl-flex-layout: 4;
-  }
-  .screen-small-4\.8 > :where(:nth-child(even)) {
-    --jkl-flex-layout: 8;
-  }
-  .screen-small-8\.4 > :where(:nth-child(odd)) {
-    --jkl-flex-layout: 8;
-  }
-  .screen-small-8\.4 > :where(:nth-child(even)) {
-    --jkl-flex-layout: 4;
-  }
-  .screen-small-5\.7 > :where(:nth-child(odd)) {
-    --jkl-flex-layout: 5;
-  }
-  .screen-small-5\.7 > :where(:nth-child(even)) {
-    --jkl-flex-layout: 7;
-  }
-  .screen-small-7\.5 > :where(:nth-child(odd)) {
-    --jkl-flex-layout: 7;
-  }
-  .screen-small-7\.5 > :where(:nth-child(even)) {
-    --jkl-flex-layout: 5;
-  }
-  .screen-small-0 > * {
-    --jkl-flex-layout: auto;
-  }
-  .screen-small-1 > * {
-    --jkl-flex-layout: 12;
-  }
-  .screen-small-2 > * {
-    --jkl-flex-layout: 6;
-  }
-  .screen-small-3 > * {
-    --jkl-flex-layout: 4;
-  }
-  .screen-small-4 > * {
-    --jkl-flex-layout: 3;
-  }
-  .screen-small-6 > * {
-    --jkl-flex-layout: 2;
-  }
-  .screen-small-row-gap-none {
-    row-gap: var(--jkl-spacing-none);
-  }
-  .screen-small-col-gap-none {
-    column-gap: var(--jkl-spacing-none);
-  }
-  .screen-small-col-gap-none > * {
-    --jkl-flex-gap: var(--jkl-spacing-none);
-  }
-  .screen-small-row-gap-2xs {
-    row-gap: var(--jkl-spacing-2xs);
-  }
-  .screen-small-col-gap-2xs {
-    column-gap: var(--jkl-spacing-2xs);
-  }
-  .screen-small-col-gap-2xs > * {
-    --jkl-flex-gap: var(--jkl-spacing-2xs);
-  }
-  .screen-small-row-gap-xs {
-    row-gap: var(--jkl-spacing-xs);
-  }
-  .screen-small-col-gap-xs {
-    column-gap: var(--jkl-spacing-xs);
-  }
-  .screen-small-col-gap-xs > * {
-    --jkl-flex-gap: var(--jkl-spacing-xs);
-  }
-  .screen-small-row-gap-s {
-    row-gap: var(--jkl-spacing-s);
-  }
-  .screen-small-col-gap-s {
-    column-gap: var(--jkl-spacing-s);
-  }
-  .screen-small-col-gap-s > * {
-    --jkl-flex-gap: var(--jkl-spacing-s);
-  }
-  .screen-small-row-gap-m {
-    row-gap: var(--jkl-spacing-m);
-  }
-  .screen-small-col-gap-m {
-    column-gap: var(--jkl-spacing-m);
-  }
-  .screen-small-col-gap-m > * {
-    --jkl-flex-gap: var(--jkl-spacing-m);
-  }
-  .screen-small-row-gap-l {
-    row-gap: var(--jkl-spacing-l);
-  }
-  .screen-small-col-gap-l {
-    column-gap: var(--jkl-spacing-l);
-  }
-  .screen-small-col-gap-l > * {
-    --jkl-flex-gap: var(--jkl-spacing-l);
-  }
-  .screen-small-row-gap-xl {
-    row-gap: var(--jkl-spacing-xl);
-  }
-  .screen-small-col-gap-xl {
-    column-gap: var(--jkl-spacing-xl);
-  }
-  .screen-small-col-gap-xl > * {
-    --jkl-flex-gap: var(--jkl-spacing-xl);
-  }
-  .screen-small-row-gap-2xl {
-    row-gap: var(--jkl-spacing-2xl);
-  }
-  .screen-small-col-gap-2xl {
-    column-gap: var(--jkl-spacing-2xl);
-  }
-  .screen-small-col-gap-2xl > * {
-    --jkl-flex-gap: var(--jkl-spacing-2xl);
-  }
-  .screen-small-row-gap-0 {
-    row-gap: var(--jkl-spacing-0);
-  }
-  .screen-small-col-gap-0 {
-    column-gap: var(--jkl-spacing-0);
-  }
-  .screen-small-col-gap-0 > * {
-    --jkl-flex-gap: var(--jkl-spacing-0);
-  }
-  .screen-small-row-gap-2 {
-    row-gap: var(--jkl-spacing-2);
-  }
-  .screen-small-col-gap-2 {
-    column-gap: var(--jkl-spacing-2);
-  }
-  .screen-small-col-gap-2 > * {
-    --jkl-flex-gap: var(--jkl-spacing-2);
-  }
-  .screen-small-row-gap-4 {
-    row-gap: var(--jkl-spacing-4);
-  }
-  .screen-small-col-gap-4 {
-    column-gap: var(--jkl-spacing-4);
-  }
-  .screen-small-col-gap-4 > * {
-    --jkl-flex-gap: var(--jkl-spacing-4);
-  }
-  .screen-small-row-gap-8 {
-    row-gap: var(--jkl-spacing-8);
-  }
-  .screen-small-col-gap-8 {
-    column-gap: var(--jkl-spacing-8);
-  }
-  .screen-small-col-gap-8 > * {
-    --jkl-flex-gap: var(--jkl-spacing-8);
-  }
-  .screen-small-row-gap-12 {
-    row-gap: var(--jkl-spacing-12);
-  }
-  .screen-small-col-gap-12 {
-    column-gap: var(--jkl-spacing-12);
-  }
-  .screen-small-col-gap-12 > * {
-    --jkl-flex-gap: var(--jkl-spacing-12);
-  }
-  .screen-small-row-gap-16 {
-    row-gap: var(--jkl-spacing-16);
-  }
-  .screen-small-col-gap-16 {
-    column-gap: var(--jkl-spacing-16);
-  }
-  .screen-small-col-gap-16 > * {
-    --jkl-flex-gap: var(--jkl-spacing-16);
-  }
-  .screen-small-row-gap-20 {
-    row-gap: var(--jkl-spacing-20);
-  }
-  .screen-small-col-gap-20 {
-    column-gap: var(--jkl-spacing-20);
-  }
-  .screen-small-col-gap-20 > * {
-    --jkl-flex-gap: var(--jkl-spacing-20);
-  }
-  .screen-small-row-gap-24 {
-    row-gap: var(--jkl-spacing-24);
-  }
-  .screen-small-col-gap-24 {
-    column-gap: var(--jkl-spacing-24);
-  }
-  .screen-small-col-gap-24 > * {
-    --jkl-flex-gap: var(--jkl-spacing-24);
-  }
-  .screen-small-row-gap-28 {
-    row-gap: var(--jkl-spacing-28);
-  }
-  .screen-small-col-gap-28 {
-    column-gap: var(--jkl-spacing-28);
-  }
-  .screen-small-col-gap-28 > * {
-    --jkl-flex-gap: var(--jkl-spacing-28);
-  }
-  .screen-small-row-gap-32 {
-    row-gap: var(--jkl-spacing-32);
-  }
-  .screen-small-col-gap-32 {
-    column-gap: var(--jkl-spacing-32);
-  }
-  .screen-small-col-gap-32 > * {
-    --jkl-flex-gap: var(--jkl-spacing-32);
-  }
-  .screen-small-row-gap-40 {
-    row-gap: var(--jkl-spacing-40);
-  }
-  .screen-small-col-gap-40 {
-    column-gap: var(--jkl-spacing-40);
-  }
-  .screen-small-col-gap-40 > * {
-    --jkl-flex-gap: var(--jkl-spacing-40);
-  }
-  .screen-small-row-gap-48 {
-    row-gap: var(--jkl-spacing-48);
-  }
-  .screen-small-col-gap-48 {
-    column-gap: var(--jkl-spacing-48);
-  }
-  .screen-small-col-gap-48 > * {
-    --jkl-flex-gap: var(--jkl-spacing-48);
-  }
-  .screen-small-row-gap-56 {
-    row-gap: var(--jkl-spacing-56);
-  }
-  .screen-small-col-gap-56 {
-    column-gap: var(--jkl-spacing-56);
-  }
-  .screen-small-col-gap-56 > * {
-    --jkl-flex-gap: var(--jkl-spacing-56);
-  }
-  .screen-small-row-gap-64 {
-    row-gap: var(--jkl-spacing-64);
-  }
-  .screen-small-col-gap-64 {
-    column-gap: var(--jkl-spacing-64);
-  }
-  .screen-small-col-gap-64 > * {
-    --jkl-flex-gap: var(--jkl-spacing-64);
-  }
-  .screen-small-row-gap-72 {
-    row-gap: var(--jkl-spacing-72);
-  }
-  .screen-small-col-gap-72 {
-    column-gap: var(--jkl-spacing-72);
-  }
-  .screen-small-col-gap-72 > * {
-    --jkl-flex-gap: var(--jkl-spacing-72);
-  }
-  .screen-small-row-gap-80 {
-    row-gap: var(--jkl-spacing-80);
-  }
-  .screen-small-col-gap-80 {
-    column-gap: var(--jkl-spacing-80);
-  }
-  .screen-small-col-gap-80 > * {
-    --jkl-flex-gap: var(--jkl-spacing-80);
-  }
-  .screen-small-row-gap-104 {
-    row-gap: var(--jkl-spacing-104);
-  }
-  .screen-small-col-gap-104 {
-    column-gap: var(--jkl-spacing-104);
-  }
-  .screen-small-col-gap-104 > * {
-    --jkl-flex-gap: var(--jkl-spacing-104);
-  }
-  .screen-small-row-gap-168 {
-    row-gap: var(--jkl-spacing-168);
-  }
-  .screen-small-col-gap-168 {
-    column-gap: var(--jkl-spacing-168);
-  }
-  .screen-small-col-gap-168 > * {
-    --jkl-flex-gap: var(--jkl-spacing-168);
-  }
-  @media (width >= 680px) {
-    .screen-medium-2\.10 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 2;
-    }
-    .screen-medium-2\.10 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 10;
-    }
-    .screen-medium-10\.2 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 10;
-    }
-    .screen-medium-10\.2 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 2;
-    }
-    .screen-medium-3\.9 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 3;
-    }
-    .screen-medium-3\.9 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 9;
-    }
-    .screen-medium-9\.3 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 9;
-    }
-    .screen-medium-9\.3 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 3;
-    }
-    .screen-medium-4\.8 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 4;
-    }
-    .screen-medium-4\.8 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 8;
-    }
-    .screen-medium-8\.4 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 8;
-    }
-    .screen-medium-8\.4 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 4;
-    }
-    .screen-medium-5\.7 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 5;
-    }
-    .screen-medium-5\.7 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 7;
-    }
-    .screen-medium-7\.5 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 7;
-    }
-    .screen-medium-7\.5 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 5;
-    }
-    .screen-medium-0 > * {
-      --jkl-flex-layout: auto;
-    }
-    .screen-medium-1 > * {
-      --jkl-flex-layout: 12;
-    }
-    .screen-medium-2 > * {
-      --jkl-flex-layout: 6;
-    }
-    .screen-medium-3 > * {
-      --jkl-flex-layout: 4;
-    }
-    .screen-medium-4 > * {
-      --jkl-flex-layout: 3;
-    }
-    .screen-medium-6 > * {
-      --jkl-flex-layout: 2;
-    }
-    .screen-medium-row-gap-none {
-      row-gap: var(--jkl-spacing-none);
-    }
-    .screen-medium-col-gap-none {
-      column-gap: var(--jkl-spacing-none);
-    }
-    .screen-medium-col-gap-none > * {
-      --jkl-flex-gap: var(--jkl-spacing-none);
-    }
-    .screen-medium-row-gap-2xs {
-      row-gap: var(--jkl-spacing-2xs);
-    }
-    .screen-medium-col-gap-2xs {
-      column-gap: var(--jkl-spacing-2xs);
-    }
-    .screen-medium-col-gap-2xs > * {
-      --jkl-flex-gap: var(--jkl-spacing-2xs);
-    }
-    .screen-medium-row-gap-xs {
-      row-gap: var(--jkl-spacing-xs);
-    }
-    .screen-medium-col-gap-xs {
-      column-gap: var(--jkl-spacing-xs);
-    }
-    .screen-medium-col-gap-xs > * {
-      --jkl-flex-gap: var(--jkl-spacing-xs);
-    }
-    .screen-medium-row-gap-s {
-      row-gap: var(--jkl-spacing-s);
-    }
-    .screen-medium-col-gap-s {
-      column-gap: var(--jkl-spacing-s);
-    }
-    .screen-medium-col-gap-s > * {
-      --jkl-flex-gap: var(--jkl-spacing-s);
-    }
-    .screen-medium-row-gap-m {
-      row-gap: var(--jkl-spacing-m);
-    }
-    .screen-medium-col-gap-m {
-      column-gap: var(--jkl-spacing-m);
-    }
-    .screen-medium-col-gap-m > * {
-      --jkl-flex-gap: var(--jkl-spacing-m);
-    }
-    .screen-medium-row-gap-l {
-      row-gap: var(--jkl-spacing-l);
-    }
-    .screen-medium-col-gap-l {
-      column-gap: var(--jkl-spacing-l);
-    }
-    .screen-medium-col-gap-l > * {
-      --jkl-flex-gap: var(--jkl-spacing-l);
-    }
-    .screen-medium-row-gap-xl {
-      row-gap: var(--jkl-spacing-xl);
-    }
-    .screen-medium-col-gap-xl {
-      column-gap: var(--jkl-spacing-xl);
-    }
-    .screen-medium-col-gap-xl > * {
-      --jkl-flex-gap: var(--jkl-spacing-xl);
-    }
-    .screen-medium-row-gap-2xl {
-      row-gap: var(--jkl-spacing-2xl);
-    }
-    .screen-medium-col-gap-2xl {
-      column-gap: var(--jkl-spacing-2xl);
-    }
-    .screen-medium-col-gap-2xl > * {
-      --jkl-flex-gap: var(--jkl-spacing-2xl);
-    }
-    .screen-medium-row-gap-0 {
-      row-gap: var(--jkl-spacing-0);
-    }
-    .screen-medium-col-gap-0 {
-      column-gap: var(--jkl-spacing-0);
-    }
-    .screen-medium-col-gap-0 > * {
-      --jkl-flex-gap: var(--jkl-spacing-0);
-    }
-    .screen-medium-row-gap-2 {
-      row-gap: var(--jkl-spacing-2);
-    }
-    .screen-medium-col-gap-2 {
-      column-gap: var(--jkl-spacing-2);
-    }
-    .screen-medium-col-gap-2 > * {
-      --jkl-flex-gap: var(--jkl-spacing-2);
-    }
-    .screen-medium-row-gap-4 {
-      row-gap: var(--jkl-spacing-4);
-    }
-    .screen-medium-col-gap-4 {
-      column-gap: var(--jkl-spacing-4);
-    }
-    .screen-medium-col-gap-4 > * {
-      --jkl-flex-gap: var(--jkl-spacing-4);
-    }
-    .screen-medium-row-gap-8 {
-      row-gap: var(--jkl-spacing-8);
-    }
-    .screen-medium-col-gap-8 {
-      column-gap: var(--jkl-spacing-8);
-    }
-    .screen-medium-col-gap-8 > * {
-      --jkl-flex-gap: var(--jkl-spacing-8);
-    }
-    .screen-medium-row-gap-12 {
-      row-gap: var(--jkl-spacing-12);
-    }
-    .screen-medium-col-gap-12 {
-      column-gap: var(--jkl-spacing-12);
-    }
-    .screen-medium-col-gap-12 > * {
-      --jkl-flex-gap: var(--jkl-spacing-12);
-    }
-    .screen-medium-row-gap-16 {
-      row-gap: var(--jkl-spacing-16);
-    }
-    .screen-medium-col-gap-16 {
-      column-gap: var(--jkl-spacing-16);
-    }
-    .screen-medium-col-gap-16 > * {
-      --jkl-flex-gap: var(--jkl-spacing-16);
-    }
-    .screen-medium-row-gap-20 {
-      row-gap: var(--jkl-spacing-20);
-    }
-    .screen-medium-col-gap-20 {
-      column-gap: var(--jkl-spacing-20);
-    }
-    .screen-medium-col-gap-20 > * {
-      --jkl-flex-gap: var(--jkl-spacing-20);
-    }
-    .screen-medium-row-gap-24 {
-      row-gap: var(--jkl-spacing-24);
-    }
-    .screen-medium-col-gap-24 {
-      column-gap: var(--jkl-spacing-24);
-    }
-    .screen-medium-col-gap-24 > * {
-      --jkl-flex-gap: var(--jkl-spacing-24);
-    }
-    .screen-medium-row-gap-28 {
-      row-gap: var(--jkl-spacing-28);
-    }
-    .screen-medium-col-gap-28 {
-      column-gap: var(--jkl-spacing-28);
-    }
-    .screen-medium-col-gap-28 > * {
-      --jkl-flex-gap: var(--jkl-spacing-28);
-    }
-    .screen-medium-row-gap-32 {
-      row-gap: var(--jkl-spacing-32);
-    }
-    .screen-medium-col-gap-32 {
-      column-gap: var(--jkl-spacing-32);
-    }
-    .screen-medium-col-gap-32 > * {
-      --jkl-flex-gap: var(--jkl-spacing-32);
-    }
-    .screen-medium-row-gap-40 {
-      row-gap: var(--jkl-spacing-40);
-    }
-    .screen-medium-col-gap-40 {
-      column-gap: var(--jkl-spacing-40);
-    }
-    .screen-medium-col-gap-40 > * {
-      --jkl-flex-gap: var(--jkl-spacing-40);
-    }
-    .screen-medium-row-gap-48 {
-      row-gap: var(--jkl-spacing-48);
-    }
-    .screen-medium-col-gap-48 {
-      column-gap: var(--jkl-spacing-48);
-    }
-    .screen-medium-col-gap-48 > * {
-      --jkl-flex-gap: var(--jkl-spacing-48);
-    }
-    .screen-medium-row-gap-56 {
-      row-gap: var(--jkl-spacing-56);
-    }
-    .screen-medium-col-gap-56 {
-      column-gap: var(--jkl-spacing-56);
-    }
-    .screen-medium-col-gap-56 > * {
-      --jkl-flex-gap: var(--jkl-spacing-56);
-    }
-    .screen-medium-row-gap-64 {
-      row-gap: var(--jkl-spacing-64);
-    }
-    .screen-medium-col-gap-64 {
-      column-gap: var(--jkl-spacing-64);
-    }
-    .screen-medium-col-gap-64 > * {
-      --jkl-flex-gap: var(--jkl-spacing-64);
-    }
-    .screen-medium-row-gap-72 {
-      row-gap: var(--jkl-spacing-72);
-    }
-    .screen-medium-col-gap-72 {
-      column-gap: var(--jkl-spacing-72);
-    }
-    .screen-medium-col-gap-72 > * {
-      --jkl-flex-gap: var(--jkl-spacing-72);
-    }
-    .screen-medium-row-gap-80 {
-      row-gap: var(--jkl-spacing-80);
-    }
-    .screen-medium-col-gap-80 {
-      column-gap: var(--jkl-spacing-80);
-    }
-    .screen-medium-col-gap-80 > * {
-      --jkl-flex-gap: var(--jkl-spacing-80);
-    }
-    .screen-medium-row-gap-104 {
-      row-gap: var(--jkl-spacing-104);
-    }
-    .screen-medium-col-gap-104 {
-      column-gap: var(--jkl-spacing-104);
-    }
-    .screen-medium-col-gap-104 > * {
-      --jkl-flex-gap: var(--jkl-spacing-104);
-    }
-    .screen-medium-row-gap-168 {
-      row-gap: var(--jkl-spacing-168);
-    }
-    .screen-medium-col-gap-168 {
-      column-gap: var(--jkl-spacing-168);
-    }
-    .screen-medium-col-gap-168 > * {
-      --jkl-flex-gap: var(--jkl-spacing-168);
-    }
-  }
-  @media (width >= 1200px) {
-    .screen-large-2\.10 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 2;
-    }
-    .screen-large-2\.10 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 10;
-    }
-    .screen-large-10\.2 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 10;
-    }
-    .screen-large-10\.2 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 2;
-    }
-    .screen-large-3\.9 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 3;
-    }
-    .screen-large-3\.9 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 9;
-    }
-    .screen-large-9\.3 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 9;
-    }
-    .screen-large-9\.3 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 3;
-    }
-    .screen-large-4\.8 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 4;
-    }
-    .screen-large-4\.8 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 8;
-    }
-    .screen-large-8\.4 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 8;
-    }
-    .screen-large-8\.4 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 4;
-    }
-    .screen-large-5\.7 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 5;
-    }
-    .screen-large-5\.7 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 7;
-    }
-    .screen-large-7\.5 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 7;
-    }
-    .screen-large-7\.5 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 5;
-    }
-    .screen-large-0 > * {
-      --jkl-flex-layout: auto;
-    }
-    .screen-large-1 > * {
-      --jkl-flex-layout: 12;
-    }
-    .screen-large-2 > * {
-      --jkl-flex-layout: 6;
-    }
-    .screen-large-3 > * {
-      --jkl-flex-layout: 4;
-    }
-    .screen-large-4 > * {
-      --jkl-flex-layout: 3;
-    }
-    .screen-large-6 > * {
-      --jkl-flex-layout: 2;
-    }
-    .screen-large-row-gap-none {
-      row-gap: var(--jkl-spacing-none);
-    }
-    .screen-large-col-gap-none {
-      column-gap: var(--jkl-spacing-none);
-    }
-    .screen-large-col-gap-none > * {
-      --jkl-flex-gap: var(--jkl-spacing-none);
-    }
-    .screen-large-row-gap-2xs {
-      row-gap: var(--jkl-spacing-2xs);
-    }
-    .screen-large-col-gap-2xs {
-      column-gap: var(--jkl-spacing-2xs);
-    }
-    .screen-large-col-gap-2xs > * {
-      --jkl-flex-gap: var(--jkl-spacing-2xs);
-    }
-    .screen-large-row-gap-xs {
-      row-gap: var(--jkl-spacing-xs);
-    }
-    .screen-large-col-gap-xs {
-      column-gap: var(--jkl-spacing-xs);
-    }
-    .screen-large-col-gap-xs > * {
-      --jkl-flex-gap: var(--jkl-spacing-xs);
-    }
-    .screen-large-row-gap-s {
-      row-gap: var(--jkl-spacing-s);
-    }
-    .screen-large-col-gap-s {
-      column-gap: var(--jkl-spacing-s);
-    }
-    .screen-large-col-gap-s > * {
-      --jkl-flex-gap: var(--jkl-spacing-s);
-    }
-    .screen-large-row-gap-m {
-      row-gap: var(--jkl-spacing-m);
-    }
-    .screen-large-col-gap-m {
-      column-gap: var(--jkl-spacing-m);
-    }
-    .screen-large-col-gap-m > * {
-      --jkl-flex-gap: var(--jkl-spacing-m);
-    }
-    .screen-large-row-gap-l {
-      row-gap: var(--jkl-spacing-l);
-    }
-    .screen-large-col-gap-l {
-      column-gap: var(--jkl-spacing-l);
-    }
-    .screen-large-col-gap-l > * {
-      --jkl-flex-gap: var(--jkl-spacing-l);
-    }
-    .screen-large-row-gap-xl {
-      row-gap: var(--jkl-spacing-xl);
-    }
-    .screen-large-col-gap-xl {
-      column-gap: var(--jkl-spacing-xl);
-    }
-    .screen-large-col-gap-xl > * {
-      --jkl-flex-gap: var(--jkl-spacing-xl);
-    }
-    .screen-large-row-gap-2xl {
-      row-gap: var(--jkl-spacing-2xl);
-    }
-    .screen-large-col-gap-2xl {
-      column-gap: var(--jkl-spacing-2xl);
-    }
-    .screen-large-col-gap-2xl > * {
-      --jkl-flex-gap: var(--jkl-spacing-2xl);
-    }
-    .screen-large-row-gap-0 {
-      row-gap: var(--jkl-spacing-0);
-    }
-    .screen-large-col-gap-0 {
-      column-gap: var(--jkl-spacing-0);
-    }
-    .screen-large-col-gap-0 > * {
-      --jkl-flex-gap: var(--jkl-spacing-0);
-    }
-    .screen-large-row-gap-2 {
-      row-gap: var(--jkl-spacing-2);
-    }
-    .screen-large-col-gap-2 {
-      column-gap: var(--jkl-spacing-2);
-    }
-    .screen-large-col-gap-2 > * {
-      --jkl-flex-gap: var(--jkl-spacing-2);
-    }
-    .screen-large-row-gap-4 {
-      row-gap: var(--jkl-spacing-4);
-    }
-    .screen-large-col-gap-4 {
-      column-gap: var(--jkl-spacing-4);
-    }
-    .screen-large-col-gap-4 > * {
-      --jkl-flex-gap: var(--jkl-spacing-4);
-    }
-    .screen-large-row-gap-8 {
-      row-gap: var(--jkl-spacing-8);
-    }
-    .screen-large-col-gap-8 {
-      column-gap: var(--jkl-spacing-8);
-    }
-    .screen-large-col-gap-8 > * {
-      --jkl-flex-gap: var(--jkl-spacing-8);
-    }
-    .screen-large-row-gap-12 {
-      row-gap: var(--jkl-spacing-12);
-    }
-    .screen-large-col-gap-12 {
-      column-gap: var(--jkl-spacing-12);
-    }
-    .screen-large-col-gap-12 > * {
-      --jkl-flex-gap: var(--jkl-spacing-12);
-    }
-    .screen-large-row-gap-16 {
-      row-gap: var(--jkl-spacing-16);
-    }
-    .screen-large-col-gap-16 {
-      column-gap: var(--jkl-spacing-16);
-    }
-    .screen-large-col-gap-16 > * {
-      --jkl-flex-gap: var(--jkl-spacing-16);
-    }
-    .screen-large-row-gap-20 {
-      row-gap: var(--jkl-spacing-20);
-    }
-    .screen-large-col-gap-20 {
-      column-gap: var(--jkl-spacing-20);
-    }
-    .screen-large-col-gap-20 > * {
-      --jkl-flex-gap: var(--jkl-spacing-20);
-    }
-    .screen-large-row-gap-24 {
-      row-gap: var(--jkl-spacing-24);
-    }
-    .screen-large-col-gap-24 {
-      column-gap: var(--jkl-spacing-24);
-    }
-    .screen-large-col-gap-24 > * {
-      --jkl-flex-gap: var(--jkl-spacing-24);
-    }
-    .screen-large-row-gap-28 {
-      row-gap: var(--jkl-spacing-28);
-    }
-    .screen-large-col-gap-28 {
-      column-gap: var(--jkl-spacing-28);
-    }
-    .screen-large-col-gap-28 > * {
-      --jkl-flex-gap: var(--jkl-spacing-28);
-    }
-    .screen-large-row-gap-32 {
-      row-gap: var(--jkl-spacing-32);
-    }
-    .screen-large-col-gap-32 {
-      column-gap: var(--jkl-spacing-32);
-    }
-    .screen-large-col-gap-32 > * {
-      --jkl-flex-gap: var(--jkl-spacing-32);
-    }
-    .screen-large-row-gap-40 {
-      row-gap: var(--jkl-spacing-40);
-    }
-    .screen-large-col-gap-40 {
-      column-gap: var(--jkl-spacing-40);
-    }
-    .screen-large-col-gap-40 > * {
-      --jkl-flex-gap: var(--jkl-spacing-40);
-    }
-    .screen-large-row-gap-48 {
-      row-gap: var(--jkl-spacing-48);
-    }
-    .screen-large-col-gap-48 {
-      column-gap: var(--jkl-spacing-48);
-    }
-    .screen-large-col-gap-48 > * {
-      --jkl-flex-gap: var(--jkl-spacing-48);
-    }
-    .screen-large-row-gap-56 {
-      row-gap: var(--jkl-spacing-56);
-    }
-    .screen-large-col-gap-56 {
-      column-gap: var(--jkl-spacing-56);
-    }
-    .screen-large-col-gap-56 > * {
-      --jkl-flex-gap: var(--jkl-spacing-56);
-    }
-    .screen-large-row-gap-64 {
-      row-gap: var(--jkl-spacing-64);
-    }
-    .screen-large-col-gap-64 {
-      column-gap: var(--jkl-spacing-64);
-    }
-    .screen-large-col-gap-64 > * {
-      --jkl-flex-gap: var(--jkl-spacing-64);
-    }
-    .screen-large-row-gap-72 {
-      row-gap: var(--jkl-spacing-72);
-    }
-    .screen-large-col-gap-72 {
-      column-gap: var(--jkl-spacing-72);
-    }
-    .screen-large-col-gap-72 > * {
-      --jkl-flex-gap: var(--jkl-spacing-72);
-    }
-    .screen-large-row-gap-80 {
-      row-gap: var(--jkl-spacing-80);
-    }
-    .screen-large-col-gap-80 {
-      column-gap: var(--jkl-spacing-80);
-    }
-    .screen-large-col-gap-80 > * {
-      --jkl-flex-gap: var(--jkl-spacing-80);
-    }
-    .screen-large-row-gap-104 {
-      row-gap: var(--jkl-spacing-104);
-    }
-    .screen-large-col-gap-104 {
-      column-gap: var(--jkl-spacing-104);
-    }
-    .screen-large-col-gap-104 > * {
-      --jkl-flex-gap: var(--jkl-spacing-104);
-    }
-    .screen-large-row-gap-168 {
-      row-gap: var(--jkl-spacing-168);
-    }
-    .screen-large-col-gap-168 {
-      column-gap: var(--jkl-spacing-168);
-    }
-    .screen-large-col-gap-168 > * {
-      --jkl-flex-gap: var(--jkl-spacing-168);
-    }
-  }
-  @media (width >= 1600px) {
-    .screen-xl-2\.10 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 2;
-    }
-    .screen-xl-2\.10 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 10;
-    }
-    .screen-xl-10\.2 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 10;
-    }
-    .screen-xl-10\.2 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 2;
-    }
-    .screen-xl-3\.9 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 3;
-    }
-    .screen-xl-3\.9 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 9;
-    }
-    .screen-xl-9\.3 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 9;
-    }
-    .screen-xl-9\.3 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 3;
-    }
-    .screen-xl-4\.8 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 4;
-    }
-    .screen-xl-4\.8 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 8;
-    }
-    .screen-xl-8\.4 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 8;
-    }
-    .screen-xl-8\.4 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 4;
-    }
-    .screen-xl-5\.7 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 5;
-    }
-    .screen-xl-5\.7 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 7;
-    }
-    .screen-xl-7\.5 > :where(:nth-child(odd)) {
-      --jkl-flex-layout: 7;
-    }
-    .screen-xl-7\.5 > :where(:nth-child(even)) {
-      --jkl-flex-layout: 5;
-    }
-    .screen-xl-0 > * {
-      --jkl-flex-layout: auto;
-    }
-    .screen-xl-1 > * {
-      --jkl-flex-layout: 12;
-    }
-    .screen-xl-2 > * {
-      --jkl-flex-layout: 6;
-    }
-    .screen-xl-3 > * {
-      --jkl-flex-layout: 4;
-    }
-    .screen-xl-4 > * {
-      --jkl-flex-layout: 3;
-    }
-    .screen-xl-6 > * {
-      --jkl-flex-layout: 2;
-    }
-    .screen-xl-row-gap-none {
-      row-gap: var(--jkl-spacing-none);
-    }
-    .screen-xl-col-gap-none {
-      column-gap: var(--jkl-spacing-none);
-    }
-    .screen-xl-col-gap-none > * {
-      --jkl-flex-gap: var(--jkl-spacing-none);
-    }
-    .screen-xl-row-gap-2xs {
-      row-gap: var(--jkl-spacing-2xs);
-    }
-    .screen-xl-col-gap-2xs {
-      column-gap: var(--jkl-spacing-2xs);
-    }
-    .screen-xl-col-gap-2xs > * {
-      --jkl-flex-gap: var(--jkl-spacing-2xs);
-    }
-    .screen-xl-row-gap-xs {
-      row-gap: var(--jkl-spacing-xs);
-    }
-    .screen-xl-col-gap-xs {
-      column-gap: var(--jkl-spacing-xs);
-    }
-    .screen-xl-col-gap-xs > * {
-      --jkl-flex-gap: var(--jkl-spacing-xs);
-    }
-    .screen-xl-row-gap-s {
-      row-gap: var(--jkl-spacing-s);
-    }
-    .screen-xl-col-gap-s {
-      column-gap: var(--jkl-spacing-s);
-    }
-    .screen-xl-col-gap-s > * {
-      --jkl-flex-gap: var(--jkl-spacing-s);
-    }
-    .screen-xl-row-gap-m {
-      row-gap: var(--jkl-spacing-m);
-    }
-    .screen-xl-col-gap-m {
-      column-gap: var(--jkl-spacing-m);
-    }
-    .screen-xl-col-gap-m > * {
-      --jkl-flex-gap: var(--jkl-spacing-m);
-    }
-    .screen-xl-row-gap-l {
-      row-gap: var(--jkl-spacing-l);
-    }
-    .screen-xl-col-gap-l {
-      column-gap: var(--jkl-spacing-l);
-    }
-    .screen-xl-col-gap-l > * {
-      --jkl-flex-gap: var(--jkl-spacing-l);
-    }
-    .screen-xl-row-gap-xl {
-      row-gap: var(--jkl-spacing-xl);
-    }
-    .screen-xl-col-gap-xl {
-      column-gap: var(--jkl-spacing-xl);
-    }
-    .screen-xl-col-gap-xl > * {
-      --jkl-flex-gap: var(--jkl-spacing-xl);
-    }
-    .screen-xl-row-gap-2xl {
-      row-gap: var(--jkl-spacing-2xl);
-    }
-    .screen-xl-col-gap-2xl {
-      column-gap: var(--jkl-spacing-2xl);
-    }
-    .screen-xl-col-gap-2xl > * {
-      --jkl-flex-gap: var(--jkl-spacing-2xl);
-    }
-    .screen-xl-row-gap-0 {
-      row-gap: var(--jkl-spacing-0);
-    }
-    .screen-xl-col-gap-0 {
-      column-gap: var(--jkl-spacing-0);
-    }
-    .screen-xl-col-gap-0 > * {
-      --jkl-flex-gap: var(--jkl-spacing-0);
-    }
-    .screen-xl-row-gap-2 {
-      row-gap: var(--jkl-spacing-2);
-    }
-    .screen-xl-col-gap-2 {
-      column-gap: var(--jkl-spacing-2);
-    }
-    .screen-xl-col-gap-2 > * {
-      --jkl-flex-gap: var(--jkl-spacing-2);
-    }
-    .screen-xl-row-gap-4 {
-      row-gap: var(--jkl-spacing-4);
-    }
-    .screen-xl-col-gap-4 {
-      column-gap: var(--jkl-spacing-4);
-    }
-    .screen-xl-col-gap-4 > * {
-      --jkl-flex-gap: var(--jkl-spacing-4);
-    }
-    .screen-xl-row-gap-8 {
-      row-gap: var(--jkl-spacing-8);
-    }
-    .screen-xl-col-gap-8 {
-      column-gap: var(--jkl-spacing-8);
-    }
-    .screen-xl-col-gap-8 > * {
-      --jkl-flex-gap: var(--jkl-spacing-8);
-    }
-    .screen-xl-row-gap-12 {
-      row-gap: var(--jkl-spacing-12);
-    }
-    .screen-xl-col-gap-12 {
-      column-gap: var(--jkl-spacing-12);
-    }
-    .screen-xl-col-gap-12 > * {
-      --jkl-flex-gap: var(--jkl-spacing-12);
-    }
-    .screen-xl-row-gap-16 {
-      row-gap: var(--jkl-spacing-16);
-    }
-    .screen-xl-col-gap-16 {
-      column-gap: var(--jkl-spacing-16);
-    }
-    .screen-xl-col-gap-16 > * {
-      --jkl-flex-gap: var(--jkl-spacing-16);
-    }
-    .screen-xl-row-gap-20 {
-      row-gap: var(--jkl-spacing-20);
-    }
-    .screen-xl-col-gap-20 {
-      column-gap: var(--jkl-spacing-20);
-    }
-    .screen-xl-col-gap-20 > * {
-      --jkl-flex-gap: var(--jkl-spacing-20);
-    }
-    .screen-xl-row-gap-24 {
-      row-gap: var(--jkl-spacing-24);
-    }
-    .screen-xl-col-gap-24 {
-      column-gap: var(--jkl-spacing-24);
-    }
-    .screen-xl-col-gap-24 > * {
-      --jkl-flex-gap: var(--jkl-spacing-24);
-    }
-    .screen-xl-row-gap-28 {
-      row-gap: var(--jkl-spacing-28);
-    }
-    .screen-xl-col-gap-28 {
-      column-gap: var(--jkl-spacing-28);
-    }
-    .screen-xl-col-gap-28 > * {
-      --jkl-flex-gap: var(--jkl-spacing-28);
-    }
-    .screen-xl-row-gap-32 {
-      row-gap: var(--jkl-spacing-32);
-    }
-    .screen-xl-col-gap-32 {
-      column-gap: var(--jkl-spacing-32);
-    }
-    .screen-xl-col-gap-32 > * {
-      --jkl-flex-gap: var(--jkl-spacing-32);
-    }
-    .screen-xl-row-gap-40 {
-      row-gap: var(--jkl-spacing-40);
-    }
-    .screen-xl-col-gap-40 {
-      column-gap: var(--jkl-spacing-40);
-    }
-    .screen-xl-col-gap-40 > * {
-      --jkl-flex-gap: var(--jkl-spacing-40);
-    }
-    .screen-xl-row-gap-48 {
-      row-gap: var(--jkl-spacing-48);
-    }
-    .screen-xl-col-gap-48 {
-      column-gap: var(--jkl-spacing-48);
-    }
-    .screen-xl-col-gap-48 > * {
-      --jkl-flex-gap: var(--jkl-spacing-48);
-    }
-    .screen-xl-row-gap-56 {
-      row-gap: var(--jkl-spacing-56);
-    }
-    .screen-xl-col-gap-56 {
-      column-gap: var(--jkl-spacing-56);
-    }
-    .screen-xl-col-gap-56 > * {
-      --jkl-flex-gap: var(--jkl-spacing-56);
-    }
-    .screen-xl-row-gap-64 {
-      row-gap: var(--jkl-spacing-64);
-    }
-    .screen-xl-col-gap-64 {
-      column-gap: var(--jkl-spacing-64);
-    }
-    .screen-xl-col-gap-64 > * {
-      --jkl-flex-gap: var(--jkl-spacing-64);
-    }
-    .screen-xl-row-gap-72 {
-      row-gap: var(--jkl-spacing-72);
-    }
-    .screen-xl-col-gap-72 {
-      column-gap: var(--jkl-spacing-72);
-    }
-    .screen-xl-col-gap-72 > * {
-      --jkl-flex-gap: var(--jkl-spacing-72);
-    }
-    .screen-xl-row-gap-80 {
-      row-gap: var(--jkl-spacing-80);
-    }
-    .screen-xl-col-gap-80 {
-      column-gap: var(--jkl-spacing-80);
-    }
-    .screen-xl-col-gap-80 > * {
-      --jkl-flex-gap: var(--jkl-spacing-80);
-    }
-    .screen-xl-row-gap-104 {
-      row-gap: var(--jkl-spacing-104);
-    }
-    .screen-xl-col-gap-104 {
-      column-gap: var(--jkl-spacing-104);
-    }
-    .screen-xl-col-gap-104 > * {
-      --jkl-flex-gap: var(--jkl-spacing-104);
-    }
-    .screen-xl-row-gap-168 {
-      row-gap: var(--jkl-spacing-168);
-    }
-    .screen-xl-col-gap-168 {
-      column-gap: var(--jkl-spacing-168);
-    }
-    .screen-xl-col-gap-168 > * {
-      --jkl-flex-gap: var(--jkl-spacing-168);
-    }
+    flex-direction: var(--flex-direction);
+    flex-wrap: var(--wrap);
+    gap: var(--gap);
+    align-items: var(--align-items);
+    align-content: var(--align-content);
+    justify-content: var(--justify-content);
   }
 }
 @layer jokul.components {
@@ -4894,12 +3564,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-uaosqim 0.25s ease-out;
+    animation: jkl-show-ukc322a 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-uaosqim {
+  @keyframes jkl-show-ukc322a {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -5111,7 +3781,7 @@
     --icon-color: var(--jkl-color-success-background-contrast);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-uaosqj1 var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    animation: jkl-dismiss-ukc322f var(--jkl-motion-timing-lazy) ease-in-out forwards;
     transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
@@ -5133,7 +3803,7 @@
   .jkl-form-error-message {
     padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-uaosqj1 {
+  @keyframes jkl-dismiss-ukc322f {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -6437,7 +5107,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-uaosqj8 {
+  @keyframes jkl-downcount-ukc3239 {
     from {
       width: 100%;
     }
@@ -6677,7 +5347,7 @@
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-uaosqky var(--jkl-motion-timing-lazy) forwards;
+    animation: jkl-dismiss-ukc324h var(--jkl-motion-timing-lazy) forwards;
     transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
   }
   .jkl-system-message--info {
@@ -6715,7 +5385,7 @@
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-uaosqky {
+  @keyframes jkl-dismiss-ukc324h {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -7067,12 +5737,12 @@
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-uaosql4 var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-ukc324j var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-uaosqls var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-ukc3257 var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-uaosql4 {
+  @keyframes jkl-entering-ukc324j {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -7082,7 +5752,7 @@
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-uaosqls {
+  @keyframes jkl-exiting-ukc3257 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);