@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) {
    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);
    }
  }
}