/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --spacing: 1px;
    --font-weight-bold: 700;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-font-feature-settings: var(--font-sans--font-feature-settings);
    --default-font-variation-settings: var(
      --font-sans--font-variation-settings
    );
    --default-mono-font-family: var(--font-mono);
    --default-mono-font-feature-settings: var(
      --font-mono--font-feature-settings
    );
    --default-mono-font-variation-settings: var(
      --font-mono--font-variation-settings
    );
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var( --default-font-variation-settings, normal );
    -webkit-tap-highlight-color: transparent;
  }
  body {
    line-height: inherit;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );
    font-feature-settings: var( --default-mono-font-feature-settings, normal );
    font-variation-settings: var( --default-mono-font-variation-settings, normal );
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
    color: color-mix(in oklab, currentColor 50%, transparent);
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .dev-tools-grid {
    position: fixed;
    z-index: 1;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: 0;
    bottom: 0;
    width: calc(var(--container-width, 100%) - (2 * var(--outer-gutter, 0)));;
    height: 100%;
    margin: 0 auto;
    background: repeating-linear-gradient(
        90deg,
        var(--grid-column-bg),
        var(--grid-column-bg) calc((100% - (((var(--grid-columns) - 1) * var(--inner-gutter)))) / var(--grid-columns)),
        rgba(0,0,0,0) calc((100% - (((var(--grid-columns) - 1) * var(--inner-gutter)))) / var(--grid-columns)),
        rgba(0,0,0,0) calc((100% - (((var(--grid-columns) - 1) * var(--inner-gutter)))) / var(--grid-columns) + var(--inner-gutter))
      );
    pointer-events: none;
  }
  .grid-line-yfull {
    & > * {
      position: relative;
    }
    & > *::before {
      position: absolute;
      z-index: 0;
      pointer-events: none;
    }
    & > *::after {
      position: absolute;
      z-index: 0;
      pointer-events: none;
    }
    & > *::after {
      content: "";
      inset-inline-start: 0;
      inset-inline-end: calc(var(--inner-gutter) / -2);
      top: var(--gridline-y-top, calc(var(--inner-gutter) / -1));
      bottom: 0;
      border-inline-start: 0 solid transparent;
      border-inline-end: var(--gridline-y-width, 0) solid var(--gridline-y-color, transparent);
    }
    &.grid-line-x > *::after {
      inset-inline-start: 0;
      inset-inline-end: calc(var(--inner-gutter) / -2);
      top: var(--gridline-y-top, calc(var(--inner-gutter) / -2));
      bottom: var(--gridline-y-bottom, calc(var(--inner-gutter) / -2));
      border-inline-start: 0 solid transparent;
      border-inline-end: var(--gridline-y-width, 0) solid var(--gridline-y-color, transparent);
    }
    &.grid-line-xfull > *::after {
      inset-inline-start: 0;
      inset-inline-end: calc(var(--inner-gutter) / -2);
      top: var(--gridline-y-top, calc(var(--inner-gutter) / -2));
      bottom: var(--gridline-y-bottom, calc(var(--inner-gutter) / -2));
      border-inline-start: 0 solid transparent;
      border-inline-end: var(--gridline-y-width, 0) solid var(--gridline-y-color, transparent);
    }
  }
  .grid-line-x {
    & > * {
      position: relative;
    }
    & > *::before {
      position: absolute;
      z-index: 0;
      pointer-events: none;
    }
    & > *::after {
      position: absolute;
      z-index: 0;
      pointer-events: none;
    }
    & > *::before {
      content: "";
      inset-inline-start: var(--gridline-x-start, 0);
      inset-inline-end: var(--gridline-x-end, 0);
      top: 0;
      bottom: var(--gridline-x-bottom, calc(var(--inner-gutter) / -2));
      border-top: 0 solid transparent;
      border-bottom: var(--gridline-x-width, 0) solid var(--gridline-x-color, transparent);
    }
  }
  .grid-line-xfull {
    & > * {
      position: relative;
    }
    & > *::before {
      position: absolute;
      z-index: 0;
      pointer-events: none;
    }
    & > *::after {
      position: absolute;
      z-index: 0;
      pointer-events: none;
    }
    & > *::before {
      content: "";
      inset-inline-start: var(--gridline-x-start, calc(var(--inner-gutter) / -2));
      inset-inline-end: var(--gridline-x-end, calc(var(--inner-gutter) / -2));
      top: 0;
      bottom: var(--gridline-x-bottom, calc(var(--inner-gutter) / -2));
      border-top: 0 solid transparent;
      border-bottom: var(--gridline-x-width, 0) solid var(--gridline-x-color, transparent);
    }
  }
  .grid-line-y {
    & > * {
      position: relative;
    }
    & > *::before {
      position: absolute;
      z-index: 0;
      pointer-events: none;
    }
    & > *::after {
      position: absolute;
      z-index: 0;
      pointer-events: none;
    }
    & > *::after {
      content: "";
      inset-inline-start: 0;
      inset-inline-end: calc(var(--inner-gutter) / -2);
      top: 0;
      bottom: 0;
      border-inline-start: 0 solid transparent;
      border-inline-end: var(--gridline-y-width, 0) solid var(--gridline-y-color, transparent);
    }
  }
  .keyline-l-primary {
    position: relative;
    --keyline-l-color: var(--color-grey-90);
    --keyline-r-color: transparent;
    &::before {
      content: "";
      position: absolute;
      z-index: 0;
      inset-inline-start: calc(var(--inner-gutter) / -2 - 1px);
      inset-inline-end: calc(var(--inner-gutter) / -2);
      top: 0;
      bottom: 0;
      border-left: 1px solid var(--keyline-l-color, transparent);
      border-right: 1px solid var(--keyline-r-color, transparent);
      pointer-events: none;
    }
  }
  .keyline-r-primary {
    position: relative;
    --keyline-l-color: transparent;
    --keyline-r-color: var(--color-grey-90);
    &::before {
      content: "";
      position: absolute;
      z-index: 0;
      inset-inline-start: calc(var(--inner-gutter) / -2 - 1px);
      inset-inline-end: calc(var(--inner-gutter) / -2);
      top: 0;
      bottom: 0;
      border-left: 1px solid var(--keyline-l-color, transparent);
      border-right: 1px solid var(--keyline-r-color, transparent);
      pointer-events: none;
    }
  }
  .background-fill {
    --background-fill-bg: inherit;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset-inline-start: 50%;
      top: 0;
      bottom: 0;
      width: 100vw;
      margin-inline-start: -50vw;
      background-color: var(--background-fill-bg, inherit);
      pointer-events: none;
    }
  }
  .background-fill-accent {
    --background-fill-bg: var(--color-blue-03);
    position: relative;
    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset-inline-start: 50%;
      top: 0;
      bottom: 0;
      width: 100vw;
      margin-inline-start: -50vw;
      background-color: var(--background-fill-bg, inherit);
      pointer-events: none;
    }
  }
  .background-fill-header {
    --background-fill-bg: var(--color-grey-10);
    position: relative;
    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset-inline-start: 50%;
      top: 0;
      bottom: 0;
      width: 100vw;
      margin-inline-start: -50vw;
      background-color: var(--background-fill-bg, inherit);
      pointer-events: none;
    }
  }
  .stroke-full-top {
    --stroke-full-thickness: 0.0625em;
    --stroke-full-style: solid;
    --stroke-full-color: inherit;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      z-index: -1;
      inset-inline-start: 50%;
      top: 0;
      bottom: 100%;
      width: 100vw;
      margin-inline-start: -50vw;
      pointer-events: none;
      border-bottom: var(--stroke-full-thickness, 0.0625em) var(--stroke-full-style, solid) var(--stroke-full-color, inherit);
    }
  }
  .stroke-full-bottom {
    --stroke-full-thickness: 0.0625em;
    --stroke-full-style: solid;
    --stroke-full-color: inherit;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      z-index: -1;
      inset-inline-start: 50%;
      top: 100%;
      width: 100vw;
      margin-inline-start: -50vw;
      pointer-events: none;
      border-top: var(--stroke-full-thickness, 0.0625em) var(--stroke-full-style, solid) var(--stroke-full-color, inherit);
    }
  }
  .dev-tools {
    position: fixed;
    z-index: 9999999999;
    inset-inline-start: 0;
    bottom: 0;
    font-size: 0;
    &::before {
      content: var(--breakpoint) " • " var(--env);
      position: absolute;
      z-index: 2;
      inset-inline-start: 0;
      bottom: 100%;
      padding: 4px 5px;
      background: green;
      color: white;
      font: 12px/1 sans-serif;
      white-space: nowrap;
      pointer-events: none;
    }
  }
  .grid-line-x-0 {
    & > * {
      position: relative;
    }
    & > *::before {
      position: absolute;
      z-index: 0;
      pointer-events: none;
    }
    & > *::after {
      position: absolute;
      z-index: 0;
      pointer-events: none;
    }
    & > *::before {
      content: none;
    }
  }
  .grid-line-y-0 {
    & > * {
      position: relative;
    }
    & > *::before {
      position: absolute;
      z-index: 0;
      pointer-events: none;
    }
    & > *::after {
      position: absolute;
      z-index: 0;
      pointer-events: none;
    }
    & > *::after {
      content: none;
    }
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .dev-tools-toggle {
    position: relative;
    z-index: 2;
    width: 30px;
    height: 30px;
    border: 0;
    background: black;
    color: transparent;
    font: 0/0 a;
    appearance: none;
    cursor: pointer;
    &::before {
      content: '';
      position: absolute;
      inset-inline-start: 8px;
      top: 10px;
      width: 5px;
      height: 10px;
      border-inline-start: 1px solid white;
      border-inline-end: 1px solid white;
    }
    &::after {
      content: '';
      position: absolute;
      inset-inline-start: 8px;
      top: 10px;
      width: 5px;
      height: 10px;
      border-inline-start: 1px solid white;
      border-inline-end: 1px solid white;
    }
    &::after {
      inset-inline-start: 16px;
    }
  }
  .container {
    &[class] {
      width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
      margin-right: auto;
      margin-left: auto;
    }
    &[class] > * {
      --container-outer-gutter: 0;
      --breakout-container-outer-gutter: 0;
    }
    &[class]-reset {
      width: unset;
      margin-right: unset;
      margin-left: unset;
    }
    &[class]-reset > * {
      --container-outer-gutter: var(--outer-gutter, 0);
      --breakout-container-outer-gutter: inherit;
    }
    &[class] > .breakout[class] {
      --breakout-outer-gutter: max(var(--outer-gutter), calc((100% - var(--container-width, 100%)) / 2));
      --breakout-container-outer-gutter: var(--outer-gutter);
      position: relative;
      inset-inline-start: 50%;
      width: calc(100vw - var(--scrollbar-visible-width, 0px));
      margin-inline-start: calc((100vw - var(--scrollbar-visible-width, 0px)) / -2);
    }
  }
  .breakout {
    &[class] {
      --breakout-outer-gutter: max(var(--outer-gutter), calc((100% - var(--container-width, 100%)) / 2));
      --breakout-container-outer-gutter: var(--outer-gutter);
      position: relative;
      inset-inline-start: 50%;
      width: calc(100vw - var(--scrollbar-visible-width, 0px));
      margin-inline-start: calc((100vw - var(--scrollbar-visible-width, 0px)) / -2);
    }
    .container[class] > &[class] {
      --breakout-outer-gutter: max(var(--outer-gutter), calc((100% - var(--container-width, 100%)) / 2));
      --breakout-container-outer-gutter: var(--outer-gutter);
      position: relative;
      inset-inline-start: 50%;
      width: calc(100vw - var(--scrollbar-visible-width, 0px));
      margin-inline-start: calc((100vw - var(--scrollbar-visible-width, 0px)) / -2);
    }
    &[class].px-outer-gutter {
      padding-inline-start: var(--breakout-outer-gutter);
      padding-inline-end: var(--breakout-outer-gutter);
    }
    &[class] > .px-outer-gutter {
      padding-inline-start: var(--breakout-outer-gutter);
      padding-inline-end: var(--breakout-outer-gutter);
    }
    &[class].pr-outer-gutter {
      padding-inline-end: var(--breakout-outer-gutter);
    }
    &[class] > .pr-outer-gutter {
      padding-inline-end: var(--breakout-outer-gutter);
    }
    &[class].pl-outer-gutter {
      padding-inline-start: var(--breakout-outer-gutter);
    }
    &[class] > .pl-outer-gutter {
      padding-inline-start: var(--breakout-outer-gutter);
    }
    &[class] > .w-outer-gutter {
      width: var(--breakout-outer-gutter);
    }
    &[class]-reset {
      --breakout-outer-gutter: var(--outer-gutter);
      --breakout-container-outer-gutter: 0;
      position: unset;
      inset-inline-start: unset;
      width: unset;
      margin-inline-start: unset;
    }
  }
  .ratio {
    --ratio: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 0;
      padding-bottom: var(--ratio);
    }
    & > [class*="ratio-content"] {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
    }
  }
  .ratio-free {
    &::before {
      content: unset;
    }
    &::after {
      content: unset;
    }
    & > [class*="ratio-content"] {
      position: static;
      left: auto;
      right: auto;
      top: auto;
      bottom: auto;
      width: auto;
      height: auto;
    }
    & > [class*="ratio-content"][class*="w-full"] {
      width: 100%;
    }
    & > [class*="ratio-content"][class*="h-auto"] {
      height: auto;
    }
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .grid-line-x {
    .grid-line-yfull& > *::after {
      inset-inline-start: 0;
      inset-inline-end: calc(var(--inner-gutter) / -2);
      top: var(--gridline-y-top, calc(var(--inner-gutter) / -2));
      bottom: var(--gridline-y-bottom, calc(var(--inner-gutter) / -2));
      border-inline-start: 0 solid transparent;
      border-inline-end: var(--gridline-y-width, 0) solid var(--gridline-y-color, transparent);
    }
  }
  .grid-line-xfull {
    .grid-line-yfull& > *::after {
      inset-inline-start: 0;
      inset-inline-end: calc(var(--inner-gutter) / -2);
      top: var(--gridline-y-top, calc(var(--inner-gutter) / -2));
      bottom: var(--gridline-y-bottom, calc(var(--inner-gutter) / -2));
      border-inline-start: 0 solid transparent;
      border-inline-end: var(--gridline-y-width, 0) solid var(--gridline-y-color, transparent);
    }
  }
  .start-cols-2 {
    inset-inline-start: calc(((((2 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (2 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter)))) + var(--inner-gutter)));
  }
  .end-cols-4 {
    inset-inline-end: calc(((((4 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (4 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter)))) + var(--inner-gutter)));
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-40 {
    top: calc(var(--spacing) * 40);
  }
  .top-56 {
    top: calc(var(--spacing) * 56);
  }
  .top-60 {
    top: calc(var(--spacing) * 60);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-full {
    right: 100%;
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .-left-8 {
    left: calc(var(--spacing) * -8);
  }
  .-left-99999 {
    left: calc(var(--spacing) * -99999);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-\[-99999px\] {
    left: -99999px;
  }
  .left-\[-99999px\] {
    left: var(--spacing--99999px);
  }
  .left-cols-1 {
    left: calc(((((1 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (1 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter)))) + var(--inner-gutter)));
  }
  .left-cols-1\/3 {
    left: calc(((33.333% - (var(--inner-gutter) * max(0.666, var(--cols-container, 0)))) + var(--inner-gutter)));
  }
  .grid-col-span-1 {
    --container-grid-columns: 1;
    grid-column: span 1 / span 1;
  }
  .grid-col-span-2 {
    --container-grid-columns: 2;
    grid-column: span 2 / span 2;
  }
  .grid-col-span-3 {
    --container-grid-columns: 3;
    grid-column: span 3 / span 3;
  }
  .grid-col-span-6 {
    --container-grid-columns: 6;
    grid-column: span 6 / span 6;
  }
  .grid-col-span-8 {
    --container-grid-columns: 8;
    grid-column: span 8 / span 8;
  }
  .grid-col-span-9 {
    --container-grid-columns: 9;
    grid-column: span 9 / span 9;
  }
  .grid-col-start-1 {
    grid-column-start: 1;
  }
  .grid-col-start-4 {
    grid-column-start: 4;
  }
  .grid-col-end-1 {
    grid-column-end: 1;
  }
  .grid-col-end-13 {
    grid-column-end: 13;
  }
  .row-span-3 {
    grid-row: span 3 / span 3;
  }
  .row-span-full {
    grid-row: 1 / -1;
  }
  .row-end-3 {
    grid-row-end: 3;
  }
  .ratio-expandable {
    &::before {
      float: left;
      width: 1px;
      margin-inline-start: -1px;
    }
    &::after {
      content: "";
      display: table;
      clear: both;
    }
  }
  .float-left {
    float: left;
  }
  .float-none {
    float: none;
  }
  .float-right {
    float: right;
  }
  .container {
    width: 100%;
    @media (width >= 0) {
      max-width: 0;
    }
    @media (width >= 544px) {
      max-width: 544px;
    }
    @media (width >= 650px) {
      max-width: 650px;
    }
    @media (width >= 990px) {
      max-width: 990px;
    }
    @media (width >= 1300px) {
      max-width: 1300px;
    }
    @media (width >= 1520px) {
      max-width: 1520px;
    }
  }
  .m-0 {
    margin: calc(var(--spacing) * 0);
  }
  .m-1 {
    margin: calc(var(--spacing) * 1);
  }
  .m-2 {
    margin: calc(var(--spacing) * 2);
  }
  .m-3 {
    margin: calc(var(--spacing) * 3);
  }
  .m-4 {
    margin: calc(var(--spacing) * 4);
  }
  .m-5 {
    margin: calc(var(--spacing) * 5);
  }
  .m-6 {
    margin: calc(var(--spacing) * 6);
  }
  .-mx-outer-1 {
    margin-inline: calc(var(--spacing-outer-1) * -1);
  }
  .mx-0 {
    margin-inline: calc(var(--spacing) * 0);
  }
  .mx-1 {
    margin-inline: calc(var(--spacing) * 1);
  }
  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }
  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }
  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }
  .mx-5 {
    margin-inline: calc(var(--spacing) * 5);
  }
  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }
  .mx-40 {
    margin-inline: calc(var(--spacing) * 40);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mx-cols-1 {
    margin-inline: calc(((((1 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (1 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter)))) + var(--inner-gutter)));
  }
  .mx-cols-3 {
    margin-inline: calc(((((3 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (3 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter)))) + var(--inner-gutter)));
  }
  .mx-outer-1 {
    margin-inline: var(--spacing-outer-1);
  }
  .my-0 {
    margin-block: calc(var(--spacing) * 0);
  }
  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }
  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }
  .my-3 {
    margin-block: calc(var(--spacing) * 3);
  }
  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }
  .my-5 {
    margin-block: calc(var(--spacing) * 5);
  }
  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }
  .my-40 {
    margin-block: calc(var(--spacing) * 40);
  }
  .ms-0 {
    margin-inline-start: calc(var(--spacing) * 0);
  }
  .ms-cols-2 {
    margin-inline-start: calc(((((2 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (2 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter)))) + var(--inner-gutter)));
  }
  .me-cols-2 {
    margin-inline-end: calc(((((2 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (2 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter)))) + var(--inner-gutter)));
  }
  .-mt-\(--spacing-outer-1\) {
    margin-top: calc(var(--spacing-outer-1) * -1);
  }
  .mt-\(--spacing-outer-1\) {
    margin-top: var(--spacing-outer-1);
  }
  .mt-0 {
    margin-top: calc(var(--spacing) * 0);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }
  .mt-20 {
    margin-top: calc(var(--spacing) * 20);
  }
  .mt-40 {
    margin-top: calc(var(--spacing) * 40);
  }
  .mt-56 {
    margin-top: calc(var(--spacing) * 56);
  }
  .mt-60 {
    margin-top: calc(var(--spacing) * 60);
  }
  .mt-outer-1 {
    margin-top: var(--spacing-outer-1);
  }
  .mr-0 {
    margin-right: calc(var(--spacing) * 0);
  }
  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }
  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }
  .mr-5 {
    margin-right: calc(var(--spacing) * 5);
  }
  .mr-6 {
    margin-right: calc(var(--spacing) * 6);
  }
  .mr-8 {
    margin-right: calc(var(--spacing) * 8);
  }
  .mr-cols-1 {
    margin-right: calc(((((1 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (1 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter)))) + var(--inner-gutter)));
  }
  .mr-cols-2 {
    margin-right: calc(((((2 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (2 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter)))) + var(--inner-gutter)));
  }
  .mr-cols-vw-2 {
    margin-right: calc((((var(--container-width, 100vw - var(--scrollbar-visible-width, 0px)) - (((var(--grid-columns) - 1) * var(--inner-gutter)) + (2 * var(--outer-gutter)))) / (var(--grid-columns))) * 2) + (1 * var(--inner-gutter)));
  }
  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }
  .mb-60 {
    margin-bottom: calc(var(--spacing) * 60);
  }
  .cols-container {
    display: flex;
    flex-flow: row wrap;
    margin-left: calc(var(--inner-gutter) * -1);
    & > [class*="-cols"] {
      --cols-container: 1;
      margin-left: var(--inner-gutter);
    }
    & > .ml-0 {
      margin-left: 0;
    }
    & > .ms-0 {
      margin-left: 0;
    }
  }
  .ml-0 {
    margin-left: calc(var(--spacing) * 0);
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }
  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }
  .ml-5 {
    margin-left: calc(var(--spacing) * 5);
  }
  .ml-6 {
    margin-left: calc(var(--spacing) * 6);
  }
  .ml-16 {
    margin-left: calc(var(--spacing) * 16);
  }
  .ml-auto {
    margin-left: auto;
  }
  .ml-cols-2 {
    margin-left: calc(((((2 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (2 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter)))) + var(--inner-gutter)));
  }
  .ml-cols-2\/3 {
    margin-left: calc(((66.666% - (var(--inner-gutter) * max(0.333, var(--cols-container, 0)))) + var(--inner-gutter)));
  }
  .ml-cols-no-gutter-2 {
    margin-left: calc(((2 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (2 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
  }
  .ml-cols-vw-2 {
    margin-left: calc((((var(--container-width, 100vw - var(--scrollbar-visible-width, 0px)) - (((var(--grid-columns) - 1) * var(--inner-gutter)) + (2 * var(--outer-gutter)))) / (var(--grid-columns))) * 2) + (1 * var(--inner-gutter)));
  }
  .full-bleed-scroller-reset {
    display: unset;
    flex-flow: unset;
    flex-wrap: unset;
    overflow-x: unset;
    &::before {
      content: none;
      flex: unset;
      width: unset;
    }
    &::after {
      content: none;
      flex: unset;
      width: unset;
    }
  }
  .full-bleed-scroller {
    display: flex;
    flex-flow: row nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--inner-gutter);
    &::before {
      content: '';
      flex: 0 0 auto;
      width: calc(var(--breakout-outer-gutter, var(--outer-gutter, 0px)) - var(--inner-gutter, 0px));
    }
    &::after {
      content: '';
      flex: 0 0 auto;
      width: calc(var(--breakout-outer-gutter, var(--outer-gutter, 0px)) - var(--inner-gutter, 0px));
    }
  }
  .grid-layout {
    display: grid;
    grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);
    grid-gap: var(--inner-gutter);
  }
  .scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .list-item {
    display: list-item;
  }
  .table {
    display: table;
  }
  .table-cell {
    display: table-cell;
  }
  .scrollbar-thin {
    --scrollbar-bg: #fafafa;
    --scrollbar-fg: #c1c1c1;
    --scrollbar-border: #e8e8e8;
    scrollbar-color: var(--scrollbar-fg) var(--scrollbar-bg);
    &::-webkit-scrollbar {
      width: var(--scrollbar-width, unset);
      height: var(--scrollbar-width, unset);
    }
    &::-webkit-scrollbar-track {
      background: var(--scrollbar-bg);
    }
    &::-webkit-scrollbar-track:horizontal {
      border-block-start: 1px solid var(--scrollbar-border);
      border-block-end: 1px solid var(--scrollbar-border);
    }
    &::-webkit-scrollbar-track:vertical {
      border-inline-start: 1px solid var(--scrollbar-border);
      border-inline-end: 1px solid var(--scrollbar-border);
    }
    &::-webkit-scrollbar-thumb {
      background: var(--scrollbar-fg);
      border-radius: 20px;
      border: var(--scrollbar-padding, 4px) solid transparent;
      background-clip: content-box;
    }
  }
  .scrollbar-thin-collapse {
    --scrollbar-bg: #fafafa;
    --scrollbar-fg: #c1c1c1;
    --scrollbar-border: #e8e8e8;
    scrollbar-color: var(--scrollbar-fg) var(--scrollbar-bg);
    &::-webkit-scrollbar {
      width: var(--scrollbar-width, unset);
      height: var(--scrollbar-width, unset);
    }
    &::-webkit-scrollbar-track {
      background: var(--scrollbar-bg);
    }
    &::-webkit-scrollbar-track:horizontal {
      border-block-start: 1px solid var(--scrollbar-border);
      border-block-end: 1px solid var(--scrollbar-border);
    }
    &::-webkit-scrollbar-track:vertical {
      border-inline-start: 1px solid var(--scrollbar-border);
      border-inline-end: 1px solid var(--scrollbar-border);
    }
    &::-webkit-scrollbar-thumb {
      background: var(--scrollbar-fg);
      border-radius: 20px;
      border: var(--scrollbar-padding, 4px) solid transparent;
      background-clip: content-box;
    }
  }
  .scrollbar-thumb-bg-column-alt {
    --scrollbar-bg: #fafafa;
    --scrollbar-fg: #c1c1c1;
    --scrollbar-border: #e8e8e8;
    scrollbar-color: var(--scrollbar-fg) var(--scrollbar-bg);
    &::-webkit-scrollbar {
      width: var(--scrollbar-width, unset);
      height: var(--scrollbar-width, unset);
    }
    &::-webkit-scrollbar-track {
      background: var(--scrollbar-bg);
    }
    &::-webkit-scrollbar-track:horizontal {
      border-block-start: 1px solid var(--scrollbar-border);
      border-block-end: 1px solid var(--scrollbar-border);
    }
    &::-webkit-scrollbar-track:vertical {
      border-inline-start: 1px solid var(--scrollbar-border);
      border-inline-end: 1px solid var(--scrollbar-border);
    }
    &::-webkit-scrollbar-thumb {
      background: var(--scrollbar-fg);
      border-radius: 20px;
      border: var(--scrollbar-padding, 4px) solid transparent;
      background-clip: content-box;
    }
  }
  .scrollbar-thumb-primary {
    --scrollbar-bg: #fafafa;
    --scrollbar-fg: #c1c1c1;
    --scrollbar-border: #e8e8e8;
    scrollbar-color: var(--scrollbar-fg) var(--scrollbar-bg);
    &::-webkit-scrollbar {
      width: var(--scrollbar-width, unset);
      height: var(--scrollbar-width, unset);
    }
    &::-webkit-scrollbar-track {
      background: var(--scrollbar-bg);
    }
    &::-webkit-scrollbar-track:horizontal {
      border-block-start: 1px solid var(--scrollbar-border);
      border-block-end: 1px solid var(--scrollbar-border);
    }
    &::-webkit-scrollbar-track:vertical {
      border-inline-start: 1px solid var(--scrollbar-border);
      border-inline-end: 1px solid var(--scrollbar-border);
    }
    &::-webkit-scrollbar-thumb {
      background: var(--scrollbar-fg);
      border-radius: 20px;
      border: var(--scrollbar-padding, 4px) solid transparent;
      background-clip: content-box;
    }
  }
  .scrollbar-thumb-red-01 {
    --scrollbar-bg: #fafafa;
    --scrollbar-fg: #c1c1c1;
    --scrollbar-border: #e8e8e8;
    scrollbar-color: var(--scrollbar-fg) var(--scrollbar-bg);
    &::-webkit-scrollbar {
      width: var(--scrollbar-width, unset);
      height: var(--scrollbar-width, unset);
    }
    &::-webkit-scrollbar-track {
      background: var(--scrollbar-bg);
    }
    &::-webkit-scrollbar-track:horizontal {
      border-block-start: 1px solid var(--scrollbar-border);
      border-block-end: 1px solid var(--scrollbar-border);
    }
    &::-webkit-scrollbar-track:vertical {
      border-inline-start: 1px solid var(--scrollbar-border);
      border-inline-end: 1px solid var(--scrollbar-border);
    }
    &::-webkit-scrollbar-thumb {
      background: var(--scrollbar-fg);
      border-radius: 20px;
      border: var(--scrollbar-padding, 4px) solid transparent;
      background-clip: content-box;
    }
  }
  .scrollbar-track-bg-column {
    --scrollbar-bg: #fafafa;
    --scrollbar-fg: #c1c1c1;
    --scrollbar-border: #e8e8e8;
    scrollbar-color: var(--scrollbar-fg) var(--scrollbar-bg);
    &::-webkit-scrollbar {
      width: var(--scrollbar-width, unset);
      height: var(--scrollbar-width, unset);
    }
    &::-webkit-scrollbar-track {
      background: var(--scrollbar-bg);
    }
    &::-webkit-scrollbar-track:horizontal {
      border-block-start: 1px solid var(--scrollbar-border);
      border-block-end: 1px solid var(--scrollbar-border);
    }
    &::-webkit-scrollbar-track:vertical {
      border-inline-start: 1px solid var(--scrollbar-border);
      border-inline-end: 1px solid var(--scrollbar-border);
    }
    &::-webkit-scrollbar-thumb {
      background: var(--scrollbar-fg);
      border-radius: 20px;
      border: var(--scrollbar-padding, 4px) solid transparent;
      background-clip: content-box;
    }
  }
  .scrollbar-track-grey-15 {
    --scrollbar-bg: #fafafa;
    --scrollbar-fg: #c1c1c1;
    --scrollbar-border: #e8e8e8;
    scrollbar-color: var(--scrollbar-fg) var(--scrollbar-bg);
    &::-webkit-scrollbar {
      width: var(--scrollbar-width, unset);
      height: var(--scrollbar-width, unset);
    }
    &::-webkit-scrollbar-track {
      background: var(--scrollbar-bg);
    }
    &::-webkit-scrollbar-track:horizontal {
      border-block-start: 1px solid var(--scrollbar-border);
      border-block-end: 1px solid var(--scrollbar-border);
    }
    &::-webkit-scrollbar-track:vertical {
      border-inline-start: 1px solid var(--scrollbar-border);
      border-inline-end: 1px solid var(--scrollbar-border);
    }
    &::-webkit-scrollbar-thumb {
      background: var(--scrollbar-fg);
      border-radius: 20px;
      border: var(--scrollbar-padding, 4px) solid transparent;
      background-clip: content-box;
    }
  }
  .scrollbar-track-primary {
    --scrollbar-bg: #fafafa;
    --scrollbar-fg: #c1c1c1;
    --scrollbar-border: #e8e8e8;
    scrollbar-color: var(--scrollbar-fg) var(--scrollbar-bg);
    &::-webkit-scrollbar {
      width: var(--scrollbar-width, unset);
      height: var(--scrollbar-width, unset);
    }
    &::-webkit-scrollbar-track {
      background: var(--scrollbar-bg);
    }
    &::-webkit-scrollbar-track:horizontal {
      border-block-start: 1px solid var(--scrollbar-border);
      border-block-end: 1px solid var(--scrollbar-border);
    }
    &::-webkit-scrollbar-track:vertical {
      border-inline-start: 1px solid var(--scrollbar-border);
      border-inline-end: 1px solid var(--scrollbar-border);
    }
    &::-webkit-scrollbar-thumb {
      background: var(--scrollbar-fg);
      border-radius: 20px;
      border: var(--scrollbar-padding, 4px) solid transparent;
      background-clip: content-box;
    }
  }
  .h-0 {
    height: calc(var(--spacing) * 0);
  }
  .h-1 {
    height: calc(var(--spacing) * 1);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-7 {
    height: calc(var(--spacing) * 7);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-24 {
    height: calc(var(--spacing) * 24);
  }
  .h-28 {
    height: calc(var(--spacing) * 28);
  }
  .h-32 {
    height: calc(var(--spacing) * 32);
  }
  .h-36 {
    height: calc(var(--spacing) * 36);
  }
  .h-40 {
    height: calc(var(--spacing) * 40);
  }
  .h-44 {
    height: calc(var(--spacing) * 44);
  }
  .h-48 {
    height: calc(var(--spacing) * 48);
  }
  .h-52 {
    height: calc(var(--spacing) * 52);
  }
  .h-56 {
    height: calc(var(--spacing) * 56);
  }
  .h-60 {
    height: calc(var(--spacing) * 60);
  }
  .h-64 {
    height: calc(var(--spacing) * 64);
  }
  .h-68 {
    height: calc(var(--spacing) * 68);
  }
  .h-72 {
    height: calc(var(--spacing) * 72);
  }
  .h-76 {
    height: calc(var(--spacing) * 76);
  }
  .h-80 {
    height: calc(var(--spacing) * 80);
  }
  .h-84 {
    height: calc(var(--spacing) * 84);
  }
  .h-88 {
    height: calc(var(--spacing) * 88);
  }
  .h-92 {
    height: calc(var(--spacing) * 92);
  }
  .h-96 {
    height: calc(var(--spacing) * 96);
  }
  .h-100 {
    height: calc(var(--spacing) * 100);
  }
  .h-120 {
    height: calc(var(--spacing) * 120);
  }
  .h-400 {
    height: calc(var(--spacing) * 400);
  }
  .h-600 {
    height: calc(var(--spacing) * 600);
  }
  .h-auto {
    height: auto;
  }
  .max-h-400 {
    max-height: calc(var(--spacing) * 400);
  }
  .max-h-600 {
    max-height: calc(var(--spacing) * 600);
  }
  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }
  .min-h-40 {
    min-height: calc(var(--spacing) * 40);
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-0 {
    width: calc(var(--spacing) * 0);
  }
  .w-1 {
    width: calc(var(--spacing) * 1);
  }
  .w-2 {
    width: calc(var(--spacing) * 2);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-28 {
    width: calc(var(--spacing) * 28);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-36 {
    width: calc(var(--spacing) * 36);
  }
  .w-40 {
    width: calc(var(--spacing) * 40);
  }
  .w-44 {
    width: calc(var(--spacing) * 44);
  }
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
  .w-52 {
    width: calc(var(--spacing) * 52);
  }
  .w-56 {
    width: calc(var(--spacing) * 56);
  }
  .w-60 {
    width: calc(var(--spacing) * 60);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .w-68 {
    width: calc(var(--spacing) * 68);
  }
  .w-72 {
    width: calc(var(--spacing) * 72);
  }
  .w-76 {
    width: calc(var(--spacing) * 76);
  }
  .w-80 {
    width: calc(var(--spacing) * 80);
  }
  .w-84 {
    width: calc(var(--spacing) * 84);
  }
  .w-88 {
    width: calc(var(--spacing) * 88);
  }
  .w-92 {
    width: calc(var(--spacing) * 92);
  }
  .w-96 {
    width: calc(var(--spacing) * 96);
  }
  .w-100 {
    width: calc(var(--spacing) * 100);
  }
  .w-400 {
    width: calc(var(--spacing) * 400);
  }
  .w-600 {
    width: calc(var(--spacing) * 600);
  }
  .w-cols-1 {
    width: calc(((1 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (1 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
  }
  .w-cols-1\/2 {
    width: calc(50% - (var(--inner-gutter) * max(0.5, var(--cols-container, 0))));
  }
  .w-cols-1\/3 {
    width: calc(33.333% - (var(--inner-gutter) * max(0.666, var(--cols-container, 0))));
  }
  .w-cols-1\/4 {
    width: calc(25% - (var(--inner-gutter) * max(0.75, var(--cols-container, 0))));
  }
  .w-cols-2 {
    width: calc(((2 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (2 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
  }
  .w-cols-2\/3 {
    width: calc(66.666% - (var(--inner-gutter) * max(0.333, var(--cols-container, 0))));
  }
  .w-cols-3 {
    width: calc(((3 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (3 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
  }
  .w-cols-3\/4 {
    width: calc(75% - (var(--inner-gutter) * max(0.25, var(--cols-container, 0))));
  }
  .w-cols-4 {
    width: calc(((4 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (4 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
  }
  .w-cols-5 {
    width: calc(((5 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (5 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
  }
  .w-cols-6 {
    width: calc(((6 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (6 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
  }
  .w-cols-7 {
    width: calc(((7 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (7 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
  }
  .w-cols-8 {
    width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
  }
  .w-cols-9 {
    width: calc(((9 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (9 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
  }
  .w-cols-10 {
    width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
  }
  .w-cols-11 {
    width: calc(((11 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (11 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
  }
  .w-cols-12 {
    width: calc(((12 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (12 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
  }
  .w-cols-vw-1 {
    width: calc(((var(--container-width, 100vw - var(--scrollbar-visible-width, 0px)) - (((var(--grid-columns) - 1) * var(--inner-gutter)) + (2 * var(--outer-gutter)))) / (var(--grid-columns))));
  }
  .w-cols-vw-2 {
    width: calc((((var(--container-width, 100vw - var(--scrollbar-visible-width, 0px)) - (((var(--grid-columns) - 1) * var(--inner-gutter)) + (2 * var(--outer-gutter)))) / (var(--grid-columns))) * 2) + (1 * var(--inner-gutter)));
  }
  .w-cols-vw-3 {
    width: calc((((var(--container-width, 100vw - var(--scrollbar-visible-width, 0px)) - (((var(--grid-columns) - 1) * var(--inner-gutter)) + (2 * var(--outer-gutter)))) / (var(--grid-columns))) * 3) + (2 * var(--inner-gutter)));
  }
  .w-cols-vw-4 {
    width: calc((((var(--container-width, 100vw - var(--scrollbar-visible-width, 0px)) - (((var(--grid-columns) - 1) * var(--inner-gutter)) + (2 * var(--outer-gutter)))) / (var(--grid-columns))) * 4) + (3 * var(--inner-gutter)));
  }
  .w-cols-vw-5 {
    width: calc((((var(--container-width, 100vw - var(--scrollbar-visible-width, 0px)) - (((var(--grid-columns) - 1) * var(--inner-gutter)) + (2 * var(--outer-gutter)))) / (var(--grid-columns))) * 5) + (4 * var(--inner-gutter)));
  }
  .w-cols-vw-6 {
    width: calc((((var(--container-width, 100vw - var(--scrollbar-visible-width, 0px)) - (((var(--grid-columns) - 1) * var(--inner-gutter)) + (2 * var(--outer-gutter)))) / (var(--grid-columns))) * 6) + (5 * var(--inner-gutter)));
  }
  .w-cols-vw-7 {
    width: calc((((var(--container-width, 100vw - var(--scrollbar-visible-width, 0px)) - (((var(--grid-columns) - 1) * var(--inner-gutter)) + (2 * var(--outer-gutter)))) / (var(--grid-columns))) * 7) + (6 * var(--inner-gutter)));
  }
  .w-cols-vw-8 {
    width: calc((((var(--container-width, 100vw - var(--scrollbar-visible-width, 0px)) - (((var(--grid-columns) - 1) * var(--inner-gutter)) + (2 * var(--outer-gutter)))) / (var(--grid-columns))) * 8) + (7 * var(--inner-gutter)));
  }
  .w-full {
    width: 100%;
  }
  .w-outer-gutter {
    .breakout[class] > & {
      width: var(--breakout-outer-gutter);
    }
  }
  .\!max-w-full {
    max-width: 100% !important;
  }
  .container {
    max-width: 100%;
  }
  .max-w-400 {
    max-width: calc(var(--spacing) * 400);
  }
  .max-w-full {
    max-width: 100%;
  }
  .flex-auto {
    flex: auto;
  }
  .flex-none {
    flex: none;
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .table-fixed {
    table-layout: fixed;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .transform {
    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .list-decimal {
    list-style-type: decimal;
  }
  .list-disc {
    list-style-type: disc;
  }
  .appearance-none {
    appearance: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-nowrap {
    flex-wrap: nowrap;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-gutter {
    grid-gap: var(--inner-gutter);
    gap: var(--inner-gutter);
  }
  .gap-x-gutter {
    grid-column-gap: var(--inner-gutter);
    column-gap: var(--inner-gutter);
  }
  .gap-x-0 {
    column-gap: calc(var(--spacing) * 0);
  }
  .gap-y-gutter {
    grid-row-gap: var(--inner-gutter);
    row-gap: var(--inner-gutter);
  }
  .gap-y-20 {
    row-gap: calc(var(--spacing) * 20);
  }
  .gap-y-48 {
    row-gap: calc(var(--spacing) * 48);
  }
  .gap-y-80 {
    row-gap: calc(var(--spacing) * 80);
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-scroll {
    overflow: scroll;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .overflow-y-scroll {
    overflow-y: scroll;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-l-0 {
    border-left-style: var(--tw-border-style);
    border-left-width: 0px;
  }
  .border-l-1 {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-code-example-filename {
    border-color: var(--color-blue-05);
  }
  .border-primary {
    border-color: var(--color-grey-90);
  }
  .border-secondary {
    border-color: var(--color-grey-30);
  }
  .border-tertiary {
    border-color: var(--color-grey-54);
  }
  .border-t-secondary {
    border-top-color: var(--color-grey-30);
  }
  .bg-accent {
    background-color: var(--color-blue-03);
  }
  .bg-banner {
    background-color: var(--color-grey-90);
  }
  .bg-code {
    background-color: var(--color-white);
  }
  .bg-code-example {
    background-color: var(--color-grey-90);
  }
  .bg-column {
    background-color: var(--color-blue-05);
  }
  .bg-column-alt {
    background-color: var(--color-blue-04);
  }
  .bg-container-demo {
    background-color: var(--color-white);
  }
  .bg-header {
    background-color: var(--color-grey-10);
  }
  .bg-primary {
    background-color: var(--color-grey-10);
  }
  .bg-quote {
    background-color: var(--color-grey-5);
  }
  .bg-white {
    background-color: #fff;
  }
  .p-\(--spacing-inner-1\) {
    padding: var(--spacing-inner-1);
  }
  .p-0 {
    padding: calc(var(--spacing) * 0);
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .p-20 {
    padding: calc(var(--spacing) * 20);
  }
  .p-inner-1 {
    padding: var(--spacing-inner-1);
  }
  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }
  .px-20 {
    padding-inline: calc(var(--spacing) * 20);
  }
  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }
  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }
  .py-40 {
    padding-block: calc(var(--spacing) * 40);
  }
  .px-outer-gutter {
    .breakout[class]& {
      padding-inline-start: var(--breakout-outer-gutter);
      padding-inline-end: var(--breakout-outer-gutter);
    }
    .breakout[class] > & {
      padding-inline-start: var(--breakout-outer-gutter);
      padding-inline-end: var(--breakout-outer-gutter);
    }
  }
  .pl-outer-gutter {
    .breakout[class]& {
      padding-inline-start: var(--breakout-outer-gutter);
    }
    .breakout[class] > & {
      padding-inline-start: var(--breakout-outer-gutter);
    }
  }
  .ps-0 {
    padding-inline-start: calc(var(--spacing) * 0);
  }
  .ps-cols-2 {
    padding-inline-start: calc(((((2 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (2 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter)))) + var(--inner-gutter)));
  }
  .ps-inner-1 {
    padding-inline-start: var(--spacing-inner-1);
  }
  .pr-outer-gutter {
    .breakout[class]& {
      padding-inline-end: var(--breakout-outer-gutter);
    }
    .breakout[class] > & {
      padding-inline-end: var(--breakout-outer-gutter);
    }
  }
  .pe-0 {
    padding-inline-end: calc(var(--spacing) * 0);
  }
  .pe-cols-4 {
    padding-inline-end: calc(((((4 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (4 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter)))) + var(--inner-gutter)));
  }
  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }
  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }
  .pt-40 {
    padding-top: calc(var(--spacing) * 40);
  }
  .pt-48 {
    padding-top: calc(var(--spacing) * 48);
  }
  .pt-60 {
    padding-top: calc(var(--spacing) * 60);
  }
  .pt-inner-1 {
    padding-top: var(--spacing-inner-1);
  }
  .pt-outer-1 {
    padding-top: var(--spacing-outer-1);
  }
  .pr-0 {
    padding-right: calc(var(--spacing) * 0);
  }
  .pr-1 {
    padding-right: calc(var(--spacing) * 1);
  }
  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }
  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pr-5 {
    padding-right: calc(var(--spacing) * 5);
  }
  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }
  .pr-cols-4 {
    padding-right: calc(((((4 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (4 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter)))) + var(--inner-gutter)));
  }
  .pb-0 {
    padding-bottom: calc(var(--spacing) * 0);
  }
  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }
  .pb-40 {
    padding-bottom: calc(var(--spacing) * 40);
  }
  .pl-0 {
    padding-left: calc(var(--spacing) * 0);
  }
  .pl-1 {
    padding-left: calc(var(--spacing) * 1);
  }
  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .pl-16 {
    padding-left: calc(var(--spacing) * 16);
  }
  .pl-cols-2 {
    padding-left: calc(((((2 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (2 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter)))) + var(--inner-gutter)));
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .align-text-bottom {
    vertical-align: text-bottom;
  }
  .f-body {
    font-family: var(--f-body-font-family);
    font-weight: var(--f-body-font-weight);
    font-size: var(--f-body-font-size);
    line-height: var(--f-body-line-height);
    letter-spacing: var(--f-body-letter-spacing);
    -moz-osx-font-smoothing: var(--f-body--moz-osx-font-smoothing);
    -webkit-font-smoothing: var(--f-body--webkit-font-smoothing);
    & b {
      font-weight: var(--f-body---bold-weight, bold);
    }
    & strong {
      font-weight: var(--f-body---bold-weight, bold);
    }
  }
  .f-code {
    font-family: var(--f-code-font-family);
    font-weight: var(--f-code-font-weight);
    font-size: var(--f-code-font-size);
    line-height: var(--f-code-line-height);
    letter-spacing: var(--f-code-letter-spacing);
    -moz-osx-font-smoothing: var(--f-code--moz-osx-font-smoothing);
    -webkit-font-smoothing: var(--f-code--webkit-font-smoothing);
    & b {
      font-weight: var(--f-code---bold-weight, bold);
    }
    & strong {
      font-weight: var(--f-code---bold-weight, bold);
    }
  }
  .f-h1 {
    font-family: var(--f-h1-font-family);
    font-weight: var(--f-h1-font-weight);
    font-size: var(--f-h1-font-size);
    line-height: var(--f-h1-line-height);
    letter-spacing: var(--f-h1-letter-spacing);
    -moz-osx-font-smoothing: var(--f-h1--moz-osx-font-smoothing);
    -webkit-font-smoothing: var(--f-h1--webkit-font-smoothing);
    & b {
      font-weight: var(--f-h1---bold-weight, bold);
    }
    & strong {
      font-weight: var(--f-h1---bold-weight, bold);
    }
  }
  .f-h2 {
    font-family: var(--f-h2-font-family);
    font-weight: var(--f-h2-font-weight);
    font-size: var(--f-h2-font-size);
    line-height: var(--f-h2-line-height);
    letter-spacing: var(--f-h2-letter-spacing);
    -moz-osx-font-smoothing: var(--f-h2--moz-osx-font-smoothing);
    -webkit-font-smoothing: var(--f-h2--webkit-font-smoothing);
    & b {
      font-weight: var(--f-h2---bold-weight, bold);
    }
    & strong {
      font-weight: var(--f-h2---bold-weight, bold);
    }
  }
  .f-h3 {
    font-family: var(--f-h3-font-family);
    font-weight: var(--f-h3-font-weight);
    font-size: var(--f-h3-font-size);
    line-height: var(--f-h3-line-height);
    letter-spacing: var(--f-h3-letter-spacing);
    -moz-osx-font-smoothing: var(--f-h3--moz-osx-font-smoothing);
    -webkit-font-smoothing: var(--f-h3--webkit-font-smoothing);
    & b {
      font-weight: var(--f-h3---bold-weight, bold);
    }
    & strong {
      font-weight: var(--f-h3---bold-weight, bold);
    }
  }
  .f-h4 {
    font-family: var(--f-h4-font-family);
    font-weight: var(--f-h4-font-weight);
    font-size: var(--f-h4-font-size);
    line-height: var(--f-h4-line-height);
    letter-spacing: var(--f-h4-letter-spacing);
    -moz-osx-font-smoothing: var(--f-h4--moz-osx-font-smoothing);
    -webkit-font-smoothing: var(--f-h4--webkit-font-smoothing);
    & b {
      font-weight: var(--f-h4---bold-weight, bold);
    }
    & strong {
      font-weight: var(--f-h4---bold-weight, bold);
    }
  }
  .f-ui {
    font-family: var(--f-ui-font-family);
    font-weight: var(--f-ui-font-weight);
    font-size: var(--f-ui-font-size);
    line-height: var(--f-ui-line-height);
    letter-spacing: var(--f-ui-letter-spacing);
    -moz-osx-font-smoothing: var(--f-ui--moz-osx-font-smoothing);
    -webkit-font-smoothing: var(--f-ui--webkit-font-smoothing);
    & b {
      font-weight: var(--f-ui---bold-weight, bold);
    }
    & strong {
      font-weight: var(--f-ui---bold-weight, bold);
    }
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .text-balance {
    text-wrap: balance;
  }
  .text-pretty {
    text-wrap: pretty;
  }
  .text-wrap {
    text-wrap: wrap;
  }
  .break-all {
    word-break: break-all;
  }
  .text-accent {
    color: var(--color-blue-03);
  }
  .text-code {
    color: var(--color-black);
  }
  .text-code-example {
    color: var(--color-grey-3);
  }
  .text-code-example-filename {
    color: var(--color-blue-05);
  }
  .text-inherit {
    color: inherit;
  }
  .text-inverse {
    color: var(--color-white);
  }
  .text-primary {
    color: var(--color-grey-90);
  }
  .text-white {
    color: #fff;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .not-italic {
    font-style: normal;
  }
  .underline-bg-accent {
    text-decoration-line: underline;
    text-decoration-color: var(--color-blue-03);
  }
  .underline-black {
    text-decoration-line: underline;
    text-decoration-color: #000;
  }
  .underline-blue-03 {
    text-decoration-line: underline;
    text-decoration-color: #004F91;
  }
  .underline-border-primary {
    text-decoration-line: underline;
    text-decoration-color: var(--color-grey-90);
  }
  .underline-border-secondary {
    text-decoration-line: underline;
    text-decoration-color: var(--color-grey-30);
  }
  .underline-border-tertiary {
    text-decoration-line: underline;
    text-decoration-color: var(--color-grey-54);
  }
  .underline-grey-15 {
    text-decoration-line: underline;
    text-decoration-color: #d9d9d9;
  }
  .underline-grey-54 {
    text-decoration-line: underline;
    text-decoration-color: #757575;
  }
  .underline-grey-90 {
    text-decoration-line: underline;
    text-decoration-color: #1a1a1a;
  }
  .underline-primary {
    text-decoration-line: underline;
    text-decoration-color: var(--color-grey-54);
  }
  .underline-secondary {
    text-decoration-line: underline;
    text-decoration-color: var(--color-blue-03);
  }
  .underline-text-accent {
    text-decoration-line: underline;
    text-decoration-color: var(--color-blue-03);
  }
  .underline-text-primary {
    text-decoration-line: underline;
    text-decoration-color: var(--color-grey-90);
  }
  .underline-text-secondary {
    text-decoration-line: underline;
    text-decoration-color: var(--color-grey-54);
  }
  .underline-dashed {
    text-decoration-line: underline;
    text-decoration-style: dashed;
  }
  .underline-dotted {
    text-decoration-line: underline;
    text-decoration-style: dotted;
  }
  .underline-double {
    text-decoration-line: underline;
    text-decoration-style: double;
  }
  .underline-solid {
    text-decoration-line: underline;
    text-decoration-style: solid;
  }
  .underline-wavy {
    text-decoration-line: underline;
    text-decoration-style: wavy;
  }
  .underline-thickness-1 {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
  }
  .underline-thickness-2 {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
  }
  .underline-thickness-3 {
    text-decoration-line: underline;
    text-decoration-thickness: 3px;
  }
  .underline-thickness-4 {
    text-decoration-line: underline;
    text-decoration-thickness: 4px;
  }
  .underline-thickness-5 {
    text-decoration-line: underline;
    text-decoration-thickness: 5px;
  }
  .underline-thickness-6 {
    text-decoration-line: underline;
    text-decoration-thickness: 6px;
  }
  .underline-thickness-7 {
    text-decoration-line: underline;
    text-decoration-thickness: 7px;
  }
  .underline-thickness-8 {
    text-decoration-line: underline;
    text-decoration-thickness: 8px;
  }
  .underline-thickness-9 {
    text-decoration-line: underline;
    text-decoration-thickness: 9px;
  }
  .underline-thickness-10 {
    text-decoration-line: underline;
    text-decoration-thickness: 10px;
  }
  .underline-thickness-11 {
    text-decoration-line: underline;
    text-decoration-thickness: 11px;
  }
  .underline-thickness-12 {
    text-decoration-line: underline;
    text-decoration-thickness: 12px;
  }
  .underline-thickness-13 {
    text-decoration-line: underline;
    text-decoration-thickness: 13px;
  }
  .underline-thickness-14 {
    text-decoration-line: underline;
    text-decoration-thickness: 14px;
  }
  .underline-thickness-15 {
    text-decoration-line: underline;
    text-decoration-thickness: 15px;
  }
  .underline-thickness-16 {
    text-decoration-line: underline;
    text-decoration-thickness: 16px;
  }
  .underline-thickness-17 {
    text-decoration-line: underline;
    text-decoration-thickness: 17px;
  }
  .underline-thickness-18 {
    text-decoration-line: underline;
    text-decoration-thickness: 18px;
  }
  .underline-thickness-19 {
    text-decoration-line: underline;
    text-decoration-thickness: 19px;
  }
  .underline-thickness-20 {
    text-decoration-line: underline;
    text-decoration-thickness: 20px;
  }
  .underline-thickness-auto {
    text-decoration-line: underline;
    text-decoration-thickness: auto;
  }
  .underline-thickness-from-font {
    text-decoration-line: underline;
    text-decoration-thickness: from-font;
  }
  .-underline-offset-1 {
    text-decoration-line: underline;
    text-underline-offset: calc(0.05em * -1);
  }
  .-underline-offset-2 {
    text-decoration-line: underline;
    text-underline-offset: calc(0.1em * -1);
  }
  .-underline-offset-3 {
    text-decoration-line: underline;
    text-underline-offset: calc(0.15em * -1);
  }
  .-underline-offset-4 {
    text-decoration-line: underline;
    text-underline-offset: calc(0.2em * -1);
  }
  .-underline-offset-5 {
    text-decoration-line: underline;
    text-underline-offset: calc(0.25em * -1);
  }
  .-underline-offset-6 {
    text-decoration-line: underline;
    text-underline-offset: calc(0.3em * -1);
  }
  .-underline-offset-7 {
    text-decoration-line: underline;
    text-underline-offset: calc(0.35em * -1);
  }
  .-underline-offset-8 {
    text-decoration-line: underline;
    text-underline-offset: calc(0.4em * -1);
  }
  .-underline-offset-9 {
    text-decoration-line: underline;
    text-underline-offset: calc(0.45em * -1);
  }
  .-underline-offset-10 {
    text-decoration-line: underline;
    text-underline-offset: calc(0.5em * -1);
  }
  .-underline-offset-11 {
    text-decoration-line: underline;
    text-underline-offset: calc(0.55em * -1);
  }
  .-underline-offset-12 {
    text-decoration-line: underline;
    text-underline-offset: calc(0.6em * -1);
  }
  .-underline-offset-13 {
    text-decoration-line: underline;
    text-underline-offset: calc(0.65em * -1);
  }
  .-underline-offset-14 {
    text-decoration-line: underline;
    text-underline-offset: calc(0.7em * -1);
  }
  .-underline-offset-15 {
    text-decoration-line: underline;
    text-underline-offset: calc(0.75em * -1);
  }
  .-underline-offset-16 {
    text-decoration-line: underline;
    text-underline-offset: calc(0.8em * -1);
  }
  .-underline-offset-17 {
    text-decoration-line: underline;
    text-underline-offset: calc(0.85em * -1);
  }
  .-underline-offset-18 {
    text-decoration-line: underline;
    text-underline-offset: calc(0.9em * -1);
  }
  .-underline-offset-19 {
    text-decoration-line: underline;
    text-underline-offset: calc(0.95em * -1);
  }
  .-underline-offset-20 {
    text-decoration-line: underline;
    text-underline-offset: calc(1em * -1);
  }
  .underline-offset-1 {
    text-decoration-line: underline;
    text-underline-offset: 0.05em;
  }
  .underline-offset-2 {
    text-decoration-line: underline;
    text-underline-offset: 0.1em;
  }
  .underline-offset-3 {
    text-decoration-line: underline;
    text-underline-offset: 0.15em;
  }
  .underline-offset-4 {
    text-decoration-line: underline;
    text-underline-offset: 0.2em;
  }
  .underline-offset-5 {
    text-decoration-line: underline;
    text-underline-offset: 0.25em;
  }
  .underline-offset-6 {
    text-decoration-line: underline;
    text-underline-offset: 0.3em;
  }
  .underline-offset-7 {
    text-decoration-line: underline;
    text-underline-offset: 0.35em;
  }
  .underline-offset-8 {
    text-decoration-line: underline;
    text-underline-offset: 0.4em;
  }
  .underline-offset-9 {
    text-decoration-line: underline;
    text-underline-offset: 0.45em;
  }
  .underline-offset-10 {
    text-decoration-line: underline;
    text-underline-offset: 0.5em;
  }
  .underline-offset-11 {
    text-decoration-line: underline;
    text-underline-offset: 0.55em;
  }
  .underline-offset-12 {
    text-decoration-line: underline;
    text-underline-offset: 0.6em;
  }
  .underline-offset-13 {
    text-decoration-line: underline;
    text-underline-offset: 0.65em;
  }
  .underline-offset-14 {
    text-decoration-line: underline;
    text-underline-offset: 0.7em;
  }
  .underline-offset-15 {
    text-decoration-line: underline;
    text-underline-offset: 0.75em;
  }
  .underline-offset-16 {
    text-decoration-line: underline;
    text-underline-offset: 0.8em;
  }
  .underline-offset-17 {
    text-decoration-line: underline;
    text-underline-offset: 0.85em;
  }
  .underline-offset-18 {
    text-decoration-line: underline;
    text-underline-offset: 0.9em;
  }
  .underline-offset-19 {
    text-decoration-line: underline;
    text-underline-offset: 0.95em;
  }
  .underline-offset-20 {
    text-decoration-line: underline;
    text-underline-offset: 1em;
  }
  .underline-skip-all {
    text-decoration-line: underline;
    text-decoration-skip-ink: all;
  }
  .underline-skip-auto {
    text-decoration-line: underline;
    text-decoration-skip-ink: auto;
  }
  .underline-skip-none {
    text-decoration-line: underline;
    text-decoration-skip-ink: none;
  }
  .no-underline {
    text-decoration-line: none;
  }
  .underline {
    text-decoration-line: underline;
  }
  .-underline-offset-1 {
    text-underline-offset: calc(1px * -1);
  }
  .-underline-offset-2 {
    text-underline-offset: calc(2px * -1);
  }
  .-underline-offset-3 {
    text-underline-offset: calc(3px * -1);
  }
  .-underline-offset-4 {
    text-underline-offset: calc(4px * -1);
  }
  .-underline-offset-5 {
    text-underline-offset: calc(5px * -1);
  }
  .-underline-offset-6 {
    text-underline-offset: calc(6px * -1);
  }
  .-underline-offset-7 {
    text-underline-offset: calc(7px * -1);
  }
  .-underline-offset-8 {
    text-underline-offset: calc(8px * -1);
  }
  .-underline-offset-9 {
    text-underline-offset: calc(9px * -1);
  }
  .-underline-offset-10 {
    text-underline-offset: calc(10px * -1);
  }
  .-underline-offset-11 {
    text-underline-offset: calc(11px * -1);
  }
  .-underline-offset-12 {
    text-underline-offset: calc(12px * -1);
  }
  .-underline-offset-13 {
    text-underline-offset: calc(13px * -1);
  }
  .-underline-offset-14 {
    text-underline-offset: calc(14px * -1);
  }
  .-underline-offset-15 {
    text-underline-offset: calc(15px * -1);
  }
  .-underline-offset-16 {
    text-underline-offset: calc(16px * -1);
  }
  .-underline-offset-17 {
    text-underline-offset: calc(17px * -1);
  }
  .-underline-offset-18 {
    text-underline-offset: calc(18px * -1);
  }
  .-underline-offset-19 {
    text-underline-offset: calc(19px * -1);
  }
  .-underline-offset-20 {
    text-underline-offset: calc(20px * -1);
  }
  .underline-offset-0 {
    text-underline-offset: 0px;
  }
  .underline-offset-1 {
    text-underline-offset: 1px;
  }
  .underline-offset-2 {
    text-underline-offset: 2px;
  }
  .underline-offset-3 {
    text-underline-offset: 3px;
  }
  .underline-offset-4 {
    text-underline-offset: 4px;
  }
  .underline-offset-5 {
    text-underline-offset: 5px;
  }
  .underline-offset-6 {
    text-underline-offset: 6px;
  }
  .underline-offset-7 {
    text-underline-offset: 7px;
  }
  .underline-offset-8 {
    text-underline-offset: 8px;
  }
  .underline-offset-9 {
    text-underline-offset: 9px;
  }
  .underline-offset-10 {
    text-underline-offset: 10px;
  }
  .underline-offset-11 {
    text-underline-offset: 11px;
  }
  .underline-offset-12 {
    text-underline-offset: 12px;
  }
  .underline-offset-13 {
    text-underline-offset: 13px;
  }
  .underline-offset-14 {
    text-underline-offset: 14px;
  }
  .underline-offset-15 {
    text-underline-offset: 15px;
  }
  .underline-offset-16 {
    text-underline-offset: 16px;
  }
  .underline-offset-17 {
    text-underline-offset: 17px;
  }
  .underline-offset-18 {
    text-underline-offset: 18px;
  }
  .underline-offset-19 {
    text-underline-offset: 19px;
  }
  .underline-offset-20 {
    text-underline-offset: 20px;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .subpixel-antialiased {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .content-\[\'\'\] {
    --tw-content: '';
    content: var(--tw-content);
  }
  .content-\[\'—\'\] {
    --tw-content: '—';
    content: var(--tw-content);
  }
  .content-\[close-quote\] {
    --tw-content: close-quote;
    content: var(--tw-content);
  }
  .content-\[open-quote\] {
    --tw-content: open-quote;
    content: var(--tw-content);
  }
  .background-fill-none {
    &::before {
      content: none;
    }
  }
  .grid-cols-2 {
    &.grid-line-x > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    &.grid-line-x > *:nth-child(2n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-xfull > *:nth-child(2n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-x > *:nth-child(2n+2)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(2n+2)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-x > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-x > *:nth-child(2n+1):nth-last-child(-n+2)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-x > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-xfull > *:nth-child(2n+1):nth-last-child(-n+2)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {
      --gridline-x-width: 0;
    }
    &[class*="grid-line-y"] > *:nth-child(n)::after {
      --gridline-y-width: 1px;
    }
    &[class*="grid-line-y"] > *:nth-child(2n+2)::after {
      --gridline-y-width: 0;
    }
    &.grid-line-y > *:nth-child(-n+2)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-yfull > *:nth-child(-n+2)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-y > *:nth-child(2n+1):nth-last-child(-n+2)::after {
      --gridline-y-bottom: 0;
    }
    &.grid-line-yfull > *:nth-child(2n+1):nth-last-child(-n+2)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-cols-3 {
    &.grid-line-x > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    &.grid-line-x > *:nth-child(3n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-xfull > *:nth-child(3n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-x > *:nth-child(3n+3)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(3n+3)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-x > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-x > *:nth-child(3n+1):nth-last-child(-n+3)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-x > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-xfull > *:nth-child(3n+1):nth-last-child(-n+3)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {
      --gridline-x-width: 0;
    }
    &[class*="grid-line-y"] > *:nth-child(n)::after {
      --gridline-y-width: 1px;
    }
    &[class*="grid-line-y"] > *:nth-child(3n+3)::after {
      --gridline-y-width: 0;
    }
    &.grid-line-y > *:nth-child(-n+3)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-yfull > *:nth-child(-n+3)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-y > *:nth-child(3n+1):nth-last-child(-n+3)::after {
      --gridline-y-bottom: 0;
    }
    &.grid-line-yfull > *:nth-child(3n+1):nth-last-child(-n+3)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-cols-4 {
    &.grid-line-x > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    &.grid-line-x > *:nth-child(4n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-xfull > *:nth-child(4n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-x > *:nth-child(4n+4)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(4n+4)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-x > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-x > *:nth-child(4n+1):nth-last-child(-n+4)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-x > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-xfull > *:nth-child(4n+1):nth-last-child(-n+4)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {
      --gridline-x-width: 0;
    }
    &[class*="grid-line-y"] > *:nth-child(n)::after {
      --gridline-y-width: 1px;
    }
    &[class*="grid-line-y"] > *:nth-child(4n+4)::after {
      --gridline-y-width: 0;
    }
    &.grid-line-y > *:nth-child(-n+4)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-yfull > *:nth-child(-n+4)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-y > *:nth-child(4n+1):nth-last-child(-n+4)::after {
      --gridline-y-bottom: 0;
    }
    &.grid-line-yfull > *:nth-child(4n+1):nth-last-child(-n+4)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-cols-5 {
    &.grid-line-x > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    &.grid-line-x > *:nth-child(5n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-xfull > *:nth-child(5n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-x > *:nth-child(5n+5)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(5n+5)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-x > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-x > *:nth-child(5n+1):nth-last-child(-n+5)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-x > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-xfull > *:nth-child(5n+1):nth-last-child(-n+5)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {
      --gridline-x-width: 0;
    }
    &[class*="grid-line-y"] > *:nth-child(n)::after {
      --gridline-y-width: 1px;
    }
    &[class*="grid-line-y"] > *:nth-child(5n+5)::after {
      --gridline-y-width: 0;
    }
    &.grid-line-y > *:nth-child(-n+5)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-yfull > *:nth-child(-n+5)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-y > *:nth-child(5n+1):nth-last-child(-n+5)::after {
      --gridline-y-bottom: 0;
    }
    &.grid-line-yfull > *:nth-child(5n+1):nth-last-child(-n+5)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-cols-6 {
    &.grid-line-x > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    &.grid-line-x > *:nth-child(6n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-xfull > *:nth-child(6n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-x > *:nth-child(6n+6)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(6n+6)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-x > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-x > *:nth-child(6n+1):nth-last-child(-n+6)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-x > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-xfull > *:nth-child(6n+1):nth-last-child(-n+6)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {
      --gridline-x-width: 0;
    }
    &[class*="grid-line-y"] > *:nth-child(n)::after {
      --gridline-y-width: 1px;
    }
    &[class*="grid-line-y"] > *:nth-child(6n+6)::after {
      --gridline-y-width: 0;
    }
    &.grid-line-y > *:nth-child(-n+6)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-yfull > *:nth-child(-n+6)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-y > *:nth-child(6n+1):nth-last-child(-n+6)::after {
      --gridline-y-bottom: 0;
    }
    &.grid-line-yfull > *:nth-child(6n+1):nth-last-child(-n+6)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-cols-7 {
    &.grid-line-x > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    &.grid-line-x > *:nth-child(7n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-xfull > *:nth-child(7n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-x > *:nth-child(7n+7)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(7n+7)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-x > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-x > *:nth-child(7n+1):nth-last-child(-n+7)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-x > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-xfull > *:nth-child(7n+1):nth-last-child(-n+7)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {
      --gridline-x-width: 0;
    }
    &[class*="grid-line-y"] > *:nth-child(n)::after {
      --gridline-y-width: 1px;
    }
    &[class*="grid-line-y"] > *:nth-child(7n+7)::after {
      --gridline-y-width: 0;
    }
    &.grid-line-y > *:nth-child(-n+7)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-yfull > *:nth-child(-n+7)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-y > *:nth-child(7n+1):nth-last-child(-n+7)::after {
      --gridline-y-bottom: 0;
    }
    &.grid-line-yfull > *:nth-child(7n+1):nth-last-child(-n+7)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-cols-8 {
    &.grid-line-x > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    &.grid-line-x > *:nth-child(8n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-xfull > *:nth-child(8n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-x > *:nth-child(8n+8)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(8n+8)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-x > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-x > *:nth-child(8n+1):nth-last-child(-n+8)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-x > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-xfull > *:nth-child(8n+1):nth-last-child(-n+8)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {
      --gridline-x-width: 0;
    }
    &[class*="grid-line-y"] > *:nth-child(n)::after {
      --gridline-y-width: 1px;
    }
    &[class*="grid-line-y"] > *:nth-child(8n+8)::after {
      --gridline-y-width: 0;
    }
    &.grid-line-y > *:nth-child(-n+8)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-yfull > *:nth-child(-n+8)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-y > *:nth-child(8n+1):nth-last-child(-n+8)::after {
      --gridline-y-bottom: 0;
    }
    &.grid-line-yfull > *:nth-child(8n+1):nth-last-child(-n+8)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-cols-9 {
    &.grid-line-x > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    &.grid-line-x > *:nth-child(9n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-xfull > *:nth-child(9n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-x > *:nth-child(9n+9)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(9n+9)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-x > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-x > *:nth-child(9n+1):nth-last-child(-n+9)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-x > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-xfull > *:nth-child(9n+1):nth-last-child(-n+9)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {
      --gridline-x-width: 0;
    }
    &[class*="grid-line-y"] > *:nth-child(n)::after {
      --gridline-y-width: 1px;
    }
    &[class*="grid-line-y"] > *:nth-child(9n+9)::after {
      --gridline-y-width: 0;
    }
    &.grid-line-y > *:nth-child(-n+9)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-yfull > *:nth-child(-n+9)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-y > *:nth-child(9n+1):nth-last-child(-n+9)::after {
      --gridline-y-bottom: 0;
    }
    &.grid-line-yfull > *:nth-child(9n+1):nth-last-child(-n+9)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-cols-10 {
    &.grid-line-x > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    &.grid-line-x > *:nth-child(10n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-xfull > *:nth-child(10n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-x > *:nth-child(10n+10)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(10n+10)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-x > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-x > *:nth-child(10n+1):nth-last-child(-n+10)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-x > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-xfull > *:nth-child(10n+1):nth-last-child(-n+10)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {
      --gridline-x-width: 0;
    }
    &[class*="grid-line-y"] > *:nth-child(n)::after {
      --gridline-y-width: 1px;
    }
    &[class*="grid-line-y"] > *:nth-child(10n+10)::after {
      --gridline-y-width: 0;
    }
    &.grid-line-y > *:nth-child(-n+10)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-yfull > *:nth-child(-n+10)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-y > *:nth-child(10n+1):nth-last-child(-n+10)::after {
      --gridline-y-bottom: 0;
    }
    &.grid-line-yfull > *:nth-child(10n+1):nth-last-child(-n+10)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-cols-11 {
    &.grid-line-x > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    &.grid-line-x > *:nth-child(11n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-xfull > *:nth-child(11n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-x > *:nth-child(11n+11)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(11n+11)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-x > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-x > *:nth-child(11n+1):nth-last-child(-n+11)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-x > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-xfull > *:nth-child(11n+1):nth-last-child(-n+11)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {
      --gridline-x-width: 0;
    }
    &[class*="grid-line-y"] > *:nth-child(n)::after {
      --gridline-y-width: 1px;
    }
    &[class*="grid-line-y"] > *:nth-child(11n+11)::after {
      --gridline-y-width: 0;
    }
    &.grid-line-y > *:nth-child(-n+11)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-yfull > *:nth-child(-n+11)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-y > *:nth-child(11n+1):nth-last-child(-n+11)::after {
      --gridline-y-bottom: 0;
    }
    &.grid-line-yfull > *:nth-child(11n+1):nth-last-child(-n+11)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-cols-12 {
    &.grid-line-x > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    &.grid-line-x > *:nth-child(12n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-xfull > *:nth-child(12n+1)::before {
      --gridline-x-start: 0;
    }
    &.grid-line-x > *:nth-child(12n+12)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(12n+12)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-x > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-x > *:nth-child(12n+1):nth-last-child(-n+12)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-x > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-xfull > *:nth-child(12n+1):nth-last-child(-n+12)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {
      --gridline-x-width: 0;
    }
    &[class*="grid-line-y"] > *:nth-child(n)::after {
      --gridline-y-width: 1px;
    }
    &[class*="grid-line-y"] > *:nth-child(12n+12)::after {
      --gridline-y-width: 0;
    }
    &.grid-line-y > *:nth-child(-n+12)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-yfull > *:nth-child(-n+12)::after {
      --gridline-y-top: 0;
    }
    &.grid-line-y > *:nth-child(12n+1):nth-last-child(-n+12)::after {
      --gridline-y-bottom: 0;
    }
    &.grid-line-yfull > *:nth-child(12n+1):nth-last-child(-n+12)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-cols-1 {
    &.grid-line-x > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    &.grid-line-x > *:nth-child(1n+1)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-xfull > *:nth-child(1n+1)::before {
      --gridline-x-end: 0;
    }
    &.grid-line-x > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-x > *:nth-child(1n+1):nth-last-child(-n+1)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-x > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    &.grid-line-xfull > *:nth-child(1n+1):nth-last-child(-n+1)::before {
      --gridline-x-width: 0;
    }
    &.grid-line-xfull > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-x {
    .grid-cols-2& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    .grid-cols-2& > *:nth-child(2n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-2& > *:nth-child(2n+2)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-2& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-2& > *:nth-child(2n+1):nth-last-child(-n+2)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-2& > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-x {
    .grid-cols-3& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    .grid-cols-3& > *:nth-child(3n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-3& > *:nth-child(3n+3)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-3& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-3& > *:nth-child(3n+1):nth-last-child(-n+3)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-3& > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-x {
    .grid-cols-4& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    .grid-cols-4& > *:nth-child(4n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-4& > *:nth-child(4n+4)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-4& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-4& > *:nth-child(4n+1):nth-last-child(-n+4)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-4& > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-x {
    .grid-cols-5& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    .grid-cols-5& > *:nth-child(5n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-5& > *:nth-child(5n+5)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-5& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-5& > *:nth-child(5n+1):nth-last-child(-n+5)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-5& > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-x {
    .grid-cols-6& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    .grid-cols-6& > *:nth-child(6n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-6& > *:nth-child(6n+6)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-6& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-6& > *:nth-child(6n+1):nth-last-child(-n+6)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-6& > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-x {
    .grid-cols-7& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    .grid-cols-7& > *:nth-child(7n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-7& > *:nth-child(7n+7)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-7& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-7& > *:nth-child(7n+1):nth-last-child(-n+7)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-7& > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-x {
    .grid-cols-8& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    .grid-cols-8& > *:nth-child(8n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-8& > *:nth-child(8n+8)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-8& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-8& > *:nth-child(8n+1):nth-last-child(-n+8)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-8& > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-x {
    .grid-cols-9& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    .grid-cols-9& > *:nth-child(9n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-9& > *:nth-child(9n+9)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-9& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-9& > *:nth-child(9n+1):nth-last-child(-n+9)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-9& > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-x {
    .grid-cols-10& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    .grid-cols-10& > *:nth-child(10n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-10& > *:nth-child(10n+10)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-10& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-10& > *:nth-child(10n+1):nth-last-child(-n+10)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-10& > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-x {
    .grid-cols-11& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    .grid-cols-11& > *:nth-child(11n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-11& > *:nth-child(11n+11)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-11& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-11& > *:nth-child(11n+1):nth-last-child(-n+11)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-11& > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-x {
    .grid-cols-12& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    .grid-cols-12& > *:nth-child(12n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-12& > *:nth-child(12n+12)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-12& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-12& > *:nth-child(12n+1):nth-last-child(-n+12)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-12& > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-xfull {
    .grid-cols-2& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    .grid-cols-2& > *:nth-child(2n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-2& > *:nth-child(2n+2)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-2& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-2& > *:nth-child(2n+1):nth-last-child(-n+2)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-2& > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-xfull {
    .grid-cols-3& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    .grid-cols-3& > *:nth-child(3n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-3& > *:nth-child(3n+3)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-3& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-3& > *:nth-child(3n+1):nth-last-child(-n+3)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-3& > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-xfull {
    .grid-cols-4& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    .grid-cols-4& > *:nth-child(4n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-4& > *:nth-child(4n+4)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-4& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-4& > *:nth-child(4n+1):nth-last-child(-n+4)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-4& > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-xfull {
    .grid-cols-5& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    .grid-cols-5& > *:nth-child(5n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-5& > *:nth-child(5n+5)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-5& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-5& > *:nth-child(5n+1):nth-last-child(-n+5)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-5& > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-xfull {
    .grid-cols-6& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    .grid-cols-6& > *:nth-child(6n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-6& > *:nth-child(6n+6)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-6& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-6& > *:nth-child(6n+1):nth-last-child(-n+6)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-6& > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-xfull {
    .grid-cols-7& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    .grid-cols-7& > *:nth-child(7n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-7& > *:nth-child(7n+7)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-7& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-7& > *:nth-child(7n+1):nth-last-child(-n+7)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-7& > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-xfull {
    .grid-cols-8& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    .grid-cols-8& > *:nth-child(8n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-8& > *:nth-child(8n+8)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-8& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-8& > *:nth-child(8n+1):nth-last-child(-n+8)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-8& > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-xfull {
    .grid-cols-9& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    .grid-cols-9& > *:nth-child(9n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-9& > *:nth-child(9n+9)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-9& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-9& > *:nth-child(9n+1):nth-last-child(-n+9)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-9& > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-xfull {
    .grid-cols-10& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    .grid-cols-10& > *:nth-child(10n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-10& > *:nth-child(10n+10)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-10& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-10& > *:nth-child(10n+1):nth-last-child(-n+10)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-10& > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-xfull {
    .grid-cols-11& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    .grid-cols-11& > *:nth-child(11n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-11& > *:nth-child(11n+11)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-11& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-11& > *:nth-child(11n+1):nth-last-child(-n+11)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-11& > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-xfull {
    .grid-cols-12& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    .grid-cols-12& > *:nth-child(12n+1)::before {
      --gridline-x-start: 0;
    }
    .grid-cols-12& > *:nth-child(12n+12)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-12& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-12& > *:nth-child(12n+1):nth-last-child(-n+12)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-12& > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-x {
    .grid-cols-1& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: 0;
      --gridline-x-end: 0;
    }
    .grid-cols-1& > *:nth-child(1n+1)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-1& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-1& > *:nth-child(1n+1):nth-last-child(-n+1)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-1& > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-xfull {
    .grid-cols-1& > *:nth-child(n)::before {
      --gridline-x-width: 1px;
      --gridline-x-start: calc(var(--inner-gutter) / -2);
      --gridline-x-end: calc(var(--inner-gutter) / -2);
    }
    .grid-cols-1& > *:nth-child(1n+1)::before {
      --gridline-x-end: 0;
    }
    .grid-cols-1& > *:nth-child(n):nth-last-child(n)::before {
      --gridline-x-width: 1px;
    }
    .grid-cols-1& > *:nth-child(1n+1):nth-last-child(-n+1)::before {
      --gridline-x-width: 0;
    }
    .grid-cols-1& > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {
      --gridline-x-width: 0;
    }
  }
  .grid-line-x-24 {
    & > *::before {
      --gridline-x-bottom: -24px;
      --gridline-y-top: -24px;
      --gridline-y-bottom: -24px;
    }
    &.grid-line-yfull > *::after {
      --gridline-x-bottom: -24px;
      --gridline-y-top: -24px;
      --gridline-y-bottom: -24px;
    }
  }
  .grid-line-x-40 {
    & > *::before {
      --gridline-x-bottom: -40px;
      --gridline-y-top: -40px;
      --gridline-y-bottom: -40px;
    }
    &.grid-line-yfull > *::after {
      --gridline-x-bottom: -40px;
      --gridline-y-top: -40px;
      --gridline-y-bottom: -40px;
    }
  }
  .scrollbar-thin-collapse {
    --scrollbar-width: 10px;
    --scrollbar-padding: 2px;
    scrollbar-width: thin;
    --scrollbar-width: 6px;
    --scrollbar-padding: 0px;
    scrollbar-width: thin;
  }
  .scrollbar-thin {
    --scrollbar-width: 10px;
    --scrollbar-padding: 2px;
    scrollbar-width: thin;
  }
  .grid-line-xy-primary {
    & > *::before {
      --gridline-x-color: var(--color-grey-90);
    }
    & > *::after {
      --gridline-y-color: var(--color-grey-90);
    }
  }
  .grid-line-xy-secondary {
    & > *::before {
      --gridline-x-color: var(--color-grey-30);
    }
    & > *::after {
      --gridline-y-color: var(--color-grey-30);
    }
  }
  .grid-line-y {
    .grid-cols-2& > *:nth-child(-n+2)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-2& > *:nth-child(2n+1):nth-last-child(-n+2)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-y {
    .grid-cols-3& > *:nth-child(-n+3)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-3& > *:nth-child(3n+1):nth-last-child(-n+3)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-y {
    .grid-cols-4& > *:nth-child(-n+4)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-4& > *:nth-child(4n+1):nth-last-child(-n+4)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-y {
    .grid-cols-5& > *:nth-child(-n+5)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-5& > *:nth-child(5n+1):nth-last-child(-n+5)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-y {
    .grid-cols-6& > *:nth-child(-n+6)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-6& > *:nth-child(6n+1):nth-last-child(-n+6)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-y {
    .grid-cols-7& > *:nth-child(-n+7)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-7& > *:nth-child(7n+1):nth-last-child(-n+7)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-y {
    .grid-cols-8& > *:nth-child(-n+8)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-8& > *:nth-child(8n+1):nth-last-child(-n+8)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-y {
    .grid-cols-9& > *:nth-child(-n+9)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-9& > *:nth-child(9n+1):nth-last-child(-n+9)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-y {
    .grid-cols-10& > *:nth-child(-n+10)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-10& > *:nth-child(10n+1):nth-last-child(-n+10)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-y {
    .grid-cols-11& > *:nth-child(-n+11)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-11& > *:nth-child(11n+1):nth-last-child(-n+11)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-y {
    .grid-cols-12& > *:nth-child(-n+12)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-12& > *:nth-child(12n+1):nth-last-child(-n+12)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-yfull {
    .grid-cols-2& > *:nth-child(-n+2)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-2& > *:nth-child(2n+1):nth-last-child(-n+2)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-yfull {
    .grid-cols-3& > *:nth-child(-n+3)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-3& > *:nth-child(3n+1):nth-last-child(-n+3)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-yfull {
    .grid-cols-4& > *:nth-child(-n+4)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-4& > *:nth-child(4n+1):nth-last-child(-n+4)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-yfull {
    .grid-cols-5& > *:nth-child(-n+5)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-5& > *:nth-child(5n+1):nth-last-child(-n+5)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-yfull {
    .grid-cols-6& > *:nth-child(-n+6)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-6& > *:nth-child(6n+1):nth-last-child(-n+6)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-yfull {
    .grid-cols-7& > *:nth-child(-n+7)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-7& > *:nth-child(7n+1):nth-last-child(-n+7)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-yfull {
    .grid-cols-8& > *:nth-child(-n+8)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-8& > *:nth-child(8n+1):nth-last-child(-n+8)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-yfull {
    .grid-cols-9& > *:nth-child(-n+9)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-9& > *:nth-child(9n+1):nth-last-child(-n+9)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-yfull {
    .grid-cols-10& > *:nth-child(-n+10)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-10& > *:nth-child(10n+1):nth-last-child(-n+10)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-yfull {
    .grid-cols-11& > *:nth-child(-n+11)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-11& > *:nth-child(11n+1):nth-last-child(-n+11)::after {
      --gridline-y-bottom: 0;
    }
  }
  .grid-line-yfull {
    .grid-cols-12& > *:nth-child(-n+12)::after {
      --gridline-y-top: 0;
    }
    .grid-cols-12& > *:nth-child(12n+1):nth-last-child(-n+12)::after {
      --gridline-y-bottom: 0;
    }
  }
  .keyline-0 {
    --keyline-l-color: transparent;
    --keyline-r-color: transparent;
  }
  .scrollbar-track-bg-column {
    --scrollbar-bg: var(--color-blue-05);
    --scrollbar-border: var(--scrollbar-bg);
  }
  .scrollbar-track-grey-15 {
    --scrollbar-bg: var(--color-grey-15);
    --scrollbar-border: var(--scrollbar-bg);
  }
  .scrollbar-track-primary {
    --scrollbar-bg: var(--color-blue-06);
    --scrollbar-border: var(--scrollbar-bg);
  }
  .w-cols-1 {
    & > * {
      --container-grid-columns: 1;
      --cols-container: 0;
    }
  }
  .w-cols-2 {
    & > * {
      --container-grid-columns: 2;
      --cols-container: 0;
    }
  }
  .w-cols-3 {
    & > * {
      --container-grid-columns: 3;
      --cols-container: 0;
    }
  }
  .w-cols-4 {
    & > * {
      --container-grid-columns: 4;
      --cols-container: 0;
    }
  }
  .w-cols-5 {
    & > * {
      --container-grid-columns: 5;
      --cols-container: 0;
    }
  }
  .w-cols-6 {
    & > * {
      --container-grid-columns: 6;
      --cols-container: 0;
    }
  }
  .w-cols-7 {
    & > * {
      --container-grid-columns: 7;
      --cols-container: 0;
    }
  }
  .w-cols-8 {
    & > * {
      --container-grid-columns: 8;
      --cols-container: 0;
    }
  }
  .w-cols-9 {
    & > * {
      --container-grid-columns: 9;
      --cols-container: 0;
    }
  }
  .w-cols-10 {
    & > * {
      --container-grid-columns: 10;
      --cols-container: 0;
    }
  }
  .w-cols-11 {
    & > * {
      --container-grid-columns: 11;
      --cols-container: 0;
    }
  }
  .w-cols-12 {
    & > * {
      --container-grid-columns: 12;
      --cols-container: 0;
    }
  }
  .w-cols-vw-1 {
    & > * {
      --container-grid-columns: 1;
      --cols-container: 0;
    }
  }
  .w-cols-vw-2 {
    & > * {
      --container-grid-columns: 2;
      --cols-container: 0;
    }
  }
  .w-cols-vw-3 {
    & > * {
      --container-grid-columns: 3;
      --cols-container: 0;
    }
  }
  .w-cols-vw-4 {
    & > * {
      --container-grid-columns: 4;
      --cols-container: 0;
    }
  }
  .w-cols-vw-5 {
    & > * {
      --container-grid-columns: 5;
      --cols-container: 0;
    }
  }
  .w-cols-vw-6 {
    & > * {
      --container-grid-columns: 6;
      --cols-container: 0;
    }
  }
  .w-cols-vw-7 {
    & > * {
      --container-grid-columns: 7;
      --cols-container: 0;
    }
  }
  .w-cols-vw-8 {
    & > * {
      --container-grid-columns: 8;
      --cols-container: 0;
    }
  }
  .grid-line-x-primary {
    & > *::before {
      --gridline-x-color: var(--color-grey-90);
    }
  }
  .grid-line-x-secondary {
    & > *::before {
      --gridline-x-color: var(--color-grey-30);
    }
  }
  .grid-line-y-primary {
    & > *::after {
      --gridline-y-color: var(--color-grey-90);
    }
  }
  .grid-line-y-quaternary {
    & > *::after {
      --gridline-y-color: var(--color-blue-05);
    }
  }
  .grid-line-y-tertiary {
    & > *::after {
      --gridline-y-color: var(--color-grey-54);
    }
  }
  .ratio-1x1 {
    --ratio: 100%;
  }
  .ratio-16x9 {
    --ratio: 56.25%;
  }
  .scrollbar-thumb-bg-column-alt {
    --scrollbar-fg: var(--color-blue-04);
  }
  .scrollbar-thumb-primary {
    --scrollbar-fg: var(--color-blue-03);
  }
  .scrollbar-thumb-red-01 {
    --scrollbar-fg: var(--color-red-01);
  }
  .stroke-full-2 {
    --stroke-full-thickness: 2px;
  }
  .stroke-full-4 {
    --stroke-full-thickness: 4px;
  }
  .stroke-full-10 {
    --stroke-full-thickness: 10px;
  }
  .stroke-full-dashed {
    --stroke-full-style: dashed;
  }
  .stroke-full-dotted {
    --stroke-full-style: dotted;
  }
  .stroke-full-primary {
    --stroke-full-color: var(--color-grey-90);
  }
  .stroke-full-secondary {
    --stroke-full-color: var(--color-grey-30);
  }
  .stroke-full-tertiary {
    --stroke-full-color: var(--color-grey-54);
  }
  .marker\:content-\[\'⛄️\'\] {
    & *::marker {
      --tw-content: '⛄️';
      content: var(--tw-content);
    }
    &::marker {
      --tw-content: '⛄️';
      content: var(--tw-content);
    }
  }
  .hover\:underline-border-primary {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
        text-decoration-color: var(--color-grey-90);
      }
    }
  }
  .hover\:opacity-100 {
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .focus\:underline-border-secondary {
    &:focus {
      text-decoration-line: underline;
      text-decoration-color: var(--color-grey-30);
    }
  }
  .sm\:mt-0 {
    @media (width >= 544px) {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .sm\:mr-20 {
    @media (width >= 544px) {
      margin-right: calc(var(--spacing) * 20);
    }
  }
  .sm\:mr-auto {
    @media (width >= 544px) {
      margin-right: auto;
    }
  }
  .sm\:flex {
    @media (width >= 544px) {
      display: flex;
    }
  }
  .sm\:w-cols-3 {
    @media (width >= 544px) {
      width: calc(((3 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (3 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
    }
  }
  .sm\:flex-row {
    @media (width >= 544px) {
      flex-direction: row;
    }
  }
  .sm\:w-cols-3 {
    @media (width >= 544px) {
      & > * {
        --container-grid-columns: 3;
        --cols-container: 0;
      }
    }
  }
  .md\:grid-line-y {
    @media (width >= 650px) {
      & > * {
        position: relative;
      }
      & > *::before {
        position: absolute;
        z-index: 0;
        pointer-events: none;
      }
      & > *::after {
        position: absolute;
        z-index: 0;
        pointer-events: none;
      }
      & > *::after {
        content: "";
        inset-inline-start: 0;
        inset-inline-end: calc(var(--inner-gutter) / -2);
        top: 0;
        bottom: 0;
        border-inline-start: 0 solid transparent;
        border-inline-end: var(--gridline-y-width, 0) solid var(--gridline-y-color, transparent);
      }
    }
  }
  .md\:keyline-l-primary {
    @media (width >= 650px) {
      position: relative;
      --keyline-l-color: var(--color-grey-90);
      --keyline-r-color: transparent;
      &::before {
        content: "";
        position: absolute;
        z-index: 0;
        inset-inline-start: calc(var(--inner-gutter) / -2 - 1px);
        inset-inline-end: calc(var(--inner-gutter) / -2);
        top: 0;
        bottom: 0;
        border-left: 1px solid var(--keyline-l-color, transparent);
        border-right: 1px solid var(--keyline-r-color, transparent);
        pointer-events: none;
      }
    }
  }
  .md\:keyline-l-secondary {
    @media (width >= 650px) {
      position: relative;
      --keyline-l-color: var(--color-grey-30);
      --keyline-r-color: transparent;
      &::before {
        content: "";
        position: absolute;
        z-index: 0;
        inset-inline-start: calc(var(--inner-gutter) / -2 - 1px);
        inset-inline-end: calc(var(--inner-gutter) / -2);
        top: 0;
        bottom: 0;
        border-left: 1px solid var(--keyline-l-color, transparent);
        border-right: 1px solid var(--keyline-r-color, transparent);
        pointer-events: none;
      }
    }
  }
  .md\:background-fill-accent {
    @media (width >= 650px) {
      --background-fill-bg: var(--color-blue-03);
      position: relative;
      &::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset-inline-start: 50%;
        top: 0;
        bottom: 0;
        width: 100vw;
        margin-inline-start: -50vw;
        background-color: var(--background-fill-bg, inherit);
        pointer-events: none;
      }
    }
  }
  .md\:grid-col-span-2 {
    @media (width >= 650px) {
      --container-grid-columns: 2;
      grid-column: span 2 / span 2;
    }
  }
  .md\:grid-col-span-4 {
    @media (width >= 650px) {
      --container-grid-columns: 4;
      grid-column: span 4 / span 4;
    }
  }
  .md\:mt-60 {
    @media (width >= 650px) {
      margin-top: calc(var(--spacing) * 60);
    }
  }
  .md\:full-bleed-scroller-reset {
    @media (width >= 650px) {
      display: unset;
      flex-flow: unset;
      flex-wrap: unset;
      overflow-x: unset;
      &::before {
        content: none;
        flex: unset;
        width: unset;
      }
      &::after {
        content: none;
        flex: unset;
        width: unset;
      }
    }
  }
  .md\:grid {
    @media (width >= 650px) {
      display: grid;
    }
  }
  .md\:w-auto {
    @media (width >= 650px) {
      width: auto;
    }
  }
  .md\:w-cols-1\/2 {
    @media (width >= 650px) {
      width: calc(50% - (var(--inner-gutter) * max(0.5, var(--cols-container, 0))));
    }
  }
  .md\:w-cols-6 {
    @media (width >= 650px) {
      width: calc(((6 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (6 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 650px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 650px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:gap-gutter {
    @media (width >= 650px) {
      grid-gap: var(--inner-gutter);
      gap: var(--inner-gutter);
    }
  }
  .md\:gap-x-gutter {
    @media (width >= 650px) {
      grid-column-gap: var(--inner-gutter);
      column-gap: var(--inner-gutter);
    }
  }
  .md\:gap-y-64 {
    @media (width >= 650px) {
      row-gap: calc(var(--spacing) * 64);
    }
  }
  .md\:border-t-0 {
    @media (width >= 650px) {
      border-top-style: var(--tw-border-style);
      border-top-width: 0px;
    }
  }
  .md\:bg-accent {
    @media (width >= 650px) {
      background-color: var(--color-blue-03);
    }
  }
  .md\:px-40 {
    @media (width >= 650px) {
      padding-inline: calc(var(--spacing) * 40);
    }
  }
  .md\:pt-0 {
    @media (width >= 650px) {
      padding-top: calc(var(--spacing) * 0);
    }
  }
  .md\:pt-80 {
    @media (width >= 650px) {
      padding-top: calc(var(--spacing) * 80);
    }
  }
  .md\:f-code {
    @media (width >= 650px) {
      font-family: var(--f-code-font-family);
      font-weight: var(--f-code-font-weight);
      font-size: var(--f-code-font-size);
      line-height: var(--f-code-line-height);
      letter-spacing: var(--f-code-letter-spacing);
      -moz-osx-font-smoothing: var(--f-code--moz-osx-font-smoothing);
      -webkit-font-smoothing: var(--f-code--webkit-font-smoothing);
      & b {
        font-weight: var(--f-code---bold-weight, bold);
      }
      & strong {
        font-weight: var(--f-code---bold-weight, bold);
      }
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 650px) {
      &.grid-line-x > *:nth-child(n)::before {
        --gridline-x-width: 1px;
        --gridline-x-start: 0;
        --gridline-x-end: 0;
      }
      &.grid-line-xfull > *:nth-child(n)::before {
        --gridline-x-width: 1px;
        --gridline-x-start: calc(var(--inner-gutter) / -2);
        --gridline-x-end: calc(var(--inner-gutter) / -2);
      }
      &.grid-line-x > *:nth-child(2n+1)::before {
        --gridline-x-start: 0;
      }
      &.grid-line-xfull > *:nth-child(2n+1)::before {
        --gridline-x-start: 0;
      }
      &.grid-line-x > *:nth-child(2n+2)::before {
        --gridline-x-end: 0;
      }
      &.grid-line-xfull > *:nth-child(2n+2)::before {
        --gridline-x-end: 0;
      }
      &.grid-line-x > *:nth-child(n):nth-last-child(n)::before {
        --gridline-x-width: 1px;
      }
      &.grid-line-x > *:nth-child(2n+1):nth-last-child(-n+2)::before {
        --gridline-x-width: 0;
      }
      &.grid-line-x > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {
        --gridline-x-width: 0;
      }
      &.grid-line-xfull > *:nth-child(n):nth-last-child(n)::before {
        --gridline-x-width: 1px;
      }
      &.grid-line-xfull > *:nth-child(2n+1):nth-last-child(-n+2)::before {
        --gridline-x-width: 0;
      }
      &.grid-line-xfull > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {
        --gridline-x-width: 0;
      }
      &[class*="grid-line-y"] > *:nth-child(n)::after {
        --gridline-y-width: 1px;
      }
      &[class*="grid-line-y"] > *:nth-child(2n+2)::after {
        --gridline-y-width: 0;
      }
      &.grid-line-y > *:nth-child(-n+2)::after {
        --gridline-y-top: 0;
      }
      &.grid-line-yfull > *:nth-child(-n+2)::after {
        --gridline-y-top: 0;
      }
      &.grid-line-y > *:nth-child(2n+1):nth-last-child(-n+2)::after {
        --gridline-y-bottom: 0;
      }
      &.grid-line-yfull > *:nth-child(2n+1):nth-last-child(-n+2)::after {
        --gridline-y-bottom: 0;
      }
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 650px) {
      &.grid-line-x > *:nth-child(n)::before {
        --gridline-x-width: 1px;
        --gridline-x-start: 0;
        --gridline-x-end: 0;
      }
      &.grid-line-xfull > *:nth-child(n)::before {
        --gridline-x-width: 1px;
        --gridline-x-start: calc(var(--inner-gutter) / -2);
        --gridline-x-end: calc(var(--inner-gutter) / -2);
      }
      &.grid-line-x > *:nth-child(3n+1)::before {
        --gridline-x-start: 0;
      }
      &.grid-line-xfull > *:nth-child(3n+1)::before {
        --gridline-x-start: 0;
      }
      &.grid-line-x > *:nth-child(3n+3)::before {
        --gridline-x-end: 0;
      }
      &.grid-line-xfull > *:nth-child(3n+3)::before {
        --gridline-x-end: 0;
      }
      &.grid-line-x > *:nth-child(n):nth-last-child(n)::before {
        --gridline-x-width: 1px;
      }
      &.grid-line-x > *:nth-child(3n+1):nth-last-child(-n+3)::before {
        --gridline-x-width: 0;
      }
      &.grid-line-x > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {
        --gridline-x-width: 0;
      }
      &.grid-line-xfull > *:nth-child(n):nth-last-child(n)::before {
        --gridline-x-width: 1px;
      }
      &.grid-line-xfull > *:nth-child(3n+1):nth-last-child(-n+3)::before {
        --gridline-x-width: 0;
      }
      &.grid-line-xfull > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {
        --gridline-x-width: 0;
      }
      &[class*="grid-line-y"] > *:nth-child(n)::after {
        --gridline-y-width: 1px;
      }
      &[class*="grid-line-y"] > *:nth-child(3n+3)::after {
        --gridline-y-width: 0;
      }
      &.grid-line-y > *:nth-child(-n+3)::after {
        --gridline-y-top: 0;
      }
      &.grid-line-yfull > *:nth-child(-n+3)::after {
        --gridline-y-top: 0;
      }
      &.grid-line-y > *:nth-child(3n+1):nth-last-child(-n+3)::after {
        --gridline-y-bottom: 0;
      }
      &.grid-line-yfull > *:nth-child(3n+1):nth-last-child(-n+3)::after {
        --gridline-y-bottom: 0;
      }
    }
  }
  .md\:grid-line-x-32 {
    @media (width >= 650px) {
      & > *::before {
        --gridline-x-bottom: -32px;
        --gridline-y-top: -32px;
        --gridline-y-bottom: -32px;
      }
      &.grid-line-yfull > *::after {
        --gridline-x-bottom: -32px;
        --gridline-y-top: -32px;
        --gridline-y-bottom: -32px;
      }
    }
  }
  .md\:grid-line-y {
    @media (width >= 650px) {
      .grid-cols-2& > *:nth-child(-n+2)::after {
        --gridline-y-top: 0;
      }
      .grid-cols-2& > *:nth-child(2n+1):nth-last-child(-n+2)::after {
        --gridline-y-bottom: 0;
      }
    }
  }
  .md\:grid-line-y {
    @media (width >= 650px) {
      .grid-cols-3& > *:nth-child(-n+3)::after {
        --gridline-y-top: 0;
      }
      .grid-cols-3& > *:nth-child(3n+1):nth-last-child(-n+3)::after {
        --gridline-y-bottom: 0;
      }
    }
  }
  .md\:grid-line-y {
    @media (width >= 650px) {
      .grid-cols-4& > *:nth-child(-n+4)::after {
        --gridline-y-top: 0;
      }
      .grid-cols-4& > *:nth-child(4n+1):nth-last-child(-n+4)::after {
        --gridline-y-bottom: 0;
      }
    }
  }
  .md\:grid-line-y {
    @media (width >= 650px) {
      .grid-cols-5& > *:nth-child(-n+5)::after {
        --gridline-y-top: 0;
      }
      .grid-cols-5& > *:nth-child(5n+1):nth-last-child(-n+5)::after {
        --gridline-y-bottom: 0;
      }
    }
  }
  .md\:grid-line-y {
    @media (width >= 650px) {
      .grid-cols-6& > *:nth-child(-n+6)::after {
        --gridline-y-top: 0;
      }
      .grid-cols-6& > *:nth-child(6n+1):nth-last-child(-n+6)::after {
        --gridline-y-bottom: 0;
      }
    }
  }
  .md\:grid-line-y {
    @media (width >= 650px) {
      .grid-cols-7& > *:nth-child(-n+7)::after {
        --gridline-y-top: 0;
      }
      .grid-cols-7& > *:nth-child(7n+1):nth-last-child(-n+7)::after {
        --gridline-y-bottom: 0;
      }
    }
  }
  .md\:grid-line-y {
    @media (width >= 650px) {
      .grid-cols-8& > *:nth-child(-n+8)::after {
        --gridline-y-top: 0;
      }
      .grid-cols-8& > *:nth-child(8n+1):nth-last-child(-n+8)::after {
        --gridline-y-bottom: 0;
      }
    }
  }
  .md\:grid-line-y {
    @media (width >= 650px) {
      .grid-cols-9& > *:nth-child(-n+9)::after {
        --gridline-y-top: 0;
      }
      .grid-cols-9& > *:nth-child(9n+1):nth-last-child(-n+9)::after {
        --gridline-y-bottom: 0;
      }
    }
  }
  .md\:grid-line-y {
    @media (width >= 650px) {
      .grid-cols-10& > *:nth-child(-n+10)::after {
        --gridline-y-top: 0;
      }
      .grid-cols-10& > *:nth-child(10n+1):nth-last-child(-n+10)::after {
        --gridline-y-bottom: 0;
      }
    }
  }
  .md\:grid-line-y {
    @media (width >= 650px) {
      .grid-cols-11& > *:nth-child(-n+11)::after {
        --gridline-y-top: 0;
      }
      .grid-cols-11& > *:nth-child(11n+1):nth-last-child(-n+11)::after {
        --gridline-y-bottom: 0;
      }
    }
  }
  .md\:grid-line-y {
    @media (width >= 650px) {
      .grid-cols-12& > *:nth-child(-n+12)::after {
        --gridline-y-top: 0;
      }
      .grid-cols-12& > *:nth-child(12n+1):nth-last-child(-n+12)::after {
        --gridline-y-bottom: 0;
      }
    }
  }
  .md\:keyline-0 {
    @media (width >= 650px) {
      --keyline-l-color: transparent;
      --keyline-r-color: transparent;
    }
  }
  .md\:keyline-l-0 {
    @media (width >= 650px) {
      --keyline-l-color: transparent;
      --keyline-r-color: transparent;
    }
  }
  .md\:keyline-r-0 {
    @media (width >= 650px) {
      --keyline-l-color: transparent;
      --keyline-r-color: transparent;
    }
  }
  .md\:w-cols-6 {
    @media (width >= 650px) {
      & > * {
        --container-grid-columns: 6;
        --cols-container: 0;
      }
    }
  }
  .md\:grid-line-x-primary {
    @media (width >= 650px) {
      & > *::before {
        --gridline-x-color: var(--color-grey-90);
      }
    }
  }
  .md\:grid-line-x-quaternary {
    @media (width >= 650px) {
      & > *::before {
        --gridline-x-color: var(--color-blue-05);
      }
    }
  }
  .md\:grid-line-x-tertiary {
    @media (width >= 650px) {
      & > *::before {
        --gridline-x-color: var(--color-grey-54);
      }
    }
  }
  .md\:grid-line-y-primary {
    @media (width >= 650px) {
      & > *::after {
        --gridline-y-color: var(--color-grey-90);
      }
    }
  }
  .md\:ratio-16x9 {
    @media (width >= 650px) {
      --ratio: 56.25%;
    }
  }
  .md\:before\:hidden {
    @media (width >= 650px) {
      &::before {
        content: var(--tw-content);
        display: none;
      }
    }
  }
  .md\:after\:hidden {
    @media (width >= 650px) {
      &::after {
        content: var(--tw-content);
        display: none;
      }
    }
  }
  .lg\:keyline-l-secondary {
    @media (width >= 990px) {
      position: relative;
      --keyline-l-color: var(--color-grey-30);
      --keyline-r-color: transparent;
      &::before {
        content: "";
        position: absolute;
        z-index: 0;
        inset-inline-start: calc(var(--inner-gutter) / -2 - 1px);
        inset-inline-end: calc(var(--inner-gutter) / -2);
        top: 0;
        bottom: 0;
        border-left: 1px solid var(--keyline-l-color, transparent);
        border-right: 1px solid var(--keyline-r-color, transparent);
        pointer-events: none;
      }
    }
  }
  .lg\:keyline-l-tertiary {
    @media (width >= 990px) {
      position: relative;
      --keyline-l-color: var(--color-grey-54);
      --keyline-r-color: transparent;
      &::before {
        content: "";
        position: absolute;
        z-index: 0;
        inset-inline-start: calc(var(--inner-gutter) / -2 - 1px);
        inset-inline-end: calc(var(--inner-gutter) / -2);
        top: 0;
        bottom: 0;
        border-left: 1px solid var(--keyline-l-color, transparent);
        border-right: 1px solid var(--keyline-r-color, transparent);
        pointer-events: none;
      }
    }
  }
  .lg\:grid-line-x-0 {
    @media (width >= 990px) {
      & > * {
        position: relative;
      }
      & > *::before {
        position: absolute;
        z-index: 0;
        pointer-events: none;
      }
      & > *::after {
        position: absolute;
        z-index: 0;
        pointer-events: none;
      }
      & > *::before {
        content: none;
      }
    }
  }
  .lg\:grid-line-y-0 {
    @media (width >= 990px) {
      & > * {
        position: relative;
      }
      & > *::before {
        position: absolute;
        z-index: 0;
        pointer-events: none;
      }
      & > *::after {
        position: absolute;
        z-index: 0;
        pointer-events: none;
      }
      & > *::after {
        content: none;
      }
    }
  }
  .lg\:container {
    @media (width >= 990px) {
      &[class] {
        width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
        margin-right: auto;
        margin-left: auto;
      }
      &[class] > * {
        --container-outer-gutter: 0;
        --breakout-container-outer-gutter: 0;
      }
      &[class]-reset {
        width: unset;
        margin-right: unset;
        margin-left: unset;
      }
      &[class]-reset > * {
        --container-outer-gutter: var(--outer-gutter, 0);
        --breakout-container-outer-gutter: inherit;
      }
      &[class] > .breakout[class] {
        --breakout-outer-gutter: max(var(--outer-gutter), calc((100% - var(--container-width, 100%)) / 2));
        --breakout-container-outer-gutter: var(--outer-gutter);
        position: relative;
        inset-inline-start: 50%;
        width: calc(100vw - var(--scrollbar-visible-width, 0px));
        margin-inline-start: calc((100vw - var(--scrollbar-visible-width, 0px)) / -2);
      }
    }
  }
  .lg\:breakout {
    @media (width >= 990px) {
      &[class] {
        --breakout-outer-gutter: max(var(--outer-gutter), calc((100% - var(--container-width, 100%)) / 2));
        --breakout-container-outer-gutter: var(--outer-gutter);
        position: relative;
        inset-inline-start: 50%;
        width: calc(100vw - var(--scrollbar-visible-width, 0px));
        margin-inline-start: calc((100vw - var(--scrollbar-visible-width, 0px)) / -2);
      }
      .container[class] > &[class] {
        --breakout-outer-gutter: max(var(--outer-gutter), calc((100% - var(--container-width, 100%)) / 2));
        --breakout-container-outer-gutter: var(--outer-gutter);
        position: relative;
        inset-inline-start: 50%;
        width: calc(100vw - var(--scrollbar-visible-width, 0px));
        margin-inline-start: calc((100vw - var(--scrollbar-visible-width, 0px)) / -2);
      }
      &[class].px-outer-gutter {
        padding-inline-start: var(--breakout-outer-gutter);
        padding-inline-end: var(--breakout-outer-gutter);
      }
      &[class] > .px-outer-gutter {
        padding-inline-start: var(--breakout-outer-gutter);
        padding-inline-end: var(--breakout-outer-gutter);
      }
      &[class].pr-outer-gutter {
        padding-inline-end: var(--breakout-outer-gutter);
      }
      &[class] > .pr-outer-gutter {
        padding-inline-end: var(--breakout-outer-gutter);
      }
      &[class].pl-outer-gutter {
        padding-inline-start: var(--breakout-outer-gutter);
      }
      &[class] > .pl-outer-gutter {
        padding-inline-start: var(--breakout-outer-gutter);
      }
      &[class] > .w-outer-gutter {
        width: var(--breakout-outer-gutter);
      }
      &[class]-reset {
        --breakout-outer-gutter: var(--outer-gutter);
        --breakout-container-outer-gutter: 0;
        position: unset;
        inset-inline-start: unset;
        width: unset;
        margin-inline-start: unset;
      }
    }
  }
  .lg\:ratio-free {
    @media (width >= 990px) {
      &::before {
        content: unset;
      }
      &::after {
        content: unset;
      }
      & > [class*="ratio-content"] {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: auto;
        height: auto;
      }
      & > [class*="ratio-content"][class*="w-full"] {
        width: 100%;
      }
      & > [class*="ratio-content"][class*="h-auto"] {
        height: auto;
      }
    }
  }
  .lg\:grid-col-span-4 {
    @media (width >= 990px) {
      --container-grid-columns: 4;
      grid-column: span 4 / span 4;
    }
  }
  .lg\:grid-col-span-6 {
    @media (width >= 990px) {
      --container-grid-columns: 6;
      grid-column: span 6 / span 6;
    }
  }
  .lg\:container {
    @media (width >= 990px) {
      width: 100%;
      @media (width >= 0) {
        max-width: 0;
      }
      @media (width >= 544px) {
        max-width: 544px;
      }
      @media (width >= 650px) {
        max-width: 650px;
      }
      @media (width >= 990px) {
        max-width: 990px;
      }
      @media (width >= 1300px) {
        max-width: 1300px;
      }
      @media (width >= 1520px) {
        max-width: 1520px;
      }
    }
  }
  .lg\:mx-cols-1 {
    @media (width >= 990px) {
      margin-inline: calc(((((1 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (1 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter)))) + var(--inner-gutter)));
    }
  }
  .lg\:mx-cols-3 {
    @media (width >= 990px) {
      margin-inline: calc(((((3 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (3 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter)))) + var(--inner-gutter)));
    }
  }
  .lg\:mt-outer-1 {
    @media (width >= 990px) {
      margin-top: var(--spacing-outer-1);
    }
  }
  .lg\:w-cols-1 {
    @media (width >= 990px) {
      width: calc(((1 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (1 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
    }
  }
  .lg\:w-cols-2\/3 {
    @media (width >= 990px) {
      width: calc(66.666% - (var(--inner-gutter) * max(0.333, var(--cols-container, 0))));
    }
  }
  .lg\:w-cols-3 {
    @media (width >= 990px) {
      width: calc(((3 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (3 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
    }
  }
  .lg\:w-cols-10 {
    @media (width >= 990px) {
      width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
    }
  }
  .lg\:w-cols-12 {
    @media (width >= 990px) {
      width: calc(((12 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (12 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
    }
  }
  .lg\:container {
    @media (width >= 990px) {
      max-width: 100%;
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 990px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 990px) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .lg\:gap-x-0 {
    @media (width >= 990px) {
      column-gap: calc(var(--spacing) * 0);
    }
  }
  .lg\:pt-100 {
    @media (width >= 990px) {
      padding-top: calc(var(--spacing) * 100);
    }
  }
  .lg\:f-code {
    @media (width >= 990px) {
      font-family: var(--f-code-font-family);
      font-weight: var(--f-code-font-weight);
      font-size: var(--f-code-font-size);
      line-height: var(--f-code-line-height);
      letter-spacing: var(--f-code-letter-spacing);
      -moz-osx-font-smoothing: var(--f-code--moz-osx-font-smoothing);
      -webkit-font-smoothing: var(--f-code--webkit-font-smoothing);
      & b {
        font-weight: var(--f-code---bold-weight, bold);
      }
      & strong {
        font-weight: var(--f-code---bold-weight, bold);
      }
    }
  }
  .lg\:f-h1 {
    @media (width >= 990px) {
      font-family: var(--f-h1-font-family);
      font-weight: var(--f-h1-font-weight);
      font-size: var(--f-h1-font-size);
      line-height: var(--f-h1-line-height);
      letter-spacing: var(--f-h1-letter-spacing);
      -moz-osx-font-smoothing: var(--f-h1--moz-osx-font-smoothing);
      -webkit-font-smoothing: var(--f-h1--webkit-font-smoothing);
      & b {
        font-weight: var(--f-h1---bold-weight, bold);
      }
      & strong {
        font-weight: var(--f-h1---bold-weight, bold);
      }
    }
  }
  .lg\:underline-thickness-8 {
    @media (width >= 990px) {
      text-decoration-line: underline;
      text-decoration-thickness: 8px;
    }
  }
  .lg\:background-fill-none {
    @media (width >= 990px) {
      &::before {
        content: none;
      }
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 990px) {
      &.grid-line-x > *:nth-child(n)::before {
        --gridline-x-width: 1px;
        --gridline-x-start: 0;
        --gridline-x-end: 0;
      }
      &.grid-line-xfull > *:nth-child(n)::before {
        --gridline-x-width: 1px;
        --gridline-x-start: calc(var(--inner-gutter) / -2);
        --gridline-x-end: calc(var(--inner-gutter) / -2);
      }
      &.grid-line-x > *:nth-child(3n+1)::before {
        --gridline-x-start: 0;
      }
      &.grid-line-xfull > *:nth-child(3n+1)::before {
        --gridline-x-start: 0;
      }
      &.grid-line-x > *:nth-child(3n+3)::before {
        --gridline-x-end: 0;
      }
      &.grid-line-xfull > *:nth-child(3n+3)::before {
        --gridline-x-end: 0;
      }
      &.grid-line-x > *:nth-child(n):nth-last-child(n)::before {
        --gridline-x-width: 1px;
      }
      &.grid-line-x > *:nth-child(3n+1):nth-last-child(-n+3)::before {
        --gridline-x-width: 0;
      }
      &.grid-line-x > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {
        --gridline-x-width: 0;
      }
      &.grid-line-xfull > *:nth-child(n):nth-last-child(n)::before {
        --gridline-x-width: 1px;
      }
      &.grid-line-xfull > *:nth-child(3n+1):nth-last-child(-n+3)::before {
        --gridline-x-width: 0;
      }
      &.grid-line-xfull > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {
        --gridline-x-width: 0;
      }
      &[class*="grid-line-y"] > *:nth-child(n)::after {
        --gridline-y-width: 1px;
      }
      &[class*="grid-line-y"] > *:nth-child(3n+3)::after {
        --gridline-y-width: 0;
      }
      &.grid-line-y > *:nth-child(-n+3)::after {
        --gridline-y-top: 0;
      }
      &.grid-line-yfull > *:nth-child(-n+3)::after {
        --gridline-y-top: 0;
      }
      &.grid-line-y > *:nth-child(3n+1):nth-last-child(-n+3)::after {
        --gridline-y-bottom: 0;
      }
      &.grid-line-yfull > *:nth-child(3n+1):nth-last-child(-n+3)::after {
        --gridline-y-bottom: 0;
      }
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 990px) {
      &.grid-line-x > *:nth-child(n)::before {
        --gridline-x-width: 1px;
        --gridline-x-start: 0;
        --gridline-x-end: 0;
      }
      &.grid-line-xfull > *:nth-child(n)::before {
        --gridline-x-width: 1px;
        --gridline-x-start: calc(var(--inner-gutter) / -2);
        --gridline-x-end: calc(var(--inner-gutter) / -2);
      }
      &.grid-line-x > *:nth-child(4n+1)::before {
        --gridline-x-start: 0;
      }
      &.grid-line-xfull > *:nth-child(4n+1)::before {
        --gridline-x-start: 0;
      }
      &.grid-line-x > *:nth-child(4n+4)::before {
        --gridline-x-end: 0;
      }
      &.grid-line-xfull > *:nth-child(4n+4)::before {
        --gridline-x-end: 0;
      }
      &.grid-line-x > *:nth-child(n):nth-last-child(n)::before {
        --gridline-x-width: 1px;
      }
      &.grid-line-x > *:nth-child(4n+1):nth-last-child(-n+4)::before {
        --gridline-x-width: 0;
      }
      &.grid-line-x > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {
        --gridline-x-width: 0;
      }
      &.grid-line-xfull > *:nth-child(n):nth-last-child(n)::before {
        --gridline-x-width: 1px;
      }
      &.grid-line-xfull > *:nth-child(4n+1):nth-last-child(-n+4)::before {
        --gridline-x-width: 0;
      }
      &.grid-line-xfull > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {
        --gridline-x-width: 0;
      }
      &[class*="grid-line-y"] > *:nth-child(n)::after {
        --gridline-y-width: 1px;
      }
      &[class*="grid-line-y"] > *:nth-child(4n+4)::after {
        --gridline-y-width: 0;
      }
      &.grid-line-y > *:nth-child(-n+4)::after {
        --gridline-y-top: 0;
      }
      &.grid-line-yfull > *:nth-child(-n+4)::after {
        --gridline-y-top: 0;
      }
      &.grid-line-y > *:nth-child(4n+1):nth-last-child(-n+4)::after {
        --gridline-y-bottom: 0;
      }
      &.grid-line-yfull > *:nth-child(4n+1):nth-last-child(-n+4)::after {
        --gridline-y-bottom: 0;
      }
    }
  }
  .lg\:keyline-l-0 {
    @media (width >= 990px) {
      --keyline-l-color: transparent;
      --keyline-r-color: transparent;
    }
  }
  .lg\:w-cols-1 {
    @media (width >= 990px) {
      & > * {
        --container-grid-columns: 1;
        --cols-container: 0;
      }
    }
  }
  .lg\:w-cols-3 {
    @media (width >= 990px) {
      & > * {
        --container-grid-columns: 3;
        --cols-container: 0;
      }
    }
  }
  .lg\:w-cols-10 {
    @media (width >= 990px) {
      & > * {
        --container-grid-columns: 10;
        --cols-container: 0;
      }
    }
  }
  .lg\:w-cols-12 {
    @media (width >= 990px) {
      & > * {
        --container-grid-columns: 12;
        --cols-container: 0;
      }
    }
  }
  .lg\:grid-line-y-secondary {
    @media (width >= 990px) {
      & > *::after {
        --gridline-y-color: var(--color-grey-30);
      }
    }
  }
  .xl\:grid-line-x {
    @media (width >= 1300px) {
      & > * {
        position: relative;
      }
      & > *::before {
        position: absolute;
        z-index: 0;
        pointer-events: none;
      }
      & > *::after {
        position: absolute;
        z-index: 0;
        pointer-events: none;
      }
      & > *::before {
        content: "";
        inset-inline-start: var(--gridline-x-start, 0);
        inset-inline-end: var(--gridline-x-end, 0);
        top: 0;
        bottom: var(--gridline-x-bottom, calc(var(--inner-gutter) / -2));
        border-top: 0 solid transparent;
        border-bottom: var(--gridline-x-width, 0) solid var(--gridline-x-color, transparent);
      }
    }
  }
  .xl\:grid-line-x {
    @media (width >= 1300px) {
      .grid-line-yfull& > *::after {
        inset-inline-start: 0;
        inset-inline-end: calc(var(--inner-gutter) / -2);
        top: var(--gridline-y-top, calc(var(--inner-gutter) / -2));
        bottom: var(--gridline-y-bottom, calc(var(--inner-gutter) / -2));
        border-inline-start: 0 solid transparent;
        border-inline-end: var(--gridline-y-width, 0) solid var(--gridline-y-color, transparent);
      }
    }
  }
  .xl\:w-cols-1\/2 {
    @media (width >= 1300px) {
      width: calc(50% - (var(--inner-gutter) * max(0.5, var(--cols-container, 0))));
    }
  }
  .xl\:w-cols-8 {
    @media (width >= 1300px) {
      width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
    }
  }
  .xl\:gap-x-gutter {
    @media (width >= 1300px) {
      grid-column-gap: var(--inner-gutter);
      column-gap: var(--inner-gutter);
    }
  }
  .xl\:grid-line-x {
    @media (width >= 1300px) {
      .grid-cols-2& > *:nth-child(n)::before {
        --gridline-x-width: 1px;
        --gridline-x-start: 0;
        --gridline-x-end: 0;
      }
      .grid-cols-2& > *:nth-child(2n+1)::before {
        --gridline-x-start: 0;
      }
      .grid-cols-2& > *:nth-child(2n+2)::before {
        --gridline-x-end: 0;
      }
      .grid-cols-2& > *:nth-child(n):nth-last-child(n)::before {
        --gridline-x-width: 1px;
      }
      .grid-cols-2& > *:nth-child(2n+1):nth-last-child(-n+2)::before {
        --gridline-x-width: 0;
      }
      .grid-cols-2& > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {
        --gridline-x-width: 0;
      }
    }
  }
  .xl\:grid-line-x {
    @media (width >= 1300px) {
      .grid-cols-3& > *:nth-child(n)::before {
        --gridline-x-width: 1px;
        --gridline-x-start: 0;
        --gridline-x-end: 0;
      }
      .grid-cols-3& > *:nth-child(3n+1)::before {
        --gridline-x-start: 0;
      }
      .grid-cols-3& > *:nth-child(3n+3)::before {
        --gridline-x-end: 0;
      }
      .grid-cols-3& > *:nth-child(n):nth-last-child(n)::before {
        --gridline-x-width: 1px;
      }
      .grid-cols-3& > *:nth-child(3n+1):nth-last-child(-n+3)::before {
        --gridline-x-width: 0;
      }
      .grid-cols-3& > *:nth-child(3n+1):nth-last-child(-n+3) ~ *::before {
        --gridline-x-width: 0;
      }
    }
  }
  .xl\:grid-line-x {
    @media (width >= 1300px) {
      .grid-cols-4& > *:nth-child(n)::before {
        --gridline-x-width: 1px;
        --gridline-x-start: 0;
        --gridline-x-end: 0;
      }
      .grid-cols-4& > *:nth-child(4n+1)::before {
        --gridline-x-start: 0;
      }
      .grid-cols-4& > *:nth-child(4n+4)::before {
        --gridline-x-end: 0;
      }
      .grid-cols-4& > *:nth-child(n):nth-last-child(n)::before {
        --gridline-x-width: 1px;
      }
      .grid-cols-4& > *:nth-child(4n+1):nth-last-child(-n+4)::before {
        --gridline-x-width: 0;
      }
      .grid-cols-4& > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {
        --gridline-x-width: 0;
      }
    }
  }
  .xl\:grid-line-x {
    @media (width >= 1300px) {
      .grid-cols-5& > *:nth-child(n)::before {
        --gridline-x-width: 1px;
        --gridline-x-start: 0;
        --gridline-x-end: 0;
      }
      .grid-cols-5& > *:nth-child(5n+1)::before {
        --gridline-x-start: 0;
      }
      .grid-cols-5& > *:nth-child(5n+5)::before {
        --gridline-x-end: 0;
      }
      .grid-cols-5& > *:nth-child(n):nth-last-child(n)::before {
        --gridline-x-width: 1px;
      }
      .grid-cols-5& > *:nth-child(5n+1):nth-last-child(-n+5)::before {
        --gridline-x-width: 0;
      }
      .grid-cols-5& > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {
        --gridline-x-width: 0;
      }
    }
  }
  .xl\:grid-line-x {
    @media (width >= 1300px) {
      .grid-cols-6& > *:nth-child(n)::before {
        --gridline-x-width: 1px;
        --gridline-x-start: 0;
        --gridline-x-end: 0;
      }
      .grid-cols-6& > *:nth-child(6n+1)::before {
        --gridline-x-start: 0;
      }
      .grid-cols-6& > *:nth-child(6n+6)::before {
        --gridline-x-end: 0;
      }
      .grid-cols-6& > *:nth-child(n):nth-last-child(n)::before {
        --gridline-x-width: 1px;
      }
      .grid-cols-6& > *:nth-child(6n+1):nth-last-child(-n+6)::before {
        --gridline-x-width: 0;
      }
      .grid-cols-6& > *:nth-child(6n+1):nth-last-child(-n+6) ~ *::before {
        --gridline-x-width: 0;
      }
    }
  }
  .xl\:grid-line-x {
    @media (width >= 1300px) {
      .grid-cols-7& > *:nth-child(n)::before {
        --gridline-x-width: 1px;
        --gridline-x-start: 0;
        --gridline-x-end: 0;
      }
      .grid-cols-7& > *:nth-child(7n+1)::before {
        --gridline-x-start: 0;
      }
      .grid-cols-7& > *:nth-child(7n+7)::before {
        --gridline-x-end: 0;
      }
      .grid-cols-7& > *:nth-child(n):nth-last-child(n)::before {
        --gridline-x-width: 1px;
      }
      .grid-cols-7& > *:nth-child(7n+1):nth-last-child(-n+7)::before {
        --gridline-x-width: 0;
      }
      .grid-cols-7& > *:nth-child(7n+1):nth-last-child(-n+7) ~ *::before {
        --gridline-x-width: 0;
      }
    }
  }
  .xl\:grid-line-x {
    @media (width >= 1300px) {
      .grid-cols-8& > *:nth-child(n)::before {
        --gridline-x-width: 1px;
        --gridline-x-start: 0;
        --gridline-x-end: 0;
      }
      .grid-cols-8& > *:nth-child(8n+1)::before {
        --gridline-x-start: 0;
      }
      .grid-cols-8& > *:nth-child(8n+8)::before {
        --gridline-x-end: 0;
      }
      .grid-cols-8& > *:nth-child(n):nth-last-child(n)::before {
        --gridline-x-width: 1px;
      }
      .grid-cols-8& > *:nth-child(8n+1):nth-last-child(-n+8)::before {
        --gridline-x-width: 0;
      }
      .grid-cols-8& > *:nth-child(8n+1):nth-last-child(-n+8) ~ *::before {
        --gridline-x-width: 0;
      }
    }
  }
  .xl\:grid-line-x {
    @media (width >= 1300px) {
      .grid-cols-9& > *:nth-child(n)::before {
        --gridline-x-width: 1px;
        --gridline-x-start: 0;
        --gridline-x-end: 0;
      }
      .grid-cols-9& > *:nth-child(9n+1)::before {
        --gridline-x-start: 0;
      }
      .grid-cols-9& > *:nth-child(9n+9)::before {
        --gridline-x-end: 0;
      }
      .grid-cols-9& > *:nth-child(n):nth-last-child(n)::before {
        --gridline-x-width: 1px;
      }
      .grid-cols-9& > *:nth-child(9n+1):nth-last-child(-n+9)::before {
        --gridline-x-width: 0;
      }
      .grid-cols-9& > *:nth-child(9n+1):nth-last-child(-n+9) ~ *::before {
        --gridline-x-width: 0;
      }
    }
  }
  .xl\:grid-line-x {
    @media (width >= 1300px) {
      .grid-cols-10& > *:nth-child(n)::before {
        --gridline-x-width: 1px;
        --gridline-x-start: 0;
        --gridline-x-end: 0;
      }
      .grid-cols-10& > *:nth-child(10n+1)::before {
        --gridline-x-start: 0;
      }
      .grid-cols-10& > *:nth-child(10n+10)::before {
        --gridline-x-end: 0;
      }
      .grid-cols-10& > *:nth-child(n):nth-last-child(n)::before {
        --gridline-x-width: 1px;
      }
      .grid-cols-10& > *:nth-child(10n+1):nth-last-child(-n+10)::before {
        --gridline-x-width: 0;
      }
      .grid-cols-10& > *:nth-child(10n+1):nth-last-child(-n+10) ~ *::before {
        --gridline-x-width: 0;
      }
    }
  }
  .xl\:grid-line-x {
    @media (width >= 1300px) {
      .grid-cols-11& > *:nth-child(n)::before {
        --gridline-x-width: 1px;
        --gridline-x-start: 0;
        --gridline-x-end: 0;
      }
      .grid-cols-11& > *:nth-child(11n+1)::before {
        --gridline-x-start: 0;
      }
      .grid-cols-11& > *:nth-child(11n+11)::before {
        --gridline-x-end: 0;
      }
      .grid-cols-11& > *:nth-child(n):nth-last-child(n)::before {
        --gridline-x-width: 1px;
      }
      .grid-cols-11& > *:nth-child(11n+1):nth-last-child(-n+11)::before {
        --gridline-x-width: 0;
      }
      .grid-cols-11& > *:nth-child(11n+1):nth-last-child(-n+11) ~ *::before {
        --gridline-x-width: 0;
      }
    }
  }
  .xl\:grid-line-x {
    @media (width >= 1300px) {
      .grid-cols-12& > *:nth-child(n)::before {
        --gridline-x-width: 1px;
        --gridline-x-start: 0;
        --gridline-x-end: 0;
      }
      .grid-cols-12& > *:nth-child(12n+1)::before {
        --gridline-x-start: 0;
      }
      .grid-cols-12& > *:nth-child(12n+12)::before {
        --gridline-x-end: 0;
      }
      .grid-cols-12& > *:nth-child(n):nth-last-child(n)::before {
        --gridline-x-width: 1px;
      }
      .grid-cols-12& > *:nth-child(12n+1):nth-last-child(-n+12)::before {
        --gridline-x-width: 0;
      }
      .grid-cols-12& > *:nth-child(12n+1):nth-last-child(-n+12) ~ *::before {
        --gridline-x-width: 0;
      }
    }
  }
  .xl\:grid-line-x {
    @media (width >= 1300px) {
      .grid-cols-1& > *:nth-child(n)::before {
        --gridline-x-width: 1px;
        --gridline-x-start: 0;
        --gridline-x-end: 0;
      }
      .grid-cols-1& > *:nth-child(1n+1)::before {
        --gridline-x-end: 0;
      }
      .grid-cols-1& > *:nth-child(n):nth-last-child(n)::before {
        --gridline-x-width: 1px;
      }
      .grid-cols-1& > *:nth-child(1n+1):nth-last-child(-n+1)::before {
        --gridline-x-width: 0;
      }
      .grid-cols-1& > *:nth-child(1n+1):nth-last-child(-n+1) ~ *::before {
        --gridline-x-width: 0;
      }
    }
  }
  .xl\:grid-line-x-32 {
    @media (width >= 1300px) {
      & > *::before {
        --gridline-x-bottom: -32px;
        --gridline-y-top: -32px;
        --gridline-y-bottom: -32px;
      }
      &.grid-line-yfull > *::after {
        --gridline-x-bottom: -32px;
        --gridline-y-top: -32px;
        --gridline-y-bottom: -32px;
      }
    }
  }
  .xl\:w-cols-8 {
    @media (width >= 1300px) {
      & > * {
        --container-grid-columns: 8;
        --cols-container: 0;
      }
    }
  }
  .xl\:grid-line-x-primary {
    @media (width >= 1300px) {
      & > *::before {
        --gridline-x-color: var(--color-grey-90);
      }
    }
  }
  .xxl\:w-cols-6 {
    @media (width >= 1520px) {
      width: calc(((6 / var(--container-grid-columns, var(--grid-columns))) * (100% - (var(--inner-gutter) * var(--cols-container, 0)))) - (var(--inner-gutter) - (6 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
    }
  }
  .xxl\:w-cols-6 {
    @media (width >= 1520px) {
      & > * {
        --container-grid-columns: 6;
        --cols-container: 0;
      }
    }
  }
  .hover-hover\:bg-column-alt {
    @media (hover: hover) {
      background-color: var(--color-blue-04);
    }
  }
}
@layer components {
  .show-grid {
    --grid-column-bg: rgba(0, 0, 0, 0.05);
    position: relative;
    &::after {
      position: fixed;
      z-index: 1;
      inset-inline-start: 0;
      inset-inline-end: 0;
      top: 0;
      bottom: 0;
      width: calc(var(--container-width, 100%) - (2 * var(--outer-gutter, 0)));;
      height: 100%;
      margin: 0 auto;
      background: repeating-linear-gradient(
        90deg,
        var(--grid-column-bg),
        var(--grid-column-bg) calc((100% - (((var(--grid-columns) - 1) * var(--inner-gutter)))) / var(--grid-columns)),
        rgba(0,0,0,0) calc((100% - (((var(--grid-columns) - 1) * var(--inner-gutter)))) / var(--grid-columns)),
        rgba(0,0,0,0) calc((100% - (((var(--grid-columns) - 1) * var(--inner-gutter)))) / var(--grid-columns) + var(--inner-gutter))
      );
      pointer-events: none;
      position: absolute;
      width: 100%;
      --tw-content: '';
      content: var(--tw-content);
    }
  }
  .blockquote {
    background-color: var(--color-grey-5);
    padding-block: calc(var(--spacing) * 20);
  }
  .blockquote blockquote {
    display: block;
    padding-inline: calc(var(--spacing) * 20);
    @media (width >= 650px) {
      padding-inline: calc(var(--spacing) * 40);
    }
  }
  .blockquote blockquote p {
    font-style: italic;
  }
  .blockquote blockquote p:first-child {
    position: relative;
    margin-top: calc(var(--spacing) * 0);
  }
  .blockquote blockquote p:first-child::before {
    content: open-quote;
    position: absolute;
    top: calc(var(--spacing) * 0);
    right: 100%;
    left: calc(var(--spacing) * -8);
  }
  .blockquote blockquote p:last-child::after {
    content: close-quote;
  }
  .blockquote figcaption {
    margin-top: calc(var(--spacing) * 8);
    display: block;
    padding-inline: calc(var(--spacing) * 20);
    @media (width >= 650px) {
      padding-inline: calc(var(--spacing) * 40);
    }
  }
  .blockquote cite {
    font-style: normal;
  }
  .blockquote cite::before {
    content: '—';
    margin-right: calc(var(--spacing) * 8);
  }
  .code-example {
    display: block;
    background-color: var(--color-grey-90);
  }
  .code-example .code-example-filename {
    display: inline-block;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-blue-05);
    padding-inline: calc(var(--spacing) * 20);
    padding-block: calc(var(--spacing) * 12);
    font-family: var(--f-ui-font-family);
    font-weight: var(--f-ui-font-weight);
    font-size: var(--f-ui-font-size);
    line-height: var(--f-ui-line-height);
    letter-spacing: var(--f-ui-letter-spacing);
    -moz-osx-font-smoothing: var(--f-ui--moz-osx-font-smoothing);
    -webkit-font-smoothing: var(--f-ui--webkit-font-smoothing);
    & b {
      font-weight: var(--f-ui---bold-weight, bold);
    }
    & strong {
      font-weight: var(--f-ui---bold-weight, bold);
    }
    color: var(--color-blue-05);
    color: var(--color-white);
    min-width: 160px;
  }
  .code-example .code-example-code {
    display: block;
    background-color: var(--color-grey-90);
    font-family: var(--f-code-font-family);
    font-weight: var(--f-code-font-weight);
    font-size: var(--f-code-font-size);
    line-height: var(--f-code-line-height);
    letter-spacing: var(--f-code-letter-spacing);
    -moz-osx-font-smoothing: var(--f-code--moz-osx-font-smoothing);
    -webkit-font-smoothing: var(--f-code--webkit-font-smoothing);
    & b {
      font-weight: var(--f-code---bold-weight, bold);
    }
    & strong {
      font-weight: var(--f-code---bold-weight, bold);
    }
    color: var(--color-grey-3);
  }
  .code-example .code-example-code code {
    max-height: calc(var(--spacing) * 600);
    overflow: auto;
    background-color: var(--color-grey-90);
    scrollbar-color: var(--grey-54) var(--grey-90);
    scrollbar-width: thin;
  }
  .code-example .code-example-code code::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .code-example .code-example-code code::-webkit-scrollbar-track {
    background: var(--grey-90);
  }
  .code-example .code-example-code code::-webkit-scrollbar-thumb {
    background: var(--grey-54);
    width: 8px;
    height: 8px;
  }
  .copy h2 {
    font-family: var(--f-h2-font-family);
    font-weight: var(--f-h2-font-weight);
    font-size: var(--f-h2-font-size);
    line-height: var(--f-h2-line-height);
    letter-spacing: var(--f-h2-letter-spacing);
    -moz-osx-font-smoothing: var(--f-h2--moz-osx-font-smoothing);
    -webkit-font-smoothing: var(--f-h2--webkit-font-smoothing);
    & b {
      font-weight: var(--f-h2---bold-weight, bold);
    }
    & strong {
      font-weight: var(--f-h2---bold-weight, bold);
    }
  }
  .copy h2:not(:first-child) {
    margin-top: calc(var(--spacing) * 56);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-grey-30);
    padding-top: calc(var(--spacing) * 48);
  }
  .copy h3 {
    margin-top: calc(var(--spacing) * 40);
    font-family: var(--f-h3-font-family);
    font-weight: var(--f-h3-font-weight);
    font-size: var(--f-h3-font-size);
    line-height: var(--f-h3-line-height);
    letter-spacing: var(--f-h3-letter-spacing);
    -moz-osx-font-smoothing: var(--f-h3--moz-osx-font-smoothing);
    -webkit-font-smoothing: var(--f-h3--webkit-font-smoothing);
    & b {
      font-weight: var(--f-h3---bold-weight, bold);
    }
    & strong {
      font-weight: var(--f-h3---bold-weight, bold);
    }
  }
  .copy h4 {
    margin-top: calc(var(--spacing) * 40);
    font-family: var(--f-h4-font-family);
    font-weight: var(--f-h4-font-weight);
    font-size: var(--f-h4-font-size);
    line-height: var(--f-h4-line-height);
    letter-spacing: var(--f-h4-letter-spacing);
    -moz-osx-font-smoothing: var(--f-h4--moz-osx-font-smoothing);
    -webkit-font-smoothing: var(--f-h4--webkit-font-smoothing);
    & b {
      font-weight: var(--f-h4---bold-weight, bold);
    }
    & strong {
      font-weight: var(--f-h4---bold-weight, bold);
    }
  }
  .copy p {
    margin-top: calc(var(--spacing) * 20);
    font-family: var(--f-body-font-family);
    font-weight: var(--f-body-font-weight);
    font-size: var(--f-body-font-size);
    line-height: var(--f-body-line-height);
    letter-spacing: var(--f-body-letter-spacing);
    -moz-osx-font-smoothing: var(--f-body--moz-osx-font-smoothing);
    -webkit-font-smoothing: var(--f-body--webkit-font-smoothing);
    & b {
      font-weight: var(--f-body---bold-weight, bold);
    }
    & strong {
      font-weight: var(--f-body---bold-weight, bold);
    }
  }
  .copy p:first-child {
    margin-top: calc(var(--spacing) * 0);
  }
  .copy ul {
    margin-top: calc(var(--spacing) * 20);
    list-style-type: disc;
    padding-left: calc(var(--spacing) * 16);
    font-family: var(--f-body-font-family);
    font-weight: var(--f-body-font-weight);
    font-size: var(--f-body-font-size);
    line-height: var(--f-body-line-height);
    letter-spacing: var(--f-body-letter-spacing);
    -moz-osx-font-smoothing: var(--f-body--moz-osx-font-smoothing);
    -webkit-font-smoothing: var(--f-body--webkit-font-smoothing);
    & b {
      font-weight: var(--f-body---bold-weight, bold);
    }
    & strong {
      font-weight: var(--f-body---bold-weight, bold);
    }
  }
  .copy ul ul {
    margin-top: calc(var(--spacing) * 0);
  }
  .copy ol {
    margin-top: calc(var(--spacing) * 20);
    list-style-type: decimal;
    padding-left: calc(var(--spacing) * 16);
    font-family: var(--f-body-font-family);
    font-weight: var(--f-body-font-weight);
    font-size: var(--f-body-font-size);
    line-height: var(--f-body-line-height);
    letter-spacing: var(--f-body-letter-spacing);
    -moz-osx-font-smoothing: var(--f-body--moz-osx-font-smoothing);
    -webkit-font-smoothing: var(--f-body--webkit-font-smoothing);
    & b {
      font-weight: var(--f-body---bold-weight, bold);
    }
    & strong {
      font-weight: var(--f-body---bold-weight, bold);
    }
  }
  .copy .code-example {
    margin-top: calc(var(--spacing) * 20);
  }
  .copy code:not([class]) {
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 8);
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 2);
    font-family: var(--f-code-font-family);
    font-weight: var(--f-code-font-weight);
    font-size: var(--f-code-font-size);
    line-height: var(--f-code-line-height);
    letter-spacing: var(--f-code-letter-spacing);
    -moz-osx-font-smoothing: var(--f-code--moz-osx-font-smoothing);
    -webkit-font-smoothing: var(--f-code--webkit-font-smoothing);
    & b {
      font-weight: var(--f-code---bold-weight, bold);
    }
    & strong {
      font-weight: var(--f-code---bold-weight, bold);
    }
    color: var(--color-black);
  }
  .copy pre:not([class]) {
    margin-top: calc(var(--spacing) * 20);
    display: block;
    max-height: calc(var(--spacing) * 400);
    overflow-y: scroll;
    font-family: var(--f-code-font-family);
    font-weight: var(--f-code-font-weight);
    font-size: var(--f-code-font-size);
    line-height: var(--f-code-line-height);
    letter-spacing: var(--f-code-letter-spacing);
    -moz-osx-font-smoothing: var(--f-code--moz-osx-font-smoothing);
    -webkit-font-smoothing: var(--f-code--webkit-font-smoothing);
    & b {
      font-weight: var(--f-code---bold-weight, bold);
    }
    & strong {
      font-weight: var(--f-code---bold-weight, bold);
    }
  }
  .copy pre:not([class]) code:not([class]) {
    display: block;
    padding: calc(var(--spacing) * 8);
  }
  .copy a {
    color: var(--color-blue-03);
    text-decoration-line: underline;
  }
  .copy a:hover, .copy a:focus {
    color: var(--color-grey-90);
  }
  .copy hr {
    margin-block: calc(var(--spacing) * 40);
    border-color: var(--color-grey-30);
  }
  .copy .blockquote {
    margin-top: calc(var(--spacing) * 20);
  }
  @media (min-width: 768px) {
    .copy > *:not(.code-example, h2, hr) {
      max-width: 80%;
    }
  }
  @media (min-width: 1024px) {
    .copy > *:not(.code-example, h2, hr) {
      max-width: 60%;
    }
  }
  .copy table {
    margin-top: calc(var(--spacing) * 20);
  }
  .copy th, .copy td {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
    border-color: var(--color-grey-30);
    padding-inline: calc(var(--spacing) * 10);
    padding-bottom: calc(var(--spacing) * 4);
  }
  .copy th:first-child, .copy td:first-child {
    border-left-style: var(--tw-border-style);
    border-left-width: 0px;
    padding-inline-start: calc(var(--spacing) * 0);
  }
  .copy th:last-child, .copy td:last-child {
    padding-inline-end: calc(var(--spacing) * 0);
  }
}
@layer base {
  :root {
    --breakpoint: "xs";
    --container-width: unset;
    --inner-gutter: 10px;
    --outer-gutter: 20px;
    --grid-columns: 4;
    --env: "dev";
    --grid-column-bg: rgba(127, 255, 255, 0.25);
  }
  @media (width >= 544px) {
    :root {
      --breakpoint: "sm";
      --container-width: unset;
      --inner-gutter: 15px;
      --outer-gutter: 30px;
      --grid-columns: 4;
    }
  }
  @media (width >= 650px) {
    :root {
      --breakpoint: "md";
      --container-width: unset;
      --inner-gutter: 20px;
      --outer-gutter: 40px;
      --grid-columns: 8;
    }
  }
  @media (width >= 990px) {
    :root {
      --breakpoint: "lg";
      --container-width: unset;
      --inner-gutter: 30px;
      --outer-gutter: 40px;
      --grid-columns: 12;
    }
  }
  @media (width >= 1300px) {
    :root {
      --breakpoint: "xl";
      --container-width: unset;
      --inner-gutter: 40px;
      --outer-gutter: 40px;
      --grid-columns: 12;
    }
  }
  @media (width >= 1520px) {
    :root {
      --breakpoint: "xxl";
      --container-width: 1440px;
      --inner-gutter: 40px;
      --outer-gutter: 0px;
      --grid-columns: 12;
    }
  }
}
@layer base {
  :root {
    --color-white: #fff;
    --color-grey-3: #f8f8f8;
    --color-grey-5: #f2f2f2;
    --color-grey-10: #e6e6e6;
    --color-grey-15: #d9d9d9;
    --color-grey-30: #b3b3b3;
    --color-grey-54: #757575;
    --color-grey-90: #1a1a1a;
    --color-black: #000;
    --color-blue-01: #0A152B;
    --color-blue-02: #001F5C;
    --color-blue-03: #004F91;
    --color-blue-04: #313BFB;
    --color-blue-05: #81EEF3;
    --color-blue-06: #ADD8E6;
    --color-red-01: #f00;
  }
}
@layer base {
  :root {
    --font-sans: SuisseIntl, Helvetica, Arial, sans-serif;
    --font-serif: "Times New Roman", Georgia, serif;
    --font-mono: "Lucida Console", Courier, monospace;
    --f-h1-font-family: var(--font-sans);
    --f-h1-font-weight: 500;
    --f-h1-font-size: 2rem;
    --f-h1-line-height: 1.2;
    --f-h1-letter-spacing: -0.02em;
    --f-h1--moz-osx-font-smoothing: grayscale;
    --f-h1--webkit-font-smoothing: antialiased;
    --f-h1---bold-weight: 500;
    --f-h2-font-family: var(--font-sans);
    --f-h2-font-weight: 500;
    --f-h2-font-size: 1.25rem;
    --f-h2-line-height: 1.2;
    --f-h2-letter-spacing: -0.02em;
    --f-h2--moz-osx-font-smoothing: grayscale;
    --f-h2--webkit-font-smoothing: antialiased;
    --f-h2---bold-weight: 500;
    --f-h3-font-family: var(--font-sans);
    --f-h3-font-weight: 500;
    --f-h3-font-size: 1rem;
    --f-h3-line-height: 1.2;
    --f-h3-letter-spacing: -0.02em;
    --f-h3--moz-osx-font-smoothing: grayscale;
    --f-h3--webkit-font-smoothing: antialiased;
    --f-h3---bold-weight: 500;
    --f-h4-font-family: var(--font-sans);
    --f-h4-font-weight: 600;
    --f-h4-font-size: 0.875rem;
    --f-h4-line-height: 1.2;
    --f-h4-letter-spacing: -0.02em;
    --f-h4--moz-osx-font-smoothing: grayscale;
    --f-h4--webkit-font-smoothing: antialiased;
    --f-h4---bold-weight: 600;
    --f-body-font-family: var(--font-sans);
    --f-body-font-size: 0.875rem;
    --f-body-line-height: 1.7;
    --f-body--moz-osx-font-smoothing: grayscale;
    --f-body--webkit-font-smoothing: antialiased;
    --f-body---bold-weight: 600;
    --f-ui-font-family: var(--font-sans);
    --f-ui-font-size: 0.75rem;
    --f-ui-line-height: 1.2;
    --f-ui-font-weight: 400;
    --f-code-font-family: var(--font-mono);
    --f-code-font-size: 0.875rem;
    --f-code-line-height: 1.2;
    --f-code-font-weight: 400;
  }
  @media (width >= 650px) {
    :root {
      --f-h1-font-size: 2.25rem;
      --f-h2-font-size: 1.5rem;
      --f-h3-font-size: 1.25rem;
      --f-h4-font-size: 1rem;
      --f-body-font-size: 1rem;
    }
  }
  @media (width >= 990px) {
    :root {
      --f-h1-font-size: 3rem;
      --f-h2-font-size: 1.75rem;
    }
  }
}
@layer base {
  :root {
    --spacing-outer-1: 4rem;
    --spacing-inner-1: 1.5rem;
    --spacing-inner-2: 1rem;
  }
  @media (width >= 650px) {
    :root {
      --spacing-inner-1: 2.5rem;
      --spacing-inner-2: 1.5rem;
    }
  }
  @media (width >= 990px) {
    :root {
      --spacing-outer-1: 6rem;
      --spacing-inner-1: 4rem;
      --spacing-inner-2: 2rem;
    }
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
  initial-value: rotateX(0);
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
  initial-value: rotateY(0);
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
  initial-value: rotateZ(0);
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
  initial-value: skewX(0);
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
  initial-value: skewY(0);
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}