.container {
    width: calc(100% - 2 * var(--component-padding));
    margin-left: auto;
    margin-right: auto;
  }
  
  .grid, .flex, .inline-flex,
  [class^=flex\@], [class*=" flex@"],
  [class^=inline-flex\@], [class*=" inline-flex@"] {
    --gap: 0px;
    --gap-x: var(--gap);
    --gap-y: var(--gap);
    gap: var(--gap-y) var(--gap-x);
  }
  .grid > *, .flex > *, .inline-flex > *,
  [class^=flex\@] > *, [class*=" flex@"] > *,
  [class^=inline-flex\@] > *, [class*=" inline-flex@"] > * {
    --sub-gap: 0px;
    --sub-gap-x: var(--sub-gap);
    --sub-gap-y: var(--sub-gap);
  }
  
  .grid {
    --grid-columns: 12;
    display: flex;
    flex-wrap: wrap;
  }
  .grid > * {
    flex-basis: 100%;
    max-width: 100%;
    min-width: 0;
  }
  
  /* #region (Safari < 14.1 fallback) */
  @media not all and (min-resolution: 0.001dpcm) {
    @supports not (translate: none) {
      .grid, .flex[class*=gap-], .inline-flex[class*=gap-] {
        gap: 0px;
        margin-bottom: calc(-1 * var(--gap-y));
        margin-left: calc(-1 * var(--gap-x));
      }
      .grid > *, .flex[class*=gap-] > *, .inline-flex[class*=gap-] > * {
        margin-bottom: var(--sub-gap-y);
      }
      .grid {
        --offset: var(--gap-x);
        --gap-modifier: 0;
        --offset-modifier: 1;
      }
      .grid > * {
        margin-left: var(--offset);
      }
      .flex[class*=gap-] > *, .inline-flex[class*=gap-] > * {
        margin-left: var(--sub-gap-x);
      }
    }
  }
  /* #endregion */
  .gap-xxxxs {
    --gap-x: var(--space-xxxxs);
    --gap-y: var(--space-xxxxs);
  }
  .gap-xxxxs > * {
    --sub-gap-x: var(--space-xxxxs);
    --sub-gap-y: var(--space-xxxxs);
  }
  
  .gap-xxxs {
    --gap-x: var(--space-xxxs);
    --gap-y: var(--space-xxxs);
  }
  .gap-xxxs > * {
    --sub-gap-x: var(--space-xxxs);
    --sub-gap-y: var(--space-xxxs);
  }
  
  .gap-xxs {
    --gap-x: var(--space-xxs);
    --gap-y: var(--space-xxs);
  }
  .gap-xxs > * {
    --sub-gap-x: var(--space-xxs);
    --sub-gap-y: var(--space-xxs);
  }
  
  .gap-xs {
    --gap-x: var(--space-xs);
    --gap-y: var(--space-xs);
  }
  .gap-xs > * {
    --sub-gap-x: var(--space-xs);
    --sub-gap-y: var(--space-xs);
  }
  
  .gap-sm {
    --gap-x: var(--space-sm);
    --gap-y: var(--space-sm);
  }
  .gap-sm > * {
    --sub-gap-x: var(--space-sm);
    --sub-gap-y: var(--space-sm);
  }
  
  .gap-md {
    --gap-x: var(--space-md);
    --gap-y: var(--space-md);
  }
  .gap-md > * {
    --sub-gap-x: var(--space-md);
    --sub-gap-y: var(--space-md);
  }
  
  .gap-lg {
    --gap-x: var(--space-lg);
    --gap-y: var(--space-lg);
  }
  .gap-lg > * {
    --sub-gap-x: var(--space-lg);
    --sub-gap-y: var(--space-lg);
  }
  
  .gap-xl {
    --gap-x: var(--space-xl);
    --gap-y: var(--space-xl);
  }
  .gap-xl > * {
    --sub-gap-x: var(--space-xl);
    --sub-gap-y: var(--space-xl);
  }
  
  .gap-xxl {
    --gap-x: var(--space-xxl);
    --gap-y: var(--space-xxl);
  }
  .gap-xxl > * {
    --sub-gap-x: var(--space-xxl);
    --sub-gap-y: var(--space-xxl);
  }
  
  .gap-xxxl {
    --gap-x: var(--space-xxxl);
    --gap-y: var(--space-xxxl);
  }
  .gap-xxxl > * {
    --sub-gap-x: var(--space-xxxl);
    --sub-gap-y: var(--space-xxxl);
  }
  
  .gap-xxxxl {
    --gap-x: var(--space-xxxxl);
    --gap-y: var(--space-xxxxl);
  }
  .gap-xxxxl > * {
    --sub-gap-x: var(--space-xxxxl);
    --sub-gap-y: var(--space-xxxxl);
  }
  
  .gap-0 {
    --gap-x: 0;
    --gap-y: 0;
  }
  .gap-0 > * {
    --sub-gap-x: 0;
    --sub-gap-y: 0;
  }
  
  .gap-x-xxxxs {
    --gap-x: var(--space-xxxxs);
  }
  .gap-x-xxxxs > * {
    --sub-gap-x: var(--space-xxxxs);
  }
  
  .gap-x-xxxs {
    --gap-x: var(--space-xxxs);
  }
  .gap-x-xxxs > * {
    --sub-gap-x: var(--space-xxxs);
  }
  
  .gap-x-xxs {
    --gap-x: var(--space-xxs);
  }
  .gap-x-xxs > * {
    --sub-gap-x: var(--space-xxs);
  }
  
  .gap-x-xs {
    --gap-x: var(--space-xs);
  }
  .gap-x-xs > * {
    --sub-gap-x: var(--space-xs);
  }
  
  .gap-x-sm {
    --gap-x: var(--space-sm);
  }
  .gap-x-sm > * {
    --sub-gap-x: var(--space-sm);
  }
  
  .gap-x-md {
    --gap-x: var(--space-md);
  }
  .gap-x-md > * {
    --sub-gap-x: var(--space-md);
  }
  
  .gap-x-lg {
    --gap-x: var(--space-lg);
  }
  .gap-x-lg > * {
    --sub-gap-x: var(--space-lg);
  }
  
  .gap-x-xl {
    --gap-x: var(--space-xl);
  }
  .gap-x-xl > * {
    --sub-gap-x: var(--space-xl);
  }
  
  .gap-x-xxl {
    --gap-x: var(--space-xxl);
  }
  .gap-x-xxl > * {
    --sub-gap-x: var(--space-xxl);
  }
  
  .gap-x-xxxl {
    --gap-x: var(--space-xxxl);
  }
  .gap-x-xxxl > * {
    --sub-gap-x: var(--space-xxxl);
  }
  
  .gap-x-xxxxl {
    --gap-x: var(--space-xxxxl);
  }
  .gap-x-xxxxl > * {
    --sub-gap-x: var(--space-xxxxl);
  }
  
  .gap-x-0 {
    --gap-x: 0;
  }
  .gap-x-0 > * {
    --sub-gap-x: 0;
  }
  
  .gap-y-xxxxs {
    --gap-y: var(--space-xxxxs);
  }
  .gap-y-xxxxs > * {
    --sub-gap-y: var(--space-xxxxs);
  }
  
  .gap-y-xxxs {
    --gap-y: var(--space-xxxs);
  }
  .gap-y-xxxs > * {
    --sub-gap-y: var(--space-xxxs);
  }
  
  .gap-y-xxs {
    --gap-y: var(--space-xxs);
  }
  .gap-y-xxs > * {
    --sub-gap-y: var(--space-xxs);
  }
  
  .gap-y-xs {
    --gap-y: var(--space-xs);
  }
  .gap-y-xs > * {
    --sub-gap-y: var(--space-xs);
  }
  
  .gap-y-sm {
    --gap-y: var(--space-sm);
  }
  .gap-y-sm > * {
    --sub-gap-y: var(--space-sm);
  }
  
  .gap-y-md {
    --gap-y: var(--space-md);
  }
  .gap-y-md > * {
    --sub-gap-y: var(--space-md);
  }
  
  .gap-y-lg {
    --gap-y: var(--space-lg);
  }
  .gap-y-lg > * {
    --sub-gap-y: var(--space-lg);
  }
  
  .gap-y-xl {
    --gap-y: var(--space-xl);
  }
  .gap-y-xl > * {
    --sub-gap-y: var(--space-xl);
  }
  
  .gap-y-xxl {
    --gap-y: var(--space-xxl);
  }
  .gap-y-xxl > * {
    --sub-gap-y: var(--space-xxl);
  }
  
  .gap-y-xxxl {
    --gap-y: var(--space-xxxl);
  }
  .gap-y-xxxl > * {
    --sub-gap-y: var(--space-xxxl);
  }
  
  .gap-y-xxxxl {
    --gap-y: var(--space-xxxxl);
  }
  .gap-y-xxxxl > * {
    --sub-gap-y: var(--space-xxxxl);
  }
  
  .gap-y-0 {
    --gap-y: 0;
  }
  .gap-y-0 > * {
    --sub-gap-y: 0;
  }
  
  .grid-col-1 {
    --grid-columns: 1;
  }
  
  .col-1 {
    --span: 1;
  }
  
  .grid-col-2 {
    --grid-columns: 2;
  }
  
  .col-2 {
    --span: 2;
  }
  
  .grid-col-3 {
    --grid-columns: 3;
  }
  
  .col-3 {
    --span: 3;
  }
  
  .grid-col-4 {
    --grid-columns: 4;
  }
  
  .col-4 {
    --span: 4;
  }
  
  .grid-col-5 {
    --grid-columns: 5;
  }
  
  .col-5 {
    --span: 5;
  }
  
  .grid-col-6 {
    --grid-columns: 6;
  }
  
  .col-6 {
    --span: 6;
  }
  
  .grid-col-7 {
    --grid-columns: 7;
  }
  
  .col-7 {
    --span: 7;
  }
  
  .grid-col-8 {
    --grid-columns: 8;
  }
  
  .col-8 {
    --span: 8;
  }
  
  .grid-col-9 {
    --grid-columns: 9;
  }
  
  .col-9 {
    --span: 9;
  }
  
  .grid-col-10 {
    --grid-columns: 10;
  }
  
  .col-10 {
    --span: 10;
  }
  
  .grid-col-11 {
    --grid-columns: 11;
  }
  
  .col-11 {
    --span: 11;
  }
  
  .grid-col-12 {
    --grid-columns: 12;
  }
  
  .col-12 {
    --span: 12;
  }
  
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    flex-basis: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));
    max-width: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));
  }
  
  .col {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }
  
  .col-content {
    flex-grow: 0;
    flex-basis: initial;
    max-width: initial;
  }
  
  .offset-1 {
    --offset: 1;
  }
  
  .offset-2 {
    --offset: 2;
  }
  
  .offset-3 {
    --offset: 3;
  }
  
  .offset-4 {
    --offset: 4;
  }
  
  .offset-5 {
    --offset: 5;
  }
  
  .offset-6 {
    --offset: 6;
  }
  
  .offset-7 {
    --offset: 7;
  }
  
  .offset-8 {
    --offset: 8;
  }
  
  .offset-9 {
    --offset: 9;
  }
  
  .offset-10 {
    --offset: 10;
  }
  
  .offset-11 {
    --offset: 11;
  }
  
  .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11 {
    margin-left: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--offset) / var(--grid-columns) + (var(--offset) + var(--offset-modifier, 0)) * var(--sub-gap-x));
  }
  
  @media (min-width: 32rem) {
    .gap-xxxxs\@xs {
      --gap-x: var(--space-xxxxs);
      --gap-y: var(--space-xxxxs);
    }
    .gap-xxxxs\@xs > * {
      --sub-gap-x: var(--space-xxxxs);
      --sub-gap-y: var(--space-xxxxs);
    }
    .gap-xxxs\@xs {
      --gap-x: var(--space-xxxs);
      --gap-y: var(--space-xxxs);
    }
    .gap-xxxs\@xs > * {
      --sub-gap-x: var(--space-xxxs);
      --sub-gap-y: var(--space-xxxs);
    }
    .gap-xxs\@xs {
      --gap-x: var(--space-xxs);
      --gap-y: var(--space-xxs);
    }
    .gap-xxs\@xs > * {
      --sub-gap-x: var(--space-xxs);
      --sub-gap-y: var(--space-xxs);
    }
    .gap-xs\@xs {
      --gap-x: var(--space-xs);
      --gap-y: var(--space-xs);
    }
    .gap-xs\@xs > * {
      --sub-gap-x: var(--space-xs);
      --sub-gap-y: var(--space-xs);
    }
    .gap-sm\@xs {
      --gap-x: var(--space-sm);
      --gap-y: var(--space-sm);
    }
    .gap-sm\@xs > * {
      --sub-gap-x: var(--space-sm);
      --sub-gap-y: var(--space-sm);
    }
    .gap-md\@xs {
      --gap-x: var(--space-md);
      --gap-y: var(--space-md);
    }
    .gap-md\@xs > * {
      --sub-gap-x: var(--space-md);
      --sub-gap-y: var(--space-md);
    }
    .gap-lg\@xs {
      --gap-x: var(--space-lg);
      --gap-y: var(--space-lg);
    }
    .gap-lg\@xs > * {
      --sub-gap-x: var(--space-lg);
      --sub-gap-y: var(--space-lg);
    }
    .gap-xl\@xs {
      --gap-x: var(--space-xl);
      --gap-y: var(--space-xl);
    }
    .gap-xl\@xs > * {
      --sub-gap-x: var(--space-xl);
      --sub-gap-y: var(--space-xl);
    }
    .gap-xxl\@xs {
      --gap-x: var(--space-xxl);
      --gap-y: var(--space-xxl);
    }
    .gap-xxl\@xs > * {
      --sub-gap-x: var(--space-xxl);
      --sub-gap-y: var(--space-xxl);
    }
    .gap-xxxl\@xs {
      --gap-x: var(--space-xxxl);
      --gap-y: var(--space-xxxl);
    }
    .gap-xxxl\@xs > * {
      --sub-gap-x: var(--space-xxxl);
      --sub-gap-y: var(--space-xxxl);
    }
    .gap-xxxxl\@xs {
      --gap-x: var(--space-xxxxl);
      --gap-y: var(--space-xxxxl);
    }
    .gap-xxxxl\@xs > * {
      --sub-gap-x: var(--space-xxxxl);
      --sub-gap-y: var(--space-xxxxl);
    }
    .gap-0\@xs {
      --gap-x: 0;
      --gap-y: 0;
    }
    .gap-0\@xs > * {
      --sub-gap-x: 0;
      --sub-gap-y: 0;
    }
    .gap-x-xxxxs\@xs {
      --gap-x: var(--space-xxxxs);
    }
    .gap-x-xxxxs\@xs > * {
      --sub-gap-x: var(--space-xxxxs);
    }
    .gap-x-xxxs\@xs {
      --gap-x: var(--space-xxxs);
    }
    .gap-x-xxxs\@xs > * {
      --sub-gap-x: var(--space-xxxs);
    }
    .gap-x-xxs\@xs {
      --gap-x: var(--space-xxs);
    }
    .gap-x-xxs\@xs > * {
      --sub-gap-x: var(--space-xxs);
    }
    .gap-x-xs\@xs {
      --gap-x: var(--space-xs);
    }
    .gap-x-xs\@xs > * {
      --sub-gap-x: var(--space-xs);
    }
    .gap-x-sm\@xs {
      --gap-x: var(--space-sm);
    }
    .gap-x-sm\@xs > * {
      --sub-gap-x: var(--space-sm);
    }
    .gap-x-md\@xs {
      --gap-x: var(--space-md);
    }
    .gap-x-md\@xs > * {
      --sub-gap-x: var(--space-md);
    }
    .gap-x-lg\@xs {
      --gap-x: var(--space-lg);
    }
    .gap-x-lg\@xs > * {
      --sub-gap-x: var(--space-lg);
    }
    .gap-x-xl\@xs {
      --gap-x: var(--space-xl);
    }
    .gap-x-xl\@xs > * {
      --sub-gap-x: var(--space-xl);
    }
    .gap-x-xxl\@xs {
      --gap-x: var(--space-xxl);
    }
    .gap-x-xxl\@xs > * {
      --sub-gap-x: var(--space-xxl);
    }
    .gap-x-xxxl\@xs {
      --gap-x: var(--space-xxxl);
    }
    .gap-x-xxxl\@xs > * {
      --sub-gap-x: var(--space-xxxl);
    }
    .gap-x-xxxxl\@xs {
      --gap-x: var(--space-xxxxl);
    }
    .gap-x-xxxxl\@xs > * {
      --sub-gap-x: var(--space-xxxxl);
    }
    .gap-x-0\@xs {
      --gap-x: 0;
    }
    .gap-x-0\@xs > * {
      --sub-gap-x: 0;
    }
    .gap-y-xxxxs\@xs {
      --gap-y: var(--space-xxxxs);
    }
    .gap-y-xxxxs\@xs > * {
      --sub-gap-y: var(--space-xxxxs);
    }
    .gap-y-xxxs\@xs {
      --gap-y: var(--space-xxxs);
    }
    .gap-y-xxxs\@xs > * {
      --sub-gap-y: var(--space-xxxs);
    }
    .gap-y-xxs\@xs {
      --gap-y: var(--space-xxs);
    }
    .gap-y-xxs\@xs > * {
      --sub-gap-y: var(--space-xxs);
    }
    .gap-y-xs\@xs {
      --gap-y: var(--space-xs);
    }
    .gap-y-xs\@xs > * {
      --sub-gap-y: var(--space-xs);
    }
    .gap-y-sm\@xs {
      --gap-y: var(--space-sm);
    }
    .gap-y-sm\@xs > * {
      --sub-gap-y: var(--space-sm);
    }
    .gap-y-md\@xs {
      --gap-y: var(--space-md);
    }
    .gap-y-md\@xs > * {
      --sub-gap-y: var(--space-md);
    }
    .gap-y-lg\@xs {
      --gap-y: var(--space-lg);
    }
    .gap-y-lg\@xs > * {
      --sub-gap-y: var(--space-lg);
    }
    .gap-y-xl\@xs {
      --gap-y: var(--space-xl);
    }
    .gap-y-xl\@xs > * {
      --sub-gap-y: var(--space-xl);
    }
    .gap-y-xxl\@xs {
      --gap-y: var(--space-xxl);
    }
    .gap-y-xxl\@xs > * {
      --sub-gap-y: var(--space-xxl);
    }
    .gap-y-xxxl\@xs {
      --gap-y: var(--space-xxxl);
    }
    .gap-y-xxxl\@xs > * {
      --sub-gap-y: var(--space-xxxl);
    }
    .gap-y-xxxxl\@xs {
      --gap-y: var(--space-xxxxl);
    }
    .gap-y-xxxxl\@xs > * {
      --sub-gap-y: var(--space-xxxxl);
    }
    .gap-y-0\@xs {
      --gap-y: 0;
    }
    .gap-y-0\@xs > * {
      --sub-gap-y: 0;
    }
    .grid-col-1\@xs {
      --grid-columns: 1;
    }
    .col-1\@xs {
      --span: 1;
    }
    .grid-col-2\@xs {
      --grid-columns: 2;
    }
    .col-2\@xs {
      --span: 2;
    }
    .grid-col-3\@xs {
      --grid-columns: 3;
    }
    .col-3\@xs {
      --span: 3;
    }
    .grid-col-4\@xs {
      --grid-columns: 4;
    }
    .col-4\@xs {
      --span: 4;
    }
    .grid-col-5\@xs {
      --grid-columns: 5;
    }
    .col-5\@xs {
      --span: 5;
    }
    .grid-col-6\@xs {
      --grid-columns: 6;
    }
    .col-6\@xs {
      --span: 6;
    }
    .grid-col-7\@xs {
      --grid-columns: 7;
    }
    .col-7\@xs {
      --span: 7;
    }
    .grid-col-8\@xs {
      --grid-columns: 8;
    }
    .col-8\@xs {
      --span: 8;
    }
    .grid-col-9\@xs {
      --grid-columns: 9;
    }
    .col-9\@xs {
      --span: 9;
    }
    .grid-col-10\@xs {
      --grid-columns: 10;
    }
    .col-10\@xs {
      --span: 10;
    }
    .grid-col-11\@xs {
      --grid-columns: 11;
    }
    .col-11\@xs {
      --span: 11;
    }
    .grid-col-12\@xs {
      --grid-columns: 12;
    }
    .col-12\@xs {
      --span: 12;
    }
    .col-1\@xs, .col-2\@xs, .col-3\@xs, .col-4\@xs, .col-5\@xs, .col-6\@xs, .col-7\@xs, .col-8\@xs, .col-9\@xs, .col-10\@xs, .col-11\@xs, .col-12\@xs {
      flex-basis: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));
      max-width: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));
    }
    .col\@xs {
      flex-grow: 1;
      flex-basis: 0;
      max-width: 100%;
    }
    .col-content\@xs {
      flex-grow: 0;
      flex-basis: initial;
      max-width: initial;
    }
    .offset-1\@xs {
      --offset: 1;
    }
    .offset-2\@xs {
      --offset: 2;
    }
    .offset-3\@xs {
      --offset: 3;
    }
    .offset-4\@xs {
      --offset: 4;
    }
    .offset-5\@xs {
      --offset: 5;
    }
    .offset-6\@xs {
      --offset: 6;
    }
    .offset-7\@xs {
      --offset: 7;
    }
    .offset-8\@xs {
      --offset: 8;
    }
    .offset-9\@xs {
      --offset: 9;
    }
    .offset-10\@xs {
      --offset: 10;
    }
    .offset-11\@xs {
      --offset: 11;
    }
    .offset-1\@xs, .offset-2\@xs, .offset-3\@xs, .offset-4\@xs, .offset-5\@xs, .offset-6\@xs, .offset-7\@xs, .offset-8\@xs, .offset-9\@xs, .offset-10\@xs, .offset-11\@xs {
      margin-left: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--offset) / var(--grid-columns) + (var(--offset) + var(--offset-modifier, 0)) * var(--sub-gap-x));
    }
    .offset-0\@xs {
      margin-left: 0;
    }
    @media not all and (min-resolution: 0.001dpcm) {
      @supports not (translate: none) {
        .offset-0\@xs {
          margin-left: var(--gap-x);
        }
      }
    }
  }
  @media (min-width: 48rem) {
    .gap-xxxxs\@sm {
      --gap-x: var(--space-xxxxs);
      --gap-y: var(--space-xxxxs);
    }
    .gap-xxxxs\@sm > * {
      --sub-gap-x: var(--space-xxxxs);
      --sub-gap-y: var(--space-xxxxs);
    }
    .gap-xxxs\@sm {
      --gap-x: var(--space-xxxs);
      --gap-y: var(--space-xxxs);
    }
    .gap-xxxs\@sm > * {
      --sub-gap-x: var(--space-xxxs);
      --sub-gap-y: var(--space-xxxs);
    }
    .gap-xxs\@sm {
      --gap-x: var(--space-xxs);
      --gap-y: var(--space-xxs);
    }
    .gap-xxs\@sm > * {
      --sub-gap-x: var(--space-xxs);
      --sub-gap-y: var(--space-xxs);
    }
    .gap-xs\@sm {
      --gap-x: var(--space-xs);
      --gap-y: var(--space-xs);
    }
    .gap-xs\@sm > * {
      --sub-gap-x: var(--space-xs);
      --sub-gap-y: var(--space-xs);
    }
    .gap-sm\@sm {
      --gap-x: var(--space-sm);
      --gap-y: var(--space-sm);
    }
    .gap-sm\@sm > * {
      --sub-gap-x: var(--space-sm);
      --sub-gap-y: var(--space-sm);
    }
    .gap-md\@sm {
      --gap-x: var(--space-md);
      --gap-y: var(--space-md);
    }
    .gap-md\@sm > * {
      --sub-gap-x: var(--space-md);
      --sub-gap-y: var(--space-md);
    }
    .gap-lg\@sm {
      --gap-x: var(--space-lg);
      --gap-y: var(--space-lg);
    }
    .gap-lg\@sm > * {
      --sub-gap-x: var(--space-lg);
      --sub-gap-y: var(--space-lg);
    }
    .gap-xl\@sm {
      --gap-x: var(--space-xl);
      --gap-y: var(--space-xl);
    }
    .gap-xl\@sm > * {
      --sub-gap-x: var(--space-xl);
      --sub-gap-y: var(--space-xl);
    }
    .gap-xxl\@sm {
      --gap-x: var(--space-xxl);
      --gap-y: var(--space-xxl);
    }
    .gap-xxl\@sm > * {
      --sub-gap-x: var(--space-xxl);
      --sub-gap-y: var(--space-xxl);
    }
    .gap-xxxl\@sm {
      --gap-x: var(--space-xxxl);
      --gap-y: var(--space-xxxl);
    }
    .gap-xxxl\@sm > * {
      --sub-gap-x: var(--space-xxxl);
      --sub-gap-y: var(--space-xxxl);
    }
    .gap-xxxxl\@sm {
      --gap-x: var(--space-xxxxl);
      --gap-y: var(--space-xxxxl);
    }
    .gap-xxxxl\@sm > * {
      --sub-gap-x: var(--space-xxxxl);
      --sub-gap-y: var(--space-xxxxl);
    }
    .gap-0\@sm {
      --gap-x: 0;
      --gap-y: 0;
    }
    .gap-0\@sm > * {
      --sub-gap-x: 0;
      --sub-gap-y: 0;
    }
    .gap-x-xxxxs\@sm {
      --gap-x: var(--space-xxxxs);
    }
    .gap-x-xxxxs\@sm > * {
      --sub-gap-x: var(--space-xxxxs);
    }
    .gap-x-xxxs\@sm {
      --gap-x: var(--space-xxxs);
    }
    .gap-x-xxxs\@sm > * {
      --sub-gap-x: var(--space-xxxs);
    }
    .gap-x-xxs\@sm {
      --gap-x: var(--space-xxs);
    }
    .gap-x-xxs\@sm > * {
      --sub-gap-x: var(--space-xxs);
    }
    .gap-x-xs\@sm {
      --gap-x: var(--space-xs);
    }
    .gap-x-xs\@sm > * {
      --sub-gap-x: var(--space-xs);
    }
    .gap-x-sm\@sm {
      --gap-x: var(--space-sm);
    }
    .gap-x-sm\@sm > * {
      --sub-gap-x: var(--space-sm);
    }
    .gap-x-md\@sm {
      --gap-x: var(--space-md);
    }
    .gap-x-md\@sm > * {
      --sub-gap-x: var(--space-md);
    }
    .gap-x-lg\@sm {
      --gap-x: var(--space-lg);
    }
    .gap-x-lg\@sm > * {
      --sub-gap-x: var(--space-lg);
    }
    .gap-x-xl\@sm {
      --gap-x: var(--space-xl);
    }
    .gap-x-xl\@sm > * {
      --sub-gap-x: var(--space-xl);
    }
    .gap-x-xxl\@sm {
      --gap-x: var(--space-xxl);
    }
    .gap-x-xxl\@sm > * {
      --sub-gap-x: var(--space-xxl);
    }
    .gap-x-xxxl\@sm {
      --gap-x: var(--space-xxxl);
    }
    .gap-x-xxxl\@sm > * {
      --sub-gap-x: var(--space-xxxl);
    }
    .gap-x-xxxxl\@sm {
      --gap-x: var(--space-xxxxl);
    }
    .gap-x-xxxxl\@sm > * {
      --sub-gap-x: var(--space-xxxxl);
    }
    .gap-x-0\@sm {
      --gap-x: 0;
    }
    .gap-x-0\@sm > * {
      --sub-gap-x: 0;
    }
    .gap-y-xxxxs\@sm {
      --gap-y: var(--space-xxxxs);
    }
    .gap-y-xxxxs\@sm > * {
      --sub-gap-y: var(--space-xxxxs);
    }
    .gap-y-xxxs\@sm {
      --gap-y: var(--space-xxxs);
    }
    .gap-y-xxxs\@sm > * {
      --sub-gap-y: var(--space-xxxs);
    }
    .gap-y-xxs\@sm {
      --gap-y: var(--space-xxs);
    }
    .gap-y-xxs\@sm > * {
      --sub-gap-y: var(--space-xxs);
    }
    .gap-y-xs\@sm {
      --gap-y: var(--space-xs);
    }
    .gap-y-xs\@sm > * {
      --sub-gap-y: var(--space-xs);
    }
    .gap-y-sm\@sm {
      --gap-y: var(--space-sm);
    }
    .gap-y-sm\@sm > * {
      --sub-gap-y: var(--space-sm);
    }
    .gap-y-md\@sm {
      --gap-y: var(--space-md);
    }
    .gap-y-md\@sm > * {
      --sub-gap-y: var(--space-md);
    }
    .gap-y-lg\@sm {
      --gap-y: var(--space-lg);
    }
    .gap-y-lg\@sm > * {
      --sub-gap-y: var(--space-lg);
    }
    .gap-y-xl\@sm {
      --gap-y: var(--space-xl);
    }
    .gap-y-xl\@sm > * {
      --sub-gap-y: var(--space-xl);
    }
    .gap-y-xxl\@sm {
      --gap-y: var(--space-xxl);
    }
    .gap-y-xxl\@sm > * {
      --sub-gap-y: var(--space-xxl);
    }
    .gap-y-xxxl\@sm {
      --gap-y: var(--space-xxxl);
    }
    .gap-y-xxxl\@sm > * {
      --sub-gap-y: var(--space-xxxl);
    }
    .gap-y-xxxxl\@sm {
      --gap-y: var(--space-xxxxl);
    }
    .gap-y-xxxxl\@sm > * {
      --sub-gap-y: var(--space-xxxxl);
    }
    .gap-y-0\@sm {
      --gap-y: 0;
    }
    .gap-y-0\@sm > * {
      --sub-gap-y: 0;
    }
    .grid-col-1\@sm {
      --grid-columns: 1;
    }
    .col-1\@sm {
      --span: 1;
    }
    .grid-col-2\@sm {
      --grid-columns: 2;
    }
    .col-2\@sm {
      --span: 2;
    }
    .grid-col-3\@sm {
      --grid-columns: 3;
    }
    .col-3\@sm {
      --span: 3;
    }
    .grid-col-4\@sm {
      --grid-columns: 4;
    }
    .col-4\@sm {
      --span: 4;
    }
    .grid-col-5\@sm {
      --grid-columns: 5;
    }
    .col-5\@sm {
      --span: 5;
    }
    .grid-col-6\@sm {
      --grid-columns: 6;
    }
    .col-6\@sm {
      --span: 6;
    }
    .grid-col-7\@sm {
      --grid-columns: 7;
    }
    .col-7\@sm {
      --span: 7;
    }
    .grid-col-8\@sm {
      --grid-columns: 8;
    }
    .col-8\@sm {
      --span: 8;
    }
    .grid-col-9\@sm {
      --grid-columns: 9;
    }
    .col-9\@sm {
      --span: 9;
    }
    .grid-col-10\@sm {
      --grid-columns: 10;
    }
    .col-10\@sm {
      --span: 10;
    }
    .grid-col-11\@sm {
      --grid-columns: 11;
    }
    .col-11\@sm {
      --span: 11;
    }
    .grid-col-12\@sm {
      --grid-columns: 12;
    }
    .col-12\@sm {
      --span: 12;
    }
    .col-1\@sm, .col-2\@sm, .col-3\@sm, .col-4\@sm, .col-5\@sm, .col-6\@sm, .col-7\@sm, .col-8\@sm, .col-9\@sm, .col-10\@sm, .col-11\@sm, .col-12\@sm {
      flex-basis: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));
      max-width: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));
    }
    .col\@sm {
      flex-grow: 1;
      flex-basis: 0;
      max-width: 100%;
    }
    .col-content\@sm {
      flex-grow: 0;
      flex-basis: initial;
      max-width: initial;
    }
    .offset-1\@sm {
      --offset: 1;
    }
    .offset-2\@sm {
      --offset: 2;
    }
    .offset-3\@sm {
      --offset: 3;
    }
    .offset-4\@sm {
      --offset: 4;
    }
    .offset-5\@sm {
      --offset: 5;
    }
    .offset-6\@sm {
      --offset: 6;
    }
    .offset-7\@sm {
      --offset: 7;
    }
    .offset-8\@sm {
      --offset: 8;
    }
    .offset-9\@sm {
      --offset: 9;
    }
    .offset-10\@sm {
      --offset: 10;
    }
    .offset-11\@sm {
      --offset: 11;
    }
    .offset-1\@sm, .offset-2\@sm, .offset-3\@sm, .offset-4\@sm, .offset-5\@sm, .offset-6\@sm, .offset-7\@sm, .offset-8\@sm, .offset-9\@sm, .offset-10\@sm, .offset-11\@sm {
      margin-left: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--offset) / var(--grid-columns) + (var(--offset) + var(--offset-modifier, 0)) * var(--sub-gap-x));
    }
    .offset-0\@sm {
      margin-left: 0;
    }
    @media not all and (min-resolution: 0.001dpcm) {
      @supports not (translate: none) {
        .offset-0\@sm {
          margin-left: var(--gap-x);
        }
      }
    }
  }
  @media (min-width: 64rem) {
    .gap-xxxxs\@md {
      --gap-x: var(--space-xxxxs);
      --gap-y: var(--space-xxxxs);
    }
    .gap-xxxxs\@md > * {
      --sub-gap-x: var(--space-xxxxs);
      --sub-gap-y: var(--space-xxxxs);
    }
    .gap-xxxs\@md {
      --gap-x: var(--space-xxxs);
      --gap-y: var(--space-xxxs);
    }
    .gap-xxxs\@md > * {
      --sub-gap-x: var(--space-xxxs);
      --sub-gap-y: var(--space-xxxs);
    }
    .gap-xxs\@md {
      --gap-x: var(--space-xxs);
      --gap-y: var(--space-xxs);
    }
    .gap-xxs\@md > * {
      --sub-gap-x: var(--space-xxs);
      --sub-gap-y: var(--space-xxs);
    }
    .gap-xs\@md {
      --gap-x: var(--space-xs);
      --gap-y: var(--space-xs);
    }
    .gap-xs\@md > * {
      --sub-gap-x: var(--space-xs);
      --sub-gap-y: var(--space-xs);
    }
    .gap-sm\@md {
      --gap-x: var(--space-sm);
      --gap-y: var(--space-sm);
    }
    .gap-sm\@md > * {
      --sub-gap-x: var(--space-sm);
      --sub-gap-y: var(--space-sm);
    }
    .gap-md\@md {
      --gap-x: var(--space-md);
      --gap-y: var(--space-md);
    }
    .gap-md\@md > * {
      --sub-gap-x: var(--space-md);
      --sub-gap-y: var(--space-md);
    }
    .gap-lg\@md {
      --gap-x: var(--space-lg);
      --gap-y: var(--space-lg);
    }
    .gap-lg\@md > * {
      --sub-gap-x: var(--space-lg);
      --sub-gap-y: var(--space-lg);
    }
    .gap-xl\@md {
      --gap-x: var(--space-xl);
      --gap-y: var(--space-xl);
    }
    .gap-xl\@md > * {
      --sub-gap-x: var(--space-xl);
      --sub-gap-y: var(--space-xl);
    }
    .gap-xxl\@md {
      --gap-x: var(--space-xxl);
      --gap-y: var(--space-xxl);
    }
    .gap-xxl\@md > * {
      --sub-gap-x: var(--space-xxl);
      --sub-gap-y: var(--space-xxl);
    }
    .gap-xxxl\@md {
      --gap-x: var(--space-xxxl);
      --gap-y: var(--space-xxxl);
    }
    .gap-xxxl\@md > * {
      --sub-gap-x: var(--space-xxxl);
      --sub-gap-y: var(--space-xxxl);
    }
    .gap-xxxxl\@md {
      --gap-x: var(--space-xxxxl);
      --gap-y: var(--space-xxxxl);
    }
    .gap-xxxxl\@md > * {
      --sub-gap-x: var(--space-xxxxl);
      --sub-gap-y: var(--space-xxxxl);
    }
    .gap-0\@md {
      --gap-x: 0;
      --gap-y: 0;
    }
    .gap-0\@md > * {
      --sub-gap-x: 0;
      --sub-gap-y: 0;
    }
    .gap-x-xxxxs\@md {
      --gap-x: var(--space-xxxxs);
    }
    .gap-x-xxxxs\@md > * {
      --sub-gap-x: var(--space-xxxxs);
    }
    .gap-x-xxxs\@md {
      --gap-x: var(--space-xxxs);
    }
    .gap-x-xxxs\@md > * {
      --sub-gap-x: var(--space-xxxs);
    }
    .gap-x-xxs\@md {
      --gap-x: var(--space-xxs);
    }
    .gap-x-xxs\@md > * {
      --sub-gap-x: var(--space-xxs);
    }
    .gap-x-xs\@md {
      --gap-x: var(--space-xs);
    }
    .gap-x-xs\@md > * {
      --sub-gap-x: var(--space-xs);
    }
    .gap-x-sm\@md {
      --gap-x: var(--space-sm);
    }
    .gap-x-sm\@md > * {
      --sub-gap-x: var(--space-sm);
    }
    .gap-x-md\@md {
      --gap-x: var(--space-md);
    }
    .gap-x-md\@md > * {
      --sub-gap-x: var(--space-md);
    }
    .gap-x-lg\@md {
      --gap-x: var(--space-lg);
    }
    .gap-x-lg\@md > * {
      --sub-gap-x: var(--space-lg);
    }
    .gap-x-xl\@md {
      --gap-x: var(--space-xl);
    }
    .gap-x-xl\@md > * {
      --sub-gap-x: var(--space-xl);
    }
    .gap-x-xxl\@md {
      --gap-x: var(--space-xxl);
    }
    .gap-x-xxl\@md > * {
      --sub-gap-x: var(--space-xxl);
    }
    .gap-x-xxxl\@md {
      --gap-x: var(--space-xxxl);
    }
    .gap-x-xxxl\@md > * {
      --sub-gap-x: var(--space-xxxl);
    }
    .gap-x-xxxxl\@md {
      --gap-x: var(--space-xxxxl);
    }
    .gap-x-xxxxl\@md > * {
      --sub-gap-x: var(--space-xxxxl);
    }
    .gap-x-0\@md {
      --gap-x: 0;
    }
    .gap-x-0\@md > * {
      --sub-gap-x: 0;
    }
    .gap-y-xxxxs\@md {
      --gap-y: var(--space-xxxxs);
    }
    .gap-y-xxxxs\@md > * {
      --sub-gap-y: var(--space-xxxxs);
    }
    .gap-y-xxxs\@md {
      --gap-y: var(--space-xxxs);
    }
    .gap-y-xxxs\@md > * {
      --sub-gap-y: var(--space-xxxs);
    }
    .gap-y-xxs\@md {
      --gap-y: var(--space-xxs);
    }
    .gap-y-xxs\@md > * {
      --sub-gap-y: var(--space-xxs);
    }
    .gap-y-xs\@md {
      --gap-y: var(--space-xs);
    }
    .gap-y-xs\@md > * {
      --sub-gap-y: var(--space-xs);
    }
    .gap-y-sm\@md {
      --gap-y: var(--space-sm);
    }
    .gap-y-sm\@md > * {
      --sub-gap-y: var(--space-sm);
    }
    .gap-y-md\@md {
      --gap-y: var(--space-md);
    }
    .gap-y-md\@md > * {
      --sub-gap-y: var(--space-md);
    }
    .gap-y-lg\@md {
      --gap-y: var(--space-lg);
    }
    .gap-y-lg\@md > * {
      --sub-gap-y: var(--space-lg);
    }
    .gap-y-xl\@md {
      --gap-y: var(--space-xl);
    }
    .gap-y-xl\@md > * {
      --sub-gap-y: var(--space-xl);
    }
    .gap-y-xxl\@md {
      --gap-y: var(--space-xxl);
    }
    .gap-y-xxl\@md > * {
      --sub-gap-y: var(--space-xxl);
    }
    .gap-y-xxxl\@md {
      --gap-y: var(--space-xxxl);
    }
    .gap-y-xxxl\@md > * {
      --sub-gap-y: var(--space-xxxl);
    }
    .gap-y-xxxxl\@md {
      --gap-y: var(--space-xxxxl);
    }
    .gap-y-xxxxl\@md > * {
      --sub-gap-y: var(--space-xxxxl);
    }
    .gap-y-0\@md {
      --gap-y: 0;
    }
    .gap-y-0\@md > * {
      --sub-gap-y: 0;
    }
    .grid-col-1\@md {
      --grid-columns: 1;
    }
    .col-1\@md {
      --span: 1;
    }
    .grid-col-2\@md {
      --grid-columns: 2;
    }
    .col-2\@md {
      --span: 2;
    }
    .grid-col-3\@md {
      --grid-columns: 3;
    }
    .col-3\@md {
      --span: 3;
    }
    .grid-col-4\@md {
      --grid-columns: 4;
    }
    .col-4\@md {
      --span: 4;
    }
    .grid-col-5\@md {
      --grid-columns: 5;
    }
    .col-5\@md {
      --span: 5;
    }
    .grid-col-6\@md {
      --grid-columns: 6;
    }
    .col-6\@md {
      --span: 6;
    }
    .grid-col-7\@md {
      --grid-columns: 7;
    }
    .col-7\@md {
      --span: 7;
    }
    .grid-col-8\@md {
      --grid-columns: 8;
    }
    .col-8\@md {
      --span: 8;
    }
    .grid-col-9\@md {
      --grid-columns: 9;
    }
    .col-9\@md {
      --span: 9;
    }
    .grid-col-10\@md {
      --grid-columns: 10;
    }
    .col-10\@md {
      --span: 10;
    }
    .grid-col-11\@md {
      --grid-columns: 11;
    }
    .col-11\@md {
      --span: 11;
    }
    .grid-col-12\@md {
      --grid-columns: 12;
    }
    .col-12\@md {
      --span: 12;
    }
    .col-1\@md, .col-2\@md, .col-3\@md, .col-4\@md, .col-5\@md, .col-6\@md, .col-7\@md, .col-8\@md, .col-9\@md, .col-10\@md, .col-11\@md, .col-12\@md {
      flex-basis: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));
      max-width: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));
    }
    .col\@md {
      flex-grow: 1;
      flex-basis: 0;
      max-width: 100%;
    }
    .col-content\@md {
      flex-grow: 0;
      flex-basis: initial;
      max-width: initial;
    }
    .offset-1\@md {
      --offset: 1;
    }
    .offset-2\@md {
      --offset: 2;
    }
    .offset-3\@md {
      --offset: 3;
    }
    .offset-4\@md {
      --offset: 4;
    }
    .offset-5\@md {
      --offset: 5;
    }
    .offset-6\@md {
      --offset: 6;
    }
    .offset-7\@md {
      --offset: 7;
    }
    .offset-8\@md {
      --offset: 8;
    }
    .offset-9\@md {
      --offset: 9;
    }
    .offset-10\@md {
      --offset: 10;
    }
    .offset-11\@md {
      --offset: 11;
    }
    .offset-1\@md, .offset-2\@md, .offset-3\@md, .offset-4\@md, .offset-5\@md, .offset-6\@md, .offset-7\@md, .offset-8\@md, .offset-9\@md, .offset-10\@md, .offset-11\@md {
      margin-left: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--offset) / var(--grid-columns) + (var(--offset) + var(--offset-modifier, 0)) * var(--sub-gap-x));
    }
    .offset-0\@md {
      margin-left: 0;
    }
    @media not all and (min-resolution: 0.001dpcm) {
      @supports not (translate: none) {
        .offset-0\@md {
          margin-left: var(--gap-x);
        }
      }
    }
  }
  @media (min-width: 80rem) {
    .gap-xxxxs\@lg {
      --gap-x: var(--space-xxxxs);
      --gap-y: var(--space-xxxxs);
    }
    .gap-xxxxs\@lg > * {
      --sub-gap-x: var(--space-xxxxs);
      --sub-gap-y: var(--space-xxxxs);
    }
    .gap-xxxs\@lg {
      --gap-x: var(--space-xxxs);
      --gap-y: var(--space-xxxs);
    }
    .gap-xxxs\@lg > * {
      --sub-gap-x: var(--space-xxxs);
      --sub-gap-y: var(--space-xxxs);
    }
    .gap-xxs\@lg {
      --gap-x: var(--space-xxs);
      --gap-y: var(--space-xxs);
    }
    .gap-xxs\@lg > * {
      --sub-gap-x: var(--space-xxs);
      --sub-gap-y: var(--space-xxs);
    }
    .gap-xs\@lg {
      --gap-x: var(--space-xs);
      --gap-y: var(--space-xs);
    }
    .gap-xs\@lg > * {
      --sub-gap-x: var(--space-xs);
      --sub-gap-y: var(--space-xs);
    }
    .gap-sm\@lg {
      --gap-x: var(--space-sm);
      --gap-y: var(--space-sm);
    }
    .gap-sm\@lg > * {
      --sub-gap-x: var(--space-sm);
      --sub-gap-y: var(--space-sm);
    }
    .gap-md\@lg {
      --gap-x: var(--space-md);
      --gap-y: var(--space-md);
    }
    .gap-md\@lg > * {
      --sub-gap-x: var(--space-md);
      --sub-gap-y: var(--space-md);
    }
    .gap-lg\@lg {
      --gap-x: var(--space-lg);
      --gap-y: var(--space-lg);
    }
    .gap-lg\@lg > * {
      --sub-gap-x: var(--space-lg);
      --sub-gap-y: var(--space-lg);
    }
    .gap-xl\@lg {
      --gap-x: var(--space-xl);
      --gap-y: var(--space-xl);
    }
    .gap-xl\@lg > * {
      --sub-gap-x: var(--space-xl);
      --sub-gap-y: var(--space-xl);
    }
    .gap-xxl\@lg {
      --gap-x: var(--space-xxl);
      --gap-y: var(--space-xxl);
    }
    .gap-xxl\@lg > * {
      --sub-gap-x: var(--space-xxl);
      --sub-gap-y: var(--space-xxl);
    }
    .gap-xxxl\@lg {
      --gap-x: var(--space-xxxl);
      --gap-y: var(--space-xxxl);
    }
    .gap-xxxl\@lg > * {
      --sub-gap-x: var(--space-xxxl);
      --sub-gap-y: var(--space-xxxl);
    }
    .gap-xxxxl\@lg {
      --gap-x: var(--space-xxxxl);
      --gap-y: var(--space-xxxxl);
    }
    .gap-xxxxl\@lg > * {
      --sub-gap-x: var(--space-xxxxl);
      --sub-gap-y: var(--space-xxxxl);
    }
    .gap-0\@lg {
      --gap-x: 0;
      --gap-y: 0;
    }
    .gap-0\@lg > * {
      --sub-gap-x: 0;
      --sub-gap-y: 0;
    }
    .gap-x-xxxxs\@lg {
      --gap-x: var(--space-xxxxs);
    }
    .gap-x-xxxxs\@lg > * {
      --sub-gap-x: var(--space-xxxxs);
    }
    .gap-x-xxxs\@lg {
      --gap-x: var(--space-xxxs);
    }
    .gap-x-xxxs\@lg > * {
      --sub-gap-x: var(--space-xxxs);
    }
    .gap-x-xxs\@lg {
      --gap-x: var(--space-xxs);
    }
    .gap-x-xxs\@lg > * {
      --sub-gap-x: var(--space-xxs);
    }
    .gap-x-xs\@lg {
      --gap-x: var(--space-xs);
    }
    .gap-x-xs\@lg > * {
      --sub-gap-x: var(--space-xs);
    }
    .gap-x-sm\@lg {
      --gap-x: var(--space-sm);
    }
    .gap-x-sm\@lg > * {
      --sub-gap-x: var(--space-sm);
    }
    .gap-x-md\@lg {
      --gap-x: var(--space-md);
    }
    .gap-x-md\@lg > * {
      --sub-gap-x: var(--space-md);
    }
    .gap-x-lg\@lg {
      --gap-x: var(--space-lg);
    }
    .gap-x-lg\@lg > * {
      --sub-gap-x: var(--space-lg);
    }
    .gap-x-xl\@lg {
      --gap-x: var(--space-xl);
    }
    .gap-x-xl\@lg > * {
      --sub-gap-x: var(--space-xl);
    }
    .gap-x-xxl\@lg {
      --gap-x: var(--space-xxl);
    }
    .gap-x-xxl\@lg > * {
      --sub-gap-x: var(--space-xxl);
    }
    .gap-x-xxxl\@lg {
      --gap-x: var(--space-xxxl);
    }
    .gap-x-xxxl\@lg > * {
      --sub-gap-x: var(--space-xxxl);
    }
    .gap-x-xxxxl\@lg {
      --gap-x: var(--space-xxxxl);
    }
    .gap-x-xxxxl\@lg > * {
      --sub-gap-x: var(--space-xxxxl);
    }
    .gap-x-0\@lg {
      --gap-x: 0;
    }
    .gap-x-0\@lg > * {
      --sub-gap-x: 0;
    }
    .gap-y-xxxxs\@lg {
      --gap-y: var(--space-xxxxs);
    }
    .gap-y-xxxxs\@lg > * {
      --sub-gap-y: var(--space-xxxxs);
    }
    .gap-y-xxxs\@lg {
      --gap-y: var(--space-xxxs);
    }
    .gap-y-xxxs\@lg > * {
      --sub-gap-y: var(--space-xxxs);
    }
    .gap-y-xxs\@lg {
      --gap-y: var(--space-xxs);
    }
    .gap-y-xxs\@lg > * {
      --sub-gap-y: var(--space-xxs);
    }
    .gap-y-xs\@lg {
      --gap-y: var(--space-xs);
    }
    .gap-y-xs\@lg > * {
      --sub-gap-y: var(--space-xs);
    }
    .gap-y-sm\@lg {
      --gap-y: var(--space-sm);
    }
    .gap-y-sm\@lg > * {
      --sub-gap-y: var(--space-sm);
    }
    .gap-y-md\@lg {
      --gap-y: var(--space-md);
    }
    .gap-y-md\@lg > * {
      --sub-gap-y: var(--space-md);
    }
    .gap-y-lg\@lg {
      --gap-y: var(--space-lg);
    }
    .gap-y-lg\@lg > * {
      --sub-gap-y: var(--space-lg);
    }
    .gap-y-xl\@lg {
      --gap-y: var(--space-xl);
    }
    .gap-y-xl\@lg > * {
      --sub-gap-y: var(--space-xl);
    }
    .gap-y-xxl\@lg {
      --gap-y: var(--space-xxl);
    }
    .gap-y-xxl\@lg > * {
      --sub-gap-y: var(--space-xxl);
    }
    .gap-y-xxxl\@lg {
      --gap-y: var(--space-xxxl);
    }
    .gap-y-xxxl\@lg > * {
      --sub-gap-y: var(--space-xxxl);
    }
    .gap-y-xxxxl\@lg {
      --gap-y: var(--space-xxxxl);
    }
    .gap-y-xxxxl\@lg > * {
      --sub-gap-y: var(--space-xxxxl);
    }
    .gap-y-0\@lg {
      --gap-y: 0;
    }
    .gap-y-0\@lg > * {
      --sub-gap-y: 0;
    }
    .grid-col-1\@lg {
      --grid-columns: 1;
    }
    .col-1\@lg {
      --span: 1;
    }
    .grid-col-2\@lg {
      --grid-columns: 2;
    }
    .col-2\@lg {
      --span: 2;
    }
    .grid-col-3\@lg {
      --grid-columns: 3;
    }
    .col-3\@lg {
      --span: 3;
    }
    .grid-col-4\@lg {
      --grid-columns: 4;
    }
    .col-4\@lg {
      --span: 4;
    }
    .grid-col-5\@lg {
      --grid-columns: 5;
    }
    .col-5\@lg {
      --span: 5;
    }
    .grid-col-6\@lg {
      --grid-columns: 6;
    }
    .col-6\@lg {
      --span: 6;
    }
    .grid-col-7\@lg {
      --grid-columns: 7;
    }
    .col-7\@lg {
      --span: 7;
    }
    .grid-col-8\@lg {
      --grid-columns: 8;
    }
    .col-8\@lg {
      --span: 8;
    }
    .grid-col-9\@lg {
      --grid-columns: 9;
    }
    .col-9\@lg {
      --span: 9;
    }
    .grid-col-10\@lg {
      --grid-columns: 10;
    }
    .col-10\@lg {
      --span: 10;
    }
    .grid-col-11\@lg {
      --grid-columns: 11;
    }
    .col-11\@lg {
      --span: 11;
    }
    .grid-col-12\@lg {
      --grid-columns: 12;
    }
    .col-12\@lg {
      --span: 12;
    }
    .col-1\@lg, .col-2\@lg, .col-3\@lg, .col-4\@lg, .col-5\@lg, .col-6\@lg, .col-7\@lg, .col-8\@lg, .col-9\@lg, .col-10\@lg, .col-11\@lg, .col-12\@lg {
      flex-basis: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));
      max-width: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));
    }
    .col\@lg {
      flex-grow: 1;
      flex-basis: 0;
      max-width: 100%;
    }
    .col-content\@lg {
      flex-grow: 0;
      flex-basis: initial;
      max-width: initial;
    }
    .offset-1\@lg {
      --offset: 1;
    }
    .offset-2\@lg {
      --offset: 2;
    }
    .offset-3\@lg {
      --offset: 3;
    }
    .offset-4\@lg {
      --offset: 4;
    }
    .offset-5\@lg {
      --offset: 5;
    }
    .offset-6\@lg {
      --offset: 6;
    }
    .offset-7\@lg {
      --offset: 7;
    }
    .offset-8\@lg {
      --offset: 8;
    }
    .offset-9\@lg {
      --offset: 9;
    }
    .offset-10\@lg {
      --offset: 10;
    }
    .offset-11\@lg {
      --offset: 11;
    }
    .offset-1\@lg, .offset-2\@lg, .offset-3\@lg, .offset-4\@lg, .offset-5\@lg, .offset-6\@lg, .offset-7\@lg, .offset-8\@lg, .offset-9\@lg, .offset-10\@lg, .offset-11\@lg {
      margin-left: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--offset) / var(--grid-columns) + (var(--offset) + var(--offset-modifier, 0)) * var(--sub-gap-x));
    }
    .offset-0\@lg {
      margin-left: 0;
    }
    @media not all and (min-resolution: 0.001dpcm) {
      @supports not (translate: none) {
        .offset-0\@lg {
          margin-left: var(--gap-x);
        }
      }
    }
  }
  @media (min-width: 90rem) {
    .gap-xxxxs\@xl {
      --gap-x: var(--space-xxxxs);
      --gap-y: var(--space-xxxxs);
    }
    .gap-xxxxs\@xl > * {
      --sub-gap-x: var(--space-xxxxs);
      --sub-gap-y: var(--space-xxxxs);
    }
    .gap-xxxs\@xl {
      --gap-x: var(--space-xxxs);
      --gap-y: var(--space-xxxs);
    }
    .gap-xxxs\@xl > * {
      --sub-gap-x: var(--space-xxxs);
      --sub-gap-y: var(--space-xxxs);
    }
    .gap-xxs\@xl {
      --gap-x: var(--space-xxs);
      --gap-y: var(--space-xxs);
    }
    .gap-xxs\@xl > * {
      --sub-gap-x: var(--space-xxs);
      --sub-gap-y: var(--space-xxs);
    }
    .gap-xs\@xl {
      --gap-x: var(--space-xs);
      --gap-y: var(--space-xs);
    }
    .gap-xs\@xl > * {
      --sub-gap-x: var(--space-xs);
      --sub-gap-y: var(--space-xs);
    }
    .gap-sm\@xl {
      --gap-x: var(--space-sm);
      --gap-y: var(--space-sm);
    }
    .gap-sm\@xl > * {
      --sub-gap-x: var(--space-sm);
      --sub-gap-y: var(--space-sm);
    }
    .gap-md\@xl {
      --gap-x: var(--space-md);
      --gap-y: var(--space-md);
    }
    .gap-md\@xl > * {
      --sub-gap-x: var(--space-md);
      --sub-gap-y: var(--space-md);
    }
    .gap-lg\@xl {
      --gap-x: var(--space-lg);
      --gap-y: var(--space-lg);
    }
    .gap-lg\@xl > * {
      --sub-gap-x: var(--space-lg);
      --sub-gap-y: var(--space-lg);
    }
    .gap-xl\@xl {
      --gap-x: var(--space-xl);
      --gap-y: var(--space-xl);
    }
    .gap-xl\@xl > * {
      --sub-gap-x: var(--space-xl);
      --sub-gap-y: var(--space-xl);
    }
    .gap-xxl\@xl {
      --gap-x: var(--space-xxl);
      --gap-y: var(--space-xxl);
    }
    .gap-xxl\@xl > * {
      --sub-gap-x: var(--space-xxl);
      --sub-gap-y: var(--space-xxl);
    }
    .gap-xxxl\@xl {
      --gap-x: var(--space-xxxl);
      --gap-y: var(--space-xxxl);
    }
    .gap-xxxl\@xl > * {
      --sub-gap-x: var(--space-xxxl);
      --sub-gap-y: var(--space-xxxl);
    }
    .gap-xxxxl\@xl {
      --gap-x: var(--space-xxxxl);
      --gap-y: var(--space-xxxxl);
    }
    .gap-xxxxl\@xl > * {
      --sub-gap-x: var(--space-xxxxl);
      --sub-gap-y: var(--space-xxxxl);
    }
    .gap-0\@xl {
      --gap-x: 0;
      --gap-y: 0;
    }
    .gap-0\@xl > * {
      --sub-gap-x: 0;
      --sub-gap-y: 0;
    }
    .gap-x-xxxxs\@xl {
      --gap-x: var(--space-xxxxs);
    }
    .gap-x-xxxxs\@xl > * {
      --sub-gap-x: var(--space-xxxxs);
    }
    .gap-x-xxxs\@xl {
      --gap-x: var(--space-xxxs);
    }
    .gap-x-xxxs\@xl > * {
      --sub-gap-x: var(--space-xxxs);
    }
    .gap-x-xxs\@xl {
      --gap-x: var(--space-xxs);
    }
    .gap-x-xxs\@xl > * {
      --sub-gap-x: var(--space-xxs);
    }
    .gap-x-xs\@xl {
      --gap-x: var(--space-xs);
    }
    .gap-x-xs\@xl > * {
      --sub-gap-x: var(--space-xs);
    }
    .gap-x-sm\@xl {
      --gap-x: var(--space-sm);
    }
    .gap-x-sm\@xl > * {
      --sub-gap-x: var(--space-sm);
    }
    .gap-x-md\@xl {
      --gap-x: var(--space-md);
    }
    .gap-x-md\@xl > * {
      --sub-gap-x: var(--space-md);
    }
    .gap-x-lg\@xl {
      --gap-x: var(--space-lg);
    }
    .gap-x-lg\@xl > * {
      --sub-gap-x: var(--space-lg);
    }
    .gap-x-xl\@xl {
      --gap-x: var(--space-xl);
    }
    .gap-x-xl\@xl > * {
      --sub-gap-x: var(--space-xl);
    }
    .gap-x-xxl\@xl {
      --gap-x: var(--space-xxl);
    }
    .gap-x-xxl\@xl > * {
      --sub-gap-x: var(--space-xxl);
    }
    .gap-x-xxxl\@xl {
      --gap-x: var(--space-xxxl);
    }
    .gap-x-xxxl\@xl > * {
      --sub-gap-x: var(--space-xxxl);
    }
    .gap-x-xxxxl\@xl {
      --gap-x: var(--space-xxxxl);
    }
    .gap-x-xxxxl\@xl > * {
      --sub-gap-x: var(--space-xxxxl);
    }
    .gap-x-0\@xl {
      --gap-x: 0;
    }
    .gap-x-0\@xl > * {
      --sub-gap-x: 0;
    }
    .gap-y-xxxxs\@xl {
      --gap-y: var(--space-xxxxs);
    }
    .gap-y-xxxxs\@xl > * {
      --sub-gap-y: var(--space-xxxxs);
    }
    .gap-y-xxxs\@xl {
      --gap-y: var(--space-xxxs);
    }
    .gap-y-xxxs\@xl > * {
      --sub-gap-y: var(--space-xxxs);
    }
    .gap-y-xxs\@xl {
      --gap-y: var(--space-xxs);
    }
    .gap-y-xxs\@xl > * {
      --sub-gap-y: var(--space-xxs);
    }
    .gap-y-xs\@xl {
      --gap-y: var(--space-xs);
    }
    .gap-y-xs\@xl > * {
      --sub-gap-y: var(--space-xs);
    }
    .gap-y-sm\@xl {
      --gap-y: var(--space-sm);
    }
    .gap-y-sm\@xl > * {
      --sub-gap-y: var(--space-sm);
    }
    .gap-y-md\@xl {
      --gap-y: var(--space-md);
    }
    .gap-y-md\@xl > * {
      --sub-gap-y: var(--space-md);
    }
    .gap-y-lg\@xl {
      --gap-y: var(--space-lg);
    }
    .gap-y-lg\@xl > * {
      --sub-gap-y: var(--space-lg);
    }
    .gap-y-xl\@xl {
      --gap-y: var(--space-xl);
    }
    .gap-y-xl\@xl > * {
      --sub-gap-y: var(--space-xl);
    }
    .gap-y-xxl\@xl {
      --gap-y: var(--space-xxl);
    }
    .gap-y-xxl\@xl > * {
      --sub-gap-y: var(--space-xxl);
    }
    .gap-y-xxxl\@xl {
      --gap-y: var(--space-xxxl);
    }
    .gap-y-xxxl\@xl > * {
      --sub-gap-y: var(--space-xxxl);
    }
    .gap-y-xxxxl\@xl {
      --gap-y: var(--space-xxxxl);
    }
    .gap-y-xxxxl\@xl > * {
      --sub-gap-y: var(--space-xxxxl);
    }
    .gap-y-0\@xl {
      --gap-y: 0;
    }
    .gap-y-0\@xl > * {
      --sub-gap-y: 0;
    }
    .grid-col-1\@xl {
      --grid-columns: 1;
    }
    .col-1\@xl {
      --span: 1;
    }
    .grid-col-2\@xl {
      --grid-columns: 2;
    }
    .col-2\@xl {
      --span: 2;
    }
    .grid-col-3\@xl {
      --grid-columns: 3;
    }
    .col-3\@xl {
      --span: 3;
    }
    .grid-col-4\@xl {
      --grid-columns: 4;
    }
    .col-4\@xl {
      --span: 4;
    }
    .grid-col-5\@xl {
      --grid-columns: 5;
    }
    .col-5\@xl {
      --span: 5;
    }
    .grid-col-6\@xl {
      --grid-columns: 6;
    }
    .col-6\@xl {
      --span: 6;
    }
    .grid-col-7\@xl {
      --grid-columns: 7;
    }
    .col-7\@xl {
      --span: 7;
    }
    .grid-col-8\@xl {
      --grid-columns: 8;
    }
    .col-8\@xl {
      --span: 8;
    }
    .grid-col-9\@xl {
      --grid-columns: 9;
    }
    .col-9\@xl {
      --span: 9;
    }
    .grid-col-10\@xl {
      --grid-columns: 10;
    }
    .col-10\@xl {
      --span: 10;
    }
    .grid-col-11\@xl {
      --grid-columns: 11;
    }
    .col-11\@xl {
      --span: 11;
    }
    .grid-col-12\@xl {
      --grid-columns: 12;
    }
    .col-12\@xl {
      --span: 12;
    }
    .col-1\@xl, .col-2\@xl, .col-3\@xl, .col-4\@xl, .col-5\@xl, .col-6\@xl, .col-7\@xl, .col-8\@xl, .col-9\@xl, .col-10\@xl, .col-11\@xl, .col-12\@xl {
      flex-basis: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));
      max-width: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));
    }
    .col\@xl {
      flex-grow: 1;
      flex-basis: 0;
      max-width: 100%;
    }
    .col-content\@xl {
      flex-grow: 0;
      flex-basis: initial;
      max-width: initial;
    }
    .offset-1\@xl {
      --offset: 1;
    }
    .offset-2\@xl {
      --offset: 2;
    }
    .offset-3\@xl {
      --offset: 3;
    }
    .offset-4\@xl {
      --offset: 4;
    }
    .offset-5\@xl {
      --offset: 5;
    }
    .offset-6\@xl {
      --offset: 6;
    }
    .offset-7\@xl {
      --offset: 7;
    }
    .offset-8\@xl {
      --offset: 8;
    }
    .offset-9\@xl {
      --offset: 9;
    }
    .offset-10\@xl {
      --offset: 10;
    }
    .offset-11\@xl {
      --offset: 11;
    }
    .offset-1\@xl, .offset-2\@xl, .offset-3\@xl, .offset-4\@xl, .offset-5\@xl, .offset-6\@xl, .offset-7\@xl, .offset-8\@xl, .offset-9\@xl, .offset-10\@xl, .offset-11\@xl {
      margin-left: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--offset) / var(--grid-columns) + (var(--offset) + var(--offset-modifier, 0)) * var(--sub-gap-x));
    }
    .offset-0\@xl {
      margin-left: 0;
    }
    @media not all and (min-resolution: 0.001dpcm) {
      @supports not (translate: none) {
        .offset-0\@xl {
          margin-left: var(--gap-x);
        }
      }
    }
  }
  *, *::after, *::before {
    box-sizing: inherit;
  }
  
  * {
    font: inherit;
  }
  
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video, hr {
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  html {
    box-sizing: border-box;
  }
  
  body {
    background-color: var(--color-bg, white);
  }
  
  article, aside, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section, main, form legend {
    display: block;
  }
  
  ol, ul, menu {
    list-style: none;
  }
  
  blockquote, q {
    quotes: none;
  }
  
  button, input, textarea, select {
    margin: 0;
  }
  
  .btn, .form-control, .link, .reset {
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }
  
  select.form-control::-ms-expand {
    display: none;
  }
  
  textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
  }
  
  input::-ms-clear {
    display: none;
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  img, video, svg {
    max-width: 100%;
  }
  
  [data-theme] {
    background-color: var(--color-bg, hsl(0deg, 0%, 100%));
    color: var(--color-contrast-high, hsl(210deg, 7%, 21%));
  }
  
  :root {
    --space-unit: 1rem;
  }
  
  :root, * {
    --space-xxxxs: calc(0.125 * var(--space-unit));
    --space-xxxs: calc(0.25 * var(--space-unit));
    --space-xxs: calc(0.375 * var(--space-unit));
    --space-xs: calc(0.5 * var(--space-unit));
    --space-sm: calc(0.75 * var(--space-unit));
    --space-md: calc(1.25 * var(--space-unit));
    --space-lg: calc(2 * var(--space-unit));
    --space-xl: calc(3.25 * var(--space-unit));
    --space-xxl: calc(5.25 * var(--space-unit));
    --space-xxxl: calc(8.5 * var(--space-unit));
    --space-xxxxl: calc(13.75 * var(--space-unit));
    --component-padding: var(--space-md);
  }
  
  :root {
    --radius-sm: calc(var(--radius, 0.25em)/2);
    --radius-md: var(--radius, 0.25em);
    --radius-lg: calc(var(--radius, 0.25em)*2);
    --shadow-xs: 0 0.1px 0.3px rgba(0, 0, 0, 0.06),
                  0 1px 2px rgba(0, 0, 0, 0.12);
    --shadow-sm: 0 0.3px 0.4px rgba(0, 0, 0, 0.025),
                  0 0.9px 1.5px rgba(0, 0, 0, 0.05),
                  0 3.5px 6px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 0.9px 1.5px rgba(0, 0, 0, 0.03),
                  0 3.1px 5.5px rgba(0, 0, 0, 0.08),
                  0 14px 25px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 1.2px 1.9px -1px rgba(0, 0, 0, 0.014),
                  0 3.3px 5.3px -1px rgba(0, 0, 0, 0.038),
                  0 8.5px 12.7px -1px rgba(0, 0, 0, 0.085),
                  0 30px 42px -1px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 1.5px 2.1px -6px rgba(0, 0, 0, 0.012),
                  0 3.6px 5.2px -6px rgba(0, 0, 0, 0.035),
                  0 7.3px 10.6px -6px rgba(0, 0, 0, 0.07),
                  0 16.2px 21.9px -6px rgba(0, 0, 0, 0.117),
                  0 46px 60px -6px rgba(0, 0, 0, 0.2);
    --inner-glow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075);
    --inner-glow-top: inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075);
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  :root {
    --heading-line-height: 1.2;
    --body-line-height: 1.4;
  }
  
  body {
    font-size: var(--text-base-size, 1rem);
    font-family: var(--font-primary, sans-serif);
    color: var(--color-contrast-high, hsl(210deg, 7%, 21%));
    font-weight: var(--body-font-weight, normal);
  }
  
  h1, h2, h3, h4 {
    color: var(--color-contrast-higher, hsl(204deg, 28%, 7%));
    line-height: var(--heading-line-height, 1.2);
    font-weight: var(--heading-font-weight, 700);
  }
  
  h1 {
    font-size: var(--text-xxl, 2rem);
  }
  
  h2 {
    font-size: var(--text-xl, 1.75rem);
  }
  
  h3 {
    font-size: var(--text-lg, 1.375rem);
  }
  
  h4 {
    font-size: var(--text-md, 1.125rem);
  }
  
  small {
    font-size: var(--text-sm, 0.75rem);
  }
  
  a, .link {
    color: var(--color-tabnav-for-text);
    text-decoration: underline;
  }

  strong {
    font-weight: bold;
    color: var(--color-contrast-higher);
  }
  
  s {
    text-decoration: line-through;
  }
  
  u {
    text-decoration: underline;
  }
  
  .text-component h1, .text-component h2, .text-component h3, .text-component h4 {
    line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1));
    margin-bottom: calc(var(--space-unit) * 0.3125 * var(--text-space-y-multiplier, 1));
  }
  .text-component h2, .text-component h3, .text-component h4 {
    margin-top: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1));
  }
  .text-component p, .text-component blockquote, .text-component ul li, .text-component ol li {
    line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1));
  }
  .text-component ul, .text-component ol, .text-component p, .text-component blockquote, .text-component .text-component__block {
    margin-bottom: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1));
  }
  .text-component ul, .text-component ol {
    list-style-position: inside;
  }
  .text-component ul ul, .text-component ul ol, .text-component ol ul, .text-component ol ol {
    padding-left: 1em;
    margin-bottom: 0;
  }
  .text-component ul {
    list-style-type: disc;
  }
  .text-component ol {
    list-style-type: decimal;
  }
  .text-component img {
    display: block;
    margin: 0 auto;
  }
  .text-component figcaption {
    text-align: center;
    margin-top: calc(var(--space-unit) * 0.5);
  }
  .text-component em {
    font-style: italic;
  }
  .text-component hr {
    margin-top: calc(var(--space-unit) * 1.875 * var(--text-space-y-multiplier, 1));
    margin-bottom: calc(var(--space-unit) * 1.875 * var(--text-space-y-multiplier, 1));
    margin-left: auto;
    margin-right: auto;
  }
  .text-component > *:first-child {
    margin-top: 0;
  }
  .text-component > *:last-child {
    margin-bottom: 0;
  }
  
  .text-component__block--full-width {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  
  @media (min-width: 48rem) {
    .text-component__block--left,
  .text-component__block--right {
      width: 45%;
    }
    .text-component__block--left img,
  .text-component__block--right img {
      width: 100%;
    }
    .text-component__block--left {
      float: left;
      margin-right: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1));
    }
    .text-component__block--right {
      float: right;
      margin-left: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1));
    }
  }
  @media (min-width: 90rem) {
    .text-component__block--outset {
      width: calc(100% + 10.5 * var(--space-unit));
    }
    .text-component__block--outset img {
      width: 100%;
    }
    .text-component__block--outset:not(.text-component__block--right) {
      margin-left: calc(-5.25 * var(--space-unit));
    }
    .text-component__block--left, .text-component__block--right {
      width: 50%;
    }
    .text-component__block--right.text-component__block--outset {
      margin-right: calc(-5.25 * var(--space-unit));
    }
  }
  :root {
    --icon-xxxs: 8px;
    --icon-xxs: 12px;
    --icon-xs: 16px;
    --icon-sm: 24px;
    --icon-md: 32px;
    --icon-lg: 48px;
    --icon-xl: 64px;
    --icon-xxl: 96px;
    --icon-xxxl: 128px;
  }
  
  .icon {
    --size: 1em;
    height: var(--size);
    width: var(--size);
    display: inline-block;
    color: inherit;
    fill: currentColor;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial;
  }
  
  .icon--xxxs {
    --size: var(--icon-xxxs);
  }
  
  .icon--xxs {
    --size: var(--icon-xxs);
  }
  
  .icon--xs {
    --size: var(--icon-xs);
  }
  
  .icon--sm {
    --size: var(--icon-sm);
  }
  
  .icon--md {
    --size: var(--icon-md);
  }
  
  .icon--lg {
    --size: var(--icon-lg);
  }
  
  .icon--xl {
    --size: var(--icon-xl);
  }
  
  .icon--xxl {
    --size: var(--icon-xxl);
  }
  
  .icon--xxxl {
    --size: var(--icon-xxxl);
  }
  
  .icon--is-spinning {
    -webkit-animation: icon-spin 1s infinite linear;
            animation: icon-spin 1s infinite linear;
  }
  
  @-webkit-keyframes icon-spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes icon-spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .icon use {
    color: inherit;
    fill: currentColor;
  }
  
  .btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    font-size: var(--btn-font-size, 1em);
    padding-top: var(--btn-padding-y, 0.5em);
    padding-bottom: var(--btn-padding-y, 0.5em);
    padding-left: var(--btn-padding-x, 0.75em);
    padding-right: var(--btn-padding-x, 0.75em);
    border-radius: var(--btn-radius, 0.25em);
  }
  
  .btn--sm {
    font-size: var(--btn-font-size-sm, 0.8em);
  }
  
  .btn--md {
    font-size: var(--btn-font-size-md, 1.2em);
  }
  
  .btn--lg {
    font-size: var(--btn-font-size-lg, 1.4em);
  }
  
  .btn--icon {
    padding: var(--btn-padding-y, 0.5em);
  }
  
  .form-control {
    font-size: var(--form-control-font-size, 1em);
    padding-top: var(--form-control-padding-y, 0.5em);
    padding-bottom: var(--form-control-padding-y, 0.5em);
    padding-left: var(--form-control-padding-x, 0.75em);
    padding-right: var(--form-control-padding-x, 0.75em);
    border-radius: var(--form-control-radius, 0.25em);
  }
  
  .form-legend {
    color: var(--color-contrast-higher, hsl(204deg, 28%, 7%));
    line-height: var(--heading-line-height, 1.2);
    font-size: var(--text-md, 1.125rem);
    margin-bottom: var(--space-sm);
  }
  
  .form-label {
    display: inline-block;
    font-size: var(--text-sm, 0.75rem);
  }
  
  :root {
    --z-index-header: 3;
    --z-index-popover: 5;
    --z-index-fixed-element: 10;
    --z-index-overlay: 999;
  }
  
  :root {
    --display: block;
  }
  
  .is-visible {
    display: var(--display) !important;
  }
  
  .is-hidden {
    display: none !important;
  }
  
  html:not(.js) .no-js\:is-hidden {
    display: none !important;
  }
  
  @media print {
    .print\:is-hidden {
      display: none !important;
    }
  }
  .sr-only, .sr-only-focusable:not(:focus):not(:focus-within) {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    padding: 0;
    border: 0;
    white-space: nowrap;
  }
  
  .flex {
    display: flex;
  }
  
  .inline-flex {
    display: inline-flex;
  }
  
  .flex-wrap {
    flex-wrap: wrap;
  }
  
  .flex-nowrap {
    flex-wrap: nowrap;
  }
  
  .flex-column {
    flex-direction: column;
  }
  
  .flex-column-reverse {
    flex-direction: column-reverse;
  }
  
  .flex-row {
    flex-direction: row;
  }
  
  .flex-row-reverse {
    flex-direction: row-reverse;
  }
  
  .flex-center {
    justify-content: center;
    align-items: center;
  }
  
  .flex-grow {
    flex-grow: 1;
  }
  
  .flex-grow-0 {
    flex-grow: 0;
  }
  
  .flex-shrink {
    flex-shrink: 1;
  }
  
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  
  .flex-basis-0 {
    flex-basis: 0;
  }
  
  .justify-start {
    justify-content: flex-start;
  }
  
  .justify-end {
    justify-content: flex-end;
  }
  
  .justify-center {
    justify-content: center;
  }
  
  .justify-between {
    justify-content: space-between;
  }
  
  .items-center {
    align-items: center;
  }
  
  .items-start {
    align-items: flex-start;
  }
  
  .items-end {
    align-items: flex-end;
  }
  
  .items-baseline {
    align-items: baseline;
  }
  
  .order-1 {
    order: 1;
  }
  
  .order-2 {
    order: 2;
  }
  
  .order-3 {
    order: 3;
  }
  
  [class^=aspect-ratio], [class*=" aspect-ratio"] {
    --aspect-ratio: calc(16/9);
    position: relative;
    height: 0;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }
  [class^=aspect-ratio] > *, [class*=" aspect-ratio"] > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  [class^=aspect-ratio] > *:not(iframe), [class*=" aspect-ratio"] > *:not(iframe) {
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  .aspect-ratio-16\:9 {
    --aspect-ratio: calc(16/9);
  }
  
  .aspect-ratio-3\:2 {
    --aspect-ratio: calc(3/2);
  }
  
  .aspect-ratio-4\:3 {
    --aspect-ratio: calc(4/3);
  }
  
  .aspect-ratio-5\:4 {
    --aspect-ratio: calc(5/4);
  }
  
  .aspect-ratio-1\:1 {
    --aspect-ratio: calc(1/1);
  }
  
  .aspect-ratio-4\:5 {
    --aspect-ratio: calc(4/5);
  }
  
  .aspect-ratio-3\:4 {
    --aspect-ratio: calc(3/4);
  }
  
  .aspect-ratio-2\:3 {
    --aspect-ratio: calc(2/3);
  }
  
  .aspect-ratio-9\:16 {
    --aspect-ratio: calc(9/16);
  }
  
  .block {
    display: block;
  }
  
  .inline-block {
    display: inline-block;
  }
  
  .inline {
    display: inline;
  }
  
  .contents {
    display: contents;
  }
  
  .hide {
    display: none;
  }
  
  .space-unit-rem {
    --space-unit: 1rem;
  }
  
  .space-unit-em {
    --space-unit: 1em;
  }
  
  .space-unit-px {
    --space-unit: 16px;
  }
  
  .margin-xxxxs {
    margin: var(--space-xxxxs);
  }
  
  .margin-xxxs {
    margin: var(--space-xxxs);
  }
  
  .margin-xxs {
    margin: var(--space-xxs);
  }
  
  .margin-xs {
    margin: var(--space-xs);
  }
  
  .margin-sm {
    margin: var(--space-sm);
  }
  
  .margin-md {
    margin: var(--space-md);
  }
  
  .margin-lg {
    margin: var(--space-lg);
  }
  
  .margin-xl {
    margin: var(--space-xl);
  }
  
  .margin-xxl {
    margin: var(--space-xxl);
  }
  
  .margin-xxxl {
    margin: var(--space-xxxl);
  }
  
  .margin-xxxxl {
    margin: var(--space-xxxxl);
  }
  
  .margin-auto {
    margin: auto;
  }
  
  .margin-0 {
    margin: 0;
  }
  
  .margin-top-xxxxs {
    margin-top: var(--space-xxxxs);
  }
  
  .margin-top-xxxs {
    margin-top: var(--space-xxxs);
  }
  
  .margin-top-xxs {
    margin-top: var(--space-xxs);
  }
  
  .margin-top-xs {
    margin-top: var(--space-xs);
  }
  
  .margin-top-sm {
    margin-top: var(--space-sm);
  }
  
  .margin-top-md {
    margin-top: var(--space-md);
  }
  
  .margin-top-lg {
    margin-top: var(--space-lg);
  }
  
  .margin-top-xl {
    margin-top: var(--space-xl);
  }
  
  .margin-top-xxl {
    margin-top: var(--space-xxl);
  }
  
  .margin-top-xxxl {
    margin-top: var(--space-xxxl);
  }
  
  .margin-top-xxxxl {
    margin-top: var(--space-xxxxl);
  }
  
  .margin-top-auto {
    margin-top: auto;
  }
  
  .margin-top-0 {
    margin-top: 0;
  }
  
  .margin-bottom-xxxxs {
    margin-bottom: var(--space-xxxxs);
  }
  
  .margin-bottom-xxxs {
    margin-bottom: var(--space-xxxs);
  }
  
  .margin-bottom-xxs {
    margin-bottom: var(--space-xxs);
  }
  
  .margin-bottom-xs {
    margin-bottom: var(--space-xs);
  }
  
  .margin-bottom-sm {
    margin-bottom: var(--space-sm);
  }
  
  .margin-bottom-md {
    margin-bottom: var(--space-md);
  }
  
  .margin-bottom-lg {
    margin-bottom: var(--space-lg);
  }
  
  .margin-bottom-xl {
    margin-bottom: var(--space-xl);
  }
  
  .margin-bottom-xxl {
    margin-bottom: var(--space-xxl);
  }
  
  .margin-bottom-xxxl {
    margin-bottom: var(--space-xxxl);
  }
  
  .margin-bottom-xxxxl {
    margin-bottom: var(--space-xxxxl);
  }
  
  .margin-bottom-auto {
    margin-bottom: auto;
  }
  
  .margin-bottom-0 {
    margin-bottom: 0;
  }
  
  .margin-right-xxxxs {
    margin-right: var(--space-xxxxs);
  }
  
  .margin-right-xxxs {
    margin-right: var(--space-xxxs);
  }
  
  .margin-right-xxs {
    margin-right: var(--space-xxs);
  }
  
  .margin-right-xs {
    margin-right: var(--space-xs);
  }
  
  .margin-right-sm {
    margin-right: var(--space-sm);
  }
  
  .margin-right-md {
    margin-right: var(--space-md);
  }
  
  .margin-right-lg {
    margin-right: var(--space-lg);
  }
  
  .margin-right-xl {
    margin-right: var(--space-xl);
  }
  
  .margin-right-xxl {
    margin-right: var(--space-xxl);
  }
  
  .margin-right-xxxl {
    margin-right: var(--space-xxxl);
  }
  
  .margin-right-xxxxl {
    margin-right: var(--space-xxxxl);
  }
  
  .margin-right-auto {
    margin-right: auto;
  }
  
  .margin-right-0 {
    margin-right: 0;
  }
  
  .margin-left-xxxxs {
    margin-left: var(--space-xxxxs);
  }
  
  .margin-left-xxxs {
    margin-left: var(--space-xxxs);
  }
  
  .margin-left-xxs {
    margin-left: var(--space-xxs);
  }
  
  .margin-left-xs {
    margin-left: var(--space-xs);
  }
  
  .margin-left-sm {
    margin-left: var(--space-sm);
  }
  
  .margin-left-md {
    margin-left: var(--space-md);
  }
  
  .margin-left-lg {
    margin-left: var(--space-lg);
  }
  
  .margin-left-xl {
    margin-left: var(--space-xl);
  }
  
  .margin-left-xxl {
    margin-left: var(--space-xxl);
  }
  
  .margin-left-xxxl {
    margin-left: var(--space-xxxl);
  }
  
  .margin-left-xxxxl {
    margin-left: var(--space-xxxxl);
  }
  
  .margin-left-auto {
    margin-left: auto;
  }
  
  .margin-left-0 {
    margin-left: 0;
  }
  
  .margin-x-xxxxs {
    margin-left: var(--space-xxxxs);
    margin-right: var(--space-xxxxs);
  }
  
  .margin-x-xxxs {
    margin-left: var(--space-xxxs);
    margin-right: var(--space-xxxs);
  }
  
  .margin-x-xxs {
    margin-left: var(--space-xxs);
    margin-right: var(--space-xxs);
  }
  
  .margin-x-xs {
    margin-left: var(--space-xs);
    margin-right: var(--space-xs);
  }
  
  .margin-x-sm {
    margin-left: var(--space-sm);
    margin-right: var(--space-sm);
  }
  
  .margin-x-md {
    margin-left: var(--space-md);
    margin-right: var(--space-md);
  }
  
  .margin-x-lg {
    margin-left: var(--space-lg);
    margin-right: var(--space-lg);
  }
  
  .margin-x-xl {
    margin-left: var(--space-xl);
    margin-right: var(--space-xl);
  }
  
  .margin-x-xxl {
    margin-left: var(--space-xxl);
    margin-right: var(--space-xxl);
  }
  
  .margin-x-xxxl {
    margin-left: var(--space-xxxl);
    margin-right: var(--space-xxxl);
  }
  
  .margin-x-xxxxl {
    margin-left: var(--space-xxxxl);
    margin-right: var(--space-xxxxl);
  }
  
  .margin-x-auto {
    margin-left: auto;
    margin-right: auto;
  }
  
  .margin-x-0 {
    margin-left: 0;
    margin-right: 0;
  }
  
  .margin-y-xxxxs {
    margin-top: var(--space-xxxxs);
    margin-bottom: var(--space-xxxxs);
  }
  
  .margin-y-xxxs {
    margin-top: var(--space-xxxs);
    margin-bottom: var(--space-xxxs);
  }
  
  .margin-y-xxs {
    margin-top: var(--space-xxs);
    margin-bottom: var(--space-xxs);
  }
  
  .margin-y-xs {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs);
  }
  
  .margin-y-sm {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
  }
  
  .margin-y-md {
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
  }
  
  .margin-y-lg {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
  }
  
  .margin-y-xl {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
  }
  
  .margin-y-xxl {
    margin-top: var(--space-xxl);
    margin-bottom: var(--space-xxl);
  }
  
  .margin-y-xxxl {
    margin-top: var(--space-xxxl);
    margin-bottom: var(--space-xxxl);
  }
  
  .margin-y-xxxxl {
    margin-top: var(--space-xxxxl);
    margin-bottom: var(--space-xxxxl);
  }
  
  .margin-y-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  
  .margin-y-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  
  .padding-xxxxs {
    padding: var(--space-xxxxs);
  }
  
  .padding-xxxs {
    padding: var(--space-xxxs);
  }
  
  .padding-xxs {
    padding: var(--space-xxs);
  }
  
  .padding-xs {
    padding: var(--space-xs);
  }
  
  .padding-sm {
    padding: var(--space-sm);
  }
  
  .padding-md {
    padding: var(--space-md);
  }
  
  .padding-lg {
    padding: var(--space-lg);
  }
  
  .padding-xl {
    padding: var(--space-xl);
  }
  
  .padding-xxl {
    padding: var(--space-xxl);
  }
  
  .padding-xxxl {
    padding: var(--space-xxxl);
  }
  
  .padding-xxxxl {
    padding: var(--space-xxxxl);
  }
  
  .padding-0 {
    padding: 0;
  }
  
  .padding-component {
    padding: var(--component-padding);
  }
  
  .padding-top-xxxxs {
    padding-top: var(--space-xxxxs);
  }
  
  .padding-top-xxxs {
    padding-top: var(--space-xxxs);
  }
  
  .padding-top-xxs {
    padding-top: var(--space-xxs);
  }
  
  .padding-top-xs {
    padding-top: var(--space-xs);
  }
  
  .padding-top-sm {
    padding-top: var(--space-sm);
  }
  
  .padding-top-md {
    padding-top: var(--space-md);
  }
  
  .padding-top-lg {
    padding-top: var(--space-lg);
  }
  
  .padding-top-xl {
    padding-top: var(--space-xl);
  }
  
  .padding-top-xxl {
    padding-top: var(--space-xxl);
  }
  
  .padding-top-xxxl {
    padding-top: var(--space-xxxl);
  }
  
  .padding-top-xxxxl {
    padding-top: var(--space-xxxxl);
  }
  
  .padding-top-0 {
    padding-top: 0;
  }
  
  .padding-top-component {
    padding-top: var(--component-padding);
  }
  
  .padding-bottom-xxxxs {
    padding-bottom: var(--space-xxxxs);
  }
  
  .padding-bottom-xxxs {
    padding-bottom: var(--space-xxxs);
  }
  
  .padding-bottom-xxs {
    padding-bottom: var(--space-xxs);
  }
  
  .padding-bottom-xs {
    padding-bottom: var(--space-xs);
  }
  
  .padding-bottom-sm {
    padding-bottom: var(--space-sm);
  }
  
  .padding-bottom-md {
    padding-bottom: var(--space-md);
  }
  
  .padding-bottom-lg {
    padding-bottom: var(--space-lg);
  }
  
  .padding-bottom-xl {
    padding-bottom: var(--space-xl);
  }
  
  .padding-bottom-xxl {
    padding-bottom: var(--space-xxl);
  }
  
  .padding-bottom-xxxl {
    padding-bottom: var(--space-xxxl);
  }
  
  .padding-bottom-xxxxl {
    padding-bottom: var(--space-xxxxl);
  }
  
  .padding-bottom-0 {
    padding-bottom: 0;
  }
  
  .padding-bottom-component {
    padding-bottom: var(--component-padding);
  }
  
  .padding-right-xxxxs {
    padding-right: var(--space-xxxxs);
  }
  
  .padding-right-xxxs {
    padding-right: var(--space-xxxs);
  }
  
  .padding-right-xxs {
    padding-right: var(--space-xxs);
  }
  
  .padding-right-xs {
    padding-right: var(--space-xs);
  }
  
  .padding-right-sm {
    padding-right: var(--space-sm);
  }
  
  .padding-right-md {
    padding-right: var(--space-md);
  }
  
  .padding-right-lg {
    padding-right: var(--space-lg);
  }
  
  .padding-right-xl {
    padding-right: var(--space-xl);
  }
  
  .padding-right-xxl {
    padding-right: var(--space-xxl);
  }
  
  .padding-right-xxxl {
    padding-right: var(--space-xxxl);
  }
  
  .padding-right-xxxxl {
    padding-right: var(--space-xxxxl);
  }
  
  .padding-right-0 {
    padding-right: 0;
  }
  
  .padding-right-component {
    padding-right: var(--component-padding);
  }
  
  .padding-left-xxxxs {
    padding-left: var(--space-xxxxs);
  }
  
  .padding-left-xxxs {
    padding-left: var(--space-xxxs);
  }
  
  .padding-left-xxs {
    padding-left: var(--space-xxs);
  }
  
  .padding-left-xs {
    padding-left: var(--space-xs);
  }
  
  .padding-left-sm {
    padding-left: var(--space-sm);
  }
  
  .padding-left-md {
    padding-left: var(--space-md);
  }
  
  .padding-left-lg {
    padding-left: var(--space-lg);
  }
  
  .padding-left-xl {
    padding-left: var(--space-xl);
  }
  
  .padding-left-xxl {
    padding-left: var(--space-xxl);
  }
  
  .padding-left-xxxl {
    padding-left: var(--space-xxxl);
  }
  
  .padding-left-xxxxl {
    padding-left: var(--space-xxxxl);
  }
  
  .padding-left-0 {
    padding-left: 0;
  }
  
  .padding-left-component {
    padding-left: var(--component-padding);
  }
  
  .padding-x-xxxxs {
    padding-left: var(--space-xxxxs);
    padding-right: var(--space-xxxxs);
  }
  
  .padding-x-xxxs {
    padding-left: var(--space-xxxs);
    padding-right: var(--space-xxxs);
  }
  
  .padding-x-xxs {
    padding-left: var(--space-xxs);
    padding-right: var(--space-xxs);
  }
  
  .padding-x-xs {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
  }
  
  .padding-x-sm {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
  
  .padding-x-md {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
  
  .padding-x-lg {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
  
  .padding-x-xl {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
  }
  
  .padding-x-xxl {
    padding-left: var(--space-xxl);
    padding-right: var(--space-xxl);
  }
  
  .padding-x-xxxl {
    padding-left: var(--space-xxxl);
    padding-right: var(--space-xxxl);
  }
  
  .padding-x-xxxxl {
    padding-left: var(--space-xxxxl);
    padding-right: var(--space-xxxxl);
  }
  
  .padding-x-0 {
    padding-left: 0;
    padding-right: 0;
  }
  
  .padding-x-component {
    padding-left: var(--component-padding);
    padding-right: var(--component-padding);
  }
  
  .padding-y-xxxxs {
    padding-top: var(--space-xxxxs);
    padding-bottom: var(--space-xxxxs);
  }
  
  .padding-y-xxxs {
    padding-top: var(--space-xxxs);
    padding-bottom: var(--space-xxxs);
  }
  
  .padding-y-xxs {
    padding-top: var(--space-xxs);
    padding-bottom: var(--space-xxs);
  }
  
  .padding-y-xs {
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
  }
  
  .padding-y-sm {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
  }
  
  .padding-y-md {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
  }
  
  .padding-y-lg {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }
  
  .padding-y-xl {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
  
  .padding-y-xxl {
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-xxl);
  }
  
  .padding-y-xxxl {
    padding-top: var(--space-xxxl);
    padding-bottom: var(--space-xxxl);
  }
  
  .padding-y-xxxxl {
    padding-top: var(--space-xxxxl);
    padding-bottom: var(--space-xxxxl);
  }
  
  .padding-y-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  
  .padding-y-component {
    padding-top: var(--component-padding);
    padding-bottom: var(--component-padding);
  }
  
  .align-baseline {
    vertical-align: baseline;
  }
  
  .align-sub {
    vertical-align: sub;
  }
  
  .align-super {
    vertical-align: super;
  }
  
  .align-text-top {
    vertical-align: text-top;
  }
  
  .align-text-bottom {
    vertical-align: text-bottom;
  }
  
  .align-top {
    vertical-align: top;
  }
  
  .align-middle {
    vertical-align: middle;
  }
  
  .align-bottom {
    vertical-align: bottom;
  }
  
  .truncate, .text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .text-replace {
    overflow: hidden;
    color: transparent;
    text-indent: 100%;
    white-space: nowrap;
  }
  
  .break-word {
    overflow-wrap: break-word;
    min-width: 0;
  }
  
  .text-unit-rem, .text-unit-em, .text-unit-px {
    font-size: var(--text-unit);
  }
  
  .text-unit-rem {
    --text-unit: 1rem;
  }
  
  .text-unit-em {
    --text-unit: 1em;
  }
  
  .text-unit-px {
    --text-unit: 16px;
  }
  
  .text-xs {
    font-size: var(--text-xs, 0.6875rem);
  }
  
  .text-sm {
    font-size: var(--text-sm, 0.75rem);
  }
  
  .text-base {
    font-size: var(--text-unit, 1rem);
  }
  
  .text-md {
    font-size: var(--text-md, 1.125rem);
  }
  
  .text-lg {
    font-size: var(--text-lg, 1.375rem);
  }
  
  .text-xl {
    font-size: var(--text-xl, 1.75rem);
  }
  
  .text-xxl {
    font-size: var(--text-xxl, 2rem);
  }
  
  .text-xxxl {
    font-size: var(--text-xxxl, 2.5rem);
  }
  
  .text-xxxxl {
    font-size: var(--text-xxxxl, 3rem);
  }
  
  .text-uppercase {
    text-transform: uppercase;
  }
  
  .text-capitalize {
    text-transform: capitalize;
  }
  
  .letter-spacing-xs {
    letter-spacing: -0.1em;
  }
  
  .letter-spacing-sm {
    letter-spacing: -0.05em;
  }
  
  .letter-spacing-md {
    letter-spacing: 0.05em;
  }
  
  .letter-spacing-lg {
    letter-spacing: 0.1em;
  }
  
  .letter-spacing-xl {
    letter-spacing: 0.2em;
  }
  
  .font-light {
    font-weight: 300;
  }
  
  .font-normal {
    font-weight: 400;
  }
  
  .font-medium {
    font-weight: 500;
  }
  
  .font-semibold {
    font-weight: 600;
  }
  
  .font-bold, .text-bold {
    font-weight: 700;
  }
  
  .font-extrabold {
    font-weight: 800;
  }
  
  .font-black {
    font-weight: 900;
  }
  
  .font-italic {
    font-style: italic;
  }
  
  .font-smooth {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .font-primary {
    font-family: var(--font-primary);
  }
  
  .text-center {
    text-align: center;
  }
  
  .text-left {
    text-align: left;
  }
  
  .text-right {
    text-align: right;
  }
  
  .text-justify {
    text-align: justify;
  }
  
  .text-line-through {
    text-decoration: line-through;
  }
  
  .text-underline {
    text-decoration: underline;
  }
  
  .text-decoration-none {
    text-decoration: none;
  }
  
  .text-shadow-xs {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  }
  
  .text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  }
  
  .text-shadow-md {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  .text-shadow-lg {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.2);
  }
  
  .text-shadow-xl {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.2), 0 6px 24px rgba(0, 0, 0, 0.25);
  }
  
  .text-shadow-none {
    text-shadow: none;
  }
  
  .text-space-y-xxs {
    --text-space-y-multiplier: 0.25 !important;
  }
  
  .text-space-y-xs {
    --text-space-y-multiplier: 0.5 !important;
  }
  
  .text-space-y-sm {
    --text-space-y-multiplier: 0.75 !important;
  }
  
  .text-space-y-md {
    --text-space-y-multiplier: 1.25 !important;
  }
  
  .text-space-y-lg {
    --text-space-y-multiplier: 1.5 !important;
  }
  
  .text-space-y-xl {
    --text-space-y-multiplier: 1.75 !important;
  }
  
  .text-space-y-xxl {
    --text-space-y-multiplier: 2 !important;
  }
  
  .line-height-xs {
    --heading-line-height: 1;
    --body-line-height: 1.1;
  }
  .line-height-xs:not(.text-component) {
    line-height: 1.1;
  }
  
  .line-height-sm {
    --heading-line-height: 1.1;
    --body-line-height: 1.2;
  }
  .line-height-sm:not(.text-component) {
    line-height: 1.2;
  }
  
  .line-height-md {
    --heading-line-height: 1.15;
    --body-line-height: 1.4;
  }
  .line-height-md:not(.text-component) {
    line-height: 1.4;
  }
  
  .line-height-lg {
    --heading-line-height: 1.22;
    --body-line-height: 1.58;
  }
  .line-height-lg:not(.text-component) {
    line-height: 1.58;
  }
  
  .line-height-xl {
    --heading-line-height: 1.3;
    --body-line-height: 1.72;
  }
  .line-height-xl:not(.text-component) {
    line-height: 1.72;
  }
  
  .line-height-body {
    line-height: var(--body-line-height);
  }
  
  .line-height-heading {
    line-height: var(--heading-line-height);
  }
  
  .line-height-normal {
    line-height: normal !important;
  }
  
  .line-height-1 {
    line-height: 1 !important;
  }
  
  .ws-nowrap, .text-nowrap {
    white-space: nowrap;
  }
  
  .cursor-pointer {
    cursor: pointer;
  }
  
  .cursor-default {
    cursor: default;
  }
  
  .pointer-events-auto {
    pointer-events: auto;
  }
  
  .pointer-events-none {
    pointer-events: none;
  }
  
  .user-select-none {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  
  .user-select-all {
    -webkit-user-select: all;
       -moz-user-select: all;
        -ms-user-select: all;
            user-select: all;
  }
  
  [class^=color-], [class*=" color-"] {
    --color-o: 1;
  }
  
  .color-inherit {
    color: inherit;
  }
  
  .color-bg-darker {
    color: hsla(var(--color-bg-darker-h), var(--color-bg-darker-s), var(--color-bg-darker-l), var(--color-o, 1));
  }
  
  .color-bg-dark {
    color: hsla(var(--color-bg-dark-h), var(--color-bg-dark-s), var(--color-bg-dark-l), var(--color-o, 1));
  }
  
  .color-bg {
    color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), var(--color-o, 1));
  }
  
  .color-bg-light {
    color: hsla(var(--color-bg-light-h), var(--color-bg-light-s), var(--color-bg-light-l), var(--color-o, 1));
  }
  
  .color-bg-lighter {
    color: hsla(var(--color-bg-lighter-h), var(--color-bg-lighter-s), var(--color-bg-lighter-l), var(--color-o, 1));
  }
  
  .color-contrast-lower {
    color: hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--color-o, 1));
  }
  
  .color-contrast-low {
    color: hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--color-o, 1));
  }
  
  .color-contrast-medium {
    color: hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), var(--color-o, 1));
  }
  
  .color-contrast-high {
    color: hsla(var(--color-contrast-high-h), var(--color-contrast-high-s), var(--color-contrast-high-l), var(--color-o, 1));
  }
  
  .color-contrast-higher {
    color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--color-o, 1));
  }
  
  .color-primary-darker {
    color: hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), var(--color-o, 1));
  }
  
  .color-primary-dark {
    color: hsla(var(--color-primary-dark-h), var(--color-primary-dark-s), var(--color-primary-dark-l), var(--color-o, 1));
  }
  
  .color-primary {
    color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), var(--color-o, 1));
  }
  
  .color-primary-light {
    color: hsla(var(--color-primary-light-h), var(--color-primary-light-s), var(--color-primary-light-l), var(--color-o, 1));
  }
  
  .color-primary-lighter {
    color: hsla(var(--color-primary-lighter-h), var(--color-primary-lighter-s), var(--color-primary-lighter-l), var(--color-o, 1));
  }
  
  .color-accent-darker {
    color: hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), var(--color-o, 1));
  }
  
  .color-accent-dark {
    color: hsla(var(--color-accent-dark-h), var(--color-accent-dark-s), var(--color-accent-dark-l), var(--color-o, 1));
  }
  
  .color-accent {
    color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), var(--color-o, 1));
  }
  
  .color-accent-light {
    color: hsla(var(--color-accent-light-h), var(--color-accent-light-s), var(--color-accent-light-l), var(--color-o, 1));
  }
  
  .color-accent-lighter {
    color: hsla(var(--color-accent-lighter-h), var(--color-accent-lighter-s), var(--color-accent-lighter-l), var(--color-o, 1));
  }
  
  .color-success-darker {
    color: hsla(var(--color-success-darker-h), var(--color-success-darker-s), var(--color-success-darker-l), var(--color-o, 1));
  }
  
  .color-success-dark {
    color: hsla(var(--color-success-dark-h), var(--color-success-dark-s), var(--color-success-dark-l), var(--color-o, 1));
  }
  
  .color-success {
    color: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), var(--color-o, 1));
  }
  
  .color-success-light {
    color: hsla(var(--color-success-light-h), var(--color-success-light-s), var(--color-success-light-l), var(--color-o, 1));
  }
  
  .color-success-lighter {
    color: hsla(var(--color-success-lighter-h), var(--color-success-lighter-s), var(--color-success-lighter-l), var(--color-o, 1));
  }
  
  .color-warning-darker {
    color: hsla(var(--color-warning-darker-h), var(--color-warning-darker-s), var(--color-warning-darker-l), var(--color-o, 1));
  }
  
  .color-warning-dark {
    color: hsla(var(--color-warning-dark-h), var(--color-warning-dark-s), var(--color-warning-dark-l), var(--color-o, 1));
  }
  
  .color-warning {
    color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), var(--color-o, 1));
  }
  
  .color-warning-light {
    color: hsla(var(--color-warning-light-h), var(--color-warning-light-s), var(--color-warning-light-l), var(--color-o, 1));
  }
  
  .color-warning-lighter {
    color: hsla(var(--color-warning-lighter-h), var(--color-warning-lighter-s), var(--color-warning-lighter-l), var(--color-o, 1));
  }
  
  .color-error-darker {
    color: hsla(var(--color-error-darker-h), var(--color-error-darker-s), var(--color-error-darker-l), var(--color-o, 1));
  }
  
  .color-error-dark {
    color: hsla(var(--color-error-dark-h), var(--color-error-dark-s), var(--color-error-dark-l), var(--color-o, 1));
  }
  
  .color-error {
    color: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), var(--color-o, 1));
  }
  
  .color-error-light {
    color: hsla(var(--color-error-light-h), var(--color-error-light-s), var(--color-error-light-l), var(--color-o, 1));
  }
  
  .color-error-lighter {
    color: hsla(var(--color-error-lighter-h), var(--color-error-lighter-s), var(--color-error-lighter-l), var(--color-o, 1));
  }
  
  .color-white {
    color: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), var(--color-o, 1));
  }
  
  .color-black {
    color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), var(--color-o, 1));
  }
  
  .color-opacity-0 {
    --color-o: 0;
  }
  
  .color-opacity-5\% {
    --color-o: 0.05;
  }
  
  .color-opacity-10\% {
    --color-o: 0.1;
  }
  
  .color-opacity-15\% {
    --color-o: 0.15;
  }
  
  .color-opacity-20\% {
    --color-o: 0.2;
  }
  
  .color-opacity-25\% {
    --color-o: 0.25;
  }
  
  .color-opacity-30\% {
    --color-o: 0.3;
  }
  
  .color-opacity-40\% {
    --color-o: 0.4;
  }
  
  .color-opacity-50\% {
    --color-o: 0.5;
  }
  
  .color-opacity-60\% {
    --color-o: 0.6;
  }
  
  .color-opacity-70\% {
    --color-o: 0.7;
  }
  
  .color-opacity-75\% {
    --color-o: 0.75;
  }
  
  .color-opacity-80\% {
    --color-o: 0.8;
  }
  
  .color-opacity-85\% {
    --color-o: 0.85;
  }
  
  .color-opacity-90\% {
    --color-o: 0.9;
  }
  
  .color-opacity-95\% {
    --color-o: 0.95;
  }
  
  [class^=color-gradient], [class*=" color-gradient"] {
    color: transparent !important;
    -webkit-background-clip: text;
            background-clip: text;
  }
  
  .width-xxxxs {
    width: var(--size-xxxxs, 0.25rem);
  }
  
  .width-xxxs {
    width: var(--size-xxxs, 0.5rem);
  }
  
  .width-xxs {
    width: var(--size-xxs, 0.75rem);
  }
  
  .width-xs {
    width: var(--size-xs, 1rem);
  }
  
  .width-sm {
    width: var(--size-sm, 1.5rem);
  }
  
  .width-md {
    width: var(--size-md, 2rem);
  }
  
  .width-lg {
    width: var(--size-lg, 3rem);
  }
  
  .width-xl {
    width: var(--size-xl, 4rem);
  }
  
  .width-xxl {
    width: var(--size-xxl, 6rem);
  }
  
  .width-xxxl {
    width: var(--size-xxxl, 8rem);
  }
  
  .width-xxxxl {
    width: var(--size-xxxxl, 16rem);
  }
  
  .width-0 {
    width: 0;
  }
  
  .width-10\% {
    width: 10%;
  }
  
  .width-20\% {
    width: 20%;
  }
  
  .width-25\% {
    width: 25%;
  }
  
  .width-30\% {
    width: 30%;
  }
  
  .width-33\% {
    width: 33.3333333333%;
  }
  
  .width-40\% {
    width: 40%;
  }
  
  .width-50\% {
    width: 50%;
  }
  
  .width-60\% {
    width: 60%;
  }
  
  .width-66\% {
    width: 66.6666666667%;
  }
  
  .width-70\% {
    width: 70%;
  }
  
  .width-75\% {
    width: 75%;
  }
  
  .width-80\% {
    width: 80%;
  }
  
  .width-90\% {
    width: 90%;
  }
  
  .width-100\% {
    width: 100%;
  }
  
  .width-100vw {
    width: 100vw;
  }
  
  .width-auto {
    width: auto;
  }
  
  .width-inherit {
    width: inherit;
  }
  
  .height-xxxxs {
    height: var(--size-xxxxs, 0.25rem);
  }
  
  .height-xxxs {
    height: var(--size-xxxs, 0.5rem);
  }
  
  .height-xxs {
    height: var(--size-xxs, 0.75rem);
  }
  
  .height-xs {
    height: var(--size-xs, 1rem);
  }
  
  .height-sm {
    height: var(--size-sm, 1.5rem);
  }
  
  .height-md {
    height: var(--size-md, 2rem);
  }
  
  .height-lg {
    height: var(--size-lg, 3rem);
  }
  
  .height-xl {
    height: var(--size-xl, 4rem);
  }
  
  .height-xxl {
    height: var(--size-xxl, 6rem);
  }
  
  .height-xxxl {
    height: var(--size-xxxl, 8rem);
  }
  
  .height-xxxxl {
    height: var(--size-xxxxl, 16rem);
  }
  
  .height-0 {
    height: 0;
  }
  
  .height-10\% {
    height: 10%;
  }
  
  .height-20\% {
    height: 20%;
  }
  
  .height-25\% {
    height: 25%;
  }
  
  .height-30\% {
    height: 30%;
  }
  
  .height-33\% {
    height: 33.3333333333%;
  }
  
  .height-40\% {
    height: 40%;
  }
  
  .height-50\% {
    height: 50%;
  }
  
  .height-60\% {
    height: 60%;
  }
  
  .height-66\% {
    height: 66.6666666667%;
  }
  
  .height-70\% {
    height: 70%;
  }
  
  .height-75\% {
    height: 75%;
  }
  
  .height-80\% {
    height: 80%;
  }
  
  .height-90\% {
    height: 90%;
  }
  
  .height-100\% {
    height: 100%;
  }
  
  .height-100vh {
    height: 100vh;
  }
  
  .height-auto {
    height: auto;
  }
  
  .height-inherit {
    height: inherit;
  }
  
  .min-width-0 {
    min-width: 0;
  }
  
  .min-width-25\% {
    min-width: 25%;
  }
  
  .min-width-33\% {
    min-width: 33.3333333333%;
  }
  
  .min-width-50\% {
    min-width: 50%;
  }
  
  .min-width-66\% {
    min-width: 66.6666666667%;
  }
  
  .min-width-75\% {
    min-width: 75%;
  }
  
  .min-width-100\% {
    min-width: 100%;
  }
  
  .min-width-100vw {
    min-width: 100vw;
  }
  
  .min-height-100\% {
    min-height: 100%;
  }
  
  .min-height-100vh {
    min-height: 100vh;
  }
  
  :root {
    --max-width-xxxxs: 20rem;
    --max-width-xxxs: 26rem;
    --max-width-xxs: 32rem;
    --max-width-xs: 38rem;
    --max-width-sm: 48rem;
    --max-width-md: 64rem;
    --max-width-lg: 80rem;
    --max-width-xl: 90rem;
    --max-width-xxl: 100rem;
    --max-width-xxxl: 120rem;
    --max-width-xxxxl: 150rem;
  }
  
  .max-width-xxxxs {
    max-width: var(--max-width-xxxxs);
  }
  
  .max-width-xxxs {
    max-width: var(--max-width-xxxs);
  }
  
  .max-width-xxs {
    max-width: var(--max-width-xxs);
  }
  
  .max-width-xs {
    max-width: var(--max-width-xs);
  }
  
  .max-width-sm {
    max-width: var(--max-width-sm);
  }
  
  .max-width-md {
    max-width: var(--max-width-md);
  }
  
  .max-width-lg {
    max-width: var(--max-width-lg);
  }
  
  .max-width-xl {
    max-width: var(--max-width-xl);
  }
  
  .max-width-xxl {
    max-width: var(--max-width-xxl);
  }
  
  .max-width-xxxl {
    max-width: var(--max-width-xxxl);
  }
  
  .max-width-xxxxl {
    max-width: var(--max-width-xxxxl);
  }
  
  .max-width-100\% {
    max-width: 100%;
  }
  
  .max-width-none {
    max-width: none;
  }
  
  [class^=max-width-adaptive], [class*=" max-width-adaptive"] {
    max-width: 32rem;
  }
  
  @media (min-width: 48rem) {
    .max-width-adaptive-sm, .max-width-adaptive-md, .max-width-adaptive-lg, .max-width-adaptive-xl, .max-width-adaptive {
      max-width: 48rem;
    }
  }
  @media (min-width: 64rem) {
    .max-width-adaptive-md, .max-width-adaptive-lg, .max-width-adaptive-xl, .max-width-adaptive {
      max-width: 64rem;
    }
  }
  @media (min-width: 80rem) {
    .max-width-adaptive-lg, .max-width-adaptive-xl, .max-width-adaptive {
      max-width: 80rem;
    }
  }
  @media (min-width: 90rem) {
    .max-width-adaptive-xl {
      max-width: 90rem;
    }
  }
  .max-height-100\% {
    max-height: 100%;
  }
  
  .max-height-100vh {
    max-height: 100vh;
  }
  
  .shadow-xs {
    box-shadow: var(--shadow-xs);
  }
  
  .shadow-sm {
    box-shadow: var(--shadow-sm);
  }
  
  .shadow-md {
    box-shadow: var(--shadow-md);
  }
  
  .shadow-lg {
    box-shadow: var(--shadow-lg);
  }
  
  .shadow-xl {
    box-shadow: var(--shadow-xl);
  }
  
  .shadow-none {
    box-shadow: none;
  }
  
  :where(.inner-glow, .inner-glow-top) {
    position: relative;
  }
  :where(.inner-glow, .inner-glow-top)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
  }
  
  .inner-glow::after {
    box-shadow: var(--inner-glow);
  }
  
  .inner-glow-top::after {
    box-shadow: var(--inner-glow-top);
  }
  
  .position-relative {
    direction: ltr;
    position: relative;
  }
  
  .position-absolute {
    position: absolute;
  }
  
  .position-fixed {
    position: fixed;
  }
  
  .position-sticky {
    position: -webkit-sticky;
    position: sticky;
  }
  
  .inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  
  .top-0 {
    top: 0;
  }
  
  .top-50\% {
    top: 50%;
  }
  
  .top-xxxxs {
    top: var(--space-xxxxs);
  }
  
  .top-xxxs {
    top: var(--space-xxxs);
  }
  
  .top-xxs {
    top: var(--space-xxs);
  }
  
  .top-xs {
    top: var(--space-xs);
  }
  
  .top-sm {
    top: var(--space-sm);
  }
  
  .top-md {
    top: var(--space-md);
  }
  
  .top-lg {
    top: var(--space-lg);
  }
  
  .top-xl {
    top: var(--space-xl);
  }
  
  .top-xxl {
    top: var(--space-xxl);
  }
  
  .top-xxxl {
    top: var(--space-xxxl);
  }
  
  .top-xxxxl {
    top: var(--space-xxxxl);
  }
  
  .bottom-0 {
    bottom: 0;
  }
  
  .bottom-50\% {
    bottom: 50%;
  }
  
  .bottom-xxxxs {
    bottom: var(--space-xxxxs);
  }
  
  .bottom-xxxs {
    bottom: var(--space-xxxs);
  }
  
  .bottom-xxs {
    bottom: var(--space-xxs);
  }
  
  .bottom-xs {
    bottom: var(--space-xs);
  }
  
  .bottom-sm {
    bottom: var(--space-sm);
  }
  
  .bottom-md {
    bottom: var(--space-md);
  }
  
  .bottom-lg {
    bottom: var(--space-lg);
  }
  
  .bottom-xl {
    bottom: var(--space-xl);
  }
  
  .bottom-xxl {
    bottom: var(--space-xxl);
  }
  
  .bottom-xxxl {
    bottom: var(--space-xxxl);
  }
  
  .bottom-xxxxl {
    bottom: var(--space-xxxxl);
  }
  
  .right-0 {
    right: 0;
  }
  
  .right-50\% {
    right: 50%;
  }
  
  .right-xxxxs {
    right: var(--space-xxxxs);
  }
  
  .right-xxxs {
    right: var(--space-xxxs);
  }
  
  .right-xxs {
    right: var(--space-xxs);
  }
  
  .right-xs {
    right: var(--space-xs);
  }
  
  .right-sm {
    right: var(--space-sm);
  }
  
  .right-md {
    right: var(--space-md);
  }
  
  .right-lg {
    right: var(--space-lg);
  }
  
  .right-xl {
    right: var(--space-xl);
  }
  
  .right-xxl {
    right: var(--space-xxl);
  }
  
  .right-xxxl {
    right: var(--space-xxxl);
  }
  
  .right-xxxxl {
    right: var(--space-xxxxl);
  }
  
  .left-0 {
    left: 0;
  }
  
  .left-50\% {
    left: 50%;
  }
  
  .left-xxxxs {
    left: var(--space-xxxxs);
  }
  
  .left-xxxs {
    left: var(--space-xxxs);
  }
  
  .left-xxs {
    left: var(--space-xxs);
  }
  
  .left-xs {
    left: var(--space-xs);
  }
  
  .left-sm {
    left: var(--space-sm);
  }
  
  .left-md {
    left: var(--space-md);
  }
  
  .left-lg {
    left: var(--space-lg);
  }
  
  .left-xl {
    left: var(--space-xl);
  }
  
  .left-xxl {
    left: var(--space-xxl);
  }
  
  .left-xxxl {
    left: var(--space-xxxl);
  }
  
  .left-xxxxl {
    left: var(--space-xxxxl);
  }
  
  .z-index-header {
    z-index: var(--z-index-header);
  }
  
  .z-index-popover {
    z-index: var(--z-index-popover);
  }
  
  .z-index-fixed-element {
    z-index: var(--z-index-fixed-element);
  }
  
  .z-index-overlay {
    z-index: var(--z-index-overlay);
  }
  
  .z-index-1 {
    z-index: 1;
  }
  
  .z-index-2 {
    z-index: 2;
  }
  
  .z-index-3 {
    z-index: 3;
  }
  
  .overflow-hidden {
    overflow: hidden;
  }
  
  .overflow-auto {
    overflow: auto;
  }
  
  .momentum-scrolling {
    -webkit-overflow-scrolling: touch;
  }
  
  .overscroll-contain {
    -ms-scroll-chaining: none;
        overscroll-behavior: contain;
  }
  
  .scroll-smooth {
    scroll-behavior: smooth;
  }
  
  .scroll-padding-xxxxs {
    scroll-padding: var(--space-xxxxs);
  }
  
  .scroll-padding-xxxs {
    scroll-padding: var(--space-xxxs);
  }
  
  .scroll-padding-xxs {
    scroll-padding: var(--space-xxs);
  }
  
  .scroll-padding-xs {
    scroll-padding: var(--space-xs);
  }
  
  .scroll-padding-sm {
    scroll-padding: var(--space-sm);
  }
  
  .scroll-padding-md {
    scroll-padding: var(--space-md);
  }
  
  .scroll-padding-lg {
    scroll-padding: var(--space-lg);
  }
  
  .scroll-padding-xl {
    scroll-padding: var(--space-xl);
  }
  
  .scroll-padding-xxl {
    scroll-padding: var(--space-xxl);
  }
  
  .scroll-padding-xxxl {
    scroll-padding: var(--space-xxxl);
  }
  
  .scroll-padding-xxxxl {
    scroll-padding: var(--space-xxxxl);
  }
  
  .opacity-0 {
    opacity: 0;
  }
  
  .opacity-5\% {
    opacity: 0.05;
  }
  
  .opacity-10\% {
    opacity: 0.1;
  }
  
  .opacity-15\% {
    opacity: 0.15;
  }
  
  .opacity-20\% {
    opacity: 0.2;
  }
  
  .opacity-25\% {
    opacity: 0.25;
  }
  
  .opacity-30\% {
    opacity: 0.3;
  }
  
  .opacity-40\% {
    opacity: 0.4;
  }
  
  .opacity-50\% {
    opacity: 0.5;
  }
  
  .opacity-60\% {
    opacity: 0.6;
  }
  
  .opacity-70\% {
    opacity: 0.7;
  }
  
  .opacity-75\% {
    opacity: 0.75;
  }
  
  .opacity-80\% {
    opacity: 0.8;
  }
  
  .opacity-85\% {
    opacity: 0.85;
  }
  
  .opacity-90\% {
    opacity: 0.9;
  }
  
  .opacity-95\% {
    opacity: 0.95;
  }
  
  .float-left {
    float: left;
  }
  
  .float-right {
    float: right;
  }
  
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
  
  [class^=border-], [class*=" border-"] {
    --border-o: 1;
  }
  
  .border {
    border: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--border-o, 1));
  }
  
  .border-top {
    border-top: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--border-o, 1));
  }
  
  .border-bottom {
    border-bottom: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--border-o, 1));
  }
  
  .border-left {
    border-left: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--border-o, 1));
  }
  
  .border-right {
    border-right: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--border-o, 1));
  }
  
  .border-2 {
    --border-width: 2px;
  }
  
  .border-3 {
    --border-width: 3px;
  }
  
  .border-4 {
    --border-width: 4px;
  }
  
  .border-dotted {
    --border-style: dotted;
  }
  
  .border-dashed {
    --border-style: dashed;
  }
  
  .border-bg-darker {
    border-color: hsla(var(--color-bg-darker-h), var(--color-bg-darker-s), var(--color-bg-darker-l), var(--border-o, 1));
  }
  
  .border-bg-dark {
    border-color: hsla(var(--color-bg-dark-h), var(--color-bg-dark-s), var(--color-bg-dark-l), var(--border-o, 1));
  }
  
  .border-bg {
    border-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), var(--border-o, 1));
  }
  
  .border-bg-light {
    border-color: hsla(var(--color-bg-light-h), var(--color-bg-light-s), var(--color-bg-light-l), var(--border-o, 1));
  }
  
  .border-bg-lighter {
    border-color: hsla(var(--color-bg-lighter-h), var(--color-bg-lighter-s), var(--color-bg-lighter-l), var(--border-o, 1));
  }
  
  .border-contrast-lower {
    border-color: hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--border-o, 1));
  }
  
  .border-contrast-low {
    border-color: hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--border-o, 1));
  }
  
  .border-contrast-medium {
    border-color: hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), var(--border-o, 1));
  }
  
  .border-contrast-high {
    border-color: hsla(var(--color-contrast-high-h), var(--color-contrast-high-s), var(--color-contrast-high-l), var(--border-o, 1));
  }
  
  .border-contrast-higher {
    border-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--border-o, 1));
  }
  
  .border-primary-darker {
    border-color: hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), var(--border-o, 1));
  }
  
  .border-primary-dark {
    border-color: hsla(var(--color-primary-dark-h), var(--color-primary-dark-s), var(--color-primary-dark-l), var(--border-o, 1));
  }
  
  .border-primary {
    border-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), var(--border-o, 1));
  }
  
  .border-primary-light {
    border-color: hsla(var(--color-primary-light-h), var(--color-primary-light-s), var(--color-primary-light-l), var(--border-o, 1));
  }
  
  .border-primary-lighter {
    border-color: hsla(var(--color-primary-lighter-h), var(--color-primary-lighter-s), var(--color-primary-lighter-l), var(--border-o, 1));
  }
  
  .border-accent-darker {
    border-color: hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), var(--border-o, 1));
  }
  
  .border-accent-dark {
    border-color: hsla(var(--color-accent-dark-h), var(--color-accent-dark-s), var(--color-accent-dark-l), var(--border-o, 1));
  }
  
  .border-accent {
    border-color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), var(--border-o, 1));
  }
  
  .border-accent-light {
    border-color: hsla(var(--color-accent-light-h), var(--color-accent-light-s), var(--color-accent-light-l), var(--border-o, 1));
  }
  
  .border-accent-lighter {
    border-color: hsla(var(--color-accent-lighter-h), var(--color-accent-lighter-s), var(--color-accent-lighter-l), var(--border-o, 1));
  }
  
  .border-success-darker {
    border-color: hsla(var(--color-success-darker-h), var(--color-success-darker-s), var(--color-success-darker-l), var(--border-o, 1));
  }
  
  .border-success-dark {
    border-color: hsla(var(--color-success-dark-h), var(--color-success-dark-s), var(--color-success-dark-l), var(--border-o, 1));
  }
  
  .border-success {
    border-color: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), var(--border-o, 1));
  }
  
  .border-success-light {
    border-color: hsla(var(--color-success-light-h), var(--color-success-light-s), var(--color-success-light-l), var(--border-o, 1));
  }
  
  .border-success-lighter {
    border-color: hsla(var(--color-success-lighter-h), var(--color-success-lighter-s), var(--color-success-lighter-l), var(--border-o, 1));
  }
  
  .border-warning-darker {
    border-color: hsla(var(--color-warning-darker-h), var(--color-warning-darker-s), var(--color-warning-darker-l), var(--border-o, 1));
  }
  
  .border-warning-dark {
    border-color: hsla(var(--color-warning-dark-h), var(--color-warning-dark-s), var(--color-warning-dark-l), var(--border-o, 1));
  }
  
  .border-warning {
    border-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), var(--border-o, 1));
  }
  
  .border-warning-light {
    border-color: hsla(var(--color-warning-light-h), var(--color-warning-light-s), var(--color-warning-light-l), var(--border-o, 1));
  }
  
  .border-warning-lighter {
    border-color: hsla(var(--color-warning-lighter-h), var(--color-warning-lighter-s), var(--color-warning-lighter-l), var(--border-o, 1));
  }
  
  .border-error-darker {
    border-color: hsla(var(--color-error-darker-h), var(--color-error-darker-s), var(--color-error-darker-l), var(--border-o, 1));
  }
  
  .border-error-dark {
    border-color: hsla(var(--color-error-dark-h), var(--color-error-dark-s), var(--color-error-dark-l), var(--border-o, 1));
  }
  
  .border-error {
    border-color: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), var(--border-o, 1));
  }
  
  .border-error-light {
    border-color: hsla(var(--color-error-light-h), var(--color-error-light-s), var(--color-error-light-l), var(--border-o, 1));
  }
  
  .border-error-lighter {
    border-color: hsla(var(--color-error-lighter-h), var(--color-error-lighter-s), var(--color-error-lighter-l), var(--border-o, 1));
  }
  
  .border-white {
    border-color: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), var(--border-o, 1));
  }
  
  .border-black {
    border-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), var(--border-o, 1));
  }
  
  .border-opacity-0 {
    --border-o: 0;
  }
  
  .border-opacity-5\% {
    --border-o: 0.05;
  }
  
  .border-opacity-10\% {
    --border-o: 0.1;
  }
  
  .border-opacity-15\% {
    --border-o: 0.15;
  }
  
  .border-opacity-20\% {
    --border-o: 0.2;
  }
  
  .border-opacity-25\% {
    --border-o: 0.25;
  }
  
  .border-opacity-30\% {
    --border-o: 0.3;
  }
  
  .border-opacity-40\% {
    --border-o: 0.4;
  }
  
  .border-opacity-50\% {
    --border-o: 0.5;
  }
  
  .border-opacity-60\% {
    --border-o: 0.6;
  }
  
  .border-opacity-70\% {
    --border-o: 0.7;
  }
  
  .border-opacity-75\% {
    --border-o: 0.75;
  }
  
  .border-opacity-80\% {
    --border-o: 0.8;
  }
  
  .border-opacity-85\% {
    --border-o: 0.85;
  }
  
  .border-opacity-90\% {
    --border-o: 0.9;
  }
  
  .border-opacity-95\% {
    --border-o: 0.95;
  }
  
  .radius-sm {
    border-radius: var(--radius-sm);
  }
  
  .radius-md {
    border-radius: var(--radius-md);
  }
  
  .radius-lg {
    border-radius: var(--radius-lg);
  }
  
  .radius-50\% {
    border-radius: 50%;
  }
  
  .radius-full {
    border-radius: 50em;
  }
  
  .radius-0 {
    border-radius: 0;
  }
  
  .radius-inherit {
    border-radius: inherit;
  }
  
  .radius-top-left-0 {
    border-top-left-radius: 0;
  }
  
  .radius-top-right-0 {
    border-top-right-radius: 0;
  }
  
  .radius-bottom-right-0 {
    border-bottom-right-radius: 0;
  }
  
  .radius-bottom-left-0 {
    border-bottom-left-radius: 0;
  }
  
  .bg, [class^=bg-], [class*=" bg-"] {
    --bg-o: 1;
  }
  
  .bg-transparent {
    background-color: transparent;
  }
  
  .bg-inherit {
    background-color: inherit;
  }
  
  .bg-darker {
    background-color: hsla(var(--color-bg-darker-h), var(--color-bg-darker-s), var(--color-bg-darker-l), var(--bg-o));
  }
  
  .bg-dark {
    background-color: hsla(var(--color-bg-dark-h), var(--color-bg-dark-s), var(--color-bg-dark-l), var(--bg-o));
  }
  
  .bg {
    background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), var(--bg-o));
  }
  
  .bg-light {
    background-color: hsla(var(--color-bg-light-h), var(--color-bg-light-s), var(--color-bg-light-l), var(--bg-o));
  }
  
  .bg-lighter {
    background-color: hsla(var(--color-bg-lighter-h), var(--color-bg-lighter-s), var(--color-bg-lighter-l), var(--bg-o));
  }
  
  .bg-contrast-lower {
    background-color: hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--bg-o, 1));
  }
  
  .bg-contrast-low {
    background-color: hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--bg-o, 1));
  }
  
  .bg-contrast-medium {
    background-color: hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), var(--bg-o, 1));
  }
  
  .bg-contrast-high {
    background-color: hsla(var(--color-contrast-high-h), var(--color-contrast-high-s), var(--color-contrast-high-l), var(--bg-o, 1));
  }
  
  .bg-contrast-higher {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--bg-o, 1));
  }
  
  .bg-primary-darker {
    background-color: hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), var(--bg-o, 1));
  }
  
  .bg-primary-dark {
    background-color: hsla(var(--color-primary-dark-h), var(--color-primary-dark-s), var(--color-primary-dark-l), var(--bg-o, 1));
  }
  
  .bg-primary {
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), var(--bg-o, 1));
  }
  
  .bg-primary-light {
    background-color: hsla(var(--color-primary-light-h), var(--color-primary-light-s), var(--color-primary-light-l), var(--bg-o, 1));
  }
  
  .bg-primary-lighter {
    background-color: hsla(var(--color-primary-lighter-h), var(--color-primary-lighter-s), var(--color-primary-lighter-l), var(--bg-o, 1));
  }
  
  .bg-accent-darker {
    background-color: hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), var(--bg-o, 1));
  }
  
  .bg-accent-dark {
    background-color: hsla(var(--color-accent-dark-h), var(--color-accent-dark-s), var(--color-accent-dark-l), var(--bg-o, 1));
  }
  
  .bg-accent {
    background-color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), var(--bg-o, 1));
  }
  
  .bg-accent-light {
    background-color: hsla(var(--color-accent-light-h), var(--color-accent-light-s), var(--color-accent-light-l), var(--bg-o, 1));
  }
  
  .bg-accent-lighter {
    background-color: hsla(var(--color-accent-lighter-h), var(--color-accent-lighter-s), var(--color-accent-lighter-l), var(--bg-o, 1));
  }
  
  .bg-success-darker {
    background-color: hsla(var(--color-success-darker-h), var(--color-success-darker-s), var(--color-success-darker-l), var(--bg-o, 1));
  }
  
  .bg-success-dark {
    background-color: hsla(var(--color-success-dark-h), var(--color-success-dark-s), var(--color-success-dark-l), var(--bg-o, 1));
  }
  
  .bg-success {
    background-color: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), var(--bg-o, 1));
  }
  
  .bg-success-light {
    background-color: hsla(var(--color-success-light-h), var(--color-success-light-s), var(--color-success-light-l), var(--bg-o, 1));
  }
  
  .bg-success-lighter {
    background-color: hsla(var(--color-success-lighter-h), var(--color-success-lighter-s), var(--color-success-lighter-l), var(--bg-o, 1));
  }
  
  .bg-warning-darker {
    background-color: hsla(var(--color-warning-darker-h), var(--color-warning-darker-s), var(--color-warning-darker-l), var(--bg-o, 1));
  }
  
  .bg-warning-dark {
    background-color: hsla(var(--color-warning-dark-h), var(--color-warning-dark-s), var(--color-warning-dark-l), var(--bg-o, 1));
  }
  
  .bg-warning {
    background-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), var(--bg-o, 1));
  }
  
  .bg-warning-light {
    background-color: hsla(var(--color-warning-light-h), var(--color-warning-light-s), var(--color-warning-light-l), var(--bg-o, 1));
  }
  
  .bg-warning-lighter {
    background-color: hsla(var(--color-warning-lighter-h), var(--color-warning-lighter-s), var(--color-warning-lighter-l), var(--bg-o, 1));
  }
  
  .bg-error-darker {
    background-color: hsla(var(--color-error-darker-h), var(--color-error-darker-s), var(--color-error-darker-l), var(--bg-o, 1));
  }
  
  .bg-error-dark {
    background-color: hsla(var(--color-error-dark-h), var(--color-error-dark-s), var(--color-error-dark-l), var(--bg-o, 1));
  }
  
  .bg-error {
    background-color: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), var(--bg-o, 1));
  }
  
  .bg-error-light {
    background-color: hsla(var(--color-error-light-h), var(--color-error-light-s), var(--color-error-light-l), var(--bg-o, 1));
  }
  
  .bg-error-lighter {
    background-color: hsla(var(--color-error-lighter-h), var(--color-error-lighter-s), var(--color-error-lighter-l), var(--bg-o, 1));
  }
  
  .bg-white {
    background-color: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), var(--bg-o, 1));
  }
  
  .bg-black {
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), var(--bg-o, 1));
  }
  
  .bg-opacity-0 {
    --bg-o: 0;
  }
  
  .bg-opacity-5\% {
    --bg-o: 0.05;
  }
  
  .bg-opacity-10\% {
    --bg-o: 0.1;
  }
  
  .bg-opacity-15\% {
    --bg-o: 0.15;
  }
  
  .bg-opacity-20\% {
    --bg-o: 0.2;
  }
  
  .bg-opacity-25\% {
    --bg-o: 0.25;
  }
  
  .bg-opacity-30\% {
    --bg-o: 0.3;
  }
  
  .bg-opacity-40\% {
    --bg-o: 0.4;
  }
  
  .bg-opacity-50\% {
    --bg-o: 0.5;
  }
  
  .bg-opacity-60\% {
    --bg-o: 0.6;
  }
  
  .bg-opacity-70\% {
    --bg-o: 0.7;
  }
  
  .bg-opacity-75\% {
    --bg-o: 0.75;
  }
  
  .bg-opacity-80\% {
    --bg-o: 0.8;
  }
  
  .bg-opacity-85\% {
    --bg-o: 0.85;
  }
  
  .bg-opacity-90\% {
    --bg-o: 0.9;
  }
  
  .bg-opacity-95\% {
    --bg-o: 0.95;
  }
  
  .bg-center {
    background-position: center;
  }
  
  .bg-top {
    background-position: center top;
  }
  
  .bg-right {
    background-position: right center;
  }
  
  .bg-bottom {
    background-position: center bottom;
  }
  
  .bg-left {
    background-position: left center;
  }
  
  .bg-top-left {
    background-position: left top;
  }
  
  .bg-top-right {
    background-position: right top;
  }
  
  .bg-bottom-left {
    background-position: left bottom;
  }
  
  .bg-bottom-right {
    background-position: right bottom;
  }
  
  .bg-cover {
    background-size: cover;
  }
  
  .bg-no-repeat {
    background-repeat: no-repeat;
  }
  
  .backdrop-blur-10 {
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
  }
  
  .backdrop-blur-20 {
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
  }
  
  .isolate {
    isolation: isolate;
  }
  
  .blend-multiply {
    mix-blend-mode: multiply;
  }
  
  .blend-overlay {
    mix-blend-mode: overlay;
  }
  
  .blend-difference {
    mix-blend-mode: difference;
  }
  
  .object-contain {
    -o-object-fit: contain;
       object-fit: contain;
  }
  
  .object-cover {
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  .perspective-xs {
    perspective: 250px;
  }
  
  .perspective-sm {
    perspective: 500px;
  }
  
  .perspective-md {
    perspective: 1000px;
  }
  
  .perspective-lg {
    perspective: 1500px;
  }
  
  .perspective-xl {
    perspective: 3000px;
  }
  
  [class^=flip], [class*=" flip"],
  [class^=-rotate], [class*=" -rotate"],
  [class^=rotate], [class*=" rotate"],
  [class^=-translate], [class*=" -translate"],
  [class^=translate], [class*=" translate"],
  [class^=-scale], [class*=" -scale"],
  [class^=scale], [class*=" scale"],
  [class^=-skew], [class*=" -skew"] [class^=skew],
  [class*=" skew"] {
    --translate: 0;
    --rotate: 0;
    --skew: 0;
    --scale: 1;
    transform: translate3d(var(--translate-x, var(--translate)), var(--translate-y, var(--translate)), var(--translate-z, 0)) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) rotateZ(var(--rotate-z, var(--rotate))) skewX(var(--skew-x, var(--skew))) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, var(--scale))) scaleY(var(--scale-y, var(--scale)));
  }
  
  .flip {
    --scale: -1;
  }
  
  .flip-x {
    --scale-x: -1;
  }
  
  .flip-y {
    --scale-y: -1;
  }
  
  .rotate-90 {
    --rotate: 90deg;
  }
  
  .rotate-180 {
    --rotate: 180deg;
  }
  
  .rotate-270 {
    --rotate: 270deg;
  }
  
  .-translate-50\% {
    --translate: -50%;
  }
  
  .-translate-x-50\% {
    --translate-x: -50%;
  }
  
  .-translate-y-50\% {
    --translate-y: -50%;
  }
  
  .translate-50\% {
    --translate: 50%;
  }
  
  .translate-x-50\% {
    --translate-x: 50%;
  }
  
  .translate-y-50\% {
    --translate-y: 50%;
  }
  
  .origin-center {
    transform-origin: center;
  }
  
  .origin-top {
    transform-origin: center top;
  }
  
  .origin-right {
    transform-origin: right center;
  }
  
  .origin-bottom {
    transform-origin: center bottom;
  }
  
  .origin-left {
    transform-origin: left center;
  }
  
  .origin-top-left {
    transform-origin: left top;
  }
  
  .origin-top-right {
    transform-origin: right top;
  }
  
  .origin-bottom-left {
    transform-origin: left bottom;
  }
  
  .origin-bottom-right {
    transform-origin: right bottom;
  }
  
  .fill-current {
    fill: currentColor;
  }
  
  .stroke-current {
    stroke: currentColor;
  }
  
  .stroke-1 {
    stroke-width: 1px;
  }
  
  .stroke-2 {
    stroke-width: 2px;
  }
  
  .stroke-3 {
    stroke-width: 3px;
  }
  
  .stroke-4 {
    stroke-width: 4px;
  }
  
  .visible {
    visibility: visible;
  }
  
  .invisible {
    visibility: hidden;
  }
  
  @media (min-width: 32rem) {
    .flex\@xs {
      display: flex;
    }
    .inline-flex\@xs {
      display: inline-flex;
    }
    .flex-wrap\@xs {
      flex-wrap: wrap;
    }
    .flex-nowrap\@xs {
      flex-wrap: nowrap;
    }
    .flex-column\@xs {
      flex-direction: column;
    }
    .flex-column-reverse\@xs {
      flex-direction: column-reverse;
    }
    .flex-row\@xs {
      flex-direction: row;
    }
    .flex-row-reverse\@xs {
      flex-direction: row-reverse;
    }
    .flex-center\@xs {
      justify-content: center;
      align-items: center;
    }
    .flex-grow\@xs {
      flex-grow: 1;
    }
    .flex-grow-0\@xs {
      flex-grow: 0;
    }
    .flex-shrink\@xs {
      flex-shrink: 1;
    }
    .flex-shrink-0\@xs {
      flex-shrink: 0;
    }
    .flex-basis-0\@xs {
      flex-basis: 0;
    }
    .justify-start\@xs {
      justify-content: flex-start;
    }
    .justify-end\@xs {
      justify-content: flex-end;
    }
    .justify-center\@xs {
      justify-content: center;
    }
    .justify-between\@xs {
      justify-content: space-between;
    }
    .items-center\@xs {
      align-items: center;
    }
    .items-start\@xs {
      align-items: flex-start;
    }
    .items-end\@xs {
      align-items: flex-end;
    }
    .items-baseline\@xs {
      align-items: baseline;
    }
    .order-1\@xs {
      order: 1;
    }
    .order-2\@xs {
      order: 2;
    }
    .order-3\@xs {
      order: 3;
    }
    .block\@xs {
      display: block;
    }
    .inline-block\@xs {
      display: inline-block;
    }
    .inline\@xs {
      display: inline;
    }
    .contents\@xs {
      display: contents;
    }
    .hide\@xs {
      display: none !important;
    }
    .margin-xxxxs\@xs {
      margin: var(--space-xxxxs);
    }
    .margin-xxxs\@xs {
      margin: var(--space-xxxs);
    }
    .margin-xxs\@xs {
      margin: var(--space-xxs);
    }
    .margin-xs\@xs {
      margin: var(--space-xs);
    }
    .margin-sm\@xs {
      margin: var(--space-sm);
    }
    .margin-md\@xs {
      margin: var(--space-md);
    }
    .margin-lg\@xs {
      margin: var(--space-lg);
    }
    .margin-xl\@xs {
      margin: var(--space-xl);
    }
    .margin-xxl\@xs {
      margin: var(--space-xxl);
    }
    .margin-xxxl\@xs {
      margin: var(--space-xxxl);
    }
    .margin-xxxxl\@xs {
      margin: var(--space-xxxxl);
    }
    .margin-auto\@xs {
      margin: auto;
    }
    .margin-0\@xs {
      margin: 0;
    }
    .margin-top-xxxxs\@xs {
      margin-top: var(--space-xxxxs);
    }
    .margin-top-xxxs\@xs {
      margin-top: var(--space-xxxs);
    }
    .margin-top-xxs\@xs {
      margin-top: var(--space-xxs);
    }
    .margin-top-xs\@xs {
      margin-top: var(--space-xs);
    }
    .margin-top-sm\@xs {
      margin-top: var(--space-sm);
    }
    .margin-top-md\@xs {
      margin-top: var(--space-md);
    }
    .margin-top-lg\@xs {
      margin-top: var(--space-lg);
    }
    .margin-top-xl\@xs {
      margin-top: var(--space-xl);
    }
    .margin-top-xxl\@xs {
      margin-top: var(--space-xxl);
    }
    .margin-top-xxxl\@xs {
      margin-top: var(--space-xxxl);
    }
    .margin-top-xxxxl\@xs {
      margin-top: var(--space-xxxxl);
    }
    .margin-top-auto\@xs {
      margin-top: auto;
    }
    .margin-top-0\@xs {
      margin-top: 0;
    }
    .margin-bottom-xxxxs\@xs {
      margin-bottom: var(--space-xxxxs);
    }
    .margin-bottom-xxxs\@xs {
      margin-bottom: var(--space-xxxs);
    }
    .margin-bottom-xxs\@xs {
      margin-bottom: var(--space-xxs);
    }
    .margin-bottom-xs\@xs {
      margin-bottom: var(--space-xs);
    }
    .margin-bottom-sm\@xs {
      margin-bottom: var(--space-sm);
    }
    .margin-bottom-md\@xs {
      margin-bottom: var(--space-md);
    }
    .margin-bottom-lg\@xs {
      margin-bottom: var(--space-lg);
    }
    .margin-bottom-xl\@xs {
      margin-bottom: var(--space-xl);
    }
    .margin-bottom-xxl\@xs {
      margin-bottom: var(--space-xxl);
    }
    .margin-bottom-xxxl\@xs {
      margin-bottom: var(--space-xxxl);
    }
    .margin-bottom-xxxxl\@xs {
      margin-bottom: var(--space-xxxxl);
    }
    .margin-bottom-auto\@xs {
      margin-bottom: auto;
    }
    .margin-bottom-0\@xs {
      margin-bottom: 0;
    }
    .margin-right-xxxxs\@xs {
      margin-right: var(--space-xxxxs);
    }
    .margin-right-xxxs\@xs {
      margin-right: var(--space-xxxs);
    }
    .margin-right-xxs\@xs {
      margin-right: var(--space-xxs);
    }
    .margin-right-xs\@xs {
      margin-right: var(--space-xs);
    }
    .margin-right-sm\@xs {
      margin-right: var(--space-sm);
    }
    .margin-right-md\@xs {
      margin-right: var(--space-md);
    }
    .margin-right-lg\@xs {
      margin-right: var(--space-lg);
    }
    .margin-right-xl\@xs {
      margin-right: var(--space-xl);
    }
    .margin-right-xxl\@xs {
      margin-right: var(--space-xxl);
    }
    .margin-right-xxxl\@xs {
      margin-right: var(--space-xxxl);
    }
    .margin-right-xxxxl\@xs {
      margin-right: var(--space-xxxxl);
    }
    .margin-right-auto\@xs {
      margin-right: auto;
    }
    .margin-right-0\@xs {
      margin-right: 0;
    }
    .margin-left-xxxxs\@xs {
      margin-left: var(--space-xxxxs);
    }
    .margin-left-xxxs\@xs {
      margin-left: var(--space-xxxs);
    }
    .margin-left-xxs\@xs {
      margin-left: var(--space-xxs);
    }
    .margin-left-xs\@xs {
      margin-left: var(--space-xs);
    }
    .margin-left-sm\@xs {
      margin-left: var(--space-sm);
    }
    .margin-left-md\@xs {
      margin-left: var(--space-md);
    }
    .margin-left-lg\@xs {
      margin-left: var(--space-lg);
    }
    .margin-left-xl\@xs {
      margin-left: var(--space-xl);
    }
    .margin-left-xxl\@xs {
      margin-left: var(--space-xxl);
    }
    .margin-left-xxxl\@xs {
      margin-left: var(--space-xxxl);
    }
    .margin-left-xxxxl\@xs {
      margin-left: var(--space-xxxxl);
    }
    .margin-left-auto\@xs {
      margin-left: auto;
    }
    .margin-left-0\@xs {
      margin-left: 0;
    }
    .margin-x-xxxxs\@xs {
      margin-left: var(--space-xxxxs);
      margin-right: var(--space-xxxxs);
    }
    .margin-x-xxxs\@xs {
      margin-left: var(--space-xxxs);
      margin-right: var(--space-xxxs);
    }
    .margin-x-xxs\@xs {
      margin-left: var(--space-xxs);
      margin-right: var(--space-xxs);
    }
    .margin-x-xs\@xs {
      margin-left: var(--space-xs);
      margin-right: var(--space-xs);
    }
    .margin-x-sm\@xs {
      margin-left: var(--space-sm);
      margin-right: var(--space-sm);
    }
    .margin-x-md\@xs {
      margin-left: var(--space-md);
      margin-right: var(--space-md);
    }
    .margin-x-lg\@xs {
      margin-left: var(--space-lg);
      margin-right: var(--space-lg);
    }
    .margin-x-xl\@xs {
      margin-left: var(--space-xl);
      margin-right: var(--space-xl);
    }
    .margin-x-xxl\@xs {
      margin-left: var(--space-xxl);
      margin-right: var(--space-xxl);
    }
    .margin-x-xxxl\@xs {
      margin-left: var(--space-xxxl);
      margin-right: var(--space-xxxl);
    }
    .margin-x-xxxxl\@xs {
      margin-left: var(--space-xxxxl);
      margin-right: var(--space-xxxxl);
    }
    .margin-x-auto\@xs {
      margin-left: auto;
      margin-right: auto;
    }
    .margin-x-0\@xs {
      margin-left: 0;
      margin-right: 0;
    }
    .margin-y-xxxxs\@xs {
      margin-top: var(--space-xxxxs);
      margin-bottom: var(--space-xxxxs);
    }
    .margin-y-xxxs\@xs {
      margin-top: var(--space-xxxs);
      margin-bottom: var(--space-xxxs);
    }
    .margin-y-xxs\@xs {
      margin-top: var(--space-xxs);
      margin-bottom: var(--space-xxs);
    }
    .margin-y-xs\@xs {
      margin-top: var(--space-xs);
      margin-bottom: var(--space-xs);
    }
    .margin-y-sm\@xs {
      margin-top: var(--space-sm);
      margin-bottom: var(--space-sm);
    }
    .margin-y-md\@xs {
      margin-top: var(--space-md);
      margin-bottom: var(--space-md);
    }
    .margin-y-lg\@xs {
      margin-top: var(--space-lg);
      margin-bottom: var(--space-lg);
    }
    .margin-y-xl\@xs {
      margin-top: var(--space-xl);
      margin-bottom: var(--space-xl);
    }
    .margin-y-xxl\@xs {
      margin-top: var(--space-xxl);
      margin-bottom: var(--space-xxl);
    }
    .margin-y-xxxl\@xs {
      margin-top: var(--space-xxxl);
      margin-bottom: var(--space-xxxl);
    }
    .margin-y-xxxxl\@xs {
      margin-top: var(--space-xxxxl);
      margin-bottom: var(--space-xxxxl);
    }
    .margin-y-auto\@xs {
      margin-top: auto;
      margin-bottom: auto;
    }
    .margin-y-0\@xs {
      margin-top: 0;
      margin-bottom: 0;
    }
    .padding-xxxxs\@xs {
      padding: var(--space-xxxxs);
    }
    .padding-xxxs\@xs {
      padding: var(--space-xxxs);
    }
    .padding-xxs\@xs {
      padding: var(--space-xxs);
    }
    .padding-xs\@xs {
      padding: var(--space-xs);
    }
    .padding-sm\@xs {
      padding: var(--space-sm);
    }
    .padding-md\@xs {
      padding: var(--space-md);
    }
    .padding-lg\@xs {
      padding: var(--space-lg);
    }
    .padding-xl\@xs {
      padding: var(--space-xl);
    }
    .padding-xxl\@xs {
      padding: var(--space-xxl);
    }
    .padding-xxxl\@xs {
      padding: var(--space-xxxl);
    }
    .padding-xxxxl\@xs {
      padding: var(--space-xxxxl);
    }
    .padding-0\@xs {
      padding: 0;
    }
    .padding-component\@xs {
      padding: var(--component-padding);
    }
    .padding-top-xxxxs\@xs {
      padding-top: var(--space-xxxxs);
    }
    .padding-top-xxxs\@xs {
      padding-top: var(--space-xxxs);
    }
    .padding-top-xxs\@xs {
      padding-top: var(--space-xxs);
    }
    .padding-top-xs\@xs {
      padding-top: var(--space-xs);
    }
    .padding-top-sm\@xs {
      padding-top: var(--space-sm);
    }
    .padding-top-md\@xs {
      padding-top: var(--space-md);
    }
    .padding-top-lg\@xs {
      padding-top: var(--space-lg);
    }
    .padding-top-xl\@xs {
      padding-top: var(--space-xl);
    }
    .padding-top-xxl\@xs {
      padding-top: var(--space-xxl);
    }
    .padding-top-xxxl\@xs {
      padding-top: var(--space-xxxl);
    }
    .padding-top-xxxxl\@xs {
      padding-top: var(--space-xxxxl);
    }
    .padding-top-0\@xs {
      padding-top: 0;
    }
    .padding-top-component\@xs {
      padding-top: var(--component-padding);
    }
    .padding-bottom-xxxxs\@xs {
      padding-bottom: var(--space-xxxxs);
    }
    .padding-bottom-xxxs\@xs {
      padding-bottom: var(--space-xxxs);
    }
    .padding-bottom-xxs\@xs {
      padding-bottom: var(--space-xxs);
    }
    .padding-bottom-xs\@xs {
      padding-bottom: var(--space-xs);
    }
    .padding-bottom-sm\@xs {
      padding-bottom: var(--space-sm);
    }
    .padding-bottom-md\@xs {
      padding-bottom: var(--space-md);
    }
    .padding-bottom-lg\@xs {
      padding-bottom: var(--space-lg);
    }
    .padding-bottom-xl\@xs {
      padding-bottom: var(--space-xl);
    }
    .padding-bottom-xxl\@xs {
      padding-bottom: var(--space-xxl);
    }
    .padding-bottom-xxxl\@xs {
      padding-bottom: var(--space-xxxl);
    }
    .padding-bottom-xxxxl\@xs {
      padding-bottom: var(--space-xxxxl);
    }
    .padding-bottom-0\@xs {
      padding-bottom: 0;
    }
    .padding-bottom-component\@xs {
      padding-bottom: var(--component-padding);
    }
    .padding-right-xxxxs\@xs {
      padding-right: var(--space-xxxxs);
    }
    .padding-right-xxxs\@xs {
      padding-right: var(--space-xxxs);
    }
    .padding-right-xxs\@xs {
      padding-right: var(--space-xxs);
    }
    .padding-right-xs\@xs {
      padding-right: var(--space-xs);
    }
    .padding-right-sm\@xs {
      padding-right: var(--space-sm);
    }
    .padding-right-md\@xs {
      padding-right: var(--space-md);
    }
    .padding-right-lg\@xs {
      padding-right: var(--space-lg);
    }
    .padding-right-xl\@xs {
      padding-right: var(--space-xl);
    }
    .padding-right-xxl\@xs {
      padding-right: var(--space-xxl);
    }
    .padding-right-xxxl\@xs {
      padding-right: var(--space-xxxl);
    }
    .padding-right-xxxxl\@xs {
      padding-right: var(--space-xxxxl);
    }
    .padding-right-0\@xs {
      padding-right: 0;
    }
    .padding-right-component\@xs {
      padding-right: var(--component-padding);
    }
    .padding-left-xxxxs\@xs {
      padding-left: var(--space-xxxxs);
    }
    .padding-left-xxxs\@xs {
      padding-left: var(--space-xxxs);
    }
    .padding-left-xxs\@xs {
      padding-left: var(--space-xxs);
    }
    .padding-left-xs\@xs {
      padding-left: var(--space-xs);
    }
    .padding-left-sm\@xs {
      padding-left: var(--space-sm);
    }
    .padding-left-md\@xs {
      padding-left: var(--space-md);
    }
    .padding-left-lg\@xs {
      padding-left: var(--space-lg);
    }
    .padding-left-xl\@xs {
      padding-left: var(--space-xl);
    }
    .padding-left-xxl\@xs {
      padding-left: var(--space-xxl);
    }
    .padding-left-xxxl\@xs {
      padding-left: var(--space-xxxl);
    }
    .padding-left-xxxxl\@xs {
      padding-left: var(--space-xxxxl);
    }
    .padding-left-0\@xs {
      padding-left: 0;
    }
    .padding-left-component\@xs {
      padding-left: var(--component-padding);
    }
    .padding-x-xxxxs\@xs {
      padding-left: var(--space-xxxxs);
      padding-right: var(--space-xxxxs);
    }
    .padding-x-xxxs\@xs {
      padding-left: var(--space-xxxs);
      padding-right: var(--space-xxxs);
    }
    .padding-x-xxs\@xs {
      padding-left: var(--space-xxs);
      padding-right: var(--space-xxs);
    }
    .padding-x-xs\@xs {
      padding-left: var(--space-xs);
      padding-right: var(--space-xs);
    }
    .padding-x-sm\@xs {
      padding-left: var(--space-sm);
      padding-right: var(--space-sm);
    }
    .padding-x-md\@xs {
      padding-left: var(--space-md);
      padding-right: var(--space-md);
    }
    .padding-x-lg\@xs {
      padding-left: var(--space-lg);
      padding-right: var(--space-lg);
    }
    .padding-x-xl\@xs {
      padding-left: var(--space-xl);
      padding-right: var(--space-xl);
    }
    .padding-x-xxl\@xs {
      padding-left: var(--space-xxl);
      padding-right: var(--space-xxl);
    }
    .padding-x-xxxl\@xs {
      padding-left: var(--space-xxxl);
      padding-right: var(--space-xxxl);
    }
    .padding-x-xxxxl\@xs {
      padding-left: var(--space-xxxxl);
      padding-right: var(--space-xxxxl);
    }
    .padding-x-0\@xs {
      padding-left: 0;
      padding-right: 0;
    }
    .padding-x-component\@xs {
      padding-left: var(--component-padding);
      padding-right: var(--component-padding);
    }
    .padding-y-xxxxs\@xs {
      padding-top: var(--space-xxxxs);
      padding-bottom: var(--space-xxxxs);
    }
    .padding-y-xxxs\@xs {
      padding-top: var(--space-xxxs);
      padding-bottom: var(--space-xxxs);
    }
    .padding-y-xxs\@xs {
      padding-top: var(--space-xxs);
      padding-bottom: var(--space-xxs);
    }
    .padding-y-xs\@xs {
      padding-top: var(--space-xs);
      padding-bottom: var(--space-xs);
    }
    .padding-y-sm\@xs {
      padding-top: var(--space-sm);
      padding-bottom: var(--space-sm);
    }
    .padding-y-md\@xs {
      padding-top: var(--space-md);
      padding-bottom: var(--space-md);
    }
    .padding-y-lg\@xs {
      padding-top: var(--space-lg);
      padding-bottom: var(--space-lg);
    }
    .padding-y-xl\@xs {
      padding-top: var(--space-xl);
      padding-bottom: var(--space-xl);
    }
    .padding-y-xxl\@xs {
      padding-top: var(--space-xxl);
      padding-bottom: var(--space-xxl);
    }
    .padding-y-xxxl\@xs {
      padding-top: var(--space-xxxl);
      padding-bottom: var(--space-xxxl);
    }
    .padding-y-xxxxl\@xs {
      padding-top: var(--space-xxxxl);
      padding-bottom: var(--space-xxxxl);
    }
    .padding-y-0\@xs {
      padding-top: 0;
      padding-bottom: 0;
    }
    .padding-y-component\@xs {
      padding-top: var(--component-padding);
      padding-bottom: var(--component-padding);
    }
    .text-center\@xs {
      text-align: center;
    }
    .text-left\@xs {
      text-align: left;
    }
    .text-right\@xs {
      text-align: right;
    }
    .text-justify\@xs {
      text-align: justify;
    }
    .text-xs\@xs {
      font-size: var(--text-xs, 0.6875rem);
    }
    .text-sm\@xs {
      font-size: var(--text-sm, 0.75rem);
    }
    .text-base\@xs {
      font-size: var(--text-unit, 1rem);
    }
    .text-md\@xs {
      font-size: var(--text-md, 1.125rem);
    }
    .text-lg\@xs {
      font-size: var(--text-lg, 1.375rem);
    }
    .text-xl\@xs {
      font-size: var(--text-xl, 1.75rem);
    }
    .text-xxl\@xs {
      font-size: var(--text-xxl, 2rem);
    }
    .text-xxxl\@xs {
      font-size: var(--text-xxxl, 2.5rem);
    }
    .text-xxxxl\@xs {
      font-size: var(--text-xxxxl, 3rem);
    }
    .width-xxxxs\@xs {
      width: var(--size-xxxxs, 0.25rem);
    }
    .width-xxxs\@xs {
      width: var(--size-xxxs, 0.5rem);
    }
    .width-xxs\@xs {
      width: var(--size-xxs, 0.75rem);
    }
    .width-xs\@xs {
      width: var(--size-xs, 1rem);
    }
    .width-sm\@xs {
      width: var(--size-sm, 1.5rem);
    }
    .width-md\@xs {
      width: var(--size-md, 2rem);
    }
    .width-lg\@xs {
      width: var(--size-lg, 3rem);
    }
    .width-xl\@xs {
      width: var(--size-xl, 4rem);
    }
    .width-xxl\@xs {
      width: var(--size-xxl, 6rem);
    }
    .width-xxxl\@xs {
      width: var(--size-xxxl, 8rem);
    }
    .width-xxxxl\@xs {
      width: var(--size-xxxxl, 16rem);
    }
    .width-0\@xs {
      width: 0;
    }
    .width-10\%\@xs {
      width: 10%;
    }
    .width-20\%\@xs {
      width: 20%;
    }
    .width-25\%\@xs {
      width: 25%;
    }
    .width-30\%\@xs {
      width: 30%;
    }
    .width-33\%\@xs {
      width: 33.3333333333%;
    }
    .width-40\%\@xs {
      width: 40%;
    }
    .width-50\%\@xs {
      width: 50%;
    }
    .width-60\%\@xs {
      width: 60%;
    }
    .width-66\%\@xs {
      width: 66.6666666667%;
    }
    .width-70\%\@xs {
      width: 70%;
    }
    .width-75\%\@xs {
      width: 75%;
    }
    .width-80\%\@xs {
      width: 80%;
    }
    .width-90\%\@xs {
      width: 90%;
    }
    .width-100\%\@xs {
      width: 100%;
    }
    .width-100vw\@xs {
      width: 100vw;
    }
    .width-auto\@xs {
      width: auto;
    }
    .width-inherit\@xs {
      width: inherit;
    }
    .height-xxxxs\@xs {
      height: var(--size-xxxxs, 0.25rem);
    }
    .height-xxxs\@xs {
      height: var(--size-xxxs, 0.5rem);
    }
    .height-xxs\@xs {
      height: var(--size-xxs, 0.75rem);
    }
    .height-xs\@xs {
      height: var(--size-xs, 1rem);
    }
    .height-sm\@xs {
      height: var(--size-sm, 1.5rem);
    }
    .height-md\@xs {
      height: var(--size-md, 2rem);
    }
    .height-lg\@xs {
      height: var(--size-lg, 3rem);
    }
    .height-xl\@xs {
      height: var(--size-xl, 4rem);
    }
    .height-xxl\@xs {
      height: var(--size-xxl, 6rem);
    }
    .height-xxxl\@xs {
      height: var(--size-xxxl, 8rem);
    }
    .height-xxxxl\@xs {
      height: var(--size-xxxxl, 16rem);
    }
    .height-0\@xs {
      height: 0;
    }
    .height-10\%\@xs {
      height: 10%;
    }
    .height-20\%\@xs {
      height: 20%;
    }
    .height-25\%\@xs {
      height: 25%;
    }
    .height-30\%\@xs {
      height: 30%;
    }
    .height-33\%\@xs {
      height: 33.3333333333%;
    }
    .height-40\%\@xs {
      height: 40%;
    }
    .height-50\%\@xs {
      height: 50%;
    }
    .height-60\%\@xs {
      height: 60%;
    }
    .height-66\%\@xs {
      height: 66.6666666667%;
    }
    .height-70\%\@xs {
      height: 70%;
    }
    .height-75\%\@xs {
      height: 75%;
    }
    .height-80\%\@xs {
      height: 80%;
    }
    .height-90\%\@xs {
      height: 90%;
    }
    .height-100\%\@xs {
      height: 100%;
    }
    .height-100vh\@xs {
      height: 100vh;
    }
    .height-auto\@xs {
      height: auto;
    }
    .height-inherit\@xs {
      height: inherit;
    }
    .max-width-xxxxs\@xs {
      max-width: var(--max-width-xxxxs);
    }
    .max-width-xxxs\@xs {
      max-width: var(--max-width-xxxs);
    }
    .max-width-xxs\@xs {
      max-width: var(--max-width-xxs);
    }
    .max-width-xs\@xs {
      max-width: var(--max-width-xs);
    }
    .max-width-sm\@xs {
      max-width: var(--max-width-sm);
    }
    .max-width-md\@xs {
      max-width: var(--max-width-md);
    }
    .max-width-lg\@xs {
      max-width: var(--max-width-lg);
    }
    .max-width-xl\@xs {
      max-width: var(--max-width-xl);
    }
    .max-width-xxl\@xs {
      max-width: var(--max-width-xxl);
    }
    .max-width-xxxl\@xs {
      max-width: var(--max-width-xxxl);
    }
    .max-width-xxxxl\@xs {
      max-width: var(--max-width-xxxxl);
    }
    .max-width-100\%\@xs {
      max-width: 100%;
    }
    .max-width-none\@xs {
      max-width: none;
    }
    .position-relative\@xs {
      position: relative;
    }
    .position-absolute\@xs {
      position: absolute;
    }
    .position-fixed\@xs {
      position: fixed;
    }
    .position-sticky\@xs {
      position: -webkit-sticky;
      position: sticky;
    }
    .position-static\@xs {
      position: static;
    }
    .inset-0\@xs {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    .top-0\@xs {
      top: 0;
    }
    .top-50\%\@xs {
      top: 50%;
    }
    .top-xxxxs\@xs {
      top: var(--space-xxxxs);
    }
    .top-xxxs\@xs {
      top: var(--space-xxxs);
    }
    .top-xxs\@xs {
      top: var(--space-xxs);
    }
    .top-xs\@xs {
      top: var(--space-xs);
    }
    .top-sm\@xs {
      top: var(--space-sm);
    }
    .top-md\@xs {
      top: var(--space-md);
    }
    .top-lg\@xs {
      top: var(--space-lg);
    }
    .top-xl\@xs {
      top: var(--space-xl);
    }
    .top-xxl\@xs {
      top: var(--space-xxl);
    }
    .top-xxxl\@xs {
      top: var(--space-xxxl);
    }
    .top-xxxxl\@xs {
      top: var(--space-xxxxl);
    }
    .bottom-0\@xs {
      bottom: 0;
    }
    .bottom-50\%\@xs {
      bottom: 50%;
    }
    .bottom-xxxxs\@xs {
      bottom: var(--space-xxxxs);
    }
    .bottom-xxxs\@xs {
      bottom: var(--space-xxxs);
    }
    .bottom-xxs\@xs {
      bottom: var(--space-xxs);
    }
    .bottom-xs\@xs {
      bottom: var(--space-xs);
    }
    .bottom-sm\@xs {
      bottom: var(--space-sm);
    }
    .bottom-md\@xs {
      bottom: var(--space-md);
    }
    .bottom-lg\@xs {
      bottom: var(--space-lg);
    }
    .bottom-xl\@xs {
      bottom: var(--space-xl);
    }
    .bottom-xxl\@xs {
      bottom: var(--space-xxl);
    }
    .bottom-xxxl\@xs {
      bottom: var(--space-xxxl);
    }
    .bottom-xxxxl\@xs {
      bottom: var(--space-xxxxl);
    }
    .right-0\@xs {
      right: 0;
    }
    .right-50\%\@xs {
      right: 50%;
    }
    .right-xxxxs\@xs {
      right: var(--space-xxxxs);
    }
    .right-xxxs\@xs {
      right: var(--space-xxxs);
    }
    .right-xxs\@xs {
      right: var(--space-xxs);
    }
    .right-xs\@xs {
      right: var(--space-xs);
    }
    .right-sm\@xs {
      right: var(--space-sm);
    }
    .right-md\@xs {
      right: var(--space-md);
    }
    .right-lg\@xs {
      right: var(--space-lg);
    }
    .right-xl\@xs {
      right: var(--space-xl);
    }
    .right-xxl\@xs {
      right: var(--space-xxl);
    }
    .right-xxxl\@xs {
      right: var(--space-xxxl);
    }
    .right-xxxxl\@xs {
      right: var(--space-xxxxl);
    }
    .left-0\@xs {
      left: 0;
    }
    .left-50\%\@xs {
      left: 50%;
    }
    .left-xxxxs\@xs {
      left: var(--space-xxxxs);
    }
    .left-xxxs\@xs {
      left: var(--space-xxxs);
    }
    .left-xxs\@xs {
      left: var(--space-xxs);
    }
    .left-xs\@xs {
      left: var(--space-xs);
    }
    .left-sm\@xs {
      left: var(--space-sm);
    }
    .left-md\@xs {
      left: var(--space-md);
    }
    .left-lg\@xs {
      left: var(--space-lg);
    }
    .left-xl\@xs {
      left: var(--space-xl);
    }
    .left-xxl\@xs {
      left: var(--space-xxl);
    }
    .left-xxxl\@xs {
      left: var(--space-xxxl);
    }
    .left-xxxxl\@xs {
      left: var(--space-xxxxl);
    }
    .overflow-hidden\@xs {
      overflow: hidden;
    }
    .overflow-auto\@xs {
      overflow: auto;
    }
    .momentum-scrolling\@xs {
      -webkit-overflow-scrolling: touch;
    }
    .overscroll-contain\@xs {
      -ms-scroll-chaining: none;
          overscroll-behavior: contain;
    }
    .visible\@xs {
      visibility: visible;
    }
    .invisible\@xs {
      visibility: hidden;
    }
  }
  @media not all and (min-width: 32rem) {
    .display\@xs {
      display: none !important;
    }
  }
  @media (min-width: 48rem) {
    .flex\@sm {
      display: flex;
    }
    .inline-flex\@sm {
      display: inline-flex;
    }
    .flex-wrap\@sm {
      flex-wrap: wrap;
    }
    .flex-nowrap\@sm {
      flex-wrap: nowrap;
    }
    .flex-column\@sm {
      flex-direction: column;
    }
    .flex-column-reverse\@sm {
      flex-direction: column-reverse;
    }
    .flex-row\@sm {
      flex-direction: row;
    }
    .flex-row-reverse\@sm {
      flex-direction: row-reverse;
    }
    .flex-center\@sm {
      justify-content: center;
      align-items: center;
    }
    .flex-grow\@sm {
      flex-grow: 1;
    }
    .flex-grow-0\@sm {
      flex-grow: 0;
    }
    .flex-shrink\@sm {
      flex-shrink: 1;
    }
    .flex-shrink-0\@sm {
      flex-shrink: 0;
    }
    .flex-basis-0\@sm {
      flex-basis: 0;
    }
    .justify-start\@sm {
      justify-content: flex-start;
    }
    .justify-end\@sm {
      justify-content: flex-end;
    }
    .justify-center\@sm {
      justify-content: center;
    }
    .justify-between\@sm {
      justify-content: space-between;
    }
    .items-center\@sm {
      align-items: center;
    }
    .items-start\@sm {
      align-items: flex-start;
    }
    .items-end\@sm {
      align-items: flex-end;
    }
    .items-baseline\@sm {
      align-items: baseline;
    }
    .order-1\@sm {
      order: 1;
    }
    .order-2\@sm {
      order: 2;
    }
    .order-3\@sm {
      order: 3;
    }
    .block\@sm {
      display: block;
    }
    .inline-block\@sm {
      display: inline-block;
    }
    .inline\@sm {
      display: inline;
    }
    .contents\@sm {
      display: contents;
    }
    .hide\@sm {
      display: none !important;
    }
    .margin-xxxxs\@sm {
      margin: var(--space-xxxxs);
    }
    .margin-xxxs\@sm {
      margin: var(--space-xxxs);
    }
    .margin-xxs\@sm {
      margin: var(--space-xxs);
    }
    .margin-xs\@sm {
      margin: var(--space-xs);
    }
    .margin-sm\@sm {
      margin: var(--space-sm);
    }
    .margin-md\@sm {
      margin: var(--space-md);
    }
    .margin-lg\@sm {
      margin: var(--space-lg);
    }
    .margin-xl\@sm {
      margin: var(--space-xl);
    }
    .margin-xxl\@sm {
      margin: var(--space-xxl);
    }
    .margin-xxxl\@sm {
      margin: var(--space-xxxl);
    }
    .margin-xxxxl\@sm {
      margin: var(--space-xxxxl);
    }
    .margin-auto\@sm {
      margin: auto;
    }
    .margin-0\@sm {
      margin: 0;
    }
    .margin-top-xxxxs\@sm {
      margin-top: var(--space-xxxxs);
    }
    .margin-top-xxxs\@sm {
      margin-top: var(--space-xxxs);
    }
    .margin-top-xxs\@sm {
      margin-top: var(--space-xxs);
    }
    .margin-top-xs\@sm {
      margin-top: var(--space-xs);
    }
    .margin-top-sm\@sm {
      margin-top: var(--space-sm);
    }
    .margin-top-md\@sm {
      margin-top: var(--space-md);
    }
    .margin-top-lg\@sm {
      margin-top: var(--space-lg);
    }
    .margin-top-xl\@sm {
      margin-top: var(--space-xl);
    }
    .margin-top-xxl\@sm {
      margin-top: var(--space-xxl);
    }
    .margin-top-xxxl\@sm {
      margin-top: var(--space-xxxl);
    }
    .margin-top-xxxxl\@sm {
      margin-top: var(--space-xxxxl);
    }
    .margin-top-auto\@sm {
      margin-top: auto;
    }
    .margin-top-0\@sm {
      margin-top: 0;
    }
    .margin-bottom-xxxxs\@sm {
      margin-bottom: var(--space-xxxxs);
    }
    .margin-bottom-xxxs\@sm {
      margin-bottom: var(--space-xxxs);
    }
    .margin-bottom-xxs\@sm {
      margin-bottom: var(--space-xxs);
    }
    .margin-bottom-xs\@sm {
      margin-bottom: var(--space-xs);
    }
    .margin-bottom-sm\@sm {
      margin-bottom: var(--space-sm);
    }
    .margin-bottom-md\@sm {
      margin-bottom: var(--space-md);
    }
    .margin-bottom-lg\@sm {
      margin-bottom: var(--space-lg);
    }
    .margin-bottom-xl\@sm {
      margin-bottom: var(--space-xl);
    }
    .margin-bottom-xxl\@sm {
      margin-bottom: var(--space-xxl);
    }
    .margin-bottom-xxxl\@sm {
      margin-bottom: var(--space-xxxl);
    }
    .margin-bottom-xxxxl\@sm {
      margin-bottom: var(--space-xxxxl);
    }
    .margin-bottom-auto\@sm {
      margin-bottom: auto;
    }
    .margin-bottom-0\@sm {
      margin-bottom: 0;
    }
    .margin-right-xxxxs\@sm {
      margin-right: var(--space-xxxxs);
    }
    .margin-right-xxxs\@sm {
      margin-right: var(--space-xxxs);
    }
    .margin-right-xxs\@sm {
      margin-right: var(--space-xxs);
    }
    .margin-right-xs\@sm {
      margin-right: var(--space-xs);
    }
    .margin-right-sm\@sm {
      margin-right: var(--space-sm);
    }
    .margin-right-md\@sm {
      margin-right: var(--space-md);
    }
    .margin-right-lg\@sm {
      margin-right: var(--space-lg);
    }
    .margin-right-xl\@sm {
      margin-right: var(--space-xl);
    }
    .margin-right-xxl\@sm {
      margin-right: var(--space-xxl);
    }
    .margin-right-xxxl\@sm {
      margin-right: var(--space-xxxl);
    }
    .margin-right-xxxxl\@sm {
      margin-right: var(--space-xxxxl);
    }
    .margin-right-auto\@sm {
      margin-right: auto;
    }
    .margin-right-0\@sm {
      margin-right: 0;
    }
    .margin-left-xxxxs\@sm {
      margin-left: var(--space-xxxxs);
    }
    .margin-left-xxxs\@sm {
      margin-left: var(--space-xxxs);
    }
    .margin-left-xxs\@sm {
      margin-left: var(--space-xxs);
    }
    .margin-left-xs\@sm {
      margin-left: var(--space-xs);
    }
    .margin-left-sm\@sm {
      margin-left: var(--space-sm);
    }
    .margin-left-md\@sm {
      margin-left: var(--space-md);
    }
    .margin-left-lg\@sm {
      margin-left: var(--space-lg);
    }
    .margin-left-xl\@sm {
      margin-left: var(--space-xl);
    }
    .margin-left-xxl\@sm {
      margin-left: var(--space-xxl);
    }
    .margin-left-xxxl\@sm {
      margin-left: var(--space-xxxl);
    }
    .margin-left-xxxxl\@sm {
      margin-left: var(--space-xxxxl);
    }
    .margin-left-auto\@sm {
      margin-left: auto;
    }
    .margin-left-0\@sm {
      margin-left: 0;
    }
    .margin-x-xxxxs\@sm {
      margin-left: var(--space-xxxxs);
      margin-right: var(--space-xxxxs);
    }
    .margin-x-xxxs\@sm {
      margin-left: var(--space-xxxs);
      margin-right: var(--space-xxxs);
    }
    .margin-x-xxs\@sm {
      margin-left: var(--space-xxs);
      margin-right: var(--space-xxs);
    }
    .margin-x-xs\@sm {
      margin-left: var(--space-xs);
      margin-right: var(--space-xs);
    }
    .margin-x-sm\@sm {
      margin-left: var(--space-sm);
      margin-right: var(--space-sm);
    }
    .margin-x-md\@sm {
      margin-left: var(--space-md);
      margin-right: var(--space-md);
    }
    .margin-x-lg\@sm {
      margin-left: var(--space-lg);
      margin-right: var(--space-lg);
    }
    .margin-x-xl\@sm {
      margin-left: var(--space-xl);
      margin-right: var(--space-xl);
    }
    .margin-x-xxl\@sm {
      margin-left: var(--space-xxl);
      margin-right: var(--space-xxl);
    }
    .margin-x-xxxl\@sm {
      margin-left: var(--space-xxxl);
      margin-right: var(--space-xxxl);
    }
    .margin-x-xxxxl\@sm {
      margin-left: var(--space-xxxxl);
      margin-right: var(--space-xxxxl);
    }
    .margin-x-auto\@sm {
      margin-left: auto;
      margin-right: auto;
    }
    .margin-x-0\@sm {
      margin-left: 0;
      margin-right: 0;
    }
    .margin-y-xxxxs\@sm {
      margin-top: var(--space-xxxxs);
      margin-bottom: var(--space-xxxxs);
    }
    .margin-y-xxxs\@sm {
      margin-top: var(--space-xxxs);
      margin-bottom: var(--space-xxxs);
    }
    .margin-y-xxs\@sm {
      margin-top: var(--space-xxs);
      margin-bottom: var(--space-xxs);
    }
    .margin-y-xs\@sm {
      margin-top: var(--space-xs);
      margin-bottom: var(--space-xs);
    }
    .margin-y-sm\@sm {
      margin-top: var(--space-sm);
      margin-bottom: var(--space-sm);
    }
    .margin-y-md\@sm {
      margin-top: var(--space-md);
      margin-bottom: var(--space-md);
    }
    .margin-y-lg\@sm {
      margin-top: var(--space-lg);
      margin-bottom: var(--space-lg);
    }
    .margin-y-xl\@sm {
      margin-top: var(--space-xl);
      margin-bottom: var(--space-xl);
    }
    .margin-y-xxl\@sm {
      margin-top: var(--space-xxl);
      margin-bottom: var(--space-xxl);
    }
    .margin-y-xxxl\@sm {
      margin-top: var(--space-xxxl);
      margin-bottom: var(--space-xxxl);
    }
    .margin-y-xxxxl\@sm {
      margin-top: var(--space-xxxxl);
      margin-bottom: var(--space-xxxxl);
    }
    .margin-y-auto\@sm {
      margin-top: auto;
      margin-bottom: auto;
    }
    .margin-y-0\@sm {
      margin-top: 0;
      margin-bottom: 0;
    }
    .padding-xxxxs\@sm {
      padding: var(--space-xxxxs);
    }
    .padding-xxxs\@sm {
      padding: var(--space-xxxs);
    }
    .padding-xxs\@sm {
      padding: var(--space-xxs);
    }
    .padding-xs\@sm {
      padding: var(--space-xs);
    }
    .padding-sm\@sm {
      padding: var(--space-sm);
    }
    .padding-md\@sm {
      padding: var(--space-md);
    }
    .padding-lg\@sm {
      padding: var(--space-lg);
    }
    .padding-xl\@sm {
      padding: var(--space-xl);
    }
    .padding-xxl\@sm {
      padding: var(--space-xxl);
    }
    .padding-xxxl\@sm {
      padding: var(--space-xxxl);
    }
    .padding-xxxxl\@sm {
      padding: var(--space-xxxxl);
    }
    .padding-0\@sm {
      padding: 0;
    }
    .padding-component\@sm {
      padding: var(--component-padding);
    }
    .padding-top-xxxxs\@sm {
      padding-top: var(--space-xxxxs);
    }
    .padding-top-xxxs\@sm {
      padding-top: var(--space-xxxs);
    }
    .padding-top-xxs\@sm {
      padding-top: var(--space-xxs);
    }
    .padding-top-xs\@sm {
      padding-top: var(--space-xs);
    }
    .padding-top-sm\@sm {
      padding-top: var(--space-sm);
    }
    .padding-top-md\@sm {
      padding-top: var(--space-md);
    }
    .padding-top-lg\@sm {
      padding-top: var(--space-lg);
    }
    .padding-top-xl\@sm {
      padding-top: var(--space-xl);
    }
    .padding-top-xxl\@sm {
      padding-top: var(--space-xxl);
    }
    .padding-top-xxxl\@sm {
      padding-top: var(--space-xxxl);
    }
    .padding-top-xxxxl\@sm {
      padding-top: var(--space-xxxxl);
    }
    .padding-top-0\@sm {
      padding-top: 0;
    }
    .padding-top-component\@sm {
      padding-top: var(--component-padding);
    }
    .padding-bottom-xxxxs\@sm {
      padding-bottom: var(--space-xxxxs);
    }
    .padding-bottom-xxxs\@sm {
      padding-bottom: var(--space-xxxs);
    }
    .padding-bottom-xxs\@sm {
      padding-bottom: var(--space-xxs);
    }
    .padding-bottom-xs\@sm {
      padding-bottom: var(--space-xs);
    }
    .padding-bottom-sm\@sm {
      padding-bottom: var(--space-sm);
    }
    .padding-bottom-md\@sm {
      padding-bottom: var(--space-md);
    }
    .padding-bottom-lg\@sm {
      padding-bottom: var(--space-lg);
    }
    .padding-bottom-xl\@sm {
      padding-bottom: var(--space-xl);
    }
    .padding-bottom-xxl\@sm {
      padding-bottom: var(--space-xxl);
    }
    .padding-bottom-xxxl\@sm {
      padding-bottom: var(--space-xxxl);
    }
    .padding-bottom-xxxxl\@sm {
      padding-bottom: var(--space-xxxxl);
    }
    .padding-bottom-0\@sm {
      padding-bottom: 0;
    }
    .padding-bottom-component\@sm {
      padding-bottom: var(--component-padding);
    }
    .padding-right-xxxxs\@sm {
      padding-right: var(--space-xxxxs);
    }
    .padding-right-xxxs\@sm {
      padding-right: var(--space-xxxs);
    }
    .padding-right-xxs\@sm {
      padding-right: var(--space-xxs);
    }
    .padding-right-xs\@sm {
      padding-right: var(--space-xs);
    }
    .padding-right-sm\@sm {
      padding-right: var(--space-sm);
    }
    .padding-right-md\@sm {
      padding-right: var(--space-md);
    }
    .padding-right-lg\@sm {
      padding-right: var(--space-lg);
    }
    .padding-right-xl\@sm {
      padding-right: var(--space-xl);
    }
    .padding-right-xxl\@sm {
      padding-right: var(--space-xxl);
    }
    .padding-right-xxxl\@sm {
      padding-right: var(--space-xxxl);
    }
    .padding-right-xxxxl\@sm {
      padding-right: var(--space-xxxxl);
    }
    .padding-right-0\@sm {
      padding-right: 0;
    }
    .padding-right-component\@sm {
      padding-right: var(--component-padding);
    }
    .padding-left-xxxxs\@sm {
      padding-left: var(--space-xxxxs);
    }
    .padding-left-xxxs\@sm {
      padding-left: var(--space-xxxs);
    }
    .padding-left-xxs\@sm {
      padding-left: var(--space-xxs);
    }
    .padding-left-xs\@sm {
      padding-left: var(--space-xs);
    }
    .padding-left-sm\@sm {
      padding-left: var(--space-sm);
    }
    .padding-left-md\@sm {
      padding-left: var(--space-md);
    }
    .padding-left-lg\@sm {
      padding-left: var(--space-lg);
    }
    .padding-left-xl\@sm {
      padding-left: var(--space-xl);
    }
    .padding-left-xxl\@sm {
      padding-left: var(--space-xxl);
    }
    .padding-left-xxxl\@sm {
      padding-left: var(--space-xxxl);
    }
    .padding-left-xxxxl\@sm {
      padding-left: var(--space-xxxxl);
    }
    .padding-left-0\@sm {
      padding-left: 0;
    }
    .padding-left-component\@sm {
      padding-left: var(--component-padding);
    }
    .padding-x-xxxxs\@sm {
      padding-left: var(--space-xxxxs);
      padding-right: var(--space-xxxxs);
    }
    .padding-x-xxxs\@sm {
      padding-left: var(--space-xxxs);
      padding-right: var(--space-xxxs);
    }
    .padding-x-xxs\@sm {
      padding-left: var(--space-xxs);
      padding-right: var(--space-xxs);
    }
    .padding-x-xs\@sm {
      padding-left: var(--space-xs);
      padding-right: var(--space-xs);
    }
    .padding-x-sm\@sm {
      padding-left: var(--space-sm);
      padding-right: var(--space-sm);
    }
    .padding-x-md\@sm {
      padding-left: var(--space-md);
      padding-right: var(--space-md);
    }
    .padding-x-lg\@sm {
      padding-left: var(--space-lg);
      padding-right: var(--space-lg);
    }
    .padding-x-xl\@sm {
      padding-left: var(--space-xl);
      padding-right: var(--space-xl);
    }
    .padding-x-xxl\@sm {
      padding-left: var(--space-xxl);
      padding-right: var(--space-xxl);
    }
    .padding-x-xxxl\@sm {
      padding-left: var(--space-xxxl);
      padding-right: var(--space-xxxl);
    }
    .padding-x-xxxxl\@sm {
      padding-left: var(--space-xxxxl);
      padding-right: var(--space-xxxxl);
    }
    .padding-x-0\@sm {
      padding-left: 0;
      padding-right: 0;
    }
    .padding-x-component\@sm {
      padding-left: var(--component-padding);
      padding-right: var(--component-padding);
    }
    .padding-y-xxxxs\@sm {
      padding-top: var(--space-xxxxs);
      padding-bottom: var(--space-xxxxs);
    }
    .padding-y-xxxs\@sm {
      padding-top: var(--space-xxxs);
      padding-bottom: var(--space-xxxs);
    }
    .padding-y-xxs\@sm {
      padding-top: var(--space-xxs);
      padding-bottom: var(--space-xxs);
    }
    .padding-y-xs\@sm {
      padding-top: var(--space-xs);
      padding-bottom: var(--space-xs);
    }
    .padding-y-sm\@sm {
      padding-top: var(--space-sm);
      padding-bottom: var(--space-sm);
    }
    .padding-y-md\@sm {
      padding-top: var(--space-md);
      padding-bottom: var(--space-md);
    }
    .padding-y-lg\@sm {
      padding-top: var(--space-lg);
      padding-bottom: var(--space-lg);
    }
    .padding-y-xl\@sm {
      padding-top: var(--space-xl);
      padding-bottom: var(--space-xl);
    }
    .padding-y-xxl\@sm {
      padding-top: var(--space-xxl);
      padding-bottom: var(--space-xxl);
    }
    .padding-y-xxxl\@sm {
      padding-top: var(--space-xxxl);
      padding-bottom: var(--space-xxxl);
    }
    .padding-y-xxxxl\@sm {
      padding-top: var(--space-xxxxl);
      padding-bottom: var(--space-xxxxl);
    }
    .padding-y-0\@sm {
      padding-top: 0;
      padding-bottom: 0;
    }
    .padding-y-component\@sm {
      padding-top: var(--component-padding);
      padding-bottom: var(--component-padding);
    }
    .text-center\@sm {
      text-align: center;
    }
    .text-left\@sm {
      text-align: left;
    }
    .text-right\@sm {
      text-align: right;
    }
    .text-justify\@sm {
      text-align: justify;
    }
    .text-xs\@sm {
      font-size: var(--text-xs, 0.6875rem);
    }
    .text-sm\@sm {
      font-size: var(--text-sm, 0.75rem);
    }
    .text-base\@sm {
      font-size: var(--text-unit, 1rem);
    }
    .text-md\@sm {
      font-size: var(--text-md, 1.125rem);
    }
    .text-lg\@sm {
      font-size: var(--text-lg, 1.375rem);
    }
    .text-xl\@sm {
      font-size: var(--text-xl, 1.75rem);
    }
    .text-xxl\@sm {
      font-size: var(--text-xxl, 2rem);
    }
    .text-xxxl\@sm {
      font-size: var(--text-xxxl, 2.5rem);
    }
    .text-xxxxl\@sm {
      font-size: var(--text-xxxxl, 3rem);
    }
    .width-xxxxs\@sm {
      width: var(--size-xxxxs, 0.25rem);
    }
    .width-xxxs\@sm {
      width: var(--size-xxxs, 0.5rem);
    }
    .width-xxs\@sm {
      width: var(--size-xxs, 0.75rem);
    }
    .width-xs\@sm {
      width: var(--size-xs, 1rem);
    }
    .width-sm\@sm {
      width: var(--size-sm, 1.5rem);
    }
    .width-md\@sm {
      width: var(--size-md, 2rem);
    }
    .width-lg\@sm {
      width: var(--size-lg, 3rem);
    }
    .width-xl\@sm {
      width: var(--size-xl, 4rem);
    }
    .width-xxl\@sm {
      width: var(--size-xxl, 6rem);
    }
    .width-xxxl\@sm {
      width: var(--size-xxxl, 8rem);
    }
    .width-xxxxl\@sm {
      width: var(--size-xxxxl, 16rem);
    }
    .width-0\@sm {
      width: 0;
    }
    .width-10\%\@sm {
      width: 10%;
    }
    .width-20\%\@sm {
      width: 20%;
    }
    .width-25\%\@sm {
      width: 25%;
    }
    .width-30\%\@sm {
      width: 30%;
    }
    .width-33\%\@sm {
      width: 33.3333333333%;
    }
    .width-40\%\@sm {
      width: 40%;
    }
    .width-50\%\@sm {
      width: 50%;
    }
    .width-60\%\@sm {
      width: 60%;
    }
    .width-66\%\@sm {
      width: 66.6666666667%;
    }
    .width-70\%\@sm {
      width: 70%;
    }
    .width-75\%\@sm {
      width: 75%;
    }
    .width-80\%\@sm {
      width: 80%;
    }
    .width-90\%\@sm {
      width: 90%;
    }
    .width-100\%\@sm {
      width: 100%;
    }
    .width-100vw\@sm {
      width: 100vw;
    }
    .width-auto\@sm {
      width: auto;
    }
    .width-inherit\@sm {
      width: inherit;
    }
    .height-xxxxs\@sm {
      height: var(--size-xxxxs, 0.25rem);
    }
    .height-xxxs\@sm {
      height: var(--size-xxxs, 0.5rem);
    }
    .height-xxs\@sm {
      height: var(--size-xxs, 0.75rem);
    }
    .height-xs\@sm {
      height: var(--size-xs, 1rem);
    }
    .height-sm\@sm {
      height: var(--size-sm, 1.5rem);
    }
    .height-md\@sm {
      height: var(--size-md, 2rem);
    }
    .height-lg\@sm {
      height: var(--size-lg, 3rem);
    }
    .height-xl\@sm {
      height: var(--size-xl, 4rem);
    }
    .height-xxl\@sm {
      height: var(--size-xxl, 6rem);
    }
    .height-xxxl\@sm {
      height: var(--size-xxxl, 8rem);
    }
    .height-xxxxl\@sm {
      height: var(--size-xxxxl, 16rem);
    }
    .height-0\@sm {
      height: 0;
    }
    .height-10\%\@sm {
      height: 10%;
    }
    .height-20\%\@sm {
      height: 20%;
    }
    .height-25\%\@sm {
      height: 25%;
    }
    .height-30\%\@sm {
      height: 30%;
    }
    .height-33\%\@sm {
      height: 33.3333333333%;
    }
    .height-40\%\@sm {
      height: 40%;
    }
    .height-50\%\@sm {
      height: 50%;
    }
    .height-60\%\@sm {
      height: 60%;
    }
    .height-66\%\@sm {
      height: 66.6666666667%;
    }
    .height-70\%\@sm {
      height: 70%;
    }
    .height-75\%\@sm {
      height: 75%;
    }
    .height-80\%\@sm {
      height: 80%;
    }
    .height-90\%\@sm {
      height: 90%;
    }
    .height-100\%\@sm {
      height: 100%;
    }
    .height-100vh\@sm {
      height: 100vh;
    }
    .height-auto\@sm {
      height: auto;
    }
    .height-inherit\@sm {
      height: inherit;
    }
    .max-width-xxxxs\@sm {
      max-width: var(--max-width-xxxxs);
    }
    .max-width-xxxs\@sm {
      max-width: var(--max-width-xxxs);
    }
    .max-width-xxs\@sm {
      max-width: var(--max-width-xxs);
    }
    .max-width-xs\@sm {
      max-width: var(--max-width-xs);
    }
    .max-width-sm\@sm {
      max-width: var(--max-width-sm);
    }
    .max-width-md\@sm {
      max-width: var(--max-width-md);
    }
    .max-width-lg\@sm {
      max-width: var(--max-width-lg);
    }
    .max-width-xl\@sm {
      max-width: var(--max-width-xl);
    }
    .max-width-xxl\@sm {
      max-width: var(--max-width-xxl);
    }
    .max-width-xxxl\@sm {
      max-width: var(--max-width-xxxl);
    }
    .max-width-xxxxl\@sm {
      max-width: var(--max-width-xxxxl);
    }
    .max-width-100\%\@sm {
      max-width: 100%;
    }
    .max-width-none\@sm {
      max-width: none;
    }
    .position-relative\@sm {
      position: relative;
    }
    .position-absolute\@sm {
      position: absolute;
    }
    .position-fixed\@sm {
      position: fixed;
    }
    .position-sticky\@sm {
      position: -webkit-sticky;
      position: sticky;
    }
    .position-static\@sm {
      position: static;
    }
    .inset-0\@sm {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    .top-0\@sm {
      top: 0;
    }
    .top-50\%\@sm {
      top: 50%;
    }
    .top-xxxxs\@sm {
      top: var(--space-xxxxs);
    }
    .top-xxxs\@sm {
      top: var(--space-xxxs);
    }
    .top-xxs\@sm {
      top: var(--space-xxs);
    }
    .top-xs\@sm {
      top: var(--space-xs);
    }
    .top-sm\@sm {
      top: var(--space-sm);
    }
    .top-md\@sm {
      top: var(--space-md);
    }
    .top-lg\@sm {
      top: var(--space-lg);
    }
    .top-xl\@sm {
      top: var(--space-xl);
    }
    .top-xxl\@sm {
      top: var(--space-xxl);
    }
    .top-xxxl\@sm {
      top: var(--space-xxxl);
    }
    .top-xxxxl\@sm {
      top: var(--space-xxxxl);
    }
    .bottom-0\@sm {
      bottom: 0;
    }
    .bottom-50\%\@sm {
      bottom: 50%;
    }
    .bottom-xxxxs\@sm {
      bottom: var(--space-xxxxs);
    }
    .bottom-xxxs\@sm {
      bottom: var(--space-xxxs);
    }
    .bottom-xxs\@sm {
      bottom: var(--space-xxs);
    }
    .bottom-xs\@sm {
      bottom: var(--space-xs);
    }
    .bottom-sm\@sm {
      bottom: var(--space-sm);
    }
    .bottom-md\@sm {
      bottom: var(--space-md);
    }
    .bottom-lg\@sm {
      bottom: var(--space-lg);
    }
    .bottom-xl\@sm {
      bottom: var(--space-xl);
    }
    .bottom-xxl\@sm {
      bottom: var(--space-xxl);
    }
    .bottom-xxxl\@sm {
      bottom: var(--space-xxxl);
    }
    .bottom-xxxxl\@sm {
      bottom: var(--space-xxxxl);
    }
    .right-0\@sm {
      right: 0;
    }
    .right-50\%\@sm {
      right: 50%;
    }
    .right-xxxxs\@sm {
      right: var(--space-xxxxs);
    }
    .right-xxxs\@sm {
      right: var(--space-xxxs);
    }
    .right-xxs\@sm {
      right: var(--space-xxs);
    }
    .right-xs\@sm {
      right: var(--space-xs);
    }
    .right-sm\@sm {
      right: var(--space-sm);
    }
    .right-md\@sm {
      right: var(--space-md);
    }
    .right-lg\@sm {
      right: var(--space-lg);
    }
    .right-xl\@sm {
      right: var(--space-xl);
    }
    .right-xxl\@sm {
      right: var(--space-xxl);
    }
    .right-xxxl\@sm {
      right: var(--space-xxxl);
    }
    .right-xxxxl\@sm {
      right: var(--space-xxxxl);
    }
    .left-0\@sm {
      left: 0;
    }
    .left-50\%\@sm {
      left: 50%;
    }
    .left-xxxxs\@sm {
      left: var(--space-xxxxs);
    }
    .left-xxxs\@sm {
      left: var(--space-xxxs);
    }
    .left-xxs\@sm {
      left: var(--space-xxs);
    }
    .left-xs\@sm {
      left: var(--space-xs);
    }
    .left-sm\@sm {
      left: var(--space-sm);
    }
    .left-md\@sm {
      left: var(--space-md);
    }
    .left-lg\@sm {
      left: var(--space-lg);
    }
    .left-xl\@sm {
      left: var(--space-xl);
    }
    .left-xxl\@sm {
      left: var(--space-xxl);
    }
    .left-xxxl\@sm {
      left: var(--space-xxxl);
    }
    .left-xxxxl\@sm {
      left: var(--space-xxxxl);
    }
    .overflow-hidden\@sm {
      overflow: hidden;
    }
    .overflow-auto\@sm {
      overflow: auto;
    }
    .momentum-scrolling\@sm {
      -webkit-overflow-scrolling: touch;
    }
    .overscroll-contain\@sm {
      -ms-scroll-chaining: none;
          overscroll-behavior: contain;
    }
    .visible\@sm {
      visibility: visible;
    }
    .invisible\@sm {
      visibility: hidden;
    }
  }
  @media not all and (min-width: 48rem) {
    .display\@sm {
      display: none !important;
    }
  }
  @media (min-width: 64rem) {
    .flex\@md {
      display: flex;
    }
    .inline-flex\@md {
      display: inline-flex;
    }
    .flex-wrap\@md {
      flex-wrap: wrap;
    }
    .flex-nowrap\@md {
      flex-wrap: nowrap;
    }
    .flex-column\@md {
      flex-direction: column;
    }
    .flex-column-reverse\@md {
      flex-direction: column-reverse;
    }
    .flex-row\@md {
      flex-direction: row;
    }
    .flex-row-reverse\@md {
      flex-direction: row-reverse;
    }
    .flex-center\@md {
      justify-content: center;
      align-items: center;
    }
    .flex-grow\@md {
      flex-grow: 1;
    }
    .flex-grow-0\@md {
      flex-grow: 0;
    }
    .flex-shrink\@md {
      flex-shrink: 1;
    }
    .flex-shrink-0\@md {
      flex-shrink: 0;
    }
    .flex-basis-0\@md {
      flex-basis: 0;
    }
    .justify-start\@md {
      justify-content: flex-start;
    }
    .justify-end\@md {
      justify-content: flex-end;
    }
    .justify-center\@md {
      justify-content: center;
    }
    .justify-between\@md {
      justify-content: space-between;
    }
    .items-center\@md {
      align-items: center;
    }
    .items-start\@md {
      align-items: flex-start;
    }
    .items-end\@md {
      align-items: flex-end;
    }
    .items-baseline\@md {
      align-items: baseline;
    }
    .order-1\@md {
      order: 1;
    }
    .order-2\@md {
      order: 2;
    }
    .order-3\@md {
      order: 3;
    }
    .block\@md {
      display: block;
    }
    .inline-block\@md {
      display: inline-block;
    }
    .inline\@md {
      display: inline;
    }
    .contents\@md {
      display: contents;
    }
    .hide\@md {
      display: none !important;
    }
    .margin-xxxxs\@md {
      margin: var(--space-xxxxs);
    }
    .margin-xxxs\@md {
      margin: var(--space-xxxs);
    }
    .margin-xxs\@md {
      margin: var(--space-xxs);
    }
    .margin-xs\@md {
      margin: var(--space-xs);
    }
    .margin-sm\@md {
      margin: var(--space-sm);
    }
    .margin-md\@md {
      margin: var(--space-md);
    }
    .margin-lg\@md {
      margin: var(--space-lg);
    }
    .margin-xl\@md {
      margin: var(--space-xl);
    }
    .margin-xxl\@md {
      margin: var(--space-xxl);
    }
    .margin-xxxl\@md {
      margin: var(--space-xxxl);
    }
    .margin-xxxxl\@md {
      margin: var(--space-xxxxl);
    }
    .margin-auto\@md {
      margin: auto;
    }
    .margin-0\@md {
      margin: 0;
    }
    .margin-top-xxxxs\@md {
      margin-top: var(--space-xxxxs);
    }
    .margin-top-xxxs\@md {
      margin-top: var(--space-xxxs);
    }
    .margin-top-xxs\@md {
      margin-top: var(--space-xxs);
    }
    .margin-top-xs\@md {
      margin-top: var(--space-xs);
    }
    .margin-top-sm\@md {
      margin-top: var(--space-sm);
    }
    .margin-top-md\@md {
      margin-top: var(--space-md);
    }
    .margin-top-lg\@md {
      margin-top: var(--space-lg);
    }
    .margin-top-xl\@md {
      margin-top: var(--space-xl);
    }
    .margin-top-xxl\@md {
      margin-top: var(--space-xxl);
    }
    .margin-top-xxxl\@md {
      margin-top: var(--space-xxxl);
    }
    .margin-top-xxxxl\@md {
      margin-top: var(--space-xxxxl);
    }
    .margin-top-auto\@md {
      margin-top: auto;
    }
    .margin-top-0\@md {
      margin-top: 0;
    }
    .margin-bottom-xxxxs\@md {
      margin-bottom: var(--space-xxxxs);
    }
    .margin-bottom-xxxs\@md {
      margin-bottom: var(--space-xxxs);
    }
    .margin-bottom-xxs\@md {
      margin-bottom: var(--space-xxs);
    }
    .margin-bottom-xs\@md {
      margin-bottom: var(--space-xs);
    }
    .margin-bottom-sm\@md {
      margin-bottom: var(--space-sm);
    }
    .margin-bottom-md\@md {
      margin-bottom: var(--space-md);
    }
    .margin-bottom-lg\@md {
      margin-bottom: var(--space-lg);
    }
    .margin-bottom-xl\@md {
      margin-bottom: var(--space-xl);
    }
    .margin-bottom-xxl\@md {
      margin-bottom: var(--space-xxl);
    }
    .margin-bottom-xxxl\@md {
      margin-bottom: var(--space-xxxl);
    }
    .margin-bottom-xxxxl\@md {
      margin-bottom: var(--space-xxxxl);
    }
    .margin-bottom-auto\@md {
      margin-bottom: auto;
    }
    .margin-bottom-0\@md {
      margin-bottom: 0;
    }
    .margin-right-xxxxs\@md {
      margin-right: var(--space-xxxxs);
    }
    .margin-right-xxxs\@md {
      margin-right: var(--space-xxxs);
    }
    .margin-right-xxs\@md {
      margin-right: var(--space-xxs);
    }
    .margin-right-xs\@md {
      margin-right: var(--space-xs);
    }
    .margin-right-sm\@md {
      margin-right: var(--space-sm);
    }
    .margin-right-md\@md {
      margin-right: var(--space-md);
    }
    .margin-right-lg\@md {
      margin-right: var(--space-lg);
    }
    .margin-right-xl\@md {
      margin-right: var(--space-xl);
    }
    .margin-right-xxl\@md {
      margin-right: var(--space-xxl);
    }
    .margin-right-xxxl\@md {
      margin-right: var(--space-xxxl);
    }
    .margin-right-xxxxl\@md {
      margin-right: var(--space-xxxxl);
    }
    .margin-right-auto\@md {
      margin-right: auto;
    }
    .margin-right-0\@md {
      margin-right: 0;
    }
    .margin-left-xxxxs\@md {
      margin-left: var(--space-xxxxs);
    }
    .margin-left-xxxs\@md {
      margin-left: var(--space-xxxs);
    }
    .margin-left-xxs\@md {
      margin-left: var(--space-xxs);
    }
    .margin-left-xs\@md {
      margin-left: var(--space-xs);
    }
    .margin-left-sm\@md {
      margin-left: var(--space-sm);
    }
    .margin-left-md\@md {
      margin-left: var(--space-md);
    }
    .margin-left-lg\@md {
      margin-left: var(--space-lg);
    }
    .margin-left-xl\@md {
      margin-left: var(--space-xl);
    }
    .margin-left-xxl\@md {
      margin-left: var(--space-xxl);
    }
    .margin-left-xxxl\@md {
      margin-left: var(--space-xxxl);
    }
    .margin-left-xxxxl\@md {
      margin-left: var(--space-xxxxl);
    }
    .margin-left-auto\@md {
      margin-left: auto;
    }
    .margin-left-0\@md {
      margin-left: 0;
    }
    .margin-x-xxxxs\@md {
      margin-left: var(--space-xxxxs);
      margin-right: var(--space-xxxxs);
    }
    .margin-x-xxxs\@md {
      margin-left: var(--space-xxxs);
      margin-right: var(--space-xxxs);
    }
    .margin-x-xxs\@md {
      margin-left: var(--space-xxs);
      margin-right: var(--space-xxs);
    }
    .margin-x-xs\@md {
      margin-left: var(--space-xs);
      margin-right: var(--space-xs);
    }
    .margin-x-sm\@md {
      margin-left: var(--space-sm);
      margin-right: var(--space-sm);
    }
    .margin-x-md\@md {
      margin-left: var(--space-md);
      margin-right: var(--space-md);
    }
    .margin-x-lg\@md {
      margin-left: var(--space-lg);
      margin-right: var(--space-lg);
    }
    .margin-x-xl\@md {
      margin-left: var(--space-xl);
      margin-right: var(--space-xl);
    }
    .margin-x-xxl\@md {
      margin-left: var(--space-xxl);
      margin-right: var(--space-xxl);
    }
    .margin-x-xxxl\@md {
      margin-left: var(--space-xxxl);
      margin-right: var(--space-xxxl);
    }
    .margin-x-xxxxl\@md {
      margin-left: var(--space-xxxxl);
      margin-right: var(--space-xxxxl);
    }
    .margin-x-auto\@md {
      margin-left: auto;
      margin-right: auto;
    }
    .margin-x-0\@md {
      margin-left: 0;
      margin-right: 0;
    }
    .margin-y-xxxxs\@md {
      margin-top: var(--space-xxxxs);
      margin-bottom: var(--space-xxxxs);
    }
    .margin-y-xxxs\@md {
      margin-top: var(--space-xxxs);
      margin-bottom: var(--space-xxxs);
    }
    .margin-y-xxs\@md {
      margin-top: var(--space-xxs);
      margin-bottom: var(--space-xxs);
    }
    .margin-y-xs\@md {
      margin-top: var(--space-xs);
      margin-bottom: var(--space-xs);
    }
    .margin-y-sm\@md {
      margin-top: var(--space-sm);
      margin-bottom: var(--space-sm);
    }
    .margin-y-md\@md {
      margin-top: var(--space-md);
      margin-bottom: var(--space-md);
    }
    .margin-y-lg\@md {
      margin-top: var(--space-lg);
      margin-bottom: var(--space-lg);
    }
    .margin-y-xl\@md {
      margin-top: var(--space-xl);
      margin-bottom: var(--space-xl);
    }
    .margin-y-xxl\@md {
      margin-top: var(--space-xxl);
      margin-bottom: var(--space-xxl);
    }
    .margin-y-xxxl\@md {
      margin-top: var(--space-xxxl);
      margin-bottom: var(--space-xxxl);
    }
    .margin-y-xxxxl\@md {
      margin-top: var(--space-xxxxl);
      margin-bottom: var(--space-xxxxl);
    }
    .margin-y-auto\@md {
      margin-top: auto;
      margin-bottom: auto;
    }
    .margin-y-0\@md {
      margin-top: 0;
      margin-bottom: 0;
    }
    .padding-xxxxs\@md {
      padding: var(--space-xxxxs);
    }
    .padding-xxxs\@md {
      padding: var(--space-xxxs);
    }
    .padding-xxs\@md {
      padding: var(--space-xxs);
    }
    .padding-xs\@md {
      padding: var(--space-xs);
    }
    .padding-sm\@md {
      padding: var(--space-sm);
    }
    .padding-md\@md {
      padding: var(--space-md);
    }
    .padding-lg\@md {
      padding: var(--space-lg);
    }
    .padding-xl\@md {
      padding: var(--space-xl);
    }
    .padding-xxl\@md {
      padding: var(--space-xxl);
    }
    .padding-xxxl\@md {
      padding: var(--space-xxxl);
    }
    .padding-xxxxl\@md {
      padding: var(--space-xxxxl);
    }
    .padding-0\@md {
      padding: 0;
    }
    .padding-component\@md {
      padding: var(--component-padding);
    }
    .padding-top-xxxxs\@md {
      padding-top: var(--space-xxxxs);
    }
    .padding-top-xxxs\@md {
      padding-top: var(--space-xxxs);
    }
    .padding-top-xxs\@md {
      padding-top: var(--space-xxs);
    }
    .padding-top-xs\@md {
      padding-top: var(--space-xs);
    }
    .padding-top-sm\@md {
      padding-top: var(--space-sm);
    }
    .padding-top-md\@md {
      padding-top: var(--space-md);
    }
    .padding-top-lg\@md {
      padding-top: var(--space-lg);
    }
    .padding-top-xl\@md {
      padding-top: var(--space-xl);
    }
    .padding-top-xxl\@md {
      padding-top: var(--space-xxl);
    }
    .padding-top-xxxl\@md {
      padding-top: var(--space-xxxl);
    }
    .padding-top-xxxxl\@md {
      padding-top: var(--space-xxxxl);
    }
    .padding-top-0\@md {
      padding-top: 0;
    }
    .padding-top-component\@md {
      padding-top: var(--component-padding);
    }
    .padding-bottom-xxxxs\@md {
      padding-bottom: var(--space-xxxxs);
    }
    .padding-bottom-xxxs\@md {
      padding-bottom: var(--space-xxxs);
    }
    .padding-bottom-xxs\@md {
      padding-bottom: var(--space-xxs);
    }
    .padding-bottom-xs\@md {
      padding-bottom: var(--space-xs);
    }
    .padding-bottom-sm\@md {
      padding-bottom: var(--space-sm);
    }
    .padding-bottom-md\@md {
      padding-bottom: var(--space-md);
    }
    .padding-bottom-lg\@md {
      padding-bottom: var(--space-lg);
    }
    .padding-bottom-xl\@md {
      padding-bottom: var(--space-xl);
    }
    .padding-bottom-xxl\@md {
      padding-bottom: var(--space-xxl);
    }
    .padding-bottom-xxxl\@md {
      padding-bottom: var(--space-xxxl);
    }
    .padding-bottom-xxxxl\@md {
      padding-bottom: var(--space-xxxxl);
    }
    .padding-bottom-0\@md {
      padding-bottom: 0;
    }
    .padding-bottom-component\@md {
      padding-bottom: var(--component-padding);
    }
    .padding-right-xxxxs\@md {
      padding-right: var(--space-xxxxs);
    }
    .padding-right-xxxs\@md {
      padding-right: var(--space-xxxs);
    }
    .padding-right-xxs\@md {
      padding-right: var(--space-xxs);
    }
    .padding-right-xs\@md {
      padding-right: var(--space-xs);
    }
    .padding-right-sm\@md {
      padding-right: var(--space-sm);
    }
    .padding-right-md\@md {
      padding-right: var(--space-md);
    }
    .padding-right-lg\@md {
      padding-right: var(--space-lg);
    }
    .padding-right-xl\@md {
      padding-right: var(--space-xl);
    }
    .padding-right-xxl\@md {
      padding-right: var(--space-xxl);
    }
    .padding-right-xxxl\@md {
      padding-right: var(--space-xxxl);
    }
    .padding-right-xxxxl\@md {
      padding-right: var(--space-xxxxl);
    }
    .padding-right-0\@md {
      padding-right: 0;
    }
    .padding-right-component\@md {
      padding-right: var(--component-padding);
    }
    .padding-left-xxxxs\@md {
      padding-left: var(--space-xxxxs);
    }
    .padding-left-xxxs\@md {
      padding-left: var(--space-xxxs);
    }
    .padding-left-xxs\@md {
      padding-left: var(--space-xxs);
    }
    .padding-left-xs\@md {
      padding-left: var(--space-xs);
    }
    .padding-left-sm\@md {
      padding-left: var(--space-sm);
    }
    .padding-left-md\@md {
      padding-left: var(--space-md);
    }
    .padding-left-lg\@md {
      padding-left: var(--space-lg);
    }
    .padding-left-xl\@md {
      padding-left: var(--space-xl);
    }
    .padding-left-xxl\@md {
      padding-left: var(--space-xxl);
    }
    .padding-left-xxxl\@md {
      padding-left: var(--space-xxxl);
    }
    .padding-left-xxxxl\@md {
      padding-left: var(--space-xxxxl);
    }
    .padding-left-0\@md {
      padding-left: 0;
    }
    .padding-left-component\@md {
      padding-left: var(--component-padding);
    }
    .padding-x-xxxxs\@md {
      padding-left: var(--space-xxxxs);
      padding-right: var(--space-xxxxs);
    }
    .padding-x-xxxs\@md {
      padding-left: var(--space-xxxs);
      padding-right: var(--space-xxxs);
    }
    .padding-x-xxs\@md {
      padding-left: var(--space-xxs);
      padding-right: var(--space-xxs);
    }
    .padding-x-xs\@md {
      padding-left: var(--space-xs);
      padding-right: var(--space-xs);
    }
    .padding-x-sm\@md {
      padding-left: var(--space-sm);
      padding-right: var(--space-sm);
    }
    .padding-x-md\@md {
      padding-left: var(--space-md);
      padding-right: var(--space-md);
    }
    .padding-x-lg\@md {
      padding-left: var(--space-lg);
      padding-right: var(--space-lg);
    }
    .padding-x-xl\@md {
      padding-left: var(--space-xl);
      padding-right: var(--space-xl);
    }
    .padding-x-xxl\@md {
      padding-left: var(--space-xxl);
      padding-right: var(--space-xxl);
    }
    .padding-x-xxxl\@md {
      padding-left: var(--space-xxxl);
      padding-right: var(--space-xxxl);
    }
    .padding-x-xxxxl\@md {
      padding-left: var(--space-xxxxl);
      padding-right: var(--space-xxxxl);
    }
    .padding-x-0\@md {
      padding-left: 0;
      padding-right: 0;
    }
    .padding-x-component\@md {
      padding-left: var(--component-padding);
      padding-right: var(--component-padding);
    }
    .padding-y-xxxxs\@md {
      padding-top: var(--space-xxxxs);
      padding-bottom: var(--space-xxxxs);
    }
    .padding-y-xxxs\@md {
      padding-top: var(--space-xxxs);
      padding-bottom: var(--space-xxxs);
    }
    .padding-y-xxs\@md {
      padding-top: var(--space-xxs);
      padding-bottom: var(--space-xxs);
    }
    .padding-y-xs\@md {
      padding-top: var(--space-xs);
      padding-bottom: var(--space-xs);
    }
    .padding-y-sm\@md {
      padding-top: var(--space-sm);
      padding-bottom: var(--space-sm);
    }
    .padding-y-md\@md {
      padding-top: var(--space-md);
      padding-bottom: var(--space-md);
    }
    .padding-y-lg\@md {
      padding-top: var(--space-lg);
      padding-bottom: var(--space-lg);
    }
    .padding-y-xl\@md {
      padding-top: var(--space-xl);
      padding-bottom: var(--space-xl);
    }
    .padding-y-xxl\@md {
      padding-top: var(--space-xxl);
      padding-bottom: var(--space-xxl);
    }
    .padding-y-xxxl\@md {
      padding-top: var(--space-xxxl);
      padding-bottom: var(--space-xxxl);
    }
    .padding-y-xxxxl\@md {
      padding-top: var(--space-xxxxl);
      padding-bottom: var(--space-xxxxl);
    }
    .padding-y-0\@md {
      padding-top: 0;
      padding-bottom: 0;
    }
    .padding-y-component\@md {
      padding-top: var(--component-padding);
      padding-bottom: var(--component-padding);
    }
    .text-center\@md {
      text-align: center;
    }
    .text-left\@md {
      text-align: left;
    }
    .text-right\@md {
      text-align: right;
    }
    .text-justify\@md {
      text-align: justify;
    }
    .text-xs\@md {
      font-size: var(--text-xs, 0.6875rem);
    }
    .text-sm\@md {
      font-size: var(--text-sm, 0.75rem);
    }
    .text-base\@md {
      font-size: var(--text-unit, 1rem);
    }
    .text-md\@md {
      font-size: var(--text-md, 1.125rem);
    }
    .text-lg\@md {
      font-size: var(--text-lg, 1.375rem);
    }
    .text-xl\@md {
      font-size: var(--text-xl, 1.75rem);
    }
    .text-xxl\@md {
      font-size: var(--text-xxl, 2rem);
    }
    .text-xxxl\@md {
      font-size: var(--text-xxxl, 2.5rem);
    }
    .text-xxxxl\@md {
      font-size: var(--text-xxxxl, 3rem);
    }
    .width-xxxxs\@md {
      width: var(--size-xxxxs, 0.25rem);
    }
    .width-xxxs\@md {
      width: var(--size-xxxs, 0.5rem);
    }
    .width-xxs\@md {
      width: var(--size-xxs, 0.75rem);
    }
    .width-xs\@md {
      width: var(--size-xs, 1rem);
    }
    .width-sm\@md {
      width: var(--size-sm, 1.5rem);
    }
    .width-md\@md {
      width: var(--size-md, 2rem);
    }
    .width-lg\@md {
      width: var(--size-lg, 3rem);
    }
    .width-xl\@md {
      width: var(--size-xl, 4rem);
    }
    .width-xxl\@md {
      width: var(--size-xxl, 6rem);
    }
    .width-xxxl\@md {
      width: var(--size-xxxl, 8rem);
    }
    .width-xxxxl\@md {
      width: var(--size-xxxxl, 16rem);
    }
    .width-0\@md {
      width: 0;
    }
    .width-10\%\@md {
      width: 10%;
    }
    .width-20\%\@md {
      width: 20%;
    }
    .width-25\%\@md {
      width: 25%;
    }
    .width-30\%\@md {
      width: 30%;
    }
    .width-33\%\@md {
      width: 33.3333333333%;
    }
    .width-40\%\@md {
      width: 40%;
    }
    .width-50\%\@md {
      width: 50%;
    }
    .width-60\%\@md {
      width: 60%;
    }
    .width-66\%\@md {
      width: 66.6666666667%;
    }
    .width-70\%\@md {
      width: 70%;
    }
    .width-75\%\@md {
      width: 75%;
    }
    .width-80\%\@md {
      width: 80%;
    }
    .width-90\%\@md {
      width: 90%;
    }
    .width-100\%\@md {
      width: 100%;
    }
    .width-100vw\@md {
      width: 100vw;
    }
    .width-auto\@md {
      width: auto;
    }
    .width-inherit\@md {
      width: inherit;
    }
    .height-xxxxs\@md {
      height: var(--size-xxxxs, 0.25rem);
    }
    .height-xxxs\@md {
      height: var(--size-xxxs, 0.5rem);
    }
    .height-xxs\@md {
      height: var(--size-xxs, 0.75rem);
    }
    .height-xs\@md {
      height: var(--size-xs, 1rem);
    }
    .height-sm\@md {
      height: var(--size-sm, 1.5rem);
    }
    .height-md\@md {
      height: var(--size-md, 2rem);
    }
    .height-lg\@md {
      height: var(--size-lg, 3rem);
    }
    .height-xl\@md {
      height: var(--size-xl, 4rem);
    }
    .height-xxl\@md {
      height: var(--size-xxl, 6rem);
    }
    .height-xxxl\@md {
      height: var(--size-xxxl, 8rem);
    }
    .height-xxxxl\@md {
      height: var(--size-xxxxl, 16rem);
    }
    .height-0\@md {
      height: 0;
    }
    .height-10\%\@md {
      height: 10%;
    }
    .height-20\%\@md {
      height: 20%;
    }
    .height-25\%\@md {
      height: 25%;
    }
    .height-30\%\@md {
      height: 30%;
    }
    .height-33\%\@md {
      height: 33.3333333333%;
    }
    .height-40\%\@md {
      height: 40%;
    }
    .height-50\%\@md {
      height: 50%;
    }
    .height-60\%\@md {
      height: 60%;
    }
    .height-66\%\@md {
      height: 66.6666666667%;
    }
    .height-70\%\@md {
      height: 70%;
    }
    .height-75\%\@md {
      height: 75%;
    }
    .height-80\%\@md {
      height: 80%;
    }
    .height-90\%\@md {
      height: 90%;
    }
    .height-100\%\@md {
      height: 100%;
    }
    .height-100vh\@md {
      height: 100vh;
    }
    .height-auto\@md {
      height: auto;
    }
    .height-inherit\@md {
      height: inherit;
    }
    .max-width-xxxxs\@md {
      max-width: var(--max-width-xxxxs);
    }
    .max-width-xxxs\@md {
      max-width: var(--max-width-xxxs);
    }
    .max-width-xxs\@md {
      max-width: var(--max-width-xxs);
    }
    .max-width-xs\@md {
      max-width: var(--max-width-xs);
    }
    .max-width-sm\@md {
      max-width: var(--max-width-sm);
    }
    .max-width-md\@md {
      max-width: var(--max-width-md);
    }
    .max-width-lg\@md {
      max-width: var(--max-width-lg);
    }
    .max-width-xl\@md {
      max-width: var(--max-width-xl);
    }
    .max-width-xxl\@md {
      max-width: var(--max-width-xxl);
    }
    .max-width-xxxl\@md {
      max-width: var(--max-width-xxxl);
    }
    .max-width-xxxxl\@md {
      max-width: var(--max-width-xxxxl);
    }
    .max-width-100\%\@md {
      max-width: 100%;
    }
    .max-width-none\@md {
      max-width: none;
    }
    .position-relative\@md {
      position: relative;
    }
    .position-absolute\@md {
      position: absolute;
    }
    .position-fixed\@md {
      position: fixed;
    }
    .position-sticky\@md {
      position: -webkit-sticky;
      position: sticky;
    }
    .position-static\@md {
      position: static;
    }
    .inset-0\@md {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    .top-0\@md {
      top: 0;
    }
    .top-50\%\@md {
      top: 50%;
    }
    .top-xxxxs\@md {
      top: var(--space-xxxxs);
    }
    .top-xxxs\@md {
      top: var(--space-xxxs);
    }
    .top-xxs\@md {
      top: var(--space-xxs);
    }
    .top-xs\@md {
      top: var(--space-xs);
    }
    .top-sm\@md {
      top: var(--space-sm);
    }
    .top-md\@md {
      top: var(--space-md);
    }
    .top-lg\@md {
      top: var(--space-lg);
    }
    .top-xl\@md {
      top: var(--space-xl);
    }
    .top-xxl\@md {
      top: var(--space-xxl);
    }
    .top-xxxl\@md {
      top: var(--space-xxxl);
    }
    .top-xxxxl\@md {
      top: var(--space-xxxxl);
    }
    .bottom-0\@md {
      bottom: 0;
    }
    .bottom-50\%\@md {
      bottom: 50%;
    }
    .bottom-xxxxs\@md {
      bottom: var(--space-xxxxs);
    }
    .bottom-xxxs\@md {
      bottom: var(--space-xxxs);
    }
    .bottom-xxs\@md {
      bottom: var(--space-xxs);
    }
    .bottom-xs\@md {
      bottom: var(--space-xs);
    }
    .bottom-sm\@md {
      bottom: var(--space-sm);
    }
    .bottom-md\@md {
      bottom: var(--space-md);
    }
    .bottom-lg\@md {
      bottom: var(--space-lg);
    }
    .bottom-xl\@md {
      bottom: var(--space-xl);
    }
    .bottom-xxl\@md {
      bottom: var(--space-xxl);
    }
    .bottom-xxxl\@md {
      bottom: var(--space-xxxl);
    }
    .bottom-xxxxl\@md {
      bottom: var(--space-xxxxl);
    }
    .right-0\@md {
      right: 0;
    }
    .right-50\%\@md {
      right: 50%;
    }
    .right-xxxxs\@md {
      right: var(--space-xxxxs);
    }
    .right-xxxs\@md {
      right: var(--space-xxxs);
    }
    .right-xxs\@md {
      right: var(--space-xxs);
    }
    .right-xs\@md {
      right: var(--space-xs);
    }
    .right-sm\@md {
      right: var(--space-sm);
    }
    .right-md\@md {
      right: var(--space-md);
    }
    .right-lg\@md {
      right: var(--space-lg);
    }
    .right-xl\@md {
      right: var(--space-xl);
    }
    .right-xxl\@md {
      right: var(--space-xxl);
    }
    .right-xxxl\@md {
      right: var(--space-xxxl);
    }
    .right-xxxxl\@md {
      right: var(--space-xxxxl);
    }
    .left-0\@md {
      left: 0;
    }
    .left-50\%\@md {
      left: 50%;
    }
    .left-xxxxs\@md {
      left: var(--space-xxxxs);
    }
    .left-xxxs\@md {
      left: var(--space-xxxs);
    }
    .left-xxs\@md {
      left: var(--space-xxs);
    }
    .left-xs\@md {
      left: var(--space-xs);
    }
    .left-sm\@md {
      left: var(--space-sm);
    }
    .left-md\@md {
      left: var(--space-md);
    }
    .left-lg\@md {
      left: var(--space-lg);
    }
    .left-xl\@md {
      left: var(--space-xl);
    }
    .left-xxl\@md {
      left: var(--space-xxl);
    }
    .left-xxxl\@md {
      left: var(--space-xxxl);
    }
    .left-xxxxl\@md {
      left: var(--space-xxxxl);
    }
    .overflow-hidden\@md {
      overflow: hidden;
    }
    .overflow-auto\@md {
      overflow: auto;
    }
    .momentum-scrolling\@md {
      -webkit-overflow-scrolling: touch;
    }
    .overscroll-contain\@md {
      -ms-scroll-chaining: none;
          overscroll-behavior: contain;
    }
    .visible\@md {
      visibility: visible;
    }
    .invisible\@md {
      visibility: hidden;
    }
  }
  @media not all and (min-width: 64rem) {
    .display\@md {
      display: none !important;
    }
  }
  @media (min-width: 80rem) {
    .flex\@lg {
      display: flex;
    }
    .inline-flex\@lg {
      display: inline-flex;
    }
    .flex-wrap\@lg {
      flex-wrap: wrap;
    }
    .flex-nowrap\@lg {
      flex-wrap: nowrap;
    }
    .flex-column\@lg {
      flex-direction: column;
    }
    .flex-column-reverse\@lg {
      flex-direction: column-reverse;
    }
    .flex-row\@lg {
      flex-direction: row;
    }
    .flex-row-reverse\@lg {
      flex-direction: row-reverse;
    }
    .flex-center\@lg {
      justify-content: center;
      align-items: center;
    }
    .flex-grow\@lg {
      flex-grow: 1;
    }
    .flex-grow-0\@lg {
      flex-grow: 0;
    }
    .flex-shrink\@lg {
      flex-shrink: 1;
    }
    .flex-shrink-0\@lg {
      flex-shrink: 0;
    }
    .flex-basis-0\@lg {
      flex-basis: 0;
    }
    .justify-start\@lg {
      justify-content: flex-start;
    }
    .justify-end\@lg {
      justify-content: flex-end;
    }
    .justify-center\@lg {
      justify-content: center;
    }
    .justify-between\@lg {
      justify-content: space-between;
    }
    .items-center\@lg {
      align-items: center;
    }
    .items-start\@lg {
      align-items: flex-start;
    }
    .items-end\@lg {
      align-items: flex-end;
    }
    .items-baseline\@lg {
      align-items: baseline;
    }
    .order-1\@lg {
      order: 1;
    }
    .order-2\@lg {
      order: 2;
    }
    .order-3\@lg {
      order: 3;
    }
    .block\@lg {
      display: block;
    }
    .inline-block\@lg {
      display: inline-block;
    }
    .inline\@lg {
      display: inline;
    }
    .contents\@lg {
      display: contents;
    }
    .hide\@lg {
      display: none !important;
    }
    .margin-xxxxs\@lg {
      margin: var(--space-xxxxs);
    }
    .margin-xxxs\@lg {
      margin: var(--space-xxxs);
    }
    .margin-xxs\@lg {
      margin: var(--space-xxs);
    }
    .margin-xs\@lg {
      margin: var(--space-xs);
    }
    .margin-sm\@lg {
      margin: var(--space-sm);
    }
    .margin-md\@lg {
      margin: var(--space-md);
    }
    .margin-lg\@lg {
      margin: var(--space-lg);
    }
    .margin-xl\@lg {
      margin: var(--space-xl);
    }
    .margin-xxl\@lg {
      margin: var(--space-xxl);
    }
    .margin-xxxl\@lg {
      margin: var(--space-xxxl);
    }
    .margin-xxxxl\@lg {
      margin: var(--space-xxxxl);
    }
    .margin-auto\@lg {
      margin: auto;
    }
    .margin-0\@lg {
      margin: 0;
    }
    .margin-top-xxxxs\@lg {
      margin-top: var(--space-xxxxs);
    }
    .margin-top-xxxs\@lg {
      margin-top: var(--space-xxxs);
    }
    .margin-top-xxs\@lg {
      margin-top: var(--space-xxs);
    }
    .margin-top-xs\@lg {
      margin-top: var(--space-xs);
    }
    .margin-top-sm\@lg {
      margin-top: var(--space-sm);
    }
    .margin-top-md\@lg {
      margin-top: var(--space-md);
    }
    .margin-top-lg\@lg {
      margin-top: var(--space-lg);
    }
    .margin-top-xl\@lg {
      margin-top: var(--space-xl);
    }
    .margin-top-xxl\@lg {
      margin-top: var(--space-xxl);
    }
    .margin-top-xxxl\@lg {
      margin-top: var(--space-xxxl);
    }
    .margin-top-xxxxl\@lg {
      margin-top: var(--space-xxxxl);
    }
    .margin-top-auto\@lg {
      margin-top: auto;
    }
    .margin-top-0\@lg {
      margin-top: 0;
    }
    .margin-bottom-xxxxs\@lg {
      margin-bottom: var(--space-xxxxs);
    }
    .margin-bottom-xxxs\@lg {
      margin-bottom: var(--space-xxxs);
    }
    .margin-bottom-xxs\@lg {
      margin-bottom: var(--space-xxs);
    }
    .margin-bottom-xs\@lg {
      margin-bottom: var(--space-xs);
    }
    .margin-bottom-sm\@lg {
      margin-bottom: var(--space-sm);
    }
    .margin-bottom-md\@lg {
      margin-bottom: var(--space-md);
    }
    .margin-bottom-lg\@lg {
      margin-bottom: var(--space-lg);
    }
    .margin-bottom-xl\@lg {
      margin-bottom: var(--space-xl);
    }
    .margin-bottom-xxl\@lg {
      margin-bottom: var(--space-xxl);
    }
    .margin-bottom-xxxl\@lg {
      margin-bottom: var(--space-xxxl);
    }
    .margin-bottom-xxxxl\@lg {
      margin-bottom: var(--space-xxxxl);
    }
    .margin-bottom-auto\@lg {
      margin-bottom: auto;
    }
    .margin-bottom-0\@lg {
      margin-bottom: 0;
    }
    .margin-right-xxxxs\@lg {
      margin-right: var(--space-xxxxs);
    }
    .margin-right-xxxs\@lg {
      margin-right: var(--space-xxxs);
    }
    .margin-right-xxs\@lg {
      margin-right: var(--space-xxs);
    }
    .margin-right-xs\@lg {
      margin-right: var(--space-xs);
    }
    .margin-right-sm\@lg {
      margin-right: var(--space-sm);
    }
    .margin-right-md\@lg {
      margin-right: var(--space-md);
    }
    .margin-right-lg\@lg {
      margin-right: var(--space-lg);
    }
    .margin-right-xl\@lg {
      margin-right: var(--space-xl);
    }
    .margin-right-xxl\@lg {
      margin-right: var(--space-xxl);
    }
    .margin-right-xxxl\@lg {
      margin-right: var(--space-xxxl);
    }
    .margin-right-xxxxl\@lg {
      margin-right: var(--space-xxxxl);
    }
    .margin-right-auto\@lg {
      margin-right: auto;
    }
    .margin-right-0\@lg {
      margin-right: 0;
    }
    .margin-left-xxxxs\@lg {
      margin-left: var(--space-xxxxs);
    }
    .margin-left-xxxs\@lg {
      margin-left: var(--space-xxxs);
    }
    .margin-left-xxs\@lg {
      margin-left: var(--space-xxs);
    }
    .margin-left-xs\@lg {
      margin-left: var(--space-xs);
    }
    .margin-left-sm\@lg {
      margin-left: var(--space-sm);
    }
    .margin-left-md\@lg {
      margin-left: var(--space-md);
    }
    .margin-left-lg\@lg {
      margin-left: var(--space-lg);
    }
    .margin-left-xl\@lg {
      margin-left: var(--space-xl);
    }
    .margin-left-xxl\@lg {
      margin-left: var(--space-xxl);
    }
    .margin-left-xxxl\@lg {
      margin-left: var(--space-xxxl);
    }
    .margin-left-xxxxl\@lg {
      margin-left: var(--space-xxxxl);
    }
    .margin-left-auto\@lg {
      margin-left: auto;
    }
    .margin-left-0\@lg {
      margin-left: 0;
    }
    .margin-x-xxxxs\@lg {
      margin-left: var(--space-xxxxs);
      margin-right: var(--space-xxxxs);
    }
    .margin-x-xxxs\@lg {
      margin-left: var(--space-xxxs);
      margin-right: var(--space-xxxs);
    }
    .margin-x-xxs\@lg {
      margin-left: var(--space-xxs);
      margin-right: var(--space-xxs);
    }
    .margin-x-xs\@lg {
      margin-left: var(--space-xs);
      margin-right: var(--space-xs);
    }
    .margin-x-sm\@lg {
      margin-left: var(--space-sm);
      margin-right: var(--space-sm);
    }
    .margin-x-md\@lg {
      margin-left: var(--space-md);
      margin-right: var(--space-md);
    }
    .margin-x-lg\@lg {
      margin-left: var(--space-lg);
      margin-right: var(--space-lg);
    }
    .margin-x-xl\@lg {
      margin-left: var(--space-xl);
      margin-right: var(--space-xl);
    }
    .margin-x-xxl\@lg {
      margin-left: var(--space-xxl);
      margin-right: var(--space-xxl);
    }
    .margin-x-xxxl\@lg {
      margin-left: var(--space-xxxl);
      margin-right: var(--space-xxxl);
    }
    .margin-x-xxxxl\@lg {
      margin-left: var(--space-xxxxl);
      margin-right: var(--space-xxxxl);
    }
    .margin-x-auto\@lg {
      margin-left: auto;
      margin-right: auto;
    }
    .margin-x-0\@lg {
      margin-left: 0;
      margin-right: 0;
    }
    .margin-y-xxxxs\@lg {
      margin-top: var(--space-xxxxs);
      margin-bottom: var(--space-xxxxs);
    }
    .margin-y-xxxs\@lg {
      margin-top: var(--space-xxxs);
      margin-bottom: var(--space-xxxs);
    }
    .margin-y-xxs\@lg {
      margin-top: var(--space-xxs);
      margin-bottom: var(--space-xxs);
    }
    .margin-y-xs\@lg {
      margin-top: var(--space-xs);
      margin-bottom: var(--space-xs);
    }
    .margin-y-sm\@lg {
      margin-top: var(--space-sm);
      margin-bottom: var(--space-sm);
    }
    .margin-y-md\@lg {
      margin-top: var(--space-md);
      margin-bottom: var(--space-md);
    }
    .margin-y-lg\@lg {
      margin-top: var(--space-lg);
      margin-bottom: var(--space-lg);
    }
    .margin-y-xl\@lg {
      margin-top: var(--space-xl);
      margin-bottom: var(--space-xl);
    }
    .margin-y-xxl\@lg {
      margin-top: var(--space-xxl);
      margin-bottom: var(--space-xxl);
    }
    .margin-y-xxxl\@lg {
      margin-top: var(--space-xxxl);
      margin-bottom: var(--space-xxxl);
    }
    .margin-y-xxxxl\@lg {
      margin-top: var(--space-xxxxl);
      margin-bottom: var(--space-xxxxl);
    }
    .margin-y-auto\@lg {
      margin-top: auto;
      margin-bottom: auto;
    }
    .margin-y-0\@lg {
      margin-top: 0;
      margin-bottom: 0;
    }
    .padding-xxxxs\@lg {
      padding: var(--space-xxxxs);
    }
    .padding-xxxs\@lg {
      padding: var(--space-xxxs);
    }
    .padding-xxs\@lg {
      padding: var(--space-xxs);
    }
    .padding-xs\@lg {
      padding: var(--space-xs);
    }
    .padding-sm\@lg {
      padding: var(--space-sm);
    }
    .padding-md\@lg {
      padding: var(--space-md);
    }
    .padding-lg\@lg {
      padding: var(--space-lg);
    }
    .padding-xl\@lg {
      padding: var(--space-xl);
    }
    .padding-xxl\@lg {
      padding: var(--space-xxl);
    }
    .padding-xxxl\@lg {
      padding: var(--space-xxxl);
    }
    .padding-xxxxl\@lg {
      padding: var(--space-xxxxl);
    }
    .padding-0\@lg {
      padding: 0;
    }
    .padding-component\@lg {
      padding: var(--component-padding);
    }
    .padding-top-xxxxs\@lg {
      padding-top: var(--space-xxxxs);
    }
    .padding-top-xxxs\@lg {
      padding-top: var(--space-xxxs);
    }
    .padding-top-xxs\@lg {
      padding-top: var(--space-xxs);
    }
    .padding-top-xs\@lg {
      padding-top: var(--space-xs);
    }
    .padding-top-sm\@lg {
      padding-top: var(--space-sm);
    }
    .padding-top-md\@lg {
      padding-top: var(--space-md);
    }
    .padding-top-lg\@lg {
      padding-top: var(--space-lg);
    }
    .padding-top-xl\@lg {
      padding-top: var(--space-xl);
    }
    .padding-top-xxl\@lg {
      padding-top: var(--space-xxl);
    }
    .padding-top-xxxl\@lg {
      padding-top: var(--space-xxxl);
    }
    .padding-top-xxxxl\@lg {
      padding-top: var(--space-xxxxl);
    }
    .padding-top-0\@lg {
      padding-top: 0;
    }
    .padding-top-component\@lg {
      padding-top: var(--component-padding);
    }
    .padding-bottom-xxxxs\@lg {
      padding-bottom: var(--space-xxxxs);
    }
    .padding-bottom-xxxs\@lg {
      padding-bottom: var(--space-xxxs);
    }
    .padding-bottom-xxs\@lg {
      padding-bottom: var(--space-xxs);
    }
    .padding-bottom-xs\@lg {
      padding-bottom: var(--space-xs);
    }
    .padding-bottom-sm\@lg {
      padding-bottom: var(--space-sm);
    }
    .padding-bottom-md\@lg {
      padding-bottom: var(--space-md);
    }
    .padding-bottom-lg\@lg {
      padding-bottom: var(--space-lg);
    }
    .padding-bottom-xl\@lg {
      padding-bottom: var(--space-xl);
    }
    .padding-bottom-xxl\@lg {
      padding-bottom: var(--space-xxl);
    }
    .padding-bottom-xxxl\@lg {
      padding-bottom: var(--space-xxxl);
    }
    .padding-bottom-xxxxl\@lg {
      padding-bottom: var(--space-xxxxl);
    }
    .padding-bottom-0\@lg {
      padding-bottom: 0;
    }
    .padding-bottom-component\@lg {
      padding-bottom: var(--component-padding);
    }
    .padding-right-xxxxs\@lg {
      padding-right: var(--space-xxxxs);
    }
    .padding-right-xxxs\@lg {
      padding-right: var(--space-xxxs);
    }
    .padding-right-xxs\@lg {
      padding-right: var(--space-xxs);
    }
    .padding-right-xs\@lg {
      padding-right: var(--space-xs);
    }
    .padding-right-sm\@lg {
      padding-right: var(--space-sm);
    }
    .padding-right-md\@lg {
      padding-right: var(--space-md);
    }
    .padding-right-lg\@lg {
      padding-right: var(--space-lg);
    }
    .padding-right-xl\@lg {
      padding-right: var(--space-xl);
    }
    .padding-right-xxl\@lg {
      padding-right: var(--space-xxl);
    }
    .padding-right-xxxl\@lg {
      padding-right: var(--space-xxxl);
    }
    .padding-right-xxxxl\@lg {
      padding-right: var(--space-xxxxl);
    }
    .padding-right-0\@lg {
      padding-right: 0;
    }
    .padding-right-component\@lg {
      padding-right: var(--component-padding);
    }
    .padding-left-xxxxs\@lg {
      padding-left: var(--space-xxxxs);
    }
    .padding-left-xxxs\@lg {
      padding-left: var(--space-xxxs);
    }
    .padding-left-xxs\@lg {
      padding-left: var(--space-xxs);
    }
    .padding-left-xs\@lg {
      padding-left: var(--space-xs);
    }
    .padding-left-sm\@lg {
      padding-left: var(--space-sm);
    }
    .padding-left-md\@lg {
      padding-left: var(--space-md);
    }
    .padding-left-lg\@lg {
      padding-left: var(--space-lg);
    }
    .padding-left-xl\@lg {
      padding-left: var(--space-xl);
    }
    .padding-left-xxl\@lg {
      padding-left: var(--space-xxl);
    }
    .padding-left-xxxl\@lg {
      padding-left: var(--space-xxxl);
    }
    .padding-left-xxxxl\@lg {
      padding-left: var(--space-xxxxl);
    }
    .padding-left-0\@lg {
      padding-left: 0;
    }
    .padding-left-component\@lg {
      padding-left: var(--component-padding);
    }
    .padding-x-xxxxs\@lg {
      padding-left: var(--space-xxxxs);
      padding-right: var(--space-xxxxs);
    }
    .padding-x-xxxs\@lg {
      padding-left: var(--space-xxxs);
      padding-right: var(--space-xxxs);
    }
    .padding-x-xxs\@lg {
      padding-left: var(--space-xxs);
      padding-right: var(--space-xxs);
    }
    .padding-x-xs\@lg {
      padding-left: var(--space-xs);
      padding-right: var(--space-xs);
    }
    .padding-x-sm\@lg {
      padding-left: var(--space-sm);
      padding-right: var(--space-sm);
    }
    .padding-x-md\@lg {
      padding-left: var(--space-md);
      padding-right: var(--space-md);
    }
    .padding-x-lg\@lg {
      padding-left: var(--space-lg);
      padding-right: var(--space-lg);
    }
    .padding-x-xl\@lg {
      padding-left: var(--space-xl);
      padding-right: var(--space-xl);
    }
    .padding-x-xxl\@lg {
      padding-left: var(--space-xxl);
      padding-right: var(--space-xxl);
    }
    .padding-x-xxxl\@lg {
      padding-left: var(--space-xxxl);
      padding-right: var(--space-xxxl);
    }
    .padding-x-xxxxl\@lg {
      padding-left: var(--space-xxxxl);
      padding-right: var(--space-xxxxl);
    }
    .padding-x-0\@lg {
      padding-left: 0;
      padding-right: 0;
    }
    .padding-x-component\@lg {
      padding-left: var(--component-padding);
      padding-right: var(--component-padding);
    }
    .padding-y-xxxxs\@lg {
      padding-top: var(--space-xxxxs);
      padding-bottom: var(--space-xxxxs);
    }
    .padding-y-xxxs\@lg {
      padding-top: var(--space-xxxs);
      padding-bottom: var(--space-xxxs);
    }
    .padding-y-xxs\@lg {
      padding-top: var(--space-xxs);
      padding-bottom: var(--space-xxs);
    }
    .padding-y-xs\@lg {
      padding-top: var(--space-xs);
      padding-bottom: var(--space-xs);
    }
    .padding-y-sm\@lg {
      padding-top: var(--space-sm);
      padding-bottom: var(--space-sm);
    }
    .padding-y-md\@lg {
      padding-top: var(--space-md);
      padding-bottom: var(--space-md);
    }
    .padding-y-lg\@lg {
      padding-top: var(--space-lg);
      padding-bottom: var(--space-lg);
    }
    .padding-y-xl\@lg {
      padding-top: var(--space-xl);
      padding-bottom: var(--space-xl);
    }
    .padding-y-xxl\@lg {
      padding-top: var(--space-xxl);
      padding-bottom: var(--space-xxl);
    }
    .padding-y-xxxl\@lg {
      padding-top: var(--space-xxxl);
      padding-bottom: var(--space-xxxl);
    }
    .padding-y-xxxxl\@lg {
      padding-top: var(--space-xxxxl);
      padding-bottom: var(--space-xxxxl);
    }
    .padding-y-0\@lg {
      padding-top: 0;
      padding-bottom: 0;
    }
    .padding-y-component\@lg {
      padding-top: var(--component-padding);
      padding-bottom: var(--component-padding);
    }
    .text-center\@lg {
      text-align: center;
    }
    .text-left\@lg {
      text-align: left;
    }
    .text-right\@lg {
      text-align: right;
    }
    .text-justify\@lg {
      text-align: justify;
    }
    .text-xs\@lg {
      font-size: var(--text-xs, 0.6875rem);
    }
    .text-sm\@lg {
      font-size: var(--text-sm, 0.75rem);
    }
    .text-base\@lg {
      font-size: var(--text-unit, 1rem);
    }
    .text-md\@lg {
      font-size: var(--text-md, 1.125rem);
    }
    .text-lg\@lg {
      font-size: var(--text-lg, 1.375rem);
    }
    .text-xl\@lg {
      font-size: var(--text-xl, 1.75rem);
    }
    .text-xxl\@lg {
      font-size: var(--text-xxl, 2rem);
    }
    .text-xxxl\@lg {
      font-size: var(--text-xxxl, 2.5rem);
    }
    .text-xxxxl\@lg {
      font-size: var(--text-xxxxl, 3rem);
    }
    .width-xxxxs\@lg {
      width: var(--size-xxxxs, 0.25rem);
    }
    .width-xxxs\@lg {
      width: var(--size-xxxs, 0.5rem);
    }
    .width-xxs\@lg {
      width: var(--size-xxs, 0.75rem);
    }
    .width-xs\@lg {
      width: var(--size-xs, 1rem);
    }
    .width-sm\@lg {
      width: var(--size-sm, 1.5rem);
    }
    .width-md\@lg {
      width: var(--size-md, 2rem);
    }
    .width-lg\@lg {
      width: var(--size-lg, 3rem);
    }
    .width-xl\@lg {
      width: var(--size-xl, 4rem);
    }
    .width-xxl\@lg {
      width: var(--size-xxl, 6rem);
    }
    .width-xxxl\@lg {
      width: var(--size-xxxl, 8rem);
    }
    .width-xxxxl\@lg {
      width: var(--size-xxxxl, 16rem);
    }
    .width-0\@lg {
      width: 0;
    }
    .width-10\%\@lg {
      width: 10%;
    }
    .width-20\%\@lg {
      width: 20%;
    }
    .width-25\%\@lg {
      width: 25%;
    }
    .width-30\%\@lg {
      width: 30%;
    }
    .width-33\%\@lg {
      width: 33.3333333333%;
    }
    .width-40\%\@lg {
      width: 40%;
    }
    .width-50\%\@lg {
      width: 50%;
    }
    .width-60\%\@lg {
      width: 60%;
    }
    .width-66\%\@lg {
      width: 66.6666666667%;
    }
    .width-70\%\@lg {
      width: 70%;
    }
    .width-75\%\@lg {
      width: 75%;
    }
    .width-80\%\@lg {
      width: 80%;
    }
    .width-90\%\@lg {
      width: 90%;
    }
    .width-100\%\@lg {
      width: 100%;
    }
    .width-100vw\@lg {
      width: 100vw;
    }
    .width-auto\@lg {
      width: auto;
    }
    .width-inherit\@lg {
      width: inherit;
    }
    .height-xxxxs\@lg {
      height: var(--size-xxxxs, 0.25rem);
    }
    .height-xxxs\@lg {
      height: var(--size-xxxs, 0.5rem);
    }
    .height-xxs\@lg {
      height: var(--size-xxs, 0.75rem);
    }
    .height-xs\@lg {
      height: var(--size-xs, 1rem);
    }
    .height-sm\@lg {
      height: var(--size-sm, 1.5rem);
    }
    .height-md\@lg {
      height: var(--size-md, 2rem);
    }
    .height-lg\@lg {
      height: var(--size-lg, 3rem);
    }
    .height-xl\@lg {
      height: var(--size-xl, 4rem);
    }
    .height-xxl\@lg {
      height: var(--size-xxl, 6rem);
    }
    .height-xxxl\@lg {
      height: var(--size-xxxl, 8rem);
    }
    .height-xxxxl\@lg {
      height: var(--size-xxxxl, 16rem);
    }
    .height-0\@lg {
      height: 0;
    }
    .height-10\%\@lg {
      height: 10%;
    }
    .height-20\%\@lg {
      height: 20%;
    }
    .height-25\%\@lg {
      height: 25%;
    }
    .height-30\%\@lg {
      height: 30%;
    }
    .height-33\%\@lg {
      height: 33.3333333333%;
    }
    .height-40\%\@lg {
      height: 40%;
    }
    .height-50\%\@lg {
      height: 50%;
    }
    .height-60\%\@lg {
      height: 60%;
    }
    .height-66\%\@lg {
      height: 66.6666666667%;
    }
    .height-70\%\@lg {
      height: 70%;
    }
    .height-75\%\@lg {
      height: 75%;
    }
    .height-80\%\@lg {
      height: 80%;
    }
    .height-90\%\@lg {
      height: 90%;
    }
    .height-100\%\@lg {
      height: 100%;
    }
    .height-100vh\@lg {
      height: 100vh;
    }
    .height-auto\@lg {
      height: auto;
    }
    .height-inherit\@lg {
      height: inherit;
    }
    .max-width-xxxxs\@lg {
      max-width: var(--max-width-xxxxs);
    }
    .max-width-xxxs\@lg {
      max-width: var(--max-width-xxxs);
    }
    .max-width-xxs\@lg {
      max-width: var(--max-width-xxs);
    }
    .max-width-xs\@lg {
      max-width: var(--max-width-xs);
    }
    .max-width-sm\@lg {
      max-width: var(--max-width-sm);
    }
    .max-width-md\@lg {
      max-width: var(--max-width-md);
    }
    .max-width-lg\@lg {
      max-width: var(--max-width-lg);
    }
    .max-width-xl\@lg {
      max-width: var(--max-width-xl);
    }
    .max-width-xxl\@lg {
      max-width: var(--max-width-xxl);
    }
    .max-width-xxxl\@lg {
      max-width: var(--max-width-xxxl);
    }
    .max-width-xxxxl\@lg {
      max-width: var(--max-width-xxxxl);
    }
    .max-width-100\%\@lg {
      max-width: 100%;
    }
    .max-width-none\@lg {
      max-width: none;
    }
    .position-relative\@lg {
      position: relative;
    }
    .position-absolute\@lg {
      position: absolute;
    }
    .position-fixed\@lg {
      position: fixed;
    }
    .position-sticky\@lg {
      position: -webkit-sticky;
      position: sticky;
    }
    .position-static\@lg {
      position: static;
    }
    .inset-0\@lg {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    .top-0\@lg {
      top: 0;
    }
    .top-50\%\@lg {
      top: 50%;
    }
    .top-xxxxs\@lg {
      top: var(--space-xxxxs);
    }
    .top-xxxs\@lg {
      top: var(--space-xxxs);
    }
    .top-xxs\@lg {
      top: var(--space-xxs);
    }
    .top-xs\@lg {
      top: var(--space-xs);
    }
    .top-sm\@lg {
      top: var(--space-sm);
    }
    .top-md\@lg {
      top: var(--space-md);
    }
    .top-lg\@lg {
      top: var(--space-lg);
    }
    .top-xl\@lg {
      top: var(--space-xl);
    }
    .top-xxl\@lg {
      top: var(--space-xxl);
    }
    .top-xxxl\@lg {
      top: var(--space-xxxl);
    }
    .top-xxxxl\@lg {
      top: var(--space-xxxxl);
    }
    .bottom-0\@lg {
      bottom: 0;
    }
    .bottom-50\%\@lg {
      bottom: 50%;
    }
    .bottom-xxxxs\@lg {
      bottom: var(--space-xxxxs);
    }
    .bottom-xxxs\@lg {
      bottom: var(--space-xxxs);
    }
    .bottom-xxs\@lg {
      bottom: var(--space-xxs);
    }
    .bottom-xs\@lg {
      bottom: var(--space-xs);
    }
    .bottom-sm\@lg {
      bottom: var(--space-sm);
    }
    .bottom-md\@lg {
      bottom: var(--space-md);
    }
    .bottom-lg\@lg {
      bottom: var(--space-lg);
    }
    .bottom-xl\@lg {
      bottom: var(--space-xl);
    }
    .bottom-xxl\@lg {
      bottom: var(--space-xxl);
    }
    .bottom-xxxl\@lg {
      bottom: var(--space-xxxl);
    }
    .bottom-xxxxl\@lg {
      bottom: var(--space-xxxxl);
    }
    .right-0\@lg {
      right: 0;
    }
    .right-50\%\@lg {
      right: 50%;
    }
    .right-xxxxs\@lg {
      right: var(--space-xxxxs);
    }
    .right-xxxs\@lg {
      right: var(--space-xxxs);
    }
    .right-xxs\@lg {
      right: var(--space-xxs);
    }
    .right-xs\@lg {
      right: var(--space-xs);
    }
    .right-sm\@lg {
      right: var(--space-sm);
    }
    .right-md\@lg {
      right: var(--space-md);
    }
    .right-lg\@lg {
      right: var(--space-lg);
    }
    .right-xl\@lg {
      right: var(--space-xl);
    }
    .right-xxl\@lg {
      right: var(--space-xxl);
    }
    .right-xxxl\@lg {
      right: var(--space-xxxl);
    }
    .right-xxxxl\@lg {
      right: var(--space-xxxxl);
    }
    .left-0\@lg {
      left: 0;
    }
    .left-50\%\@lg {
      left: 50%;
    }
    .left-xxxxs\@lg {
      left: var(--space-xxxxs);
    }
    .left-xxxs\@lg {
      left: var(--space-xxxs);
    }
    .left-xxs\@lg {
      left: var(--space-xxs);
    }
    .left-xs\@lg {
      left: var(--space-xs);
    }
    .left-sm\@lg {
      left: var(--space-sm);
    }
    .left-md\@lg {
      left: var(--space-md);
    }
    .left-lg\@lg {
      left: var(--space-lg);
    }
    .left-xl\@lg {
      left: var(--space-xl);
    }
    .left-xxl\@lg {
      left: var(--space-xxl);
    }
    .left-xxxl\@lg {
      left: var(--space-xxxl);
    }
    .left-xxxxl\@lg {
      left: var(--space-xxxxl);
    }
    .overflow-hidden\@lg {
      overflow: hidden;
    }
    .overflow-auto\@lg {
      overflow: auto;
    }
    .momentum-scrolling\@lg {
      -webkit-overflow-scrolling: touch;
    }
    .overscroll-contain\@lg {
      -ms-scroll-chaining: none;
          overscroll-behavior: contain;
    }
    .visible\@lg {
      visibility: visible;
    }
    .invisible\@lg {
      visibility: hidden;
    }
  }
  @media not all and (min-width: 80rem) {
    .display\@lg {
      display: none !important;
    }
  }
  @media (min-width: 90rem) {
    .flex\@xl {
      display: flex;
    }
    .inline-flex\@xl {
      display: inline-flex;
    }
    .flex-wrap\@xl {
      flex-wrap: wrap;
    }
    .flex-nowrap\@xl {
      flex-wrap: nowrap;
    }
    .flex-column\@xl {
      flex-direction: column;
    }
    .flex-column-reverse\@xl {
      flex-direction: column-reverse;
    }
    .flex-row\@xl {
      flex-direction: row;
    }
    .flex-row-reverse\@xl {
      flex-direction: row-reverse;
    }
    .flex-center\@xl {
      justify-content: center;
      align-items: center;
    }
    .flex-grow\@xl {
      flex-grow: 1;
    }
    .flex-grow-0\@xl {
      flex-grow: 0;
    }
    .flex-shrink\@xl {
      flex-shrink: 1;
    }
    .flex-shrink-0\@xl {
      flex-shrink: 0;
    }
    .flex-basis-0\@xl {
      flex-basis: 0;
    }
    .justify-start\@xl {
      justify-content: flex-start;
    }
    .justify-end\@xl {
      justify-content: flex-end;
    }
    .justify-center\@xl {
      justify-content: center;
    }
    .justify-between\@xl {
      justify-content: space-between;
    }
    .items-center\@xl {
      align-items: center;
    }
    .items-start\@xl {
      align-items: flex-start;
    }
    .items-end\@xl {
      align-items: flex-end;
    }
    .items-baseline\@xl {
      align-items: baseline;
    }
    .order-1\@xl {
      order: 1;
    }
    .order-2\@xl {
      order: 2;
    }
    .order-3\@xl {
      order: 3;
    }
    .block\@xl {
      display: block;
    }
    .inline-block\@xl {
      display: inline-block;
    }
    .inline\@xl {
      display: inline;
    }
    .contents\@xl {
      display: contents;
    }
    .hide\@xl {
      display: none !important;
    }
    .margin-xxxxs\@xl {
      margin: var(--space-xxxxs);
    }
    .margin-xxxs\@xl {
      margin: var(--space-xxxs);
    }
    .margin-xxs\@xl {
      margin: var(--space-xxs);
    }
    .margin-xs\@xl {
      margin: var(--space-xs);
    }
    .margin-sm\@xl {
      margin: var(--space-sm);
    }
    .margin-md\@xl {
      margin: var(--space-md);
    }
    .margin-lg\@xl {
      margin: var(--space-lg);
    }
    .margin-xl\@xl {
      margin: var(--space-xl);
    }
    .margin-xxl\@xl {
      margin: var(--space-xxl);
    }
    .margin-xxxl\@xl {
      margin: var(--space-xxxl);
    }
    .margin-xxxxl\@xl {
      margin: var(--space-xxxxl);
    }
    .margin-auto\@xl {
      margin: auto;
    }
    .margin-0\@xl {
      margin: 0;
    }
    .margin-top-xxxxs\@xl {
      margin-top: var(--space-xxxxs);
    }
    .margin-top-xxxs\@xl {
      margin-top: var(--space-xxxs);
    }
    .margin-top-xxs\@xl {
      margin-top: var(--space-xxs);
    }
    .margin-top-xs\@xl {
      margin-top: var(--space-xs);
    }
    .margin-top-sm\@xl {
      margin-top: var(--space-sm);
    }
    .margin-top-md\@xl {
      margin-top: var(--space-md);
    }
    .margin-top-lg\@xl {
      margin-top: var(--space-lg);
    }
    .margin-top-xl\@xl {
      margin-top: var(--space-xl);
    }
    .margin-top-xxl\@xl {
      margin-top: var(--space-xxl);
    }
    .margin-top-xxxl\@xl {
      margin-top: var(--space-xxxl);
    }
    .margin-top-xxxxl\@xl {
      margin-top: var(--space-xxxxl);
    }
    .margin-top-auto\@xl {
      margin-top: auto;
    }
    .margin-top-0\@xl {
      margin-top: 0;
    }
    .margin-bottom-xxxxs\@xl {
      margin-bottom: var(--space-xxxxs);
    }
    .margin-bottom-xxxs\@xl {
      margin-bottom: var(--space-xxxs);
    }
    .margin-bottom-xxs\@xl {
      margin-bottom: var(--space-xxs);
    }
    .margin-bottom-xs\@xl {
      margin-bottom: var(--space-xs);
    }
    .margin-bottom-sm\@xl {
      margin-bottom: var(--space-sm);
    }
    .margin-bottom-md\@xl {
      margin-bottom: var(--space-md);
    }
    .margin-bottom-lg\@xl {
      margin-bottom: var(--space-lg);
    }
    .margin-bottom-xl\@xl {
      margin-bottom: var(--space-xl);
    }
    .margin-bottom-xxl\@xl {
      margin-bottom: var(--space-xxl);
    }
    .margin-bottom-xxxl\@xl {
      margin-bottom: var(--space-xxxl);
    }
    .margin-bottom-xxxxl\@xl {
      margin-bottom: var(--space-xxxxl);
    }
    .margin-bottom-auto\@xl {
      margin-bottom: auto;
    }
    .margin-bottom-0\@xl {
      margin-bottom: 0;
    }
    .margin-right-xxxxs\@xl {
      margin-right: var(--space-xxxxs);
    }
    .margin-right-xxxs\@xl {
      margin-right: var(--space-xxxs);
    }
    .margin-right-xxs\@xl {
      margin-right: var(--space-xxs);
    }
    .margin-right-xs\@xl {
      margin-right: var(--space-xs);
    }
    .margin-right-sm\@xl {
      margin-right: var(--space-sm);
    }
    .margin-right-md\@xl {
      margin-right: var(--space-md);
    }
    .margin-right-lg\@xl {
      margin-right: var(--space-lg);
    }
    .margin-right-xl\@xl {
      margin-right: var(--space-xl);
    }
    .margin-right-xxl\@xl {
      margin-right: var(--space-xxl);
    }
    .margin-right-xxxl\@xl {
      margin-right: var(--space-xxxl);
    }
    .margin-right-xxxxl\@xl {
      margin-right: var(--space-xxxxl);
    }
    .margin-right-auto\@xl {
      margin-right: auto;
    }
    .margin-right-0\@xl {
      margin-right: 0;
    }
    .margin-left-xxxxs\@xl {
      margin-left: var(--space-xxxxs);
    }
    .margin-left-xxxs\@xl {
      margin-left: var(--space-xxxs);
    }
    .margin-left-xxs\@xl {
      margin-left: var(--space-xxs);
    }
    .margin-left-xs\@xl {
      margin-left: var(--space-xs);
    }
    .margin-left-sm\@xl {
      margin-left: var(--space-sm);
    }
    .margin-left-md\@xl {
      margin-left: var(--space-md);
    }
    .margin-left-lg\@xl {
      margin-left: var(--space-lg);
    }
    .margin-left-xl\@xl {
      margin-left: var(--space-xl);
    }
    .margin-left-xxl\@xl {
      margin-left: var(--space-xxl);
    }
    .margin-left-xxxl\@xl {
      margin-left: var(--space-xxxl);
    }
    .margin-left-xxxxl\@xl {
      margin-left: var(--space-xxxxl);
    }
    .margin-left-auto\@xl {
      margin-left: auto;
    }
    .margin-left-0\@xl {
      margin-left: 0;
    }
    .margin-x-xxxxs\@xl {
      margin-left: var(--space-xxxxs);
      margin-right: var(--space-xxxxs);
    }
    .margin-x-xxxs\@xl {
      margin-left: var(--space-xxxs);
      margin-right: var(--space-xxxs);
    }
    .margin-x-xxs\@xl {
      margin-left: var(--space-xxs);
      margin-right: var(--space-xxs);
    }
    .margin-x-xs\@xl {
      margin-left: var(--space-xs);
      margin-right: var(--space-xs);
    }
    .margin-x-sm\@xl {
      margin-left: var(--space-sm);
      margin-right: var(--space-sm);
    }
    .margin-x-md\@xl {
      margin-left: var(--space-md);
      margin-right: var(--space-md);
    }
    .margin-x-lg\@xl {
      margin-left: var(--space-lg);
      margin-right: var(--space-lg);
    }
    .margin-x-xl\@xl {
      margin-left: var(--space-xl);
      margin-right: var(--space-xl);
    }
    .margin-x-xxl\@xl {
      margin-left: var(--space-xxl);
      margin-right: var(--space-xxl);
    }
    .margin-x-xxxl\@xl {
      margin-left: var(--space-xxxl);
      margin-right: var(--space-xxxl);
    }
    .margin-x-xxxxl\@xl {
      margin-left: var(--space-xxxxl);
      margin-right: var(--space-xxxxl);
    }
    .margin-x-auto\@xl {
      margin-left: auto;
      margin-right: auto;
    }
    .margin-x-0\@xl {
      margin-left: 0;
      margin-right: 0;
    }
    .margin-y-xxxxs\@xl {
      margin-top: var(--space-xxxxs);
      margin-bottom: var(--space-xxxxs);
    }
    .margin-y-xxxs\@xl {
      margin-top: var(--space-xxxs);
      margin-bottom: var(--space-xxxs);
    }
    .margin-y-xxs\@xl {
      margin-top: var(--space-xxs);
      margin-bottom: var(--space-xxs);
    }
    .margin-y-xs\@xl {
      margin-top: var(--space-xs);
      margin-bottom: var(--space-xs);
    }
    .margin-y-sm\@xl {
      margin-top: var(--space-sm);
      margin-bottom: var(--space-sm);
    }
    .margin-y-md\@xl {
      margin-top: var(--space-md);
      margin-bottom: var(--space-md);
    }
    .margin-y-lg\@xl {
      margin-top: var(--space-lg);
      margin-bottom: var(--space-lg);
    }
    .margin-y-xl\@xl {
      margin-top: var(--space-xl);
      margin-bottom: var(--space-xl);
    }
    .margin-y-xxl\@xl {
      margin-top: var(--space-xxl);
      margin-bottom: var(--space-xxl);
    }
    .margin-y-xxxl\@xl {
      margin-top: var(--space-xxxl);
      margin-bottom: var(--space-xxxl);
    }
    .margin-y-xxxxl\@xl {
      margin-top: var(--space-xxxxl);
      margin-bottom: var(--space-xxxxl);
    }
    .margin-y-auto\@xl {
      margin-top: auto;
      margin-bottom: auto;
    }
    .margin-y-0\@xl {
      margin-top: 0;
      margin-bottom: 0;
    }
    .padding-xxxxs\@xl {
      padding: var(--space-xxxxs);
    }
    .padding-xxxs\@xl {
      padding: var(--space-xxxs);
    }
    .padding-xxs\@xl {
      padding: var(--space-xxs);
    }
    .padding-xs\@xl {
      padding: var(--space-xs);
    }
    .padding-sm\@xl {
      padding: var(--space-sm);
    }
    .padding-md\@xl {
      padding: var(--space-md);
    }
    .padding-lg\@xl {
      padding: var(--space-lg);
    }
    .padding-xl\@xl {
      padding: var(--space-xl);
    }
    .padding-xxl\@xl {
      padding: var(--space-xxl);
    }
    .padding-xxxl\@xl {
      padding: var(--space-xxxl);
    }
    .padding-xxxxl\@xl {
      padding: var(--space-xxxxl);
    }
    .padding-0\@xl {
      padding: 0;
    }
    .padding-component\@xl {
      padding: var(--component-padding);
    }
    .padding-top-xxxxs\@xl {
      padding-top: var(--space-xxxxs);
    }
    .padding-top-xxxs\@xl {
      padding-top: var(--space-xxxs);
    }
    .padding-top-xxs\@xl {
      padding-top: var(--space-xxs);
    }
    .padding-top-xs\@xl {
      padding-top: var(--space-xs);
    }
    .padding-top-sm\@xl {
      padding-top: var(--space-sm);
    }
    .padding-top-md\@xl {
      padding-top: var(--space-md);
    }
    .padding-top-lg\@xl {
      padding-top: var(--space-lg);
    }
    .padding-top-xl\@xl {
      padding-top: var(--space-xl);
    }
    .padding-top-xxl\@xl {
      padding-top: var(--space-xxl);
    }
    .padding-top-xxxl\@xl {
      padding-top: var(--space-xxxl);
    }
    .padding-top-xxxxl\@xl {
      padding-top: var(--space-xxxxl);
    }
    .padding-top-0\@xl {
      padding-top: 0;
    }
    .padding-top-component\@xl {
      padding-top: var(--component-padding);
    }
    .padding-bottom-xxxxs\@xl {
      padding-bottom: var(--space-xxxxs);
    }
    .padding-bottom-xxxs\@xl {
      padding-bottom: var(--space-xxxs);
    }
    .padding-bottom-xxs\@xl {
      padding-bottom: var(--space-xxs);
    }
    .padding-bottom-xs\@xl {
      padding-bottom: var(--space-xs);
    }
    .padding-bottom-sm\@xl {
      padding-bottom: var(--space-sm);
    }
    .padding-bottom-md\@xl {
      padding-bottom: var(--space-md);
    }
    .padding-bottom-lg\@xl {
      padding-bottom: var(--space-lg);
    }
    .padding-bottom-xl\@xl {
      padding-bottom: var(--space-xl);
    }
    .padding-bottom-xxl\@xl {
      padding-bottom: var(--space-xxl);
    }
    .padding-bottom-xxxl\@xl {
      padding-bottom: var(--space-xxxl);
    }
    .padding-bottom-xxxxl\@xl {
      padding-bottom: var(--space-xxxxl);
    }
    .padding-bottom-0\@xl {
      padding-bottom: 0;
    }
    .padding-bottom-component\@xl {
      padding-bottom: var(--component-padding);
    }
    .padding-right-xxxxs\@xl {
      padding-right: var(--space-xxxxs);
    }
    .padding-right-xxxs\@xl {
      padding-right: var(--space-xxxs);
    }
    .padding-right-xxs\@xl {
      padding-right: var(--space-xxs);
    }
    .padding-right-xs\@xl {
      padding-right: var(--space-xs);
    }
    .padding-right-sm\@xl {
      padding-right: var(--space-sm);
    }
    .padding-right-md\@xl {
      padding-right: var(--space-md);
    }
    .padding-right-lg\@xl {
      padding-right: var(--space-lg);
    }
    .padding-right-xl\@xl {
      padding-right: var(--space-xl);
    }
    .padding-right-xxl\@xl {
      padding-right: var(--space-xxl);
    }
    .padding-right-xxxl\@xl {
      padding-right: var(--space-xxxl);
    }
    .padding-right-xxxxl\@xl {
      padding-right: var(--space-xxxxl);
    }
    .padding-right-0\@xl {
      padding-right: 0;
    }
    .padding-right-component\@xl {
      padding-right: var(--component-padding);
    }
    .padding-left-xxxxs\@xl {
      padding-left: var(--space-xxxxs);
    }
    .padding-left-xxxs\@xl {
      padding-left: var(--space-xxxs);
    }
    .padding-left-xxs\@xl {
      padding-left: var(--space-xxs);
    }
    .padding-left-xs\@xl {
      padding-left: var(--space-xs);
    }
    .padding-left-sm\@xl {
      padding-left: var(--space-sm);
    }
    .padding-left-md\@xl {
      padding-left: var(--space-md);
    }
    .padding-left-lg\@xl {
      padding-left: var(--space-lg);
    }
    .padding-left-xl\@xl {
      padding-left: var(--space-xl);
    }
    .padding-left-xxl\@xl {
      padding-left: var(--space-xxl);
    }
    .padding-left-xxxl\@xl {
      padding-left: var(--space-xxxl);
    }
    .padding-left-xxxxl\@xl {
      padding-left: var(--space-xxxxl);
    }
    .padding-left-0\@xl {
      padding-left: 0;
    }
    .padding-left-component\@xl {
      padding-left: var(--component-padding);
    }
    .padding-x-xxxxs\@xl {
      padding-left: var(--space-xxxxs);
      padding-right: var(--space-xxxxs);
    }
    .padding-x-xxxs\@xl {
      padding-left: var(--space-xxxs);
      padding-right: var(--space-xxxs);
    }
    .padding-x-xxs\@xl {
      padding-left: var(--space-xxs);
      padding-right: var(--space-xxs);
    }
    .padding-x-xs\@xl {
      padding-left: var(--space-xs);
      padding-right: var(--space-xs);
    }
    .padding-x-sm\@xl {
      padding-left: var(--space-sm);
      padding-right: var(--space-sm);
    }
    .padding-x-md\@xl {
      padding-left: var(--space-md);
      padding-right: var(--space-md);
    }
    .padding-x-lg\@xl {
      padding-left: var(--space-lg);
      padding-right: var(--space-lg);
    }
    .padding-x-xl\@xl {
      padding-left: var(--space-xl);
      padding-right: var(--space-xl);
    }
    .padding-x-xxl\@xl {
      padding-left: var(--space-xxl);
      padding-right: var(--space-xxl);
    }
    .padding-x-xxxl\@xl {
      padding-left: var(--space-xxxl);
      padding-right: var(--space-xxxl);
    }
    .padding-x-xxxxl\@xl {
      padding-left: var(--space-xxxxl);
      padding-right: var(--space-xxxxl);
    }
    .padding-x-0\@xl {
      padding-left: 0;
      padding-right: 0;
    }
    .padding-x-component\@xl {
      padding-left: var(--component-padding);
      padding-right: var(--component-padding);
    }
    .padding-y-xxxxs\@xl {
      padding-top: var(--space-xxxxs);
      padding-bottom: var(--space-xxxxs);
    }
    .padding-y-xxxs\@xl {
      padding-top: var(--space-xxxs);
      padding-bottom: var(--space-xxxs);
    }
    .padding-y-xxs\@xl {
      padding-top: var(--space-xxs);
      padding-bottom: var(--space-xxs);
    }
    .padding-y-xs\@xl {
      padding-top: var(--space-xs);
      padding-bottom: var(--space-xs);
    }
    .padding-y-sm\@xl {
      padding-top: var(--space-sm);
      padding-bottom: var(--space-sm);
    }
    .padding-y-md\@xl {
      padding-top: var(--space-md);
      padding-bottom: var(--space-md);
    }
    .padding-y-lg\@xl {
      padding-top: var(--space-lg);
      padding-bottom: var(--space-lg);
    }
    .padding-y-xl\@xl {
      padding-top: var(--space-xl);
      padding-bottom: var(--space-xl);
    }
    .padding-y-xxl\@xl {
      padding-top: var(--space-xxl);
      padding-bottom: var(--space-xxl);
    }
    .padding-y-xxxl\@xl {
      padding-top: var(--space-xxxl);
      padding-bottom: var(--space-xxxl);
    }
    .padding-y-xxxxl\@xl {
      padding-top: var(--space-xxxxl);
      padding-bottom: var(--space-xxxxl);
    }
    .padding-y-0\@xl {
      padding-top: 0;
      padding-bottom: 0;
    }
    .padding-y-component\@xl {
      padding-top: var(--component-padding);
      padding-bottom: var(--component-padding);
    }
    .text-center\@xl {
      text-align: center;
    }
    .text-left\@xl {
      text-align: left;
    }
    .text-right\@xl {
      text-align: right;
    }
    .text-justify\@xl {
      text-align: justify;
    }
    .text-xs\@xl {
      font-size: var(--text-xs, 0.6875rem);
    }
    .text-sm\@xl {
      font-size: var(--text-sm, 0.75rem);
    }
    .text-base\@xl {
      font-size: var(--text-unit, 1rem);
    }
    .text-md\@xl {
      font-size: var(--text-md, 1.125rem);
    }
    .text-lg\@xl {
      font-size: var(--text-lg, 1.375rem);
    }
    .text-xl\@xl {
      font-size: var(--text-xl, 1.75rem);
    }
    .text-xxl\@xl {
      font-size: var(--text-xxl, 2rem);
    }
    .text-xxxl\@xl {
      font-size: var(--text-xxxl, 2.5rem);
    }
    .text-xxxxl\@xl {
      font-size: var(--text-xxxxl, 3rem);
    }
    .width-xxxxs\@xl {
      width: var(--size-xxxxs, 0.25rem);
    }
    .width-xxxs\@xl {
      width: var(--size-xxxs, 0.5rem);
    }
    .width-xxs\@xl {
      width: var(--size-xxs, 0.75rem);
    }
    .width-xs\@xl {
      width: var(--size-xs, 1rem);
    }
    .width-sm\@xl {
      width: var(--size-sm, 1.5rem);
    }
    .width-md\@xl {
      width: var(--size-md, 2rem);
    }
    .width-lg\@xl {
      width: var(--size-lg, 3rem);
    }
    .width-xl\@xl {
      width: var(--size-xl, 4rem);
    }
    .width-xxl\@xl {
      width: var(--size-xxl, 6rem);
    }
    .width-xxxl\@xl {
      width: var(--size-xxxl, 8rem);
    }
    .width-xxxxl\@xl {
      width: var(--size-xxxxl, 16rem);
    }
    .width-0\@xl {
      width: 0;
    }
    .width-10\%\@xl {
      width: 10%;
    }
    .width-20\%\@xl {
      width: 20%;
    }
    .width-25\%\@xl {
      width: 25%;
    }
    .width-30\%\@xl {
      width: 30%;
    }
    .width-33\%\@xl {
      width: 33.3333333333%;
    }
    .width-40\%\@xl {
      width: 40%;
    }
    .width-50\%\@xl {
      width: 50%;
    }
    .width-60\%\@xl {
      width: 60%;
    }
    .width-66\%\@xl {
      width: 66.6666666667%;
    }
    .width-70\%\@xl {
      width: 70%;
    }
    .width-75\%\@xl {
      width: 75%;
    }
    .width-80\%\@xl {
      width: 80%;
    }
    .width-90\%\@xl {
      width: 90%;
    }
    .width-100\%\@xl {
      width: 100%;
    }
    .width-100vw\@xl {
      width: 100vw;
    }
    .width-auto\@xl {
      width: auto;
    }
    .width-inherit\@xl {
      width: inherit;
    }
    .height-xxxxs\@xl {
      height: var(--size-xxxxs, 0.25rem);
    }
    .height-xxxs\@xl {
      height: var(--size-xxxs, 0.5rem);
    }
    .height-xxs\@xl {
      height: var(--size-xxs, 0.75rem);
    }
    .height-xs\@xl {
      height: var(--size-xs, 1rem);
    }
    .height-sm\@xl {
      height: var(--size-sm, 1.5rem);
    }
    .height-md\@xl {
      height: var(--size-md, 2rem);
    }
    .height-lg\@xl {
      height: var(--size-lg, 3rem);
    }
    .height-xl\@xl {
      height: var(--size-xl, 4rem);
    }
    .height-xxl\@xl {
      height: var(--size-xxl, 6rem);
    }
    .height-xxxl\@xl {
      height: var(--size-xxxl, 8rem);
    }
    .height-xxxxl\@xl {
      height: var(--size-xxxxl, 16rem);
    }
    .height-0\@xl {
      height: 0;
    }
    .height-10\%\@xl {
      height: 10%;
    }
    .height-20\%\@xl {
      height: 20%;
    }
    .height-25\%\@xl {
      height: 25%;
    }
    .height-30\%\@xl {
      height: 30%;
    }
    .height-33\%\@xl {
      height: 33.3333333333%;
    }
    .height-40\%\@xl {
      height: 40%;
    }
    .height-50\%\@xl {
      height: 50%;
    }
    .height-60\%\@xl {
      height: 60%;
    }
    .height-66\%\@xl {
      height: 66.6666666667%;
    }
    .height-70\%\@xl {
      height: 70%;
    }
    .height-75\%\@xl {
      height: 75%;
    }
    .height-80\%\@xl {
      height: 80%;
    }
    .height-90\%\@xl {
      height: 90%;
    }
    .height-100\%\@xl {
      height: 100%;
    }
    .height-100vh\@xl {
      height: 100vh;
    }
    .height-auto\@xl {
      height: auto;
    }
    .height-inherit\@xl {
      height: inherit;
    }
    .max-width-xxxxs\@xl {
      max-width: var(--max-width-xxxxs);
    }
    .max-width-xxxs\@xl {
      max-width: var(--max-width-xxxs);
    }
    .max-width-xxs\@xl {
      max-width: var(--max-width-xxs);
    }
    .max-width-xs\@xl {
      max-width: var(--max-width-xs);
    }
    .max-width-sm\@xl {
      max-width: var(--max-width-sm);
    }
    .max-width-md\@xl {
      max-width: var(--max-width-md);
    }
    .max-width-lg\@xl {
      max-width: var(--max-width-lg);
    }
    .max-width-xl\@xl {
      max-width: var(--max-width-xl);
    }
    .max-width-xxl\@xl {
      max-width: var(--max-width-xxl);
    }
    .max-width-xxxl\@xl {
      max-width: var(--max-width-xxxl);
    }
    .max-width-xxxxl\@xl {
      max-width: var(--max-width-xxxxl);
    }
    .max-width-100\%\@xl {
      max-width: 100%;
    }
    .max-width-none\@xl {
      max-width: none;
    }
    .position-relative\@xl {
      position: relative;
    }
    .position-absolute\@xl {
      position: absolute;
    }
    .position-fixed\@xl {
      position: fixed;
    }
    .position-sticky\@xl {
      position: -webkit-sticky;
      position: sticky;
    }
    .position-static\@xl {
      position: static;
    }
    .inset-0\@xl {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    .top-0\@xl {
      top: 0;
    }
    .top-50\%\@xl {
      top: 50%;
    }
    .top-xxxxs\@xl {
      top: var(--space-xxxxs);
    }
    .top-xxxs\@xl {
      top: var(--space-xxxs);
    }
    .top-xxs\@xl {
      top: var(--space-xxs);
    }
    .top-xs\@xl {
      top: var(--space-xs);
    }
    .top-sm\@xl {
      top: var(--space-sm);
    }
    .top-md\@xl {
      top: var(--space-md);
    }
    .top-lg\@xl {
      top: var(--space-lg);
    }
    .top-xl\@xl {
      top: var(--space-xl);
    }
    .top-xxl\@xl {
      top: var(--space-xxl);
    }
    .top-xxxl\@xl {
      top: var(--space-xxxl);
    }
    .top-xxxxl\@xl {
      top: var(--space-xxxxl);
    }
    .bottom-0\@xl {
      bottom: 0;
    }
    .bottom-50\%\@xl {
      bottom: 50%;
    }
    .bottom-xxxxs\@xl {
      bottom: var(--space-xxxxs);
    }
    .bottom-xxxs\@xl {
      bottom: var(--space-xxxs);
    }
    .bottom-xxs\@xl {
      bottom: var(--space-xxs);
    }
    .bottom-xs\@xl {
      bottom: var(--space-xs);
    }
    .bottom-sm\@xl {
      bottom: var(--space-sm);
    }
    .bottom-md\@xl {
      bottom: var(--space-md);
    }
    .bottom-lg\@xl {
      bottom: var(--space-lg);
    }
    .bottom-xl\@xl {
      bottom: var(--space-xl);
    }
    .bottom-xxl\@xl {
      bottom: var(--space-xxl);
    }
    .bottom-xxxl\@xl {
      bottom: var(--space-xxxl);
    }
    .bottom-xxxxl\@xl {
      bottom: var(--space-xxxxl);
    }
    .right-0\@xl {
      right: 0;
    }
    .right-50\%\@xl {
      right: 50%;
    }
    .right-xxxxs\@xl {
      right: var(--space-xxxxs);
    }
    .right-xxxs\@xl {
      right: var(--space-xxxs);
    }
    .right-xxs\@xl {
      right: var(--space-xxs);
    }
    .right-xs\@xl {
      right: var(--space-xs);
    }
    .right-sm\@xl {
      right: var(--space-sm);
    }
    .right-md\@xl {
      right: var(--space-md);
    }
    .right-lg\@xl {
      right: var(--space-lg);
    }
    .right-xl\@xl {
      right: var(--space-xl);
    }
    .right-xxl\@xl {
      right: var(--space-xxl);
    }
    .right-xxxl\@xl {
      right: var(--space-xxxl);
    }
    .right-xxxxl\@xl {
      right: var(--space-xxxxl);
    }
    .left-0\@xl {
      left: 0;
    }
    .left-50\%\@xl {
      left: 50%;
    }
    .left-xxxxs\@xl {
      left: var(--space-xxxxs);
    }
    .left-xxxs\@xl {
      left: var(--space-xxxs);
    }
    .left-xxs\@xl {
      left: var(--space-xxs);
    }
    .left-xs\@xl {
      left: var(--space-xs);
    }
    .left-sm\@xl {
      left: var(--space-sm);
    }
    .left-md\@xl {
      left: var(--space-md);
    }
    .left-lg\@xl {
      left: var(--space-lg);
    }
    .left-xl\@xl {
      left: var(--space-xl);
    }
    .left-xxl\@xl {
      left: var(--space-xxl);
    }
    .left-xxxl\@xl {
      left: var(--space-xxxl);
    }
    .left-xxxxl\@xl {
      left: var(--space-xxxxl);
    }
    .overflow-hidden\@xl {
      overflow: hidden;
    }
    .overflow-auto\@xl {
      overflow: auto;
    }
    .momentum-scrolling\@xl {
      -webkit-overflow-scrolling: touch;
    }
    .overscroll-contain\@xl {
      -ms-scroll-chaining: none;
          overscroll-behavior: contain;
    }
    .visible\@xl {
      visibility: visible;
    }
    .invisible\@xl {
      visibility: hidden;
    }
  }
  @media not all and (min-width: 90rem) {
    .display\@xl {
      display: none !important;
    }
  }
  :root, [data-theme=default] {
    --color-bg-text-block: hsl(0, 0%, 96%);
    --color-bg-text-block-h: 0;
    --color-bg-text-block-s: 0%;
    --color-bg-text-block-l: 96%;
    --color-tabnav-for-toc-links-bg: hsl(220, 14%, 96%);
    --color-tabnav-for-toc-links-bg-h: 220;
    --color-tabnav-for-toc-links-bg-s: 14%;
    --color-tabnav-for-toc-links-bg-l: 96%;
    --color-tabnav-for-text:hsl(266, 50%, 56%);
    --color-tabnav-for-text-h: 266;
    --color-tabnav-for-text-s: 50%;
    --color-tabnav-for-text-l: 56%;
    --color-sticky-header-bg:hsl(0, 0%, 100%);
    --color-primary-bula:hsl(266, 61%, 49%);
    --color-primary-darker: hsl(266, 61%, 49%);
      --color-primary-darker-h: 266;
      --color-primary-darker-s: 61%;
      --color-primary-darker-l: 49%;
      --color-primary-dark: hsl(266, 61%, 55%);
      --color-primary-dark-h: 266;
      --color-primary-dark-s: 61%;
      --color-primary-dark-l: 55%;
      --color-primary: hsl(266, 50%, 56%);
      --color-primary-h: 266;
      --color-primary-s: 50%;
      --color-primary-l: 46%;
      --color-primary-light: hsl(266, 61%, 61%);
      --color-primary-light-h: 266;
      --color-primary-light-s: 61%;
      --color-primary-light-l: 61%;
      --color-primary-lighter: hsl(266, 61%, 76%);
      --color-primary-lighter-h: 266;
      --color-primary-lighter-s: 61%;
      --color-primary-lighter-l: 76%;
    --color-accent-darker: hsl(348, 100%, 73%);
    --color-accent-darker-h: 348;
    --color-accent-darker-s: 100%;
    --color-accent-darker-l: 73%;
    --color-accent-dark: hsl(348, 100%, 76%);
    --color-accent-dark-h: 348;
    --color-accent-dark-s: 100%;
    --color-accent-dark-l: 76%;
    --color-accent: hsl(266, 61%, 61%);
    --color-accent-h: 266;
    --color-accent-s: 61%;
    --color-accent-l: 61%;
    --color-accent-light: hsl(348, 100%, 85%);
    --color-accent-light-h: 348;
    --color-accent-light-s: 100%;
    --color-accent-light-l: 85%;
    --color-accent-lighter: hsl(348, 100%, 89%);
    --color-accent-lighter-h: 348;
    --color-accent-lighter-s: 100%;
    --color-accent-lighter-l: 89%;
    --color-black: hsl(144, 7%, 13%);
    --color-black-h: 144;
    --color-black-s: 7%;
    --color-black-l: 13%;
    --color-white: hsl(0, 0%, 100%);
    --color-white-h: 0;
    --color-white-s: 0%;
    --color-white-l: 100%;
    --color-warning-darker: hsl(46, 100%, 47%);
    --color-warning-darker-h: 46;
    --color-warning-darker-s: 100%;
    --color-warning-darker-l: 47%;
    --color-warning-dark: hsl(46, 100%, 50%);
    --color-warning-dark-h: 46;
    --color-warning-dark-s: 100%;
    --color-warning-dark-l: 50%;
    --color-warning: hsl(46, 100%, 61%);
    --color-warning-h: 46;
    --color-warning-s: 100%;
    --color-warning-l: 61%;
    --color-warning-light: hsl(46, 100%, 71%);
    --color-warning-light-h: 46;
    --color-warning-light-s: 100%;
    --color-warning-light-l: 71%;
    --color-warning-lighter: hsl(46, 100%, 80%);
    --color-warning-lighter-h: 46;
    --color-warning-lighter-s: 100%;
    --color-warning-lighter-l: 80%;
    --color-success-darker: hsl(152, 37%, 37%);
    --color-success-darker-h: 152;
    --color-success-darker-s: 37%;
    --color-success-darker-l: 37%;
    --color-success-dark: hsl(152, 37%, 41%);
    --color-success-dark-h: 152;
    --color-success-dark-s: 37%;
    --color-success-dark-l: 41%;
    --color-success: hsl(152, 37%, 46%);
    --color-success-h: 152;
    --color-success-s: 37%;
    --color-success-l: 46%;
    --color-success-light: hsl(152, 37%, 51%);
    --color-success-light-h: 152;
    --color-success-light-s: 37%;
    --color-success-light-l: 51%;
    --color-success-lighter: hsl(152, 37%, 56%);
    --color-success-lighter-h: 152;
    --color-success-lighter-s: 37%;
    --color-success-lighter-l: 56%;
    --color-error-darker: hsl(349, 75%, 36%);
    --color-error-darker-h: 349;
    --color-error-darker-s: 75%;
    --color-error-darker-l: 36%;
    --color-error-dark: hsl(349, 75%, 44%);
    --color-error-dark-h: 349;
    --color-error-dark-s: 75%;
    --color-error-dark-l: 44%;
    --color-error: hsl(349, 75%, 51%);
    --color-error-h: 349;
    --color-error-s: 75%;
    --color-error-l: 51%;
    --color-error-light: hsl(349, 75%, 59%);
    --color-error-light-h: 349;
    --color-error-light-s: 75%;
    --color-error-light-l: 59%;
    --color-error-lighter: hsl(349, 75%, 67%);
    --color-error-lighter-h: 349;
    --color-error-lighter-s: 75%;
    --color-error-lighter-l: 67%;
    --color-bg-darker: hsl(0, 0%, 90%);
    --color-bg-darker-h: 0;
    --color-bg-darker-s: 0%;
    --color-bg-darker-l: 90%;
    --color-bg-dark: hsl(0, 0%, 94%);
    --color-bg-dark-h: 0;
    --color-bg-dark-s: 0%;
    --color-bg-dark-l: 94%;
    --color-bg: hsl(0, 0%, 100%);
    --color-bg-h: 0;
    --color-bg-s: 0%;
    --color-bg-l: 100%;
    --color-bg-light: hsl(0, 0%, 100%);
    --color-bg-light-h: 0;
    --color-bg-light-s: 0%;
    --color-bg-light-l: 100%;
    --color-bg-lighter: hsl(0, 0%, 100%);
    --color-bg-lighter-h: 0;
    --color-bg-lighter-s: 0%;
    --color-bg-lighter-l: 100%;
    --color-contrast-lower: hsl(0, 0%, 58%);
    --color-contrast-lower-h: 0;
    --color-contrast-lower-s: 0%;
    --color-contrast-lower-l: 58%;
    --color-contrast-low: hsl(150, 1%, 67%);
    --color-contrast-low-h: 150;
    --color-contrast-low-s: 1%;
    --color-contrast-low-l: 67%;
    --color-contrast-medium: hsl(0, 0%, 41%);
    --color-contrast-medium-h: 140;
    --color-contrast-medium-s: 1%;
    --color-contrast-medium-l: 41%;
    --color-contrast-high: hsl(0, 0%, 35%);
    --color-contrast-high-h: 0;
    --color-contrast-high-s: 0%;
    --color-contrast-high-l: 35%;
    /* --color-contrast-higher: hsl(150, 6%, 13%);
    --color-contrast-higher-h: 150;
    --color-contrast-higher-s: 6%;
    --color-contrast-higher-l: 13%; */
    --color-contrast-higher: rgba(59, 63, 68, 1);
--color-contrast-higher-h: 263;
--color-contrast-higher-s: 50%;
--color-contrast-higher-l: 10%;
  }
  /* tabnav color */
  /* --color-primary: hsl(266, 61%, 61%); */

  /* main color first  */
  /* --color-primary: hsl(207, 59%, 57%); */

  @supports (--css: variables) {
    [data-theme=dark] {
      --color-bg-text-block: hsla(0, 0%, 95%, 0.103);
    --color-tabnav-for-toc-links-bg: hsl(0, 0%, 18%);
    --color-tabnav-for-toc-links-bg-h: 0;
    --color-tabnav-for-toc-links-bg-s: 0;
    --color-tabnav-for-toc-links-bg-l: 18%;
      --color-tabnav-for-text:hsl(266, 88%, 77%);
      --color-tabnav-for-text-h: 266;
      --color-tabnav-for-text-s: 88%;
      --color-tabnav-for-text-l: 77%;
      --color-sticky-header-bg:hsl(0, 0%, 24%);
      --color-primary-bula:hsl(266, 79%, 74%);
      --color-primary-darker: hsl(266, 61%, 49%);
      --color-primary-darker-h: 266;
      --color-primary-darker-s: 61%;
      --color-primary-darker-l: 49%;
      --color-primary-dark: hsl(266, 61%, 55%);
      --color-primary-dark-h: 266;
      --color-primary-dark-s: 61%;
      --color-primary-dark-l: 55%;
      --color-primary: hsl(266, 39%, 55%);
      --color-primary-h: 266;
      --color-primary-s: 39%;
      --color-primary-l: 55%;
      --color-primary-light: hsl(266, 61%, 61%);
      --color-primary-light-h: 266;
      --color-primary-light-s: 61%;
      --color-primary-light-l: 61%;
      --color-primary-lighter: hsl(266, 61%, 76%);
      --color-primary-lighter-h: 266;
      --color-primary-lighter-s: 61%;
      --color-primary-lighter-l: 76%;
      --color-accent-darker: hsl(348, 100%, 73%);
      --color-accent-darker-h: 348;
      --color-accent-darker-s: 100%;
      --color-accent-darker-l: 73%;
      --color-accent-dark: hsl(348, 100%, 76%);
      --color-accent-dark-h: 348;
      --color-accent-dark-s: 100%;
      --color-accent-dark-l: 76%;
      --color-accent: hsl(266, 61%, 61%);
      --color-accent-h: 266;
      --color-accent-s: 61%;
      --color-accent-l: 61%;
      --color-accent-light: hsl(348, 100%, 85%);
      --color-accent-light-h: 348;
      --color-accent-light-s: 100%;
      --color-accent-light-l: 85%;
      --color-accent-lighter: hsl(348, 100%, 89%);
      --color-accent-lighter-h: 348;
      --color-accent-lighter-s: 100%;
      --color-accent-lighter-l: 89%;
      --color-black: hsl(144, 7%, 13%);
      --color-black-h: 144;
      --color-black-s: 7%;
      --color-black-l: 13%;
      --color-white: hsl(0, 0%, 100%);
      --color-white-h: 0;
      --color-white-s: 0%;
      --color-white-l: 100%;
      --color-warning-darker: hsl(46, 100%, 47%);
      --color-warning-darker-h: 46;
      --color-warning-darker-s: 100%;
      --color-warning-darker-l: 47%;
      --color-warning-dark: hsl(46, 100%, 50%);
      --color-warning-dark-h: 46;
      --color-warning-dark-s: 100%;
      --color-warning-dark-l: 50%;
      --color-warning: hsl(46, 100%, 61%);
      --color-warning-h: 46;
      --color-warning-s: 100%;
      --color-warning-l: 61%;
      --color-warning-light: hsl(46, 100%, 71%);
      --color-warning-light-h: 46;
      --color-warning-light-s: 100%;
      --color-warning-light-l: 71%;
      --color-warning-lighter: hsl(46, 100%, 80%);
      --color-warning-lighter-h: 46;
      --color-warning-lighter-s: 100%;
      --color-warning-lighter-l: 80%;
      --color-success-darker: hsl(152, 37%, 37%);
      --color-success-darker-h: 152;
      --color-success-darker-s: 37%;
      --color-success-darker-l: 37%;
      --color-success-dark: hsl(152, 37%, 41%);
      --color-success-dark-h: 152;
      --color-success-dark-s: 37%;
      --color-success-dark-l: 41%;
      --color-success: hsl(152, 37%, 46%);
      --color-success-h: 152;
      --color-success-s: 37%;
      --color-success-l: 46%;
      --color-success-light: hsl(152, 37%, 51%);
      --color-success-light-h: 152;
      --color-success-light-s: 37%;
      --color-success-light-l: 51%;
      --color-success-lighter: hsl(152, 37%, 56%);
      --color-success-lighter-h: 152;
      --color-success-lighter-s: 37%;
      --color-success-lighter-l: 56%;
      --color-error-darker: hsl(349, 75%, 36%);
      --color-error-darker-h: 349;
      --color-error-darker-s: 75%;
      --color-error-darker-l: 36%;
      --color-error-dark: hsl(349, 75%, 44%);
      --color-error-dark-h: 349;
      --color-error-dark-s: 75%;
      --color-error-dark-l: 44%;
      --color-error: hsl(349, 75%, 51%);
      --color-error-h: 349;
      --color-error-s: 75%;
      --color-error-l: 51%;
      --color-error-light: hsl(349, 75%, 59%);
      --color-error-light-h: 349;
      --color-error-light-s: 75%;
      --color-error-light-l: 59%;
      --color-error-lighter: hsl(349, 75%, 67%);
      --color-error-lighter-h: 349;
      --color-error-lighter-s: 75%;
      --color-error-lighter-l: 67%;
      --color-bg-darker: hsl(144, 5%, 6%);
      --color-bg-darker-h: 144;
      --color-bg-darker-s: 5%;
      --color-bg-darker-l: 6%;
      --color-bg-dark: hsl(144, 6%, 9%);
      --color-bg-dark-h: 144;
      --color-bg-dark-s: 6%;
      --color-bg-dark-l: 9%;
      --color-bg: hsl(150, 6%, 13%);
      --color-bg-h: 150;
      --color-bg-s: 6%;
      --color-bg-l: 13%;
      --color-bg-light: hsl(144, 6%, 17%);
      --color-bg-light-h: 144;
      --color-bg-light-s: 6%;
      --color-bg-light-l: 17%;
      --color-bg-lighter: hsl(144, 5%, 20%);
      --color-bg-lighter-h: 144;
      --color-bg-lighter-s: 5%;
      --color-bg-lighter-l: 20%;
      --color-contrast-lower: hsl(156, 4%, 23%);
      --color-contrast-lower-h: 156;
      --color-contrast-lower-s: 4%;
      --color-contrast-lower-l: 23%;
      --color-contrast-low: hsl(144, 3%, 39%);
      --color-contrast-low-h: 144;
      --color-contrast-low-s: 3%;
      --color-contrast-low-l: 39%;
      --color-contrast-medium: hsl(0deg 0% 95.2%);
      --color-contrast-medium-h: 0;
      --color-contrast-medium-s: 0%;
      --color-contrast-medium-l: 95.2%;
      --color-contrast-high: hsl(146, 6%, 79%);
      --color-contrast-high-h: 146;
      --color-contrast-high-s: 6%;
      --color-contrast-high-l: 79%;
      --color-contrast-higher: hsl(146, 28%, 95%);
      --color-contrast-higher-h: 146;
      --color-contrast-higher-s: 28%;
      --color-contrast-higher-l: 95%;       
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }
  @supports (--css: variables) {
    @media (min-width: 64rem) {
      :root {
        --space-unit: 1.45rem;
      }
    }
  }
  :root {
    --radius: 0.4em;
  }
  
  :root {
    --font-primary: "Heebo", "Noto Sans Hebrew", Arial, Tahoma, sans-serif;
    --font-secondary: "Inter", sans-serif;
    --text-base-size: 1rem;
    --text-scale-ratio: 1.2;
    --text-unit: var(--text-base-size);
    --body-line-height: 1.4;
    --heading-line-height: 1.2;
    --font-primary-capital-letter: 1;
    --font-secondary-capital-letter: 1;
  }
  
  :root, * {
    --text-xs: calc((var(--text-unit) / var(--text-scale-ratio)) / var(--text-scale-ratio));
    --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
    --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
    --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
    --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
    --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
    --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio));
  }
  
  @supports (--css: variables) {
    @media (min-width: 64rem) {
      :root {
        --text-base-size: 1.25rem;
        --text-scale-ratio: 1.25;
      }
    }
  }
  body {
    font-family: var(--font-primary);
  }
  
  h1, h2, h3, h4 {
    font-family: var(--font-secondary);
    font-weight: 600;
  }
  
  .font-primary {
    font-family: var(--font-primary);
  }
  
  .font-secondary {
    font-family: var(--font-secondary);
  }
  
  mark {
    background-color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2);
    color: inherit;
  }
  
  .text-component {
    --line-height-multiplier: 1;
    --text-space-y-multiplier: 1.2;
  }
  .text-component blockquote {
    padding-right: 1em;
    border-right: 4px solid var(--color-contrast-low);
  }
  .text-component hr {
    background: var(--color-contrast-low);
    height: 1px;
  }
  .text-component figcaption {
    font-size: var(--text-sm);
    color: var(--color-contrast-medium);
  }
  
  .article {
    --body-line-height: 1.58;
    --text-space-y-multiplier: 1.2;
  }
  
  :root {
    --icon-xxxs: 8px;
    --icon-xxs: 12px;
    --icon-xs: 16px;
    --icon-sm: 24px;
    --icon-md: 32px;
    --icon-lg: 48px;
    --icon-xl: 64px;
    --icon-xxl: 96px;
    --icon-xxxl: 128px;
  }
  
  :root {
    --btn-font-size: 1em;
    --btn-padding-x: var(--space-md);
    --btn-padding-y: var(--space-xs);
    --btn-radius: 0.25em;
  }
  
  .btn {
    cursor: pointer;
    font-family: var(--font-secondary);
    text-decoration: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-shadow: 0px 2px 8px 0 hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.12), 0px 1px 1px 0 hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.12);
    transition: all 0.3s ease;
  }
  .btn:hover {
    box-shadow: 0px 1px 2px 0 hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.12), 0px 1px 1px 0 hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.12);
  }
  .btn:focus {
    box-shadow: 0px 0px 0px 2px hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.15);
    outline: none;
  }
  .btn:active {
    transform: translateY(2px);
  }
  
  .btn--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .btn--primary:hover {
    background-color: var(--color-primary-dark);
  }
  .btn--primary:focus {
    box-shadow: 0px 0px 0px 2px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
  }
  
  .btn--subtle {
    background-color: var(--color-contrast-lower);
    color: var(--color-contrast-higher);
  }
  
  .btn--accent {
    background-color: var(--color-accent);
    color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .btn--accent:hover {
    background-color: var(--color-accent-dark);
  }
  .btn--accent:focus {
    box-shadow: 0px 0px 0px 2px hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2);
  }
  
  .btn--disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  .btn--sm {
    font-size: 0.8em;
  }
  
  .btn--md {
    font-size: 1.2em;
  }
  
  .btn--lg {
    font-size: 1.4em;
  }
  
  :root {
    --form-control-font-size: 1em;
    --form-control-padding-x: var(--space-sm);
    --form-control-padding-y: var(--space-xs);
    --form-control-radius: 0em;
  }
  
  .form-control {
    background-color: var(--color-bg-dark);
    border-bottom: 2px solid var(--color-contrast-lower);
    transition: all 0.3s ease;
  }
  .form-control::-moz-placeholder {
    opacity: 1;
    color: var(--color-contrast-medium);
  }
  .form-control:-ms-input-placeholder {
    opacity: 1;
    color: var(--color-contrast-medium);
  }
  .form-control::placeholder {
    opacity: 1;
    color: var(--color-contrast-medium);
  }
  .form-control:focus {
    background-color: var(--color-bg);
    border-color: var(--color-primary);
    outline: none;
  }
  
  .form-control[disabled], .form-control[readonly] {
    cursor: not-allowed;
  }
  
  .form-control[aria-invalid=true] {
    border-color: var(--color-error);
  }
  
  .form-label {
    font-size: var(--text-sm);
  }
  
  /*! purgecss start ignore */
  /* -------------------------------- 
  
  File#: _1_anim-menu-btn
  Title: Animated Menu Button
  Descr: A menu button w/ a morphing icon
  Usage: codyhouse.co/license
  
  -------------------------------- */
  :root {
    --anim-menu-btn-size: 48px;
    --anim-menu-btn-icon-size: 32px;
    --anim-menu-btn-icon-stroke: 2px;
  }
  
  .anim-menu-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--anim-menu-btn-size);
    height: var(--anim-menu-btn-size);
    color: var(--color-contrast-high);
  }
  
  .anim-menu-btn__icon {
    position: relative;
    display: block;
    font-size: var(--anim-menu-btn-icon-size);
    width: 1em;
    height: var(--anim-menu-btn-icon-stroke);
    color: inherit;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    transform: scale(1);
  }
  .anim-menu-btn__icon::before, .anim-menu-btn__icon::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: inherit;
    border-radius: inherit;
  }
  
  .anim-menu-btn__icon--close {
    background-size: 100% 100%;
    will-change: transform, background-size;
    transition: transform 0.2s, background-size 0.2s;
  }
  .anim-menu-btn:active .anim-menu-btn__icon--close {
    transform: scale(0.9);
  }
  .anim-menu-btn__icon--close::before, .anim-menu-btn__icon--close::after {
    will-change: inherit;
    transition: inherit;
  }
  .anim-menu-btn__icon--close::before {
    transform: translateY(-0.25em) rotate(0);
  }
  .anim-menu-btn__icon--close::after {
    transform: translateY(0.25em) rotate(0);
  }
  
  .anim-menu-btn--state-b .anim-menu-btn__icon--close {
    background-size: 0% 100%;
  }
  .anim-menu-btn--state-b .anim-menu-btn__icon--close::before {
    transform: translateY(0) rotate(45deg);
  }
  .anim-menu-btn--state-b .anim-menu-btn__icon--close::after {
    transform: translateY(0) rotate(-45deg);
  }
  
  .anim-menu-btn__icon--arrow-left,
  .anim-menu-btn__icon--arrow-right,
  .anim-menu-btn__icon--arrow-up,
  .anim-menu-btn__icon--arrow-down {
    border-radius: 50em;
    will-change: transform;
    transition: transform 0.2s;
  }
  .anim-menu-btn:active .anim-menu-btn__icon--arrow-left,
  .anim-menu-btn:active .anim-menu-btn__icon--arrow-right,
  .anim-menu-btn:active .anim-menu-btn__icon--arrow-up,
  .anim-menu-btn:active .anim-menu-btn__icon--arrow-down {
    transform: scale(0.9);
  }
  .anim-menu-btn__icon--arrow-left::before, .anim-menu-btn__icon--arrow-left::after,
  .anim-menu-btn__icon--arrow-right::before,
  .anim-menu-btn__icon--arrow-right::after,
  .anim-menu-btn__icon--arrow-up::before,
  .anim-menu-btn__icon--arrow-up::after,
  .anim-menu-btn__icon--arrow-down::before,
  .anim-menu-btn__icon--arrow-down::after {
    transform-origin: calc(var(--anim-menu-btn-icon-stroke) / 2) 50%;
    will-change: transform, width;
    transition: transform 0.2s, width 0.2s;
  }
  .anim-menu-btn__icon--arrow-left::before,
  .anim-menu-btn__icon--arrow-right::before,
  .anim-menu-btn__icon--arrow-up::before,
  .anim-menu-btn__icon--arrow-down::before {
    transform: translateY(-0.25em) rotate(0);
  }
  .anim-menu-btn__icon--arrow-left::after,
  .anim-menu-btn__icon--arrow-right::after,
  .anim-menu-btn__icon--arrow-up::after,
  .anim-menu-btn__icon--arrow-down::after {
    transform: translateY(0.25em) rotate(0);
  }
  
  .anim-menu-btn__icon--arrow-right {
    transform: rotate(180deg);
  }
  .anim-menu-btn:active .anim-menu-btn__icon--arrow-right {
    transform: rotate(180deg) scale(0.9);
  }
  
  .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::before, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::after,
  .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::before,
  .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::after,
  .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::before,
  .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::after,
  .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::before,
  .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::after {
    width: 50%;
  }
  .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::before,
  .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::before,
  .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::before,
  .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::before {
    transform: translateY(0) rotate(-45deg);
  }
  .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::after,
  .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::after,
  .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::after,
  .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::after {
    transform: translateY(0) rotate(45deg);
  }
  .anim-menu-btn--state-b:active .anim-menu-btn__icon--arrow-up {
    transform: rotate(90deg) scale(0.9);
  }
  .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up {
    transform: rotate(90deg);
  }
  .anim-menu-btn--state-b:active .anim-menu-btn__icon--arrow-down {
    transform: rotate(-90deg) scale(0.9);
  }
  .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down {
    transform: rotate(-90deg);
  }
  
  /* -------------------------------- 
  
  File#: _1_article-gallery-v3
  Title: Article Gallery v3
  Descr: A gallery of blog articles
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .articles-v3 {
    position: relative;
    z-index: 1;
  }
  
  .articles-v3__img {
    display: block;
    transition: opacity 0.3s;
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .articles-v3__img img {
    display: block;
    width: 100%;
  }
  .articles-v3__img:hover {
    opacity: 0.85;
  }
  
  .articles-v3__headline {
    font-size: var(--text-xl);
  }
  .articles-v3__headline a {
    color: var(--color-contrast-higher);
    text-decoration: none;
  }
  .articles-v3__headline a:hover {
    text-decoration: underline;
  }
  
  .articles-v3__author {
    display: grid;
    grid-template-columns: 3em 1fr;
    grid-gap: var(--space-xs);
    align-items: center;
    margin-top: var(--space-md);
  }
  
  .articles-v3__author-img {
    display: block;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 0.3s var(--ease-out-back);
  }
  .articles-v3__author-img img {
    display: block;
    width: inherit;
    height: inherit;
  }
  .articles-v3__author-img:hover {
    transform: scale(1.1);
  }
  
  .articles-v3__author-name {
    font-weight: bold;
    color: var(--color-contrast-higher);
    text-decoration: none;
  }
  .articles-v3__author-name:hover {
    text-decoration: underline;
  }
  
  /* -------------------------------- 
  
  File#: _1_article-preview-v2
  Title: Article Preview v2
  Descr: Blog post excerpt, containing a link to the article page
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .story-v2__meta a {
    color: var(--color-contrast-high);
    transition: 0.2s;
  }
  .story-v2__meta a:hover {
    color: var(--color-primary);
  }
  .story-v2__meta span[role=separator] {
    display: inline-block;
    width: 6px;
    height: 6px;
    vertical-align: middle;
    background-color: var(--color-contrast-low);
    border-radius: 50%;
    margin: 0 var(--space-xxxs);
  }
  
  .story-v2__headline a {
    color: var(--color-contrast-higher);
    text-decoration: underline;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent 50%, hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2) 50%);
    background-size: 0% 100%;
    will-change: background-size;
    transition: background-size 0.3s var(--ease-in-out);
  }
  .story-v2__headline a:hover {
    background-size: 100% 100%;
  }
  
  .story-v2__excerpt {
    color: var(--color-contrast-medium);
  }
  
  .story-v2__img {
    display: block;
  }
  .story-v2__img img {
    display: block;
    width: 100%;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transition: 0.3s var(--ease-out);
  }
  .story-v2__img:hover img {
    -webkit-clip-path: polygon(2% 2%, 98% 2%, 98% 98%, 2% 98%);
            clip-path: polygon(2% 2%, 98% 2%, 98% 98%, 2% 98%);
  }
  
  @media (min-width: 64rem) {
    .story-v2--featured .story-v2__excerpt {
      max-width: 70%;
      margin-left: auto;
    }
  }
  /* -------------------------------- 
  
  File#: _1_article-preview-v3
  Title: Article Preview v3
  Descr: Blog post excerpt, containing a link to the article page and a preview image animated on hover
  Usage: codyhouse.co/license
  
  -------------------------------- */
  :root {
    --story-v3-image-width: 30%;
  }
  
  .story-v3 {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
    border-top: 1px solid var(--color-contrast-lower);
    box-shadow: 0 1px 0 var(--color-contrast-lower);
    transition: 0.3s;
  }
  .story-v3:hover .story-v3__title {
    text-decoration: underline;
  }
  .story-v3:hover .story-v3__icon line:nth-child(1) {
    transform: rotate(180deg);
  }
  .story-v3:hover .story-v3__icon line:nth-child(2) {
    transform: rotate(-180deg);
  }
  .story-v3:hover .story-v3__icon line:nth-child(3) {
    stroke-dashoffset: 14;
  }
  
  .story-v3__icon {
    font-size: 48px;
  }
  .story-v3__icon line:nth-child(1),
  .story-v3__icon line:nth-child(2) {
    transition: transform 0.3s var(--ease-out);
  }
  .story-v3__icon line:nth-child(1) {
    transform-origin: 42px 19px;
  }
  .story-v3__icon line:nth-child(2) {
    transform-origin: 42px 29px;
  }
  .story-v3__icon line:nth-child(3) {
    stroke-dasharray: 48;
    transition: stroke-dashoffset 0.3s var(--ease-out);
  }
  
  .story-v3__preview-img {
    position: absolute;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    top: 50%;
    transform: translateY(-50%) scale(0.9);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    will-change: transform;
  }
  
  .story-v3__preview-img--is-visible {
    transform: translateY(-50%);
    opacity: 1;
    visibility: visible;
  }
  
  /* -------------------------------- 
  
  File#: _1_article-preview
  Title: Article Preview
  Descr: Blog post excerpt, containing a link to the article page
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .story__img {
    display: block;
    transition: opacity 0.2s;
    margin-bottom: var(--space-xs);
  }
  .story__img:hover {
    opacity: 0.85;
  }
  .story__img img {
    display: block;
    width: 100%;
    border-radius: var(--radius-md);
  }
  
  .story__category {
    display: inline-flex;
    line-height: 1;
    align-items: center;
    color: var(--color-contrast-higher);
    text-decoration: none;
    font-size: var(--text-sm);
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
    padding: var(--space-xxs);
    border-radius: var(--radius-md);
    transition: background-color 0.2s;
  }
  .story__category:hover {
    text-decoration: underline;
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.3);
  }
  
  .story__title a {
    color: var(--color-contrast-higher);
    text-decoration: none;
  }
  .story__title a:hover {
    text-decoration: underline;
  }
  
  .story__author {
    --author-img-size: 50px;
    display: grid;
    grid-template-columns: var(--author-img-size) 1fr;
    align-items: center;
    gap: var(--space-xs);
  }
  .story__author img {
    display: block;
    width: var(--author-img-size);
    height: var(--author-img-size);
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 50%;
  }
  
  .story__author-name {
    margin-bottom: var(--space-xxxxs);
  }
  .story__author-name a {
    text-decoration: none;
    color: var(--color-contrast-higher);
  }
  .story__author-name a:hover {
    text-decoration: underline;
  }
  
  .story__meta {
    font-size: var(--text-sm);
    color: var(--color-contrast-medium);
  }
  
  @media (min-width: 64rem) {
    .story--featured {
      display: grid;
      grid-template-columns: 3fr 2fr;
      grid-gap: var(--space-md);
      align-items: center;
    }
    .story--featured .story__img {
      margin: 0;
    }
    .story--featured .story__title {
      font-size: var(--text-xxl);
    }
  }
  /* -------------------------------- 
  
  File#: _1_article-v4
  Title: Article v4
  Descr: Article template
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .t-article-v4__divider {
    display: flex;
    align-items: center;
  }
  .t-article-v4__divider span {
    display: block;
    margin: 0 var(--space-xs);
    height: 10px;
    width: 10px;
    transform: rotate(45deg);
    background-color: var(--color-contrast-low);
  }
  .t-article-v4__divider::before, .t-article-v4__divider::after {
    content: "";
    display: block;
    height: 1px;
    width: auto;
    flex-grow: 1;
    background-color: var(--color-contrast-low);
  }
  
  /* -------------------------------- 
  
  File#: _1_author
  Title: Author
  Descr: Author introduction card
  Usage: codyhouse.co/license
  
  -------------------------------- */
  :root {
    --author-img-size: 4em;
  }
  
  .author {
    display: grid;
    grid-template-columns: var(--author-img-size) 1fr;
    grid-gap: var(--space-sm);
  }
  
  .author__img-wrapper {
    display: inline-block;
    border-radius: 50%;
    width: var(--author-img-size);
    height: var(--author-img-size);
    overflow: hidden;
    transition: transform 0.3s var(--ease-out-back);
  }
  .author__img-wrapper:hover {
    transform: scale(1.1);
  }
  .author__img-wrapper img {
    display: block;
    width: inherit;
    height: inherit;
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  .author__content a {
    color: inherit;
  }
  .author__content a:hover {
    color: var(--color-primary);
  }
  
  .author--meta {
    --author-img-size: 3em;
    align-items: center;
    grid-gap: var(--space-xs);
  }
  
  .author--minimal {
    --author-img-size: 2.4em;
    align-items: center;
    grid-gap: var(--space-xxs);
  }
  
  .author--featured {
    --author-img-size: 6em;
    grid-template-columns: 1fr;
    justify-content: center;
    text-align: center;
  }
  .author--featured .author__img-wrapper {
    margin-left: auto;
    margin-right: auto;
  }
  
  .author__social {
    display: inline-block;
    padding: var(--space-xs);
    background: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
    border-radius: 50%;
    transition: 0.2s;
  }
  .author__social .icon {
    display: block;
    font-size: 16px;
    color: var(--color-contrast-high);
    transition: color 0.2s;
  }
  .author__social:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075);
    box-shadow: var(--shadow-sm);
  }
  .author__social:hover .icon {
    color: var(--color-contrast-higher);
  }
  
  /* -------------------------------- 
  
  File#: _1_breadcrumbs
  Title: Breadcrumbss
  Descr: List of links to help the user move within website structure
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .breadcrumbs__item {
    display: inline-block;
    display: inline-flex;
    align-items: center;
  }
  
  /* -------------------------------- 
  
  File#: _1_details
  Title: Details
  Descr: A button that toggles the visibility of additional information
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .details__summary {
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  .details__summary:hover {
    color: var(--color-primary);
  }
  .details__summary:focus {
    outline: 2px solid hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
    outline-offset: 4px;
  }
  .details__summary .icon {
    transition: transform 0.2s;
    flex-shrink: 0;
  }
  
  .js .details__summary {
    list-style: none;
  }
  .js .details__summary::-webkit-details-marker {
    display: none;
  }
  .js .details__summary[aria-expanded=true] .icon {
    transform: rotate(90deg);
  }
  .js .details__content[aria-hidden=true] {
    display: none;
  }
  
  html:not(.js) .details__summary .icon {
    display: none;
  }
  
  /* -------------------------------- 
  
  File#: _1_drawer
  Title: Drawer
  Descr: A slide-in panel used to display critical content
  Usage: codyhouse.co/license
  
  -------------------------------- */
  :root {
    --drawer-width: 400px;
  }
  
  .drawer {
    position: fixed;
    z-index: var(--z-index-overlay);
    width: 100%;
    max-width: var(--drawer-width);
    height: 100%;
    top: var(--pre-header-height, 0);
    right: 0;
    visibility: hidden;
    transition: visibility 0s 0.3s;
  }
  .drawer:focus {
    outline: none;
  }
  
  .drawer--is-visible {
    visibility: visible;
    transition: none;
  }
  
  .drawer--open-left {
    right: auto;
    left: 0;
  }
  
  .drawer__content {
    position: absolute;
    width: 100%;
    height: calc(100% - var(--pre-header-height, 0px));
    top: 0;
    right: 0;
    background-color: var(--color-bg);
    box-shadow: var(--shadow-md);
    transform: translateX(100%);
    transition: transform 0.3s;
    transition-timing-function: var(--ease-in-out);
  }
  .drawer--open-left .drawer__content {
    transform: translateX(-100%);
  }
  .drawer--is-visible .drawer__content {
    transform: translateX(0);
  }
  
  .drawer__body {
    height: 100%;
    overflow: auto;
    -ms-scroll-chaining: none;
        overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  
  .drawer__close-btn {
    z-index: var(--z-index-fixed-element);
    top: var(--space-xxs);
    right: var(--space-xxs);
    width: 2em;
    height: 2em;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0.95);
    box-shadow: var(--shadow-sm);
    transition: 0.2s;
  }
  .drawer__close-btn:hover {
    background-color: var(--color-bg);
    box-shadow: var(--shadow-md);
  }
  .drawer__close-btn .icon {
    display: block;
    color: var(--color-contrast-high);
  }
  
  .drawer__header {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: var(--nav-header-height);
  }
  
  .drawer--modal {
    width: 100%;
    max-width: none;
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0);
    transition: background-color 0.3s, visibility 0s 0.3s;
  }
  .drawer--modal.drawer--is-visible {
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.6);
    transition: background-color 0.3s;
  }
  .drawer--modal.drawer--open-left .drawer__content {
    right: auto;
    left: 0;
  }
  @media (min-width: 32rem) {
    .drawer--modal .drawer__content {
      max-width: var(--drawer-width);
    }
  }
  
  /* -------------------------------- 
  
  File#: _1_drop-cap
  Title: Drop Cap
  Descr: Make the first letter of a paragraph larger in size
  Usage: codyhouse.co/license
  
  -------------------------------- */
  :root {
    --drop-cap-lines: 3;
  }
  
  .drop-cap::first-letter {
    float: left;
    line-height: 1;
    font-size: calc(1em * var(--drop-cap-lines) * var(--body-line-height));
    padding: 0 0.125em 0 0;
    text-transform: uppercase;
    color: var(--color-contrast-higher);
  }
  
  .text-component .drop-cap::first-letter {
    font-size: calc(1em * var(--drop-cap-lines) * var(--body-line-height) * var(--line-height-multiplier));
  }
  
  /* -------------------------------- 
  
  File#: _1_feature-v12
  Title: Feature v12
  Descr: Feature section containing text that overlaps a background image
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .feature-v12, .feature-v12__offset-item, .feature-v12__bg-item {
    position: relative;
  }
  
  .feature-v12, .feature-v12__bg-item {
    z-index: 1;
  }
  
  .feature-v12__offset-item {
    z-index: 2;
  }
  
  .feature-v12--left .feature-v12__offset-item, .feature-v12--right .feature-v12__offset-item {
    width: calc(100% + var(--feature-v12-offset, 3em));
  }
  
  .feature-v12--right .feature-v12__offset-item {
    margin-left: calc(-1 * var(--feature-v12-offset, 3em));
  }
  
  .feature-v12--top .feature-v12__offset-item {
    margin-bottom: calc(-1 * var(--feature-v12-offset, 3em));
  }
  
  .feature-v12--bottom .feature-v12__offset-item {
    margin-top: calc(-1 * var(--feature-v12-offset, 3em));
  }
  
  [data-theme=dark] .feature-v12__img {
    filter: brightness(70%);
  }
  
  .feature-v12--offset-xs {
    --feature-v12-offset: 2em;
  }
  
  .feature-v12--offset-sm {
    --feature-v12-offset: 3em;
  }
  
  .feature-v12--offset-md {
    --feature-v12-offset: 5em;
  }
  
  .feature-v12--offset-lg {
    --feature-v12-offset: 8em;
  }
  
  .feature-v12--offset-xl {
    --feature-v12-offset: 13em;
  }
  
  @media (min-width: 32rem) {
    .feature-v12--left\@xs .feature-v12__offset-item, .feature-v12--right\@xs .feature-v12__offset-item {
      width: calc(100% + var(--feature-v12-offset, 3em));
      margin: 0;
    }
    .feature-v12--right\@xs .feature-v12__offset-item {
      margin-left: calc(-1 * var(--feature-v12-offset, 3em));
    }
    .feature-v12--top\@xs .feature-v12__offset-item,
  .feature-v12--bottom\@xs .feature-v12__offset-item {
      width: auto;
      margin: 0;
    }
    .feature-v12--top\@xs .feature-v12__offset-item {
      margin-bottom: calc(-1 * var(--feature-v12-offset, 3em));
    }
    .feature-v12--bottom\@xs .feature-v12__offset-item {
      margin-top: calc(-1 * var(--feature-v12-offset, 3em));
    }
    .feature-v12--offset-xs\@xs {
      --feature-v12-offset: 2em;
    }
    .feature-v12--offset-sm\@xs {
      --feature-v12-offset: 3em;
    }
    .feature-v12--offset-md\@xs {
      --feature-v12-offset: 5em;
    }
    .feature-v12--offset-lg\@xs {
      --feature-v12-offset: 8em;
    }
    .feature-v12--offset-xl\@xs {
      --feature-v12-offset: 13em;
    }
  }
  @media (min-width: 48rem) {
    .feature-v12--left\@sm .feature-v12__offset-item, .feature-v12--right\@sm .feature-v12__offset-item {
      width: calc(100% + var(--feature-v12-offset, 3em));
      margin: 0;
    }
    .feature-v12--right\@sm .feature-v12__offset-item {
      margin-left: calc(-1 * var(--feature-v12-offset, 3em));
    }
    .feature-v12--top\@sm .feature-v12__offset-item,
  .feature-v12--bottom\@sm .feature-v12__offset-item {
      width: auto;
      margin: 0;
    }
    .feature-v12--top\@sm .feature-v12__offset-item {
      margin-bottom: calc(-1 * var(--feature-v12-offset, 3em));
    }
    .feature-v12--bottom\@sm .feature-v12__offset-item {
      margin-top: calc(-1 * var(--feature-v12-offset, 3em));
    }
    .feature-v12--offset-xs\@sm {
      --feature-v12-offset: 2em;
    }
    .feature-v12--offset-sm\@sm {
      --feature-v12-offset: 3em;
    }
    .feature-v12--offset-md\@sm {
      --feature-v12-offset: 5em;
    }
    .feature-v12--offset-lg\@sm {
      --feature-v12-offset: 8em;
    }
    .feature-v12--offset-xl\@sm {
      --feature-v12-offset: 13em;
    }
  }
  @media (min-width: 64rem) {
    .feature-v12--left\@md .feature-v12__offset-item, .feature-v12--right\@md .feature-v12__offset-item {
      width: calc(100% + var(--feature-v12-offset, 3em));
      margin: 0;
    }
    .feature-v12--right\@md .feature-v12__offset-item {
      margin-left: calc(-1 * var(--feature-v12-offset, 3em));
    }
    .feature-v12--top\@md .feature-v12__offset-item,
  .feature-v12--bottom\@md .feature-v12__offset-item {
      width: auto;
      margin: 0;
    }
    .feature-v12--top\@md .feature-v12__offset-item {
      margin-bottom: calc(-1 * var(--feature-v12-offset, 3em));
    }
    .feature-v12--bottom\@md .feature-v12__offset-item {
      margin-top: calc(-1 * var(--feature-v12-offset, 3em));
    }
    .feature-v12--offset-xs\@md {
      --feature-v12-offset: 2em;
    }
    .feature-v12--offset-sm\@md {
      --feature-v12-offset: 3em;
    }
    .feature-v12--offset-md\@md {
      --feature-v12-offset: 5em;
    }
    .feature-v12--offset-lg\@md {
      --feature-v12-offset: 8em;
    }
    .feature-v12--offset-xl\@md {
      --feature-v12-offset: 13em;
    }
  }
  @media (min-width: 80rem) {
    .feature-v12--left\@lg .feature-v12__offset-item, .feature-v12--right\@lg .feature-v12__offset-item {
      width: calc(100% + var(--feature-v12-offset, 3em));
      margin: 0;
    }
    .feature-v12--right\@lg .feature-v12__offset-item {
      margin-left: calc(-1 * var(--feature-v12-offset, 3em));
    }
    .feature-v12--top\@lg .feature-v12__offset-item,
  .feature-v12--bottom\@lg .feature-v12__offset-item {
      width: auto;
      margin: 0;
    }
    .feature-v12--top\@lg .feature-v12__offset-item {
      margin-bottom: calc(-1 * var(--feature-v12-offset, 3em));
    }
    .feature-v12--bottom\@lg .feature-v12__offset-item {
      margin-top: calc(-1 * var(--feature-v12-offset, 3em));
    }
    .feature-v12--offset-xs\@lg {
      --feature-v12-offset: 2em;
    }
    .feature-v12--offset-sm\@lg {
      --feature-v12-offset: 3em;
    }
    .feature-v12--offset-md\@lg {
      --feature-v12-offset: 5em;
    }
    .feature-v12--offset-lg\@lg {
      --feature-v12-offset: 8em;
    }
    .feature-v12--offset-xl\@lg {
      --feature-v12-offset: 13em;
    }
  }
  @media (min-width: 90rem) {
    .feature-v12--left\@xl .feature-v12__offset-item, .feature-v12--right\@xl .feature-v12__offset-item {
      width: calc(100% + var(--feature-v12-offset, 3em));
      margin: 0;
    }
    .feature-v12--right\@xl .feature-v12__offset-item {
      margin-left: calc(-1 * var(--feature-v12-offset, 3em));
    }
    .feature-v12--top\@xl .feature-v12__offset-item,
  .feature-v12--bottom\@xl .feature-v12__offset-item {
      width: auto;
      margin: 0;
    }
    .feature-v12--top\@xl .feature-v12__offset-item {
      margin-bottom: calc(-1 * var(--feature-v12-offset, 3em));
    }
    .feature-v12--bottom\@xl .feature-v12__offset-item {
      margin-top: calc(-1 * var(--feature-v12-offset, 3em));
    }
    .feature-v12--offset-xs\@xl {
      --feature-v12-offset: 2em;
    }
    .feature-v12--offset-sm\@xl {
      --feature-v12-offset: 3em;
    }
    .feature-v12--offset-md\@xl {
      --feature-v12-offset: 5em;
    }
    .feature-v12--offset-lg\@xl {
      --feature-v12-offset: 8em;
    }
    .feature-v12--offset-xl\@xl {
      --feature-v12-offset: 13em;
    }
  }
  /* -------------------------------- 
  
  File#: _1_link-effects
  Title: Link Effects
  Descr: A collection of link effects
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .link-fx-1 {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 6px;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .link-fx-1 .icon {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateX(100%) rotate(90deg);
    font-size: 32px;
  }
  .link-fx-1 .icon circle {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.2s;
  }
  .link-fx-1 .icon line {
    transition: transform 0.4s;
    transform-origin: 13px 15px;
  }
  .link-fx-1 .icon line:last-child {
    transform-origin: 19px 15px;
  }
  .link-fx-1::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform-origin: right center;
    transition: transform 0.2s 0.1s;
  }
  .link-fx-1:hover .icon circle {
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 0.2s 0.1s;
  }
  .link-fx-1:hover .icon line {
    transform: rotate(-180deg);
  }
  .link-fx-1:hover .icon line:last-child {
    transform: rotate(180deg);
  }
  .link-fx-1:hover::before {
    transform: translateX(17px) scaleX(0);
    transition: transform 0.2s;
  }
  
  .link-fx-2 {
    position: relative;
    display: inline-block;
    padding: 4px 6px;
    color: var(--color-contrast-higher);
    text-decoration: none;
    background-image: linear-gradient(var(--color-contrast-higher), var(--color-contrast-higher));
    background-size: 100% 1px;
    background-repeat: repeat-x;
    background-position: left bottom;
    transition: background-size 0.3s var(--ease-out);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .link-fx-2::after {
    content: attr(data-link-fx-clone);
    color: var(--color-bg);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: inherit;
    -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
    transform: translateY(4px);
    transition: transform 0.3s, -webkit-clip-path 0.3s;
    transition: clip-path 0.3s, transform 0.3s;
    transition: clip-path 0.3s, transform 0.3s, -webkit-clip-path 0.3s;
    transition-timing-function: var(--ease-out);
  }
  .link-fx-2:hover {
    background-size: 100% 100%;
  }
  .link-fx-2:hover::after {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transform: translateY(0px);
  }
  
  .link-fx-3 {
    position: relative;
    display: inline-flex;
    padding: 4px 6px;
    text-decoration: none;
    align-items: center;
  }
  .link-fx-3 .icon {
    display: block;
    font-size: 12px;
    margin-left: 8px;
    position: relative;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s var(--ease-out), visibility 0s 0.3s;
  }
  .link-fx-3 .icon line {
    transform-origin: 9px 6px;
    transition: transform 0.3s var(--ease-out);
  }
  .link-fx-3 .icon line:first-child {
    transform: rotate(20deg);
  }
  .link-fx-3 .icon line:last-child {
    transform: rotate(-20deg);
  }
  .link-fx-3::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 18px);
    height: 1px;
    background-color: currentColor;
    transition: 0.3s var(--ease-out);
  }
  .link-fx-3:hover .icon {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s, transform 0.3s var(--ease-out);
  }
  .link-fx-3:hover .icon line:first-child, .link-fx-3:hover .icon line:last-child {
    transform: rotate(0);
  }
  .link-fx-3:hover::before {
    width: 100%;
  }
  
  .link-fx-4 {
    position: relative;
    display: inline-block;
    padding: 6px 10px;
    background-color: var(--color-contrast-lower);
    color: var(--color-contrast-higher);
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .link-fx-4::before {
    content: attr(data-link-fx-clone);
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-contrast-higher);
    color: var(--color-bg);
    -webkit-clip-path: polygon(0% 0%, 1px 0%, 1px 100%, 0% 100%);
            clip-path: polygon(0% 0%, 1px 0%, 1px 100%, 0% 100%);
    transition: -webkit-clip-path 0.3s var(--ease-out);
    transition: clip-path 0.3s var(--ease-out);
    transition: clip-path 0.3s var(--ease-out), -webkit-clip-path 0.3s var(--ease-out);
  }
  .link-fx-4:hover::before {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  
  .link-fx-5 {
    display: inline-block;
    padding: 4px 0;
    text-decoration: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4' viewBox='0 0 16 4'%3E%3Cpath d='M0,3.5c4,0,4-3,8-3s4,3,8,3' fill='none' stroke='%232a6df4' opacity='0.5' stroke-miterlimit='10'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: 0px 100%;
    background-size: 0;
  }
  .link-fx-5:hover {
    background-size: 16px 4px;
    -webkit-animation: link-fx-5-animation 0.4s linear infinite;
            animation: link-fx-5-animation 0.4s linear infinite;
  }
  
  @-webkit-keyframes link-fx-5-animation {
    from {
      background-position: 0px 100%;
    }
    to {
      background-position: 16px 100%;
    }
  }
  
  @keyframes link-fx-5-animation {
    from {
      background-position: 0px 100%;
    }
    to {
      background-position: 16px 100%;
    }
  }
  /* -------------------------------- 
  
  File#: _1_list
  Title: List
  Descr: Custom list component
  Usage: codyhouse.co/license
  
  -------------------------------- */
  :root {
    --list-space-y: 0.375em;
    --list-offset: 1em;
    --list-line-height-multiplier: 1;
  }
  
  .list, .text-component .list {
    padding-left: 0;
    list-style: none;
  }
  .list ul, .list ol, .text-component .list ul, .text-component .list ol {
    list-style: none;
    margin: 0;
    margin-top: calc(var(--list-space-y) / 2 * var(--text-space-y-multiplier, 1));
    padding-top: calc(var(--list-space-y) / 2 * var(--text-space-y-multiplier, 1));
    padding-left: var(--list-offset);
  }
  .list li, .text-component .list li {
    padding-bottom: calc(var(--list-space-y) / 2 * var(--text-space-y-multiplier, 1));
    margin-bottom: calc(var(--list-space-y) / 2 * var(--text-space-y-multiplier, 1));
    line-height: calc(var(--body-line-height) * var(--list-line-height-multiplier));
  }
  .list > li:last-child, .list ul > li:last-child, .list ol > li:last-child, .text-component .list > li:last-child, .text-component .list ul > li:last-child, .text-component .list ol > li:last-child {
    margin-bottom: 0;
  }
  .list:not(.list--border) > li:last-child, .list ul > li:last-child, .list ol > li:last-child, .text-component .list:not(.list--border) > li:last-child, .text-component .list ul > li:last-child, .text-component .list ol > li:last-child {
    padding-bottom: 0;
  }
  
  /* #region (ul + ol) */
  .list--ul, .text-component .list--ul,
  .list--ol, .text-component .list--ol {
    --list-offset: calc(var(--list-bullet-size) + var(--list-bullet-margin-right));
  }
  .list--ul ul, .list--ul ol, .text-component .list--ul ul, .text-component .list--ul ol,
  .list--ol ul,
  .list--ol ol, .text-component .list--ol ul, .text-component .list--ol ol {
    padding-left: 0;
  }
  @supports (--css: variables) {
    .list--ul li, .text-component .list--ul li,
  .list--ol li, .text-component .list--ol li {
      padding-right: 30px !important;
    }
  }
  .list--ul li::before, .text-component .list--ul li::before,
  .list--ol li::before, .text-component .list--ol li::before {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    position: relative;
    top: -0.1em;
  }
  @supports (--css: variables) {
    .list--ul li::before, .text-component .list--ul li::before,
  .list--ol li::before, .text-component .list--ol li::before {
      width: var(--list-bullet-size) !important;
      height: var(--list-bullet-size) !important;
      margin-left: calc(var(--list-bullet-size) * -1) !important;
      left: calc(var(--list-bullet-margin-right) * -1) !important;
    }
  }
  
  .list--ul, .text-component .list--ul {
    --list-bullet-size: 7px;
    --list-bullet-margin-right: -20px;
  }
  .list--ul > li, .text-component .list--ul > li {
    padding-left: 19px;
  }
  .list--ul > li::before, .text-component .list--ul > li::before {
    content: "";
    border-radius: 50%;
    /* color: var(--color-contrast-lower); */
    background-color: currentColor;
    width: 7px;
    height: 7px;
    margin-left: -7px;
    left: -12px;
  }
  .list--ul ul li::before, .text-component .list--ul ul li::before {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px currentColor;
  }
  
  .list--ol, .text-component .list--ol {
    --list-bullet-size: 26px;
    --list-bullet-margin-right: 6px;
    --list-bullet-font-size: 14px;
    counter-reset: list-items;
  }
  .list--ol > li, .text-component .list--ol > li {
    counter-increment: list-items;
    padding-left: 32px;
  }
  .list--ol ol, .text-component .list--ol ol {
    counter-reset: list-items;
  }
  .list--ol > li::before, .text-component .list--ol > li::before {
    content: counter(list-items);
    font-size: var(--list-bullet-font-size, 14px);
    background-color: hsl(0deg 0% 91.77%);
    color: var(--color-contrast-high);
    line-height: 1;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    margin-left: -26px;
    left: -6px;
  }
  .list--ol ol > li::before, .text-component .list--ol ol > li::before {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px var(--color-contrast-lower);
  }
  
  /* #endregion */
  /* #region (border) */
  .list--border li:not(:last-child), .text-component .list--border li:not(:last-child) {
    border-bottom: 1px solid var(--color-contrast-lower);
  }
  .list--border ul, .list--border ol, .text-component .list--border ul, .text-component .list--border ol {
    border-top: 1px solid var(--color-contrast-lower);
  }
  
  /* #endregion */
  /* #region (icons) */
  .list--icons, .text-component .list--icons {
    --list-bullet-size: 24px;
    --list-bullet-margin-right: 8px;
    --list-offset: calc(var(--list-bullet-size) + var(--list-bullet-margin-right));
  }
  .list--icons ul, .list--icons ol, .text-component .list--icons ul, .text-component .list--icons ol {
    padding-left: 32px;
  }
  @supports (--css: variables) {
    .list--icons ul, .list--icons ol, .text-component .list--icons ul, .text-component .list--icons ol {
      padding-left: var(--list-offset);
    }
  }
  
  .list__icon {
    position: relative;
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }
  .list__icon:not(.top-0) {
    top: calc((1em * var(--body-line-height) - 24px) / 2);
  }
  @supports (--css: variables) {
    .list__icon {
      width: var(--list-bullet-size);
      height: var(--list-bullet-size);
      margin-left: var(--list-bullet-margin-right);
    }
    .list__icon:not(.top-0) {
      top: calc((1em * var(--body-line-height) * var(--list-line-height-multiplier) - var(--list-bullet-size)) / 2);
    }
  }
  
  /* #endregion */
  /* -------------------------------- 
  
  File#: _1_main-footer
  Title: Main Footer
  Descr: Main footer template
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .main-footer {
    position: relative;
    z-index: 1;
  }
  
  .main-footer__social {
    text-decoration: none;
    display: inline-block;
    color: var(--color-contrast-medium);
    transition: 0.2s;
  }
  .main-footer__social:hover {
    color: var(--color-contrast-high);
  }
  
  /* -------------------------------- 
  
  File#: _1_newsletter
  Title: Newsletter 
  Descr: Newsletter form template
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .newsletter {
    position: relative;
    z-index: 1;
  }
  
  /* -------------------------------- 
  
  File#: _1_pagination
  Title: Pagination 
  Descr: Component used to navigate through pages of related content
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .pagination__list > li {
    display: inline-block;
  }
  
  .pagination--split .pagination__list {
    width: 100%;
  }
  .pagination--split .pagination__list > *:first-child {
    margin-right: auto;
  }
  .pagination--split .pagination__list > *:last-child {
    margin-left: auto;
  }
  
  .pagination__item {
    display: inline-block;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1;
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
    padding-left: calc(1.355 * var(--space-xs));
    padding-right: calc(1.355 * var(--space-xs));
    border-radius: var(--radius-md);
    text-decoration: none;
    height: 100%;
    color: var(--color-contrast-higher);
    transition: 0.2s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .pagination__item:hover:not(.pagination__item--selected):not(.pagination__item--ellipsis) {
    background-color: var(--color-contrast-lower);
  }
  .pagination__item:active {
    transform: translateY(2px);
  }
  
  .pagination__item--selected {
    background-color: var(--color-contrast-higher);
    color: var(--color-bg);
    box-shadow: var(--shadow-sm);
  }
  
  .pagination__item--disabled {
    opacity: 0.5;
    pointer-events: none;
  }
  
  .pagination__jumper .form-control {
    width: 3.2em;
    margin-right: var(--space-xs);
    padding: var(--space-xs);
  }
  .pagination__jumper em {
    flex-shrink: 0;
    white-space: nowrap;
  }
  
  /* -------------------------------- 
  
  File#: _1_pre-header
  Title: Pre-header 
  Descr: Pre-header (top) banner
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .pre-header {
    display: block;
  }
  
  .pre-header--is-hidden {
    display: none;
  }
  
  .pre-header__close-btn {
    position: absolute;
    right: 0;
    top: calc(50% - 0.5em);
    opacity: 0.85;
    transition: 0.2s;
  }
  .pre-header__close-btn:hover {
    opacity: 1;
    transform: scale(1.1);
  }
  .pre-header__close-btn .icon {
    display: block;
  }
  
  a.pre-header {
    text-decoration: none;
    transition: background-color 0.2s;
  }
  a.pre-header:hover {
    text-decoration: underline;
    background-color: var(--color-contrast-high);
  }
  
  /* -------------------------------- 
  
  File#: _1_previous-next-links
  Title: Previous/Next Links
  Descr: Links to previous/next articles
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .pn-links {
    border-top: 1px solid var(--color-contrast-lower);
  }
  
  .pn-links__item:first-child .pn-links__link {
    border-bottom: 1px solid var(--color-contrast-lower);
  }
  
  .pn-links__link {
    display: flex;
    align-items: center;
    height: 100%;
    color: inherit;
    text-decoration: none;
    padding: var(--space-md);
  }
  .pn-links__link:hover {
    text-decoration: underline;
  }
  .pn-links__link:hover .pn-links__icon line:nth-child(1) {
    transform: rotate(180deg);
  }
  .pn-links__link:hover .pn-links__icon line:nth-child(2) {
    transform: rotate(-180deg);
  }
  .pn-links__link:hover .pn-links__icon line:nth-child(3) {
    stroke-dashoffset: 14;
  }
  
  .pn-links__icon {
    flex-shrink: 0;
  }
  .pn-links__icon line:nth-child(1),
  .pn-links__icon line:nth-child(2) {
    transition: transform 0.3s var(--ease-out);
  }
  .pn-links__icon line:nth-child(1) {
    transform-origin: 42px 19px;
  }
  .pn-links__icon line:nth-child(2) {
    transform-origin: 42px 29px;
  }
  .pn-links__icon line:nth-child(3) {
    stroke-dasharray: 48;
    transition: stroke-dashoffset 0.3s var(--ease-out);
  }
  
  @media (min-width: 64rem) {
    .pn-links__item:first-child .pn-links__link {
      border-bottom: none;
      border-right: 1px solid var(--color-contrast-lower);
    }
  }
  /* -------------------------------- 
  
  File#: _1_radio-switch
  Title: Radio Switch
  Descr: Custom radio toggle
  Usage: codyhouse.co/license
  
  -------------------------------- */
  :root {
    --radio-switch-width: 186px;
    --radio-switch-height: 46px;
    --radio-switch-padding: 3px;
    --radio-switch-radius: 50em;
    --radio-switch-animation-duration: 0.3s;
  }
  
  .radio-switch {
    position: relative;
    display: inline-block;
    display: inline-flex;
    padding: var(--radio-switch-padding);
    border-radius: calc(var(--radio-switch-radius) * 1.4);
    background-color: var(--color-bg-dark);
  }
  .radio-switch:focus-within, .radio-switch:active {
    box-shadow: 0 0 0 2px hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.15);
  }
  
  .radio-switch__item {
    position: relative;
    display: inline-block;
    height: calc(var(--radio-switch-height) - 2 * var(--radio-switch-padding));
    width: calc(var(--radio-switch-width) * 0.5 - var(--radio-switch-padding));
  }
  
  .radio-switch__label {
    position: relative;
    z-index: 2;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: var(--radio-switch-radius);
    cursor: pointer;
    font-size: var(--text-sm);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    transition: all var(--radio-switch-animation-duration);
    color: var(--color-contrast-higher);
  }
  .radio-switch__input:checked ~ .radio-switch__label {
    color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .radio-switch__input:focus ~ .radio-switch__label {
    background-color: hsl(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) * 0.6));
  }
  .radio-switch__label :not(*):focus-within, .radio-switch__input:focus ~ .radio-switch__label {
    background-color: transparent;
  }
  
  .radio-switch__marker {
    position: absolute;
    z-index: 1;
    top: 0;
    left: -100%;
    border-radius: var(--radio-switch-radius);
    background-color: var(--color-contrast-higher);
    height: calc(var(--radio-switch-height) - 2 * var(--radio-switch-padding));
    width: calc(var(--radio-switch-width) * 0.5 - var(--radio-switch-padding));
    box-shadow: var(--shadow-md);
    transition: transform var(--radio-switch-animation-duration);
  }
  .radio-switch__input:checked ~ .radio-switch__marker {
    transform: translateX(100%);
  }
  
  /* -------------------------------- 
  
  File#: _1_radios-checkboxes
  Title: Radios and Checkboxes
  Descr: Custom radio and checkbox buttons
  Usage: codyhouse.co/license
  
  -------------------------------- */
  :root {
    --checkbox-radio-size: 1em;
    --checkbox-radio-translate-y: 0.15em;
    --checkbox-radio-gap: var(--space-xxxs);
    --checkbox-radio-border-width: 2px;
    --radio-marker-size: 8px;
    --checkbox-marker-size: 12px;
    --checkbox-radius: 0.185em;
  }
  
  .radio,
  .checkbox {
    position: absolute;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    height: 0;
    width: 0;
    pointer-events: none;
  }
  
  .radio + label,
  .checkbox + label {
    display: inline-block;
    display: inline-flex;
    align-items: baseline;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    cursor: pointer;
  }
  
  .radio + label::before,
  .checkbox + label::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    width: var(--checkbox-radio-size);
    height: var(--checkbox-radio-size);
    background-color: var(--color-bg);
    border-width: var(--checkbox-radio-border-width);
    border-color: var(--color-contrast-low);
    border-style: solid;
    margin-right: var(--checkbox-radio-gap);
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s, border 0.2s;
  }
  
  .radio:not(:checked):not(:focus) + label:hover::before,
  .checkbox:not(:checked):not(:focus) + label:hover::before {
    border-color: var(--color-contrast-medium);
  }
  
  @supports (grid-area: auto) {
    .radio + label::before,
  .checkbox + label::before {
      position: relative;
      top: var(--checkbox-radio-translate-y);
    }
  }
  .radio + label::before {
    border-radius: 50%;
  }
  
  .checkbox + label::before {
    border-radius: var(--checkbox-radius);
  }
  
  .radio:checked + label::before,
  .checkbox:checked + label::before {
    background-color: var(--color-primary);
    box-shadow: none;
    border-color: var(--color-primary);
    transition: transform 0.2s;
  }
  
  .radio:active + label::before,
  .checkbox:active + label::before {
    transform: scale(0.8);
    transition: transform 0.2s;
  }
  
  .radio:checked:active + label::before,
  .checkbox:checked:active + label::before {
    transform: none;
    transition: none;
  }
  
  .radio:checked + label::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg class='nc-icon-wrapper' fill='%23ffffff'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ffffff'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
    background-size: var(--radio-marker-size);
  }
  
  .checkbox:checked + label::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg class='nc-icon-wrapper' stroke-width='2' fill='%23ffffff' stroke='%23ffffff'%3E%3Cpolyline fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='1,9 5,13 15,3 ' data-cap='butt'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E");
    background-size: var(--checkbox-marker-size);
  }
  
  .radio:checked:active + label::before,
  .checkbox:checked:active + label::before,
  .radio:focus + label::before,
  .checkbox:focus + label::before {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
  }
  
  .radio--bg + label, .checkbox--bg + label {
    padding: var(--space-xxxxs) var(--space-xxxs);
    border-radius: var(--radius-md);
    transition: background 0.2s;
  }
  
  .radio--bg + label:hover, .checkbox--bg + label:hover {
    background-color: var(--color-contrast-lower);
  }
  
  .radio--bg:active + label,
  .checkbox--bg:active + label,
  .radio--bg:focus + label,
  .checkbox--bg:focus + label {
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.1);
  }
  
  /* -------------------------------- 
  
  File#: _1_read-more
  Title: Read More
  Descr: A truncated paragraph with the option of reading more content
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .js .read-more {
    opacity: 0;
  }
  .js .read-more--loaded {
    opacity: 1;
  }
  
  .read-more__btn {
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    cursor: pointer;
    color: var(--color-primary);
    text-decoration: underline;
  }
  
  /* -------------------------------- 
  
  File#: _1_reading-progressbar
  Title: Reading Progress Bar
  Descr: A bar indicator displaying the current reading progress
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .reading-progressbar {
    position: fixed;
    z-index: var(--z-index-fixed-element);
    top: 70px;
    left: 0;
    width: 100%;
    height: 5px;
    color: var(--color-primary);
    pointer-events: none;
    display: none;
  }


  
  .reading-progressbar--is-active {
    display: block;
  }
  
  .reading-progressbar::-webkit-progress-bar {
    background-color: transparent;
  }
  
  .reading-progressbar::-webkit-progress-value {
    background-color: currentColor;
  }
  
  .reading-progressbar::-moz-progress-bar {
    background-color: currentColor;
  }
  
  .reading-progressbar__fallback {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: currentColor;

  }
  
  .reading-content {
    padding: var(--space-md);
  }
  
  /* -------------------------------- 
  
  File#: _1_responsive-iframe
  Title: Resposive Iframe
  Descr: Responsive wrapper for iframe elements (e.g., YouTube and Vimeo videos)
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .responsive-iframe {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
  }
  .responsive-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .responsive-iframe--4\:3 {
    padding-bottom: 75%;
  }
  
  /* -------------------------------- 
  
  File#: _1_search-input
  Title: Search input
  Descr: Search input field with custom button
  Usage: codyhouse.co/license
  
  -------------------------------- */
  :root {
    --search-input-btn-width: 2.8em;
    --search-input-icon-size: 1.25em;
  }
  
  .search-input {
    position: relative;
  }
  .search-input .form-control::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  .search-input--icon-right .form-control {
    padding-right: var(--search-input-btn-width);
  }
  
  .search-input--icon-left .form-control {
    padding-left: var(--search-input-btn-width);
  }
  
  .search-input__btn {
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: var(--search-input-btn-width);
  }
  .search-input__btn:active .icon {
    transform: scale(0.9);
  }
  .search-input__btn .icon {
    display: block;
    width: var(--search-input-icon-size);
    height: var(--search-input-icon-size);
    margin-left: auto;
    margin-right: auto;
    color: var(--color-contrast-low);
    transition: transform 0.2s;
  }
  
  .search-input--icon-left .search-input__btn {
    left: 0;
    right: auto;
    pointer-events: none;
  }
  
  .search-input__btn:focus .icon,
  .search-input .form-control:focus + .search-input__btn .icon {
    color: var(--color-primary);
  }
  
  /* -------------------------------- 
  
  File#: _1_smooth-scrolling
  Title: Smooth Scrolling
  Descr: Replace the default browser behaviour (jump) with a smooth scrolling transition
  Usage: codyhouse.co/license
  
  -------------------------------- */
  html {
    scroll-behavior: smooth;
  }
  
  /* -------------------------------- 
  
  File#: _1_social-sharing
  Title: Social Sharing
  Descr: Social sharing plugin
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .sharebar__btn {
    --size: 60px;
    width: var(--size);
    height: var(--size);
    display: flex;
    background: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
    border-radius: 50%;
    transition: 0.2s;
  }
  .sharebar__btn .icon {
    --size: 24px;
    display: block;
    margin: auto;
    color: var(--color-contrast-high);
    transition: color 0.2s;
  }
  .sharebar__btn:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075);
    box-shadow: var(--shadow-sm);
  }
  .sharebar__btn:hover .icon {
    color: var(--color-contrast-higher);
  }
  
  /* -------------------------------- 
  
  File#: _1_vertical-timeline
  Title: Vertical Timeline
  Descr: A vertical timeline used to display a sequence of events/steps
  Usage: codyhouse.co/license
  
  -------------------------------- */
  :root {
    --v-timeline-marker-size: 16px;
    --v-timeline-track-width: 2px;
    --v-timeline-triangle-size: 12px;
    --v-timeline-sections-gap: var(--space-lg);
    --v-timeline-items-gap: var(--space-sm);
  }
  
  .v-timeline {
    position: relative;
    padding: var(--space-lg) 0;
  }
  .v-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc((var(--v-timeline-marker-size) - var(--v-timeline-track-width)) * 0.5);
    height: 100%;
    width: var(--v-timeline-track-width);
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
  }
  
  .v-timeline__section {
    position: relative;
    display: flex;
  }
  .v-timeline__section:not(:last-of-type) {
    margin-bottom: var(--v-timeline-sections-gap);
  }
  
  .v-timeline__marker {
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
    height: var(--v-timeline-marker-size);
    width: var(--v-timeline-marker-size);
    border-radius: 50%;
    margin-right: calc(var(--v-timeline-triangle-size) + var(--space-xxs));
  }
  
  .v-timeline__item {
    position: relative;
    top: calc(0.5 * var(--v-timeline-marker-size));
    flex-grow: 1;
  }
  .v-timeline__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(-1 * var(--v-timeline-triangle-size) + 1px);
    height: var(--v-timeline-triangle-size);
    width: var(--v-timeline-triangle-size);
    background-color: inherit;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
  }
  .v-timeline__item:not(:last-child) {
    margin-bottom: var(--v-timeline-items-gap);
  }
  .v-timeline__item:not(:first-child) .v-timeline__date {
    display: none;
  }
  .v-timeline__item:not(:first-child)::before {
    display: none;
  }
  
  .v-timeline__date-value {
    color: var(--color-contrast-medium);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  
  @media not all and (min-width: 64rem) {
    .v-timeline__item:first-child {
      border-top-left-radius: 0;
    }
  }
  @media (min-width: 64rem) {
    .v-timeline::before {
      left: calc(50% - var(--v-timeline-track-width) / 2);
    }
    .v-timeline__section {
      width: calc(50% + var(--v-timeline-marker-size) / 2);
    }
    .v-timeline__section:nth-child(odd) {
      flex-direction: row-reverse;
    }
    .v-timeline__section:nth-child(odd) .v-timeline__marker {
      margin-right: 0;
      margin-left: calc(var(--v-timeline-triangle-size) + var(--space-xxs));
    }
    .v-timeline__section:nth-child(odd) .v-timeline__item::before {
      left: auto;
      right: calc(-1 * var(--v-timeline-triangle-size) + 1px);
      transform: scaleX(-1);
    }
    .v-timeline__section:nth-child(odd) .v-timeline__item:first-child {
      border-top-right-radius: 0;
    }
    .v-timeline__section:nth-child(odd) .v-timeline__date {
      right: calc(-2 * (var(--v-timeline-triangle-size) + var(--space-xxs)) - var(--v-timeline-marker-size));
      transform: translateX(100%) translateY(-50%);
    }
    .v-timeline__section:nth-child(even) {
      margin-left: auto;
    }
    .v-timeline__section:nth-child(even) .v-timeline__item:first-child {
      border-top-left-radius: 0;
    }
    .v-timeline__section:nth-child(even) .v-timeline__date {
      left: calc(-2 * (var(--v-timeline-triangle-size) + var(--space-xxs)) - var(--v-timeline-marker-size));
      transform: translateX(-100%) translateY(-50%);
    }
    .v-timeline__section--is-hidden {
      opacity: 0;
    }
    .v-timeline__date {
      position: absolute;
      top: 0;
      white-space: nowrap;
    }
    .js .v-timeline[data-animation=on] .v-timeline__marker {
      opacity: 0;
      transform: scale(0.5);
      transition: transform 0.6s var(--ease-out), opacity 0.6s;
    }
    .js .v-timeline[data-animation=on] .v-timeline__item {
      opacity: 0;
      transition: transform 0.6s var(--ease-out), opacity 0.6s;
    }
    .js .v-timeline[data-animation=on] .v-timeline__section:nth-child(odd) .v-timeline__item {
      transform: translateX(-50px);
    }
    .js .v-timeline[data-animation=on] .v-timeline__section:nth-child(even) .v-timeline__item {
      transform: translateX(50px);
    }
    .js .v-timeline[data-animation=on] .v-timeline__section--animate .v-timeline__item {
      transform: translateX(0) !important;
      opacity: 1;
    }
    .js .v-timeline[data-animation=on] .v-timeline__section--animate .v-timeline__marker {
      transform: scale(1);
      opacity: 1;
    }
  }
  .v-timeline--icons {
    --v-timeline-marker-size: 3em;
  }
  
  /* -------------------------------- 
  
  File#: _2_article-gallery-v2
  Title: Article Gallery v2
  Descr: A gallery of blog articles
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .articles-v2 .pagination {
    --pagination-cta-color: var(--color-contrast-higher);
  }
  
  /* -------------------------------- 
  
  File#: _2_article-gallery
  Title: Article Gallery
  Descr: A gallery of blog articles
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .articles {
    position: relative;
    z-index: 1;
  }
  
  /* -------------------------------- 
  
  File#: _2_article-preview-v4
  Title: Article Preview v4
  Descr: Blog post excerpt, containing a link to the article page and a preview image
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .story-v4 {
    position: relative;
    z-index: 1;
  }
  
  .story-v4__title {
    color: var(--color-contrast-higher);
    -webkit-text-decoration-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.2);
            text-decoration-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.2);
    transition: 0.2s;
  }
  .story-v4__title:hover {
    -webkit-text-decoration-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 1);
            text-decoration-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 1);
  }
  
  .story-v4__img-link {
    display: block;
  }
  .story-v4__img-link img {
    display: block;
    width: 100%;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transition: 0.3s var(--ease-out);
  }
  .story-v4__img-link:hover img {
    -webkit-clip-path: polygon(2% 2%, 98% 2%, 98% 98%, 2% 98%);
            clip-path: polygon(2% 2%, 98% 2%, 98% 98%, 2% 98%);
  }
  
  /* -------------------------------- 
  
  File#: _2_article-v2
  Title: Article v2
  Descr: Article template
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .t-article-v2__cover {
    height: 200px;
    background-color: var(--color-contrast-low);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  @media (min-width: 64rem) {
    .t-article-v2__cover {
      height: 400px;
    }
  }
  
  .t-article-v2__intro {
    background-color: var(--color-bg);
    padding: var(--space-md);
    margin-top: calc(-1 * var(--space-xxl));
  }
  
  .t-article-v2__divider {
    display: flex;
    align-items: center;
  }
  .t-article-v2__divider span {
    display: block;
    margin: 0 var(--space-xs);
    height: 10px;
    width: 10px;
    transform: rotate(45deg);
    background-color: var(--color-contrast-low);
  }
  .t-article-v2__divider::before, .t-article-v2__divider::after {
    content: "";
    display: block;
    height: 1px;
    width: auto;
    flex-grow: 1;
    background-color: var(--color-contrast-lower);
  }
  
  /* -------------------------------- 
  
  File#: _2_comments
  Title: Comments
  Descr: Threaded comments template
  Usage: codyhouse.co/license
  
  -------------------------------- */
  :root {
    --comments-author-img-size: 2.6em;
    --comments-author-content-gap: var(--space-xs);
    --comments-gap: var(--space-md);
  }
  
  .comments {
    position: relative;
    z-index: 1;
  }
  
  .comments__sorting-label {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    height: 0;
    width: 0;
    pointer-events: none;
  }
  .comments__sorting-label + label {
    color: var(--color-contrast-medium);
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  .comments__sorting-label + label:hover {
    color: var(--color-contrast-high);
  }
  .comments__sorting-label:checked + label {
    color: var(--color-contrast-higher);
    text-decoration: underline;
  }
  .comments__sorting-label:focus + label {
    outline: 2px solid hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
    outline-offset: 2px;
  }
  
  .comments__comment:not(:last-child) {
    margin-bottom: var(--comments-gap);
  }
  
  .comments__author-img {
    display: block;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    margin-right: var(--comments-author-content-gap);
    transition: opacity 0.2s;
  }
  .comments__author-img img {
    display: block;
    width: var(--comments-author-img-size);
    height: var(--comments-author-img-size);
  }
  .comments__author-img:hover {
    opacity: 0.75;
  }
  
  .comments__author-name {
    font-weight: bold;
    text-decoration: none;
    color: var(--color-contrast-higher);
  }
  .comments__author-name:hover {
    text-decoration: underline;
  }
  
  .comments__readmore-btn {
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    color: var(--color-contrast-medium);
  }
  .comments__readmore-btn:hover {
    cursor: pointer;
    color: var(--color-contrast-higher);
    text-decoration: underline;
  }
  
  .comments__vote-btn {
    display: inline-flex;
    align-items: center;
    color: var(--color-contrast-medium);
  }
  .comments__vote-btn:hover {
    color: var(--color-contrast-higher);
    cursor: pointer;
  }
  
  .comments__vote-btn--pressed {
    color: var(--color-accent);
  }
  .comments__vote-btn--pressed:hover {
    color: var(--color-accent);
  }
  .comments__vote-btn--pressed .comments__vote-icon-wrapper .icon {
    -webkit-animation: comments-vote-icon 0.3s;
            animation: comments-vote-icon 0.3s;
  }
  .comments__vote-btn--pressed .comments__vote-icon-wrapper::before {
    -webkit-animation: comments-vote-icon-circle 0.6s;
            animation: comments-vote-icon-circle 0.6s;
  }
  
  .comments__vote-icon-wrapper {
    position: relative;
  }
  .comments__vote-icon-wrapper .icon {
    position: relative;
    z-index: 2;
    transition: transform 0.3s;
  }
  .comments__vote-icon-wrapper::before {
    content: "";
    width: 2em;
    height: 2em;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    top: calc(50% - 1em);
    left: calc(50% - 1em);
    background-color: currentColor;
    opacity: 1;
    transform: scale(0);
    pointer-events: none;
  }
  
  @-webkit-keyframes comments-vote-icon {
    0%, 100% {
      transform: scale(1);
    }
    30% {
      transform: scale(0.8);
    }
  }
  
  @keyframes comments-vote-icon {
    0%, 100% {
      transform: scale(1);
    }
    30% {
      transform: scale(0.8);
    }
  }
  @-webkit-keyframes comments-vote-icon-circle {
    from {
      opacity: 1;
      transform: scale(0);
    }
    to {
      opacity: 0;
      transform: scale(1);
    }
  }
  @keyframes comments-vote-icon-circle {
    from {
      opacity: 1;
      transform: scale(0);
    }
    to {
      opacity: 0;
      transform: scale(1);
    }
  }
  .comments__label-btn {
    color: var(--color-contrast-medium);
  }
  .comments__label-btn:hover {
    color: var(--color-contrast-higher);
    cursor: pointer;
    text-decoration: underline;
  }
  
  .comments__time {
    color: var(--color-contrast-medium);
  }
  
  .comments__inline-divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--color-contrast-low);
  }
  
  .comments__details {
    margin-top: var(--space-sm);
    margin-left: calc(var(--comments-author-img-size) + var(--comments-author-content-gap));
    padding-left: var(--comments-author-content-gap);
    border-left: 3px solid var(--color-contrast-lower);
  }
  .comments__details .details__content > ul {
    margin-top: var(--space-sm);
  }
  
  .comments--no-profile-img {
    --comments-author-img-size: 0;
  }
  .comments--no-profile-img .comments__author-img {
    display: none;
  }
  
  /* -------------------------------- 
  
  File#: _2_drawer-navigation
  Title: Drawer Navigation
  Descr: Header template with drawer navigation
  Usage: codyhouse.co/license
  
  -------------------------------- */
  :root {
    --dr-nav-header-height: 54px;
    --dr-nav-logo-size: 48px;
  }
  
  @media (min-width: 64rem) {
    :root {
      --dr-nav-header-height: 70px;
      --dr-nav-logo-size: 54px;
    }
  }
  /* .dr-nav-header {
    height: var(--dr-nav-header-height);
    position: relative;
    z-index: var(--z-index-header);
    position: sticky;
  } */
  .dr-nav-header {
    height: var(--dr-nav-header-height);
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensure the header stays on top of other elements */
    background-color: var(--color-sticky-header-bg); 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow effect */
  }
 
  .dr-nav-header .radio-switch {
    --radio-switch-width: 72px;
    --radio-switch-height: 32px;
    --radio-switch-padding: 3px;
    --radio-switch-radius: 50em;
    --radio-switch-animation-duration: 0.3s;
  }
  
  .dr-nav-header__logo {
    display: block;
    position: absolute;
    left: calc(50% - var(--dr-nav-logo-size) / 2);
    top: calc(50% - var(--dr-nav-logo-size) / 2);
    width: var(--dr-nav-logo-size);
    height: var(--dr-nav-logo-size);
    text-decoration: none;
    color: var(--color-contrast-higher);
    transition: 0.3s;
  }
  .dr-nav-header__logo svg {
    display: block;
    max-width: 400%;
    height: inherit;
    transform: translate(-39px, -1px);
  }
  @media (max-width: 500px) {
  .dr-nav-header__logo svg {
    max-width: 350%;
  }
}
  .dr-nav-header__logo:hover {
    opacity: 0.85;
  }
  
  .dr-nav-control-wrapper {
    position: fixed;
    z-index: calc(var(--z-index-overlay) + 1);
    top: var(--pre-header-height, 0);
    left: 0;
    height: var(--dr-nav-header-height);
    width: 100%;
    pointer-events: none;
  }
  
  .dr-nav-control {
    --anim-menu-btn-size: 48px;
    --anim-menu-btn-icon-size: 24px;
    --anim-menu-btn-icon-stroke: 2px;
    pointer-events: auto;
    position: relative;
    cursor: pointer;
    border-radius: 50%;
    transition: transform 0.3s var(--ease-in-out);
    color: var(--color-contrast-high);
  }
  .dr-nav-control circle {
    display: none;
  }
  .dr-nav-control.anim-menu-btn--state-b {
    transform: rotate(180deg);
  }
  .dr-nav-control:hover .dr-nav-control__bg {
    fill: var(--color-contrast-lower);
    opacity: 1;
  }
  
  .dr-nav-control__bg {
    display: block;
    fill: var(--color-bg);
    stroke-width: 1.5;
    stroke: var(--color-contrast-low);
    opacity: 0.95;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.2s;
  }
  
  .dr-nav-control--ready-to-animate circle {
    display: block;
    transition: stroke-dashoffset 0.3s 0s;
  }
  
  .dr-nav-control.anim-menu-btn--state-b circle {
    stroke-dashoffset: 0;
    transition-delay: 0.3s;
  }
  
  .dr-nav-drawer-header {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: var(--dr-nav-header-height);
    margin-top: 76px;
  }
  
  .dr-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    padding: var(--space-xxxs) 0;
    color: var(--color-contrast-medium);
    transition: 0.3s;
  }
  .dr-nav__link :nth-child(2)::before {
    content: "";
    display: inline-block;
    height: 1px;
    width: 32px;
    margin-right: var(--space-xs);
    background-color: currentColor;
    vertical-align: middle;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.3s var(--ease-out);
  }
  .dr-nav__link:hover {
    color: var(--color-contrast-high);
  }
  .dr-nav__link:hover :nth-child(2)::before {
    transform: scaleX(1);
  }
  
  /* -------------------------------- 
  
  File#: _2_sticky-sharebar
  Title: Sticky Sharebar
  Descr: Sticky social sharing bar
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .sticky-sharebar {
    display: flex;
    align-items: center;
    position: fixed;
    height: 100%;
    top: 0;
    right: var(--space-md);
    pointer-events: none;
    z-index: var(--z-index-fixed-element, 10);
    transition: visibility 0s 0.3s, opacity 0.3s, transform 0.3s var(--ease-in-out);
    transform: translateX(10%);
    opacity: 0;
    visibility: hidden;
  }
  
  .sticky-sharebar--on-target {
    transition: visibility 0s, opacity 0.3s, transform 0.3s var(--ease-in-out);
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }
  
  .sticky-sharebar__list {
    pointer-events: auto;
    background-color: hsla(var(--color-bg-light-h), var(--color-bg-light-s), var(--color-bg-light-l), 0.95);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    border-radius: 50em;
    box-shadow: var(--inner-glow), var(--shadow-md);
    padding: 4px;
  }
  
  .sticky-sharebar__btn {
    --size: 2.2em;
    width: var(--size);
    height: var(--size);
    position: relative;
    display: flex;
    border-radius: 50%;
  }
  .sticky-sharebar__btn .icon {
    position: relative;
    color: var(--color-contrast-medium); /* icon color */
    display: block;
    margin: auto;
    z-index: 2;
    transition: color 0.2s;
  }
  .sticky-sharebar__btn::before { /* animated bg */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: inherit;
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
    transform: scale(0);
    transition: transform 0.2s var(--ease-out);
  }
  .sticky-sharebar__btn:hover .icon {
    color: var(--color-contrast-higher);
  }
  .sticky-sharebar__btn:hover::before {
    transform: scale(1);
  }
  
  /* -------------------------------- 
  
  File#: _3_article-gallery-v5
  Title: Article Gallery v5
  Descr: A gallery of blog articles
  Usage: codyhouse.co/license
  
  -------------------------------- */
  /* -------------------------------- 
  
  File#: _3_article-v3
  Title: Article v3
  Descr: Article template
  Usage: codyhouse.co/license
  
  -------------------------------- */
  .t-article-v3__hero {
    background-color: var(--color-contrast-lower);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: var(--space-xxl) 0;
    overflow: hidden; /* Ensures content doesn't overflow the section */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Adds a soft shadow for depth */
    border-radius: 0px 0px 30px 30px;
  }
  
  
  
  .t-article-v3__intro-text {
    padding: var(--space-md);
    color: var(--color-bg);
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.75);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .t-article-v3__intro-text p {
    opacity: 0.75;
  }
  
  .t-article-v3__divider {
    display: flex;
    align-items: center;
  }
  .t-article-v3__divider span {
    display: block;
    margin: 0 var(--space-xs);
    height: 10px;
    width: 10px;
    transform: rotate(45deg);
    background-color: var(--color-contrast-low);
  }
  .t-article-v3__divider::before, .t-article-v3__divider::after {
    content: "";
    display: block;
    height: 1px;
    width: auto;
    flex-grow: 1;
    background-color: var(--color-contrast-lower);
  }
  
  /*! purgecss end ignore */


/* add on componenets  */

.note {
  margin-bottom: 65px;
}

  .note {
    background-color: var(--color-bg-light);
    border-right: 3px solid var(--color-primary);
    box-shadow: var(--shadow-sm);
  }
  .note:not([class^=padding-]):not([class*=" padding-"]) {
    padding: var(--space-sm);
  }
  
  .note--warning {
    border-right-color: var(--color-warning);
  }
  
  .note--error {
    border-right-color: var(--color-error);
  }
  
  .note--success {
    border-right-color: var(--color-success);
  }
  
  
  .text-component {
    /* reset in case the component is used inside a .text-component */
  }
  .text-component .note__content > *:last-child {
    margin-bottom: 0;
  }
  .text-component .note__title {
    margin-bottom: 0;
  }

  .marg-t-compa-blog {
    padding: 40px 0;
  }


  /* number list  */


  :root {
    --list-v2-bullet-size: 40px;
    --list-v2-bullet-font-size: 1rem;
    --list-v2-bullet-margin-right: 1rem;
    --list-v2-gap-y: var(--space-lg);
    /* list points gap */
  }
  
  .list-v2, .text-component .list-v2 {
    padding-left: 0;
    list-style: none;
  }
  .list-v2 > li:not(:last-child), .text-component .list-v2 > li:not(:last-child) {
    margin-bottom: var(--list-v2-gap-y);
  }
  
  .list-v2__title {
    padding-right: calc(var(--list-v2-bullet-size) + var(--list-v2-bullet-margin-right));
  }
  
  .list-v2__bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--list-v2-bullet-size);
    height: var(--list-v2-bullet-size);
    margin-right: var(--list-v2-bullet-margin-right);
    margin-left: calc(-1 * var(--list-v2-bullet-size) - var(--list-v2-bullet-margin-right));
    vertical-align: middle;
    position: relative;
    top: -0.1em;
  }
  
  .list-v2__content {
    margin-left: calc(var(--list-v2-bullet-size) + var(--list-v2-bullet-margin-right));
  }
  
  /* ordered list */
  .list-v2--ol, .text-component .list-v2--ol {
    counter-reset: list-items;
  }
  .list-v2--ol > li, .text-component .list-v2--ol > li {
    counter-increment: list-items;
  }
  .list-v2--ol .list-v2__bullet, .text-component .list-v2--ol .list-v2__bullet {
    left: 72px;
    border-radius: 50%;
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
    color: var(--color-primary-bula);
    font-size: var(--list-v2-bullet-font-size);
    font-weight: 500;
  }
  .list-v2--ol .list-v2__bullet::before, .text-component .list-v2--ol .list-v2__bullet::before {
    content: counter(list-items);
  }
  
  /* unordered list */
  .list-v2--ul, .text-component .list-v2--ul {
    --list-v2-bullet-size: 10px;
  }
  .list-v2--ul .list-v2__bullet, .text-component .list-v2--ul .list-v2__bullet {
    border-radius: 50%;
    background-color: var(--color-primary);
  }
  
  /* icons */
  .list-v2--icons, .text-component .list-v2--icons {
    --list-v2-bullet-size: 48px;
  }
  .list-v2--icons .list-v2__bullet, .text-component .list-v2--icons .list-v2__bullet {
    border-radius: 50%;
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
  }
  .list-v2--icons .list-v2__icon, .text-component .list-v2--icons .list-v2__icon {
    --size: 24px;
    color: var(--color-primary);
    /* icon color */
  }

  /* gradian bullt points text deco */

  .hiw-v3 {
    --hiw-v3-bullet-size: 40px;
    --hiw-v3-bullet-font-size: 16px;
    --hiw-v3-bullet-margin-right: var(--space-sm);
    --hiw-v3-gap-y: var(--space-lg);
    counter-reset: list-items;
  }
  
  .text-component .hiw-v3 {
    padding-left: 0;
    list-style: none;
  }
  
  .hiw-v3__item {
    position: relative;
    counter-increment: list-items;
  }
  .hiw-v3__item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: var(--hiw-v3-bullet-size);
    right: calc(var(--hiw-v3-bullet-size) / 2 - 2px);
    width: 4px;
    height: calc(100% - var(--hiw-v3-bullet-size) / 2);
    background: linear-gradient(to bottom, hsla(var(--color-bg-dark-h), var(--color-bg-dark-s), var(--color-bg-dark-l), 0) 0%, hsla(var(--color-bg-dark-h), var(--color-bg-dark-s), var(--color-bg-dark-l), 1) calc(100% - var(--hiw-v3-bullet-size) / 2));
  }
  .hiw-v3__item:not(:last-child) {
    padding-bottom: var(--hiw-v3-gap-y);
  }
  .hiw-v3__item:nth-last-child(2)::before {
    background: linear-gradient(to bottom, hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0) 0%, hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 1) calc(100% - var(--hiw-v3-bullet-size) / 2));
  }
  
  .hiw-v3__title-wrapper {
    position: relative;
    margin-bottom: var(--space-xs);
  }
  
  .hiw-v3__title {
    padding-right: calc(var(--hiw-v3-bullet-size) + var(--hiw-v3-bullet-margin-right));
  }
  
  .hiw-v3__bullet {
    position: relative;
    margin-right: calc(-1 * var(--hiw-v3-bullet-size));
    right: calc(-1 * var(--hiw-v3-bullet-margin-right));
  }
  .hiw-v3__bullet::before {
    content: "X";
    display: inline-flex;
    width: var(--hiw-v3-bullet-size);
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
  }
  .hiw-v3__bullet::after {
    content: counter(list-items);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: var(--hiw-v3-bullet-size);
    height: var(--hiw-v3-bullet-size);
    background-color: var(--color-bg-dark);
    border-radius: 50%;
    font-size: var(--hiw-v3-bullet-font-size);
    font-weight: 600;
  }
  
  .hiw-v3__item:last-child .hiw-v3__bullet::after {
    background-color: var(--color-primary);
    color: var(--color-white);
  }
  
  .hiw-v3__content {
    padding-right: calc(var(--hiw-v3-bullet-size) + var(--hiw-v3-bullet-margin-right));
  }

  /* shopping cart  */ 
  :root {
    --order-summary-img-size: 3.6em;
    --order-summary-img-margin-right: var(--space-xs);
  }
  
  .order-summary__header {
    border-radius: inherit;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  
  .order-summary__footer {
    border-radius: inherit;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
  }
  
  .order-summary__item {
    display: grid;
    grid-template-columns: var(--order-summary-img-size) 1fr;
    grid-gap: var(--order-summary-img-margin-right);
    align-items: center;
  }
  
  .order-summary__img {
    display: block;
    width: var(--order-summary-img-size);
    height: var(--order-summary-img-size);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: 0.2s;
  }
  .order-summary__img img {
    display: block;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .order-summary__img:hover {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  @media (min-width: 64rem) {
    .form-template-v3 .form-label {
      font-size: 1em;
    }
  }
  
  @media (max-width: 671px) {
    .sticky-sharebar__list {
        display: none;
    }
  }

  /* fotter  */
  /* -------------------------------- 

File#: _1_main-footer-v5
Title: Main Footer v5
Descr: Footer navigation template
Usage: codyhouse.co/license

-------------------------------- */
.footer-v5 {
    position: relative;
    z-index: 1;
  }
  
  .footer-v5__popular-link {
    display: inline-block;
    padding: var(--space-xxs);
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
    border-radius: var(--radius-md);
    color: var(--color-contrast-medium);
    line-height: 1;
    transition: 0.2s;
  }
  .footer-v5__popular-link:hover {
    color: var(--color-contrast-high);
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075);
  }
  
  .footer-v5__back-to-top {
    color: var(--color-contrast-medium);
    transition: color 0.2s;
  }
  .footer-v5__back-to-top:hover {
    color: var(--color-contrast-high);
  }
  
  .footer-v5__link {
    color: var(--color-contrast-medium);
    text-decoration: none;
    transition: color 0.2s;
  }
  .footer-v5__link:hover {
    color: var(--color-contrast-high);
    text-decoration: underline;
  }
  
  .footer-v5__social-btn {
    display: block;
    text-decoration: none;
    color: var(--color-contrast-medium);
    transition: color 0.2s;
  }
  .footer-v5__social-btn .icon {
    display: block;
  }
  .footer-v5__social-btn:hover {
    color: var(--color-contrast-high);
  }

  .logo-t {
     fill: var(--color-tabnav-for-text);
  }
/* 
  .loading--theme .loader { 
    border-color: transparent #7b5dd6; 
  }
  
  .loading--theme .loader::after {
    border-color: transparent rgba(123, 93, 214, .15); 
  }


  #loading {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    margin-top: 0px;
    top: 0px;
    z-index: 99999999;
    background-color: #f5f5f9;
  }
  
  #loading-center {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100px;
    width: 100px;
    margin-top: -50px;
    margin-left: -50px;
    -webkit-animation: loading-center-absolute 1s infinite;
    animation: loading-center-absolute 1s infinite;
  }
  
  .loader {
    border: 2px solid;
    border-color: transparent #888;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
  }

  .loader::after {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    border: 50px solid;
    border-color: transparent rgba(30, 30, 30, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }  */
/* Full-page loader (default white background, dark mode applied via JS) */
#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* Default (Light Mode), JS updates for Dark Mode */
  z-index: 99999999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
}

/* Lottie animation container */
#mahajna-animation-container {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Smooth fade-out transition when loading is complete */
.mahajna-loaded #loading {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out;
}

/****** PREVENT WHITE FLASH ******/
/* Set light mode background as default */
:root { --loader-bg: #ffffff; }

/* If the page loads in dark mode, apply dark background instantly */
html[data-theme="dark"] { --loader-bg: #1F2321; }

/* Ensure correct background color is set BEFORE rendering */
#loading {
  background-color: var(--loader-bg) !important;
  display: flex; /* Ensure loader is visible instantly */
}




  
  .sidnav-d-blog {
    position: fixed;
    top: 70px; /* Position it below the header */
    right: 20px; /* Space from the right edge */
    z-index: 1000; /* Ensure it stays on top of other elements */
    pointer-events: auto; /* Allows interaction with the button */
  }
  
.siza-n-blog {
  font-size: 1.2rem;
}

.new-bt-blog {
  font-size: 0.9rem;
}

@media (max-width: 1023px) {
  .reading-progressbar {
    top: 54px;
  }
}
/* 
table  */
.ex-table {
  position: relative;
  z-index: 1;
  border-collapse: separate;
  width: 100%;
}

.ex-table__btn {
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
}
.ex-table__btn:active {
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.05);
}

.ex-table__btn-icon {
  position: relative;
  display: block;
  margin: 0 auto;
}
.ex-table__btn-icon::before, .ex-table__btn-icon::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 80%;
  border-radius: 5em;
  background: currentColor;
  top: 0;
  transform-origin: 50% 100%;
  will-change: transform;
  transition: transform 0.2s;
}
.ex-table__btn-icon::before {
  left: 50%;
  transform: rotate(-45deg);
}
.ex-table__btn-icon::after {
  left: calc(50% - 1px);
  transform: rotate(45deg);
}

.ex-table__more-content {
  display: none;
}

.ex-table__row--show-more-content .ex-table__more-content {
  display: block;
}
.ex-table__row--show-more-content .ex-table__btn-icon::before {
  transform: translateY(-80%) rotate(-135deg);
}
.ex-table__row--show-more-content .ex-table__btn-icon::after {
  transform: translateY(-80%) rotate(135deg);
}

@media not all and (min-width: 48rem) {
  .ex-table {
    border-spacing: 0 var(--space-md);
    margin-top: calc(-2 * var(--space-md));
  }
  .ex-table__header {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
  }
  .ex-table__cell {
    display: block;
    padding: var(--space-sm);
    width: 100%;
    text-align: left;
    border: 1px solid var(--color-contrast-lower);
    border-bottom-width: 0;
  }
  .ex-table__row .ex-table__cell:last-child {
    border-bottom-width: 1px;
  }
  .ex-table__label {
    display: block;
    font-weight: bold;
    color: var(--color-contrast-higher);
    margin-bottom: var(--space-xxs);
  }
  .ex-table__btn {
    border-radius: var(--radius-md);
    padding: var(--space-xs);
    width: 100%;
  }
  .ex-table__btn-icon {
    width: 1em;
    height: 1em;
  }
  .ex-table__more-content {
    padding: var(--space-md) 0 0;
  }
}
@media (min-width: 48rem) {
  .ex-table__header .ex-table__cell {
    font-weight: bold;
    text-align: left;
    color: var(--color-contrast-higher);
  }
  .ex-table__cell {
    padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;
    border-bottom: 1px solid var(--color-contrast-lower);
  }
  .ex-table__row .ex-table__cell:last-child {
    padding-right: 0;
  }
  .ex-table__label {
    display: none;
  }
  .ex-table__btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    float: right;
  }
  .ex-table__btn-icon {
    width: 16px;
    height: 16px;
  }
  .ex-table__more-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-bg);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-contrast-lower);
  }
  .ex-table__row--show-more-content .ex-table__cell {
    border-bottom-color: var(--color-bg);
  }
}


.dr-nav__link span {
  font-size: 1.1rem;
}


:root {
  --section-divider-width: 1920;
  --section-divider-height: 60;
  --section-divider-ratio: calc(100% * var(--section-divider-height) / var(--section-divider-width));
}

[class*=has-section-divider] {
  position: relative;
}

.has-section-dividers {
  padding-top: var(--section-divider-ratio);
  padding-bottom: var(--section-divider-ratio);
}
.has-section-dividers .section-divider + .section-divider {
  bottom: auto;
  top: -1px;
  -webkit-transform: scaleY(-1);
          transform: scaleY(-1);
}

.has-section-divider-top {
  padding-top: var(--section-divider-ratio);
}
.has-section-divider-top .section-divider {
  bottom: auto;
  top: -1px;
  -webkit-transform: scaleY(-1);
          transform: scaleY(-1);
}

.has-section-divider-bottom {
  padding-bottom: var(--section-divider-ratio);
}

.section-divider {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  overflow: hidden;
}
.section-divider svg {
  position: relative;
  display: block;
  height: auto;
  max-width: none;
  width: 102%;
  left: -1%;
}

.cata-section {
  /* background-image: linear-gradient(to left bottom, #432b66, #3d265e, #372255, #311d4d, #2b1945, #281742, #26153e, #23133b, #23133b, #23133b, #23133b, #23133b); */
background-color: #EDE4F9;
}

.cata-pad {
  padding-bottom: 150px  !important;
}

.cata-p {
  color: #3B3F44;
}

.cata-header-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.cata-h1 {
  color: #3B3F44;
  margin: 0; /* Remove default margin */
}

.cata-image-container {
  margin-left: 10px; /* Adjust spacing between text and image */
}

.cata-h1-icon {
  width: 50px; /* Adjust image width */
  height: auto; /* Keep the aspect ratio */
}
@media (max-width: 500px) {
  .cata-h1-icon {
display: none !important;
  }
  .cata-h1 {
    font-size: 1.7rem;
  }
  }



.call-2-blog {
  margin:  70px 0!important;
}

.fix-siza-cata {
  font-size: 1rem;
}

.marg-blog-p-h {
  margin-bottom: 40px !important;
}

.rela-blog-h-box {
  margin-top: -10%; /* Move the container up by 10% of its own height */
  z-index: 2; /* Ensure it stays above the background */
  position: relative; /* Ensure it can overlap other elements */
}

/* new img per post  */

.blog-pic-container {
  margin: 0 40px ;
}
.blog-roxo-wrap {
  max-width: 1320px;
  margin: 0 auto;

}
.rela-blog-h-box {
  margin-top: -14%; /* Move the container up by 10% of its own height */
  z-index: 2; /* Ensure it stays above the background */
  position: relative; /* Ensure it can overlap other elements */
}

.marg-blog-p-h {
  margin-bottom: 90px !important;
}


.roxo-blog-img-rad {
  border-radius: 20px;
}

@media (max-width: 1021px) {
  .blog-pic-container {
    padding: 100px 0;
  }
  .rela-blog-h-box {
    margin-top: -17%;
}
.blog-pic-container {
  margin: 0 ;
}
   }

   @media (max-width: 784px) {

    .rela-blog-h-box {
      margin-top: -20%;
  }
     }

@media (max-width: 614px) {
  .rela-blog-h-box {
    margin-top: -28%;
}
  .blog-pic-container {
    margin: 0;
}
}

@media (max-width: 450px) {
  .rela-blog-h-box {
    margin-top: -40%;
}
.roxo-blog-h1-size {
  font-size: 2.2rem !important;
}
.blog-pic-container {
  padding: 110px 0;
}
}

.blog-pic-container {
  /* background-image: linear-gradient(to top, #5c33a3, #562d99, #4f288f, #492286, #431d7c, #3d1a72, #371867, #31155d, #2a134f, #231242, #1c0f35, #170b28); */
background-color: #8757C7;
}

  .js-ex-table {
    padding: 30px 0 ;
  }

  .inner-table-text-block {
    padding: 20px;
    background-color: var(--color-bg-text-block);
    border-radius: 7px;
  }
  
  .underline-blog {
    text-decoration: underline;
  }

  .text-component__block img {
    border-radius: 10px;
  }

  @media (min-width: 768px) {
    .text-component__block img  {
      height: 400px;
    }
  }

  .form-validate__error-msg {
    display: none;
  }
  .form-validate__input-wrapper--error .form-validate__error-msg {
    display: block !important;
  }


  /* table of content */

  /* Desktop TOC Styles - POSITIONED IN CONTENT FLOW THEN BECOMES STICKY */
.tabnav-toc-container {
    position: sticky; /* FIXED: Back to sticky positioning */
    top: 90px; /* 70px for header + 20px spacing */
    height: fit-content;
    width: 280px;
    float: left; /* Float left to be beside content */
    /* REMOVED: margin-right and margin-left as requested */
    margin-bottom: 40px;
    margin-top: 20px;
    max-height: calc(100vh - 120px); /* Prevent going over viewport */
    overflow: hidden;
    /* FIXED: Move TOC to the left using transform */
    transform: translateX(-50px); /* FIXED: Move 50px to the left */
    /* FIXED: Exclude from Lenis smooth scrolling */
    data-lenis-prevent: true;
}

/* FIXED: Back to original TOC styling */
.tabnav-toc {
     background-color: hsla(var(--color-bg-li));
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border: 1px solid #e5e5e5;
    position: relative;
    max-height: 100%;
    overflow: hidden;
    /* FIXED: Prevent Lenis from affecting this element */
    data-lenis-prevent: true;
}


/* IMPROVED: Enhanced fade gradient at top with perfect white blending */
.tabnav-toc::before {
    content: '';
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    height: 30px; /* FIXED: Back to smaller height as you requested */
   background: linear-gradient(to bottom,
  var(--color-bg) 0%,
  var(--color-bg) 25%,
  color-mix(in srgb, var(--color-bg) 98%, transparent) 40%,
  color-mix(in srgb, var(--color-bg) 95%, transparent) 55%,
  color-mix(in srgb, var(--color-bg) 85%, transparent) 70%,
  color-mix(in srgb, var(--color-bg) 60%, transparent) 85%,
  color-mix(in srgb, var(--color-bg) 20%, transparent) 95%,
  color-mix(in srgb, var(--color-bg) 0%, transparent) 100%
);

    z-index: 5; /* FIXED: Higher z-index to ensure it's above everything */
    pointer-events: none;
    border-radius: 12px 12px 0 0;
}

/* IMPROVED: Enhanced fade gradient at bottom with perfect white blending */
.tabnav-toc::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px; /* FIXED: Back to smaller height as you requested */
     background: linear-gradient(to top,
  var(--color-bg) 0%,
  var(--color-bg) 25%,
  color-mix(in srgb, var(--color-bg) 98%, transparent) 40%,
  color-mix(in srgb, var(--color-bg) 95%, transparent) 55%,
  color-mix(in srgb, var(--color-bg) 85%, transparent) 70%,
  color-mix(in srgb, var(--color-bg) 60%, transparent) 85%,
  color-mix(in srgb, var(--color-bg) 20%, transparent) 95%,
  color-mix(in srgb, var(--color-bg) 0%, transparent) 100%
);
    z-index: 5; /* FIXED: Higher z-index to ensure it's above everything */
    pointer-events: none;
    border-radius: 0 0 12px 12px;
}

.tabnav-toc-title {
    font-size: 0.85rem;
    font-weight: 600;
  color: var(--color-contrast-high, hsl(210deg, 7%, 21%));
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 24px 24px 0 24px; /* FIXED: Back to original padding as you requested */
    background-color: hsla(var(--color-bg-li));
    position: relative;
    z-index: 4; /* Below the main gradient but above content */
}

/* FIXED: Desktop scrolling with Lenis compatibility */
.tabnav-toc-list {
    list-style: none;
    margin: 0;
    padding: 13px 24px 30px 24px; /* FIXED: Back to smaller bottom padding */
    max-height: calc(600px - 280px); /* FIXED: Adjusted back to accommodate original sizing */
    overflow-y: auto;
    overflow-x: hidden;
    /* Custom scrollbar styling - REMOVED arrow/track styling for cleaner look */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    /* Webkit scrollbar - always reserve space */
    padding-right: 20px; /* Reserve space for scrollbar */
    margin-right: 4px; /* Account for scrollbar width */
    /* FIXED: Prevent Lenis interference and scroll bubbling */
    overscroll-behavior: contain;
    /* Add data attribute to prevent Lenis from affecting this */
    data-lenis-prevent: true;
    /* Force native scrolling */
    scroll-behavior: auto !important;
    /* Ensure scroll events are captured */
    touch-action: auto;
    position: relative;
}

/* REMOVED: The ::before element that was causing issues */

/* FIXED: Cleaner scrollbar without track background */
.tabnav-toc-list::-webkit-scrollbar {
    width: 4px; /* FIXED: Thinner scrollbar */
    background: transparent;
}

.tabnav-toc-list::-webkit-scrollbar-track {
    background: transparent; /* FIXED: No track background */
}

.tabnav-toc-list::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 2px; /* FIXED: Smaller border radius */
    transition: background-color 0.2s ease;
}

/* FIXED: Show cleaner scrollbar on hover - no track, just thumb */
.tabnav-toc:hover .tabnav-toc-list {
    scrollbar-color: #cbd5e0 transparent; /* FIXED: Transparent track */
}

.tabnav-toc:hover .tabnav-toc-list::-webkit-scrollbar-track {
    background: transparent; /* FIXED: Keep track transparent */
}

.tabnav-toc:hover .tabnav-toc-list::-webkit-scrollbar-thumb {
    background: #cbd5e0; /* FIXED: Only show thumb, no track */
}

.tabnav-toc:hover .tabnav-toc-list::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

.tabnav-toc-item {
    margin-bottom: 8px;
}

.tabnav-toc-link {
    display: block;
  color: var(--color-contrast-high, hsl(210deg, 7%, 21%));
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    line-height: 1.4;
}


.tabnav-toc-link:hover {
    background-color: var(--color-tabnav-for-toc-links-bg);
    color: var(--color-tabnav-for-text);
    transform: translateX(2px);
}

.tabnav-toc-link.tabnav-active {
    background-color: var(--color-tabnav-for-toc-links-bg);
     color: var(--color-tabnav-for-text);
    border-left-color: var(--color-tabnav-for-text);
    font-weight: 500;
}

/* Mobile TOC Styles - FIXED: Keep it sticky but don't push content */
.tabnav-mobile-toc {
    display: none;
    position: fixed;
    top: 74px;
    left: 20px;
    right: 20px;
    background: white;
    z-index: 999; /* FIXED: Lower z-index to stay below header */
    border: 1px solid #e5e5e5;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 12px;
    data-lenis-prevent: true;
    /* FIXED: Add fade transition */
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.tabnav-mobile-toc.tabnav-mobile-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.tabnav-mobile-toc {
    z-index: 999; /* Header should have z-index: 1000 or higher */
}

.tabnav-mobile-toc-toggle {
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
    border-radius: 12px;
}

.tabnav-toggle-icon {
    font-size: 0.8rem;
    color: #8b5cf6;
    font-weight: bold;
    transition: all 0.3s ease;
    transform-origin: center;
}

.tabnav-mobile-toc.tabnav-open .tabnav-toggle-icon {
    transform: rotate(180deg);
    color: #6d28d9;
}

/* Modern arrow styles */


.tabnav-mobile-toc-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #f8fafc;
    position: relative;
    border-radius: 0 0 12px 12px;
}

.tabnav-mobile-toc.tabnav-open .tabnav-mobile-toc-content {
    max-height: 330px;
}

/* IMPROVED: Enhanced fade gradient at top of mobile TOC */
.tabnav-mobile-toc-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 25px;
    background: linear-gradient(to bottom, 
        #f8fafc 0%, 
        rgba(248,250,252,0.95) 30%, 
        rgba(248,250,252,0.8) 60%, 
        rgba(248,250,252,0.4) 85%, 
        rgba(248,250,252,0) 100%);
    z-index: 2;
    pointer-events: none;
    border-radius: 0 0 0 0;
}

/* IMPROVED: Enhanced fade gradient at bottom of mobile TOC */
.tabnav-mobile-toc-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25px;
    background: linear-gradient(to top, 
        #f8fafc 0%, 
        rgba(248,250,252,0.95) 30%, 
        rgba(248,250,252,0.8) 60%, 
        rgba(248,250,252,0.4) 85%, 
        rgba(248,250,252,0) 100%);
    z-index: 2;
    pointer-events: none;
    border-radius: 0 0 12px 12px;
}

/* Mobile scrolling with Lenis fixes */
.tabnav-mobile-toc-list {
    list-style: none;
    margin: 0;
    padding: 30px 20px 30px 16px; /* Increased padding for fade gradients */
    max-height: 330px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Reserve space for scrollbar */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    /* FIXED: Prevent Lenis interference */
    overscroll-behavior: contain;
    scroll-behavior: auto !important;
    touch-action: auto;
}

.tabnav-mobile-toc-list::-webkit-scrollbar {
    width: 4px;
    background: transparent;
}

.tabnav-mobile-toc-list::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 2px;
}

.tabnav-mobile-toc-list::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 2px;
    transition: background-color 0.2s ease;
}

/* Show scrollbar on hover */
.tabnav-mobile-toc-content:hover .tabnav-mobile-toc-list {
    scrollbar-color: #cbd5e0 #e2e8f0;
}

.tabnav-mobile-toc-content:hover .tabnav-mobile-toc-list::-webkit-scrollbar-track {
    background: #e2e8f0;
}

.tabnav-mobile-toc-content:hover .tabnav-mobile-toc-list::-webkit-scrollbar-thumb {
    background: #cbd5e0;
}

.tabnav-mobile-toc-content:hover .tabnav-mobile-toc-list::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

.tabnav-mobile-toc-item {
    margin-bottom: 4px;
}

.tabnav-mobile-toc-link {
    display: block;
    color: #64748b;
    text-decoration: none;
    padding: 10px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid #e2e8f0;
    transition: color 0.2s ease;
}

.tabnav-mobile-toc-link:hover,
.tabnav-mobile-toc-link.tabnav-active {
    color: #8b5cf6;
}

/* Responsive */
@media (max-width: 1450px) {
    .tabnav-toc-container {
        display: none;
    }

    .tabnav-mobile-toc {
        display: block;
    }
}

@media (min-width: 1450px) {
    .tabnav-mobile-toc {
        display: none !important;
    }
}

/* Enhanced hover effects */
.tabnav-mobile-toc-toggle:hover {
    background-color: #f8fafc;
}

.tabnav-mobile-toc-toggle:hover .tabnav-toggle-icon {
    color: #6d28d9;
}

/* Smooth transitions for all interactive elements */
.tabnav-toc-link,
.tabnav-mobile-toc-link,
.tabnav-mobile-toc-toggle {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* tabnav checker premot */


/* UPDATE: Add margin-bottom to existing .tabnav-toc class */
.tabnav-toc {
    margin-bottom: 20px; /* Add this line to create space between TOC and widget */
}

/* NEW: Accessibility Checker Widget */
.tabnav-accessibility-widget {
    background: #f1e8ff;
    border-radius: 12px;
    padding: 24px;
    width: 280px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    margin-top: 20px;
}

.tabnav-widget-title {
    color: #6342ad;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: center;
    line-height: 1.3;
}

.tabnav-widget-description {
    color: #595959;
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 20px;
}

.tabnav-widget-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tabnav-widget-input-container {
    position: relative;
}

.tabnav-widget-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9rem;
    background: white;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.tabnav-widget-input:focus {
    outline: none;
    border-color: #8E56DC;
    box-shadow: 0 0 0 3px rgba(142, 86, 220, 0.1);
}

.tabnav-widget-input.error {
    border-color: #ef4444;
}

.tabnav-widget-input.error:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.tabnav-widget-error {
    color: #ef4444;
    font-size: 0.8rem;
    margin-top: 4px;
    display: none;
}

.tabnav-widget-error-show {
    color: #ef4444;
    font-size: 0.8rem;
    margin-top: 4px;
}

.tabnav-widget-button {
    background: #8E56DC;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tabnav-widget-button:hover {
    background: #7c3aed;
    transform: translateY(-1px);
}

.tabnav-widget-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(142, 86, 220, 0.3);
}

.tabnav-widget-button:active {
    transform: translateY(0);
}

.tabnav-widget-helper {
    color: #3a3a3a;
    font-size: 0.75rem;
    text-align: center;
    margin-top: 8px;
    opacity: 0.8;
}

/* Screen reader only class for accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


.sr-only-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}



/* drop down */
.story__category_hebrew {
  padding-right: 5px;
}
.story__category_hebrew:hover {
   text-decoration: none !important;
}
.wra-l-c {
      gap: 15px;
}
.icona {
      margin-right: 2px;
}