/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: var(--font-sans);
    --font-serif: var(--font-serif);
    --font-mono: var(--font-mono);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 4px;
    --text-sm: 0.875rem;
    --text-sm--line-height: 1.5;
    --text-base: 1rem;
    --text-base--line-height: 1.5;
    --text-lg: 1.125rem;
    --text-lg--line-height: 1.5;
    --text-xl: 1.25rem;
    --text-xl--line-height: 1.35;
    --text-2xl: 1.5rem;
    --text-2xl--line-height: 1.3333;
    --text-3xl: 1.75rem;
    --text-3xl--line-height: 1.3125;
    --text-4xl: 2rem;
    --text-4xl--line-height: 1.2;
    --text-5xl: 2.5rem;
    --text-5xl--line-height: 1.083333;
    --text-6xl: 3rem;
    --text-6xl--line-height: 1;
    --text-7xl: 3.75rem;
    --text-7xl--line-height: 1;
    --text-8xl: 4.5rem;
    --text-8xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --leading-tight: 1.25;
    --shadow-2xs: var(--shadow-2xs);
    --shadow-xs: var(--shadow-xs);
    --shadow-sm: var(--shadow-sm);
    --shadow-md: var(--shadow-md);
    --shadow-lg: var(--shadow-lg);
    --shadow-xl: var(--shadow-xl);
    --shadow-2xl: var(--shadow-2xl);
    --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-mono-font-family: var(--font-mono);
    --shadow: var(--shadow);
    --color-primary: var(--primary);
    --text-md: var(--text-base);
    --text-md--line-height: var(--text-base--line-height);
  }
}
@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;
  }
  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;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        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;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-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 {
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .static {
    position: static;
  }
  .start {
    inset-inline-start: var(--spacing);
  }
  .end {
    inset-inline-end: var(--spacing);
  }
  .clear-both {
    clear: both;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mx-0 {
    margin-inline: calc(var(--spacing) * 0);
  }
  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }
  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }
  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }
  .mx-8 {
    margin-inline: calc(var(--spacing) * 8);
  }
  .mx-12 {
    margin-inline: calc(var(--spacing) * 12);
  }
  .mx-16 {
    margin-inline: calc(var(--spacing) * 16);
  }
  .mx-20 {
    margin-inline: calc(var(--spacing) * 20);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-0 {
    margin-block: calc(var(--spacing) * 0);
  }
  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }
  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }
  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }
  .my-8 {
    margin-block: calc(var(--spacing) * 8);
  }
  .my-12 {
    margin-block: calc(var(--spacing) * 12);
  }
  .my-16 {
    margin-block: calc(var(--spacing) * 16);
  }
  .my-20 {
    margin-block: calc(var(--spacing) * 20);
  }
  .ms-0 {
    margin-inline-start: calc(var(--spacing) * 0);
  }
  .ms-2 {
    margin-inline-start: calc(var(--spacing) * 2);
  }
  .ms-4 {
    margin-inline-start: calc(var(--spacing) * 4);
  }
  .ms-6 {
    margin-inline-start: calc(var(--spacing) * 6);
  }
  .ms-8 {
    margin-inline-start: calc(var(--spacing) * 8);
  }
  .ms-12 {
    margin-inline-start: calc(var(--spacing) * 12);
  }
  .ms-16 {
    margin-inline-start: calc(var(--spacing) * 16);
  }
  .ms-20 {
    margin-inline-start: calc(var(--spacing) * 20);
  }
  .ms-24 {
    margin-inline-start: calc(var(--spacing) * 24);
  }
  .ms-32 {
    margin-inline-start: calc(var(--spacing) * 32);
  }
  .ms-auto {
    margin-inline-start: auto;
  }
  .me-0 {
    margin-inline-end: calc(var(--spacing) * 0);
  }
  .me-2 {
    margin-inline-end: calc(var(--spacing) * 2);
  }
  .me-4 {
    margin-inline-end: calc(var(--spacing) * 4);
  }
  .me-6 {
    margin-inline-end: calc(var(--spacing) * 6);
  }
  .me-8 {
    margin-inline-end: calc(var(--spacing) * 8);
  }
  .me-12 {
    margin-inline-end: calc(var(--spacing) * 12);
  }
  .me-16 {
    margin-inline-end: calc(var(--spacing) * 16);
  }
  .me-20 {
    margin-inline-end: calc(var(--spacing) * 20);
  }
  .me-24 {
    margin-inline-end: calc(var(--spacing) * 24);
  }
  .me-32 {
    margin-inline-end: calc(var(--spacing) * 32);
  }
  .me-auto {
    margin-inline-end: auto;
  }
  .mbs-0 {
    margin-block-start: calc(var(--spacing) * 0);
  }
  .mbs-2 {
    margin-block-start: calc(var(--spacing) * 2);
  }
  .mbs-4 {
    margin-block-start: calc(var(--spacing) * 4);
  }
  .mbs-6 {
    margin-block-start: calc(var(--spacing) * 6);
  }
  .mbs-8 {
    margin-block-start: calc(var(--spacing) * 8);
  }
  .mbs-12 {
    margin-block-start: calc(var(--spacing) * 12);
  }
  .mbs-16 {
    margin-block-start: calc(var(--spacing) * 16);
  }
  .mbs-20 {
    margin-block-start: calc(var(--spacing) * 20);
  }
  .mbs-24 {
    margin-block-start: calc(var(--spacing) * 24);
  }
  .mbs-32 {
    margin-block-start: calc(var(--spacing) * 32);
  }
  .mbe-0 {
    margin-block-end: calc(var(--spacing) * 0);
  }
  .mbe-2 {
    margin-block-end: calc(var(--spacing) * 2);
  }
  .mbe-4 {
    margin-block-end: calc(var(--spacing) * 4);
  }
  .mbe-6 {
    margin-block-end: calc(var(--spacing) * 6);
  }
  .mbe-8 {
    margin-block-end: calc(var(--spacing) * 8);
  }
  .mbe-12 {
    margin-block-end: calc(var(--spacing) * 12);
  }
  .mbe-16 {
    margin-block-end: calc(var(--spacing) * 16);
  }
  .mbe-20 {
    margin-block-end: calc(var(--spacing) * 20);
  }
  .mbe-24 {
    margin-block-end: calc(var(--spacing) * 24);
  }
  .mbe-32 {
    margin-block-end: calc(var(--spacing) * 32);
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .aspect-1\/1 {
    aspect-ratio: 1/1;
  }
  .aspect-2\/1 {
    aspect-ratio: 2/1;
  }
  .aspect-3\/1 {
    aspect-ratio: 3/1;
  }
  .aspect-3\/2 {
    aspect-ratio: 3/2;
  }
  .aspect-4\/1 {
    aspect-ratio: 4/1;
  }
  .aspect-4\/3 {
    aspect-ratio: 4/3;
  }
  .aspect-9\/16 {
    aspect-ratio: 9/16;
  }
  .aspect-16\/9 {
    aspect-ratio: 16/9;
  }
  .h-0 {
    height: calc(var(--spacing) * 0);
  }
  .h-auto {
    height: auto;
  }
  .h-full {
    height: 100%;
  }
  .w-1\/2 {
    width: calc(1 / 2 * 100%);
  }
  .w-2\/3 {
    width: calc(2 / 3 * 100%);
  }
  .w-3\/4 {
    width: calc(3 / 4 * 100%);
  }
  .w-9\/10 {
    width: calc(9 / 10 * 100%);
  }
  .w-auto {
    width: auto;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .w-max {
    width: max-content;
  }
  .w-min {
    width: min-content;
  }
  .max-w-1\/2 {
    max-width: calc(1 / 2 * 100%);
  }
  .max-w-2\/3 {
    max-width: calc(2 / 3 * 100%);
  }
  .max-w-3\/4 {
    max-width: calc(3 / 4 * 100%);
  }
  .max-w-9\/10 {
    max-width: calc(9 / 10 * 100%);
  }
  .max-w-full {
    max-width: 100%;
  }
  .resize {
    resize: both;
  }
  .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));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-col-reverse {
    flex-direction: column-reverse;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-stretch {
    align-items: stretch;
  }
  .justify-around {
    justify-content: space-around;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-evenly {
    justify-content: space-evenly;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .justify-items-center {
    justify-items: center;
  }
  .justify-items-end {
    justify-items: end;
  }
  .justify-items-start {
    justify-items: start;
  }
  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }
  .gap-16 {
    gap: calc(var(--spacing) * 16);
  }
  .gap-20 {
    gap: calc(var(--spacing) * 20);
  }
  .gap-x-0 {
    column-gap: calc(var(--spacing) * 0);
  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }
  .gap-x-8 {
    column-gap: calc(var(--spacing) * 8);
  }
  .gap-x-12 {
    column-gap: calc(var(--spacing) * 12);
  }
  .gap-x-16 {
    column-gap: calc(var(--spacing) * 16);
  }
  .gap-x-20 {
    column-gap: calc(var(--spacing) * 20);
  }
  .gap-y-0 {
    row-gap: calc(var(--spacing) * 0);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }
  .gap-y-6 {
    row-gap: calc(var(--spacing) * 6);
  }
  .gap-y-8 {
    row-gap: calc(var(--spacing) * 8);
  }
  .gap-y-12 {
    row-gap: calc(var(--spacing) * 12);
  }
  .gap-y-16 {
    row-gap: calc(var(--spacing) * 16);
  }
  .gap-y-20 {
    row-gap: calc(var(--spacing) * 20);
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-visible {
    overflow: visible;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-t-\[1px\] {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-t-\[2px\] {
    border-top-style: var(--tw-border-style);
    border-top-width: 2px;
  }
  .border-t-\[4px\] {
    border-top-style: var(--tw-border-style);
    border-top-width: 4px;
  }
  .border-t-\[6px\] {
    border-top-style: var(--tw-border-style);
    border-top-width: 6px;
  }
  .border-t-\[8px\] {
    border-top-style: var(--tw-border-style);
    border-top-width: 8px;
  }
  .border-t-\[12px\] {
    border-top-style: var(--tw-border-style);
    border-top-width: 12px;
  }
  .border-t-\[16px\] {
    border-top-style: var(--tw-border-style);
    border-top-width: 16px;
  }
  .border-accent {
    border-color: var(--accent);
  }
  .border-background {
    border-color: var(--background);
  }
  .border-black {
    border-color: var(--color-black);
  }
  .border-foreground {
    border-color: var(--foreground);
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .border-muted {
    border-color: var(--muted);
  }
  .border-primary {
    border-color: var(--primary);
  }
  .border-secondary {
    border-color: var(--secondary);
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-white {
    border-color: var(--color-white);
  }
  .bg-accent {
    background-color: var(--accent);
  }
  .bg-black {
    background-color: var(--color-black);
  }
  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }
  .bg-gray-500 {
    background-color: var(--color-gray-500);
  }
  .bg-gray-800 {
    background-color: var(--color-gray-800);
  }
  .bg-muted {
    background-color: var(--muted);
  }
  .bg-primary {
    background-color: var(--primary);
  }
  .bg-secondary {
    background-color: var(--secondary);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .object-cover {
    object-fit: cover;
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .px-12 {
    padding-inline: calc(var(--spacing) * 12);
  }
  .px-16 {
    padding-inline: calc(var(--spacing) * 16);
  }
  .px-20 {
    padding-inline: calc(var(--spacing) * 20);
  }
  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }
  .ps-0 {
    padding-inline-start: calc(var(--spacing) * 0);
  }
  .ps-2 {
    padding-inline-start: calc(var(--spacing) * 2);
  }
  .ps-4 {
    padding-inline-start: calc(var(--spacing) * 4);
  }
  .ps-6 {
    padding-inline-start: calc(var(--spacing) * 6);
  }
  .ps-8 {
    padding-inline-start: calc(var(--spacing) * 8);
  }
  .ps-12 {
    padding-inline-start: calc(var(--spacing) * 12);
  }
  .ps-16 {
    padding-inline-start: calc(var(--spacing) * 16);
  }
  .ps-20 {
    padding-inline-start: calc(var(--spacing) * 20);
  }
  .ps-24 {
    padding-inline-start: calc(var(--spacing) * 24);
  }
  .ps-32 {
    padding-inline-start: calc(var(--spacing) * 32);
  }
  .pe-0 {
    padding-inline-end: calc(var(--spacing) * 0);
  }
  .pe-2 {
    padding-inline-end: calc(var(--spacing) * 2);
  }
  .pe-4 {
    padding-inline-end: calc(var(--spacing) * 4);
  }
  .pe-6 {
    padding-inline-end: calc(var(--spacing) * 6);
  }
  .pe-8 {
    padding-inline-end: calc(var(--spacing) * 8);
  }
  .pe-12 {
    padding-inline-end: calc(var(--spacing) * 12);
  }
  .pe-16 {
    padding-inline-end: calc(var(--spacing) * 16);
  }
  .pe-20 {
    padding-inline-end: calc(var(--spacing) * 20);
  }
  .pe-24 {
    padding-inline-end: calc(var(--spacing) * 24);
  }
  .pe-32 {
    padding-inline-end: calc(var(--spacing) * 32);
  }
  .pbs-0 {
    padding-block-start: calc(var(--spacing) * 0);
  }
  .pbs-2 {
    padding-block-start: calc(var(--spacing) * 2);
  }
  .pbs-4 {
    padding-block-start: calc(var(--spacing) * 4);
  }
  .pbs-6 {
    padding-block-start: calc(var(--spacing) * 6);
  }
  .pbs-8 {
    padding-block-start: calc(var(--spacing) * 8);
  }
  .pbs-12 {
    padding-block-start: calc(var(--spacing) * 12);
  }
  .pbs-16 {
    padding-block-start: calc(var(--spacing) * 16);
  }
  .pbs-20 {
    padding-block-start: calc(var(--spacing) * 20);
  }
  .pbs-24 {
    padding-block-start: calc(var(--spacing) * 24);
  }
  .pbs-32 {
    padding-block-start: calc(var(--spacing) * 32);
  }
  .pbe-0 {
    padding-block-end: calc(var(--spacing) * 0);
  }
  .pbe-2 {
    padding-block-end: calc(var(--spacing) * 2);
  }
  .pbe-4 {
    padding-block-end: calc(var(--spacing) * 4);
  }
  .pbe-6 {
    padding-block-end: calc(var(--spacing) * 6);
  }
  .pbe-8 {
    padding-block-end: calc(var(--spacing) * 8);
  }
  .pbe-12 {
    padding-block-end: calc(var(--spacing) * 12);
  }
  .pbe-16 {
    padding-block-end: calc(var(--spacing) * 16);
  }
  .pbe-20 {
    padding-block-end: calc(var(--spacing) * 20);
  }
  .pbe-24 {
    padding-block-end: calc(var(--spacing) * 24);
  }
  .pbe-32 {
    padding-block-end: calc(var(--spacing) * 32);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .text-accent {
    color: var(--accent);
  }
  .text-background {
    color: var(--background);
  }
  .text-black {
    color: var(--color-black);
  }
  .text-foreground {
    color: var(--foreground);
  }
  .text-muted {
    color: var(--muted);
  }
  .text-primary {
    color: var(--primary);
  }
  .text-secondary {
    color: var(--secondary);
  }
  .text-white {
    color: var(--color-white);
  }
  .lowercase {
    text-transform: lowercase;
  }
  .opacity-25 {
    opacity: 25%;
  }
  .opacity-33 {
    opacity: 33%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-67 {
    opacity: 67%;
  }
  .opacity-75 {
    opacity: 75%;
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .sm\:mx-0 {
    @media (width >= 40rem) {
      margin-inline: calc(var(--spacing) * 0);
    }
  }
  .sm\:mx-2 {
    @media (width >= 40rem) {
      margin-inline: calc(var(--spacing) * 2);
    }
  }
  .sm\:mx-4 {
    @media (width >= 40rem) {
      margin-inline: calc(var(--spacing) * 4);
    }
  }
  .sm\:mx-6 {
    @media (width >= 40rem) {
      margin-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:mx-8 {
    @media (width >= 40rem) {
      margin-inline: calc(var(--spacing) * 8);
    }
  }
  .sm\:mx-12 {
    @media (width >= 40rem) {
      margin-inline: calc(var(--spacing) * 12);
    }
  }
  .sm\:mx-16 {
    @media (width >= 40rem) {
      margin-inline: calc(var(--spacing) * 16);
    }
  }
  .sm\:mx-20 {
    @media (width >= 40rem) {
      margin-inline: calc(var(--spacing) * 20);
    }
  }
  .sm\:mx-auto {
    @media (width >= 40rem) {
      margin-inline: auto;
    }
  }
  .sm\:my-0 {
    @media (width >= 40rem) {
      margin-block: calc(var(--spacing) * 0);
    }
  }
  .sm\:my-2 {
    @media (width >= 40rem) {
      margin-block: calc(var(--spacing) * 2);
    }
  }
  .sm\:my-4 {
    @media (width >= 40rem) {
      margin-block: calc(var(--spacing) * 4);
    }
  }
  .sm\:my-6 {
    @media (width >= 40rem) {
      margin-block: calc(var(--spacing) * 6);
    }
  }
  .sm\:my-8 {
    @media (width >= 40rem) {
      margin-block: calc(var(--spacing) * 8);
    }
  }
  .sm\:my-12 {
    @media (width >= 40rem) {
      margin-block: calc(var(--spacing) * 12);
    }
  }
  .sm\:my-16 {
    @media (width >= 40rem) {
      margin-block: calc(var(--spacing) * 16);
    }
  }
  .sm\:my-20 {
    @media (width >= 40rem) {
      margin-block: calc(var(--spacing) * 20);
    }
  }
  .sm\:ms-0 {
    @media (width >= 40rem) {
      margin-inline-start: calc(var(--spacing) * 0);
    }
  }
  .sm\:ms-2 {
    @media (width >= 40rem) {
      margin-inline-start: calc(var(--spacing) * 2);
    }
  }
  .sm\:ms-4 {
    @media (width >= 40rem) {
      margin-inline-start: calc(var(--spacing) * 4);
    }
  }
  .sm\:ms-6 {
    @media (width >= 40rem) {
      margin-inline-start: calc(var(--spacing) * 6);
    }
  }
  .sm\:ms-8 {
    @media (width >= 40rem) {
      margin-inline-start: calc(var(--spacing) * 8);
    }
  }
  .sm\:ms-12 {
    @media (width >= 40rem) {
      margin-inline-start: calc(var(--spacing) * 12);
    }
  }
  .sm\:ms-16 {
    @media (width >= 40rem) {
      margin-inline-start: calc(var(--spacing) * 16);
    }
  }
  .sm\:ms-20 {
    @media (width >= 40rem) {
      margin-inline-start: calc(var(--spacing) * 20);
    }
  }
  .sm\:ms-auto {
    @media (width >= 40rem) {
      margin-inline-start: auto;
    }
  }
  .sm\:me-4 {
    @media (width >= 40rem) {
      margin-inline-end: calc(var(--spacing) * 4);
    }
  }
  .sm\:me-6 {
    @media (width >= 40rem) {
      margin-inline-end: calc(var(--spacing) * 6);
    }
  }
  .sm\:me-8 {
    @media (width >= 40rem) {
      margin-inline-end: calc(var(--spacing) * 8);
    }
  }
  .sm\:me-12 {
    @media (width >= 40rem) {
      margin-inline-end: calc(var(--spacing) * 12);
    }
  }
  .sm\:me-16 {
    @media (width >= 40rem) {
      margin-inline-end: calc(var(--spacing) * 16);
    }
  }
  .sm\:me-20 {
    @media (width >= 40rem) {
      margin-inline-end: calc(var(--spacing) * 20);
    }
  }
  .sm\:me-auto {
    @media (width >= 40rem) {
      margin-inline-end: auto;
    }
  }
  .sm\:mbs-0 {
    @media (width >= 40rem) {
      margin-block-start: calc(var(--spacing) * 0);
    }
  }
  .sm\:mbs-2 {
    @media (width >= 40rem) {
      margin-block-start: calc(var(--spacing) * 2);
    }
  }
  .sm\:mbs-4 {
    @media (width >= 40rem) {
      margin-block-start: calc(var(--spacing) * 4);
    }
  }
  .sm\:mbs-6 {
    @media (width >= 40rem) {
      margin-block-start: calc(var(--spacing) * 6);
    }
  }
  .sm\:mbs-8 {
    @media (width >= 40rem) {
      margin-block-start: calc(var(--spacing) * 8);
    }
  }
  .sm\:mbs-12 {
    @media (width >= 40rem) {
      margin-block-start: calc(var(--spacing) * 12);
    }
  }
  .sm\:mbs-16 {
    @media (width >= 40rem) {
      margin-block-start: calc(var(--spacing) * 16);
    }
  }
  .sm\:mbs-20 {
    @media (width >= 40rem) {
      margin-block-start: calc(var(--spacing) * 20);
    }
  }
  .sm\:mbe-0 {
    @media (width >= 40rem) {
      margin-block-end: calc(var(--spacing) * 0);
    }
  }
  .sm\:mbe-2 {
    @media (width >= 40rem) {
      margin-block-end: calc(var(--spacing) * 2);
    }
  }
  .sm\:mbe-4 {
    @media (width >= 40rem) {
      margin-block-end: calc(var(--spacing) * 4);
    }
  }
  .sm\:mbe-6 {
    @media (width >= 40rem) {
      margin-block-end: calc(var(--spacing) * 6);
    }
  }
  .sm\:mbe-8 {
    @media (width >= 40rem) {
      margin-block-end: calc(var(--spacing) * 8);
    }
  }
  .sm\:mbe-12 {
    @media (width >= 40rem) {
      margin-block-end: calc(var(--spacing) * 12);
    }
  }
  .sm\:mbe-16 {
    @media (width >= 40rem) {
      margin-block-end: calc(var(--spacing) * 16);
    }
  }
  .sm\:mbe-20 {
    @media (width >= 40rem) {
      margin-block-end: calc(var(--spacing) * 20);
    }
  }
  .sm\:w-auto {
    @media (width >= 40rem) {
      width: auto;
    }
  }
  .sm\:w-fit {
    @media (width >= 40rem) {
      width: fit-content;
    }
  }
  .sm\:w-full {
    @media (width >= 40rem) {
      width: 100%;
    }
  }
  .sm\:w-max {
    @media (width >= 40rem) {
      width: max-content;
    }
  }
  .sm\:w-min {
    @media (width >= 40rem) {
      width: min-content;
    }
  }
  .sm\:flex-col {
    @media (width >= 40rem) {
      flex-direction: column;
    }
  }
  .sm\:flex-col-reverse {
    @media (width >= 40rem) {
      flex-direction: column-reverse;
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:flex-row-reverse {
    @media (width >= 40rem) {
      flex-direction: row-reverse;
    }
  }
  .sm\:items-baseline {
    @media (width >= 40rem) {
      align-items: baseline;
    }
  }
  .sm\:items-center {
    @media (width >= 40rem) {
      align-items: center;
    }
  }
  .sm\:items-end {
    @media (width >= 40rem) {
      align-items: flex-end;
    }
  }
  .sm\:items-start {
    @media (width >= 40rem) {
      align-items: flex-start;
    }
  }
  .sm\:justify-around {
    @media (width >= 40rem) {
      justify-content: space-around;
    }
  }
  .sm\:justify-between {
    @media (width >= 40rem) {
      justify-content: space-between;
    }
  }
  .sm\:justify-center {
    @media (width >= 40rem) {
      justify-content: center;
    }
  }
  .sm\:justify-end {
    @media (width >= 40rem) {
      justify-content: flex-end;
    }
  }
  .sm\:justify-evenly {
    @media (width >= 40rem) {
      justify-content: space-evenly;
    }
  }
  .sm\:justify-start {
    @media (width >= 40rem) {
      justify-content: flex-start;
    }
  }
  .sm\:gap-0 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 0);
    }
  }
  .sm\:gap-2 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .sm\:gap-4 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .sm\:gap-6 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .sm\:gap-8 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .sm\:gap-12 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 12);
    }
  }
  .sm\:gap-16 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .sm\:gap-20 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 20);
    }
  }
  .sm\:gap-x-0 {
    @media (width >= 40rem) {
      column-gap: calc(var(--spacing) * 0);
    }
  }
  .sm\:gap-x-2 {
    @media (width >= 40rem) {
      column-gap: calc(var(--spacing) * 2);
    }
  }
  .sm\:gap-x-4 {
    @media (width >= 40rem) {
      column-gap: calc(var(--spacing) * 4);
    }
  }
  .sm\:gap-x-6 {
    @media (width >= 40rem) {
      column-gap: calc(var(--spacing) * 6);
    }
  }
  .sm\:gap-x-8 {
    @media (width >= 40rem) {
      column-gap: calc(var(--spacing) * 8);
    }
  }
  .sm\:gap-x-12 {
    @media (width >= 40rem) {
      column-gap: calc(var(--spacing) * 12);
    }
  }
  .sm\:gap-x-16 {
    @media (width >= 40rem) {
      column-gap: calc(var(--spacing) * 16);
    }
  }
  .sm\:gap-x-20 {
    @media (width >= 40rem) {
      column-gap: calc(var(--spacing) * 20);
    }
  }
  .sm\:gap-y-0 {
    @media (width >= 40rem) {
      row-gap: calc(var(--spacing) * 0);
    }
  }
  .sm\:gap-y-2 {
    @media (width >= 40rem) {
      row-gap: calc(var(--spacing) * 2);
    }
  }
  .sm\:gap-y-4 {
    @media (width >= 40rem) {
      row-gap: calc(var(--spacing) * 4);
    }
  }
  .sm\:gap-y-6 {
    @media (width >= 40rem) {
      row-gap: calc(var(--spacing) * 6);
    }
  }
  .sm\:gap-y-8 {
    @media (width >= 40rem) {
      row-gap: calc(var(--spacing) * 8);
    }
  }
  .sm\:gap-y-12 {
    @media (width >= 40rem) {
      row-gap: calc(var(--spacing) * 12);
    }
  }
  .sm\:gap-y-16 {
    @media (width >= 40rem) {
      row-gap: calc(var(--spacing) * 16);
    }
  }
  .sm\:gap-y-20 {
    @media (width >= 40rem) {
      row-gap: calc(var(--spacing) * 20);
    }
  }
  .sm\:px-0 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 0);
    }
  }
  .sm\:px-2 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .sm\:px-4 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:px-8 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .sm\:px-12 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 12);
    }
  }
  .sm\:px-16 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 16);
    }
  }
  .sm\:px-20 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 20);
    }
  }
  .sm\:py-0 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 0);
    }
  }
  .sm\:py-2 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .sm\:py-4 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 4);
    }
  }
  .sm\:py-6 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 6);
    }
  }
  .sm\:py-8 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 8);
    }
  }
  .sm\:py-12 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 12);
    }
  }
  .sm\:py-16 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 16);
    }
  }
  .sm\:py-20 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 20);
    }
  }
  .sm\:ps-0 {
    @media (width >= 40rem) {
      padding-inline-start: calc(var(--spacing) * 0);
    }
  }
  .sm\:ps-2 {
    @media (width >= 40rem) {
      padding-inline-start: calc(var(--spacing) * 2);
    }
  }
  .sm\:ps-4 {
    @media (width >= 40rem) {
      padding-inline-start: calc(var(--spacing) * 4);
    }
  }
  .sm\:ps-6 {
    @media (width >= 40rem) {
      padding-inline-start: calc(var(--spacing) * 6);
    }
  }
  .sm\:ps-8 {
    @media (width >= 40rem) {
      padding-inline-start: calc(var(--spacing) * 8);
    }
  }
  .sm\:ps-12 {
    @media (width >= 40rem) {
      padding-inline-start: calc(var(--spacing) * 12);
    }
  }
  .sm\:ps-16 {
    @media (width >= 40rem) {
      padding-inline-start: calc(var(--spacing) * 16);
    }
  }
  .sm\:ps-20 {
    @media (width >= 40rem) {
      padding-inline-start: calc(var(--spacing) * 20);
    }
  }
  .sm\:pe-0 {
    @media (width >= 40rem) {
      padding-inline-end: calc(var(--spacing) * 0);
    }
  }
  .sm\:pe-2 {
    @media (width >= 40rem) {
      padding-inline-end: calc(var(--spacing) * 2);
    }
  }
  .sm\:pe-4 {
    @media (width >= 40rem) {
      padding-inline-end: calc(var(--spacing) * 4);
    }
  }
  .sm\:pe-6 {
    @media (width >= 40rem) {
      padding-inline-end: calc(var(--spacing) * 6);
    }
  }
  .sm\:pe-8 {
    @media (width >= 40rem) {
      padding-inline-end: calc(var(--spacing) * 8);
    }
  }
  .sm\:pe-12 {
    @media (width >= 40rem) {
      padding-inline-end: calc(var(--spacing) * 12);
    }
  }
  .sm\:pe-16 {
    @media (width >= 40rem) {
      padding-inline-end: calc(var(--spacing) * 16);
    }
  }
  .sm\:pe-20 {
    @media (width >= 40rem) {
      padding-inline-end: calc(var(--spacing) * 20);
    }
  }
  .sm\:pbs-0 {
    @media (width >= 40rem) {
      padding-block-start: calc(var(--spacing) * 0);
    }
  }
  .sm\:pbs-2 {
    @media (width >= 40rem) {
      padding-block-start: calc(var(--spacing) * 2);
    }
  }
  .sm\:pbs-4 {
    @media (width >= 40rem) {
      padding-block-start: calc(var(--spacing) * 4);
    }
  }
  .sm\:pbs-6 {
    @media (width >= 40rem) {
      padding-block-start: calc(var(--spacing) * 6);
    }
  }
  .sm\:pbs-8 {
    @media (width >= 40rem) {
      padding-block-start: calc(var(--spacing) * 8);
    }
  }
  .sm\:pbs-12 {
    @media (width >= 40rem) {
      padding-block-start: calc(var(--spacing) * 12);
    }
  }
  .sm\:pbs-16 {
    @media (width >= 40rem) {
      padding-block-start: calc(var(--spacing) * 16);
    }
  }
  .sm\:pbs-20 {
    @media (width >= 40rem) {
      padding-block-start: calc(var(--spacing) * 20);
    }
  }
  .sm\:pbe-0 {
    @media (width >= 40rem) {
      padding-block-end: calc(var(--spacing) * 0);
    }
  }
  .sm\:pbe-2 {
    @media (width >= 40rem) {
      padding-block-end: calc(var(--spacing) * 2);
    }
  }
  .sm\:pbe-4 {
    @media (width >= 40rem) {
      padding-block-end: calc(var(--spacing) * 4);
    }
  }
  .sm\:pbe-6 {
    @media (width >= 40rem) {
      padding-block-end: calc(var(--spacing) * 6);
    }
  }
  .sm\:pbe-8 {
    @media (width >= 40rem) {
      padding-block-end: calc(var(--spacing) * 8);
    }
  }
  .sm\:pbe-12 {
    @media (width >= 40rem) {
      padding-block-end: calc(var(--spacing) * 12);
    }
  }
  .sm\:pbe-16 {
    @media (width >= 40rem) {
      padding-block-end: calc(var(--spacing) * 16);
    }
  }
  .sm\:pbe-20 {
    @media (width >= 40rem) {
      padding-block-end: calc(var(--spacing) * 20);
    }
  }
  .md\:mx-0 {
    @media (width >= 48rem) {
      margin-inline: calc(var(--spacing) * 0);
    }
  }
  .md\:mx-2 {
    @media (width >= 48rem) {
      margin-inline: calc(var(--spacing) * 2);
    }
  }
  .md\:mx-4 {
    @media (width >= 48rem) {
      margin-inline: calc(var(--spacing) * 4);
    }
  }
  .md\:mx-6 {
    @media (width >= 48rem) {
      margin-inline: calc(var(--spacing) * 6);
    }
  }
  .md\:mx-8 {
    @media (width >= 48rem) {
      margin-inline: calc(var(--spacing) * 8);
    }
  }
  .md\:mx-12 {
    @media (width >= 48rem) {
      margin-inline: calc(var(--spacing) * 12);
    }
  }
  .md\:mx-16 {
    @media (width >= 48rem) {
      margin-inline: calc(var(--spacing) * 16);
    }
  }
  .md\:mx-20 {
    @media (width >= 48rem) {
      margin-inline: calc(var(--spacing) * 20);
    }
  }
  .md\:mx-auto {
    @media (width >= 48rem) {
      margin-inline: auto;
    }
  }
  .md\:my-0 {
    @media (width >= 48rem) {
      margin-block: calc(var(--spacing) * 0);
    }
  }
  .md\:my-2 {
    @media (width >= 48rem) {
      margin-block: calc(var(--spacing) * 2);
    }
  }
  .md\:my-4 {
    @media (width >= 48rem) {
      margin-block: calc(var(--spacing) * 4);
    }
  }
  .md\:my-6 {
    @media (width >= 48rem) {
      margin-block: calc(var(--spacing) * 6);
    }
  }
  .md\:my-8 {
    @media (width >= 48rem) {
      margin-block: calc(var(--spacing) * 8);
    }
  }
  .md\:my-12 {
    @media (width >= 48rem) {
      margin-block: calc(var(--spacing) * 12);
    }
  }
  .md\:my-16 {
    @media (width >= 48rem) {
      margin-block: calc(var(--spacing) * 16);
    }
  }
  .md\:my-20 {
    @media (width >= 48rem) {
      margin-block: calc(var(--spacing) * 20);
    }
  }
  .md\:ms-0 {
    @media (width >= 48rem) {
      margin-inline-start: calc(var(--spacing) * 0);
    }
  }
  .md\:ms-2 {
    @media (width >= 48rem) {
      margin-inline-start: calc(var(--spacing) * 2);
    }
  }
  .md\:ms-4 {
    @media (width >= 48rem) {
      margin-inline-start: calc(var(--spacing) * 4);
    }
  }
  .md\:ms-6 {
    @media (width >= 48rem) {
      margin-inline-start: calc(var(--spacing) * 6);
    }
  }
  .md\:ms-8 {
    @media (width >= 48rem) {
      margin-inline-start: calc(var(--spacing) * 8);
    }
  }
  .md\:ms-12 {
    @media (width >= 48rem) {
      margin-inline-start: calc(var(--spacing) * 12);
    }
  }
  .md\:ms-16 {
    @media (width >= 48rem) {
      margin-inline-start: calc(var(--spacing) * 16);
    }
  }
  .md\:ms-20 {
    @media (width >= 48rem) {
      margin-inline-start: calc(var(--spacing) * 20);
    }
  }
  .md\:ms-auto {
    @media (width >= 48rem) {
      margin-inline-start: auto;
    }
  }
  .md\:me-4 {
    @media (width >= 48rem) {
      margin-inline-end: calc(var(--spacing) * 4);
    }
  }
  .md\:me-6 {
    @media (width >= 48rem) {
      margin-inline-end: calc(var(--spacing) * 6);
    }
  }
  .md\:me-8 {
    @media (width >= 48rem) {
      margin-inline-end: calc(var(--spacing) * 8);
    }
  }
  .md\:me-12 {
    @media (width >= 48rem) {
      margin-inline-end: calc(var(--spacing) * 12);
    }
  }
  .md\:me-16 {
    @media (width >= 48rem) {
      margin-inline-end: calc(var(--spacing) * 16);
    }
  }
  .md\:me-20 {
    @media (width >= 48rem) {
      margin-inline-end: calc(var(--spacing) * 20);
    }
  }
  .md\:me-auto {
    @media (width >= 48rem) {
      margin-inline-end: auto;
    }
  }
  .md\:mbs-0 {
    @media (width >= 48rem) {
      margin-block-start: calc(var(--spacing) * 0);
    }
  }
  .md\:mbs-2 {
    @media (width >= 48rem) {
      margin-block-start: calc(var(--spacing) * 2);
    }
  }
  .md\:mbs-4 {
    @media (width >= 48rem) {
      margin-block-start: calc(var(--spacing) * 4);
    }
  }
  .md\:mbs-6 {
    @media (width >= 48rem) {
      margin-block-start: calc(var(--spacing) * 6);
    }
  }
  .md\:mbs-8 {
    @media (width >= 48rem) {
      margin-block-start: calc(var(--spacing) * 8);
    }
  }
  .md\:mbs-12 {
    @media (width >= 48rem) {
      margin-block-start: calc(var(--spacing) * 12);
    }
  }
  .md\:mbs-16 {
    @media (width >= 48rem) {
      margin-block-start: calc(var(--spacing) * 16);
    }
  }
  .md\:mbs-20 {
    @media (width >= 48rem) {
      margin-block-start: calc(var(--spacing) * 20);
    }
  }
  .md\:mbe-0 {
    @media (width >= 48rem) {
      margin-block-end: calc(var(--spacing) * 0);
    }
  }
  .md\:mbe-2 {
    @media (width >= 48rem) {
      margin-block-end: calc(var(--spacing) * 2);
    }
  }
  .md\:mbe-4 {
    @media (width >= 48rem) {
      margin-block-end: calc(var(--spacing) * 4);
    }
  }
  .md\:mbe-6 {
    @media (width >= 48rem) {
      margin-block-end: calc(var(--spacing) * 6);
    }
  }
  .md\:mbe-8 {
    @media (width >= 48rem) {
      margin-block-end: calc(var(--spacing) * 8);
    }
  }
  .md\:mbe-12 {
    @media (width >= 48rem) {
      margin-block-end: calc(var(--spacing) * 12);
    }
  }
  .md\:mbe-16 {
    @media (width >= 48rem) {
      margin-block-end: calc(var(--spacing) * 16);
    }
  }
  .md\:mbe-20 {
    @media (width >= 48rem) {
      margin-block-end: calc(var(--spacing) * 20);
    }
  }
  .md\:w-auto {
    @media (width >= 48rem) {
      width: auto;
    }
  }
  .md\:w-fit {
    @media (width >= 48rem) {
      width: fit-content;
    }
  }
  .md\:w-full {
    @media (width >= 48rem) {
      width: 100%;
    }
  }
  .md\:w-max {
    @media (width >= 48rem) {
      width: max-content;
    }
  }
  .md\:w-min {
    @media (width >= 48rem) {
      width: min-content;
    }
  }
  .md\:flex-col {
    @media (width >= 48rem) {
      flex-direction: column;
    }
  }
  .md\:flex-col-reverse {
    @media (width >= 48rem) {
      flex-direction: column-reverse;
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:flex-row-reverse {
    @media (width >= 48rem) {
      flex-direction: row-reverse;
    }
  }
  .md\:items-baseline {
    @media (width >= 48rem) {
      align-items: baseline;
    }
  }
  .md\:items-center {
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .md\:items-end {
    @media (width >= 48rem) {
      align-items: flex-end;
    }
  }
  .md\:items-start {
    @media (width >= 48rem) {
      align-items: flex-start;
    }
  }
  .md\:justify-around {
    @media (width >= 48rem) {
      justify-content: space-around;
    }
  }
  .md\:justify-between {
    @media (width >= 48rem) {
      justify-content: space-between;
    }
  }
  .md\:justify-center {
    @media (width >= 48rem) {
      justify-content: center;
    }
  }
  .md\:justify-end {
    @media (width >= 48rem) {
      justify-content: flex-end;
    }
  }
  .md\:justify-evenly {
    @media (width >= 48rem) {
      justify-content: space-evenly;
    }
  }
  .md\:justify-start {
    @media (width >= 48rem) {
      justify-content: flex-start;
    }
  }
  .md\:gap-0 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 0);
    }
  }
  .md\:gap-2 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .md\:gap-4 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .md\:gap-6 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .md\:gap-8 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .md\:gap-12 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 12);
    }
  }
  .md\:gap-16 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .md\:gap-20 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 20);
    }
  }
  .md\:gap-x-0 {
    @media (width >= 48rem) {
      column-gap: calc(var(--spacing) * 0);
    }
  }
  .md\:gap-x-2 {
    @media (width >= 48rem) {
      column-gap: calc(var(--spacing) * 2);
    }
  }
  .md\:gap-x-4 {
    @media (width >= 48rem) {
      column-gap: calc(var(--spacing) * 4);
    }
  }
  .md\:gap-x-6 {
    @media (width >= 48rem) {
      column-gap: calc(var(--spacing) * 6);
    }
  }
  .md\:gap-x-8 {
    @media (width >= 48rem) {
      column-gap: calc(var(--spacing) * 8);
    }
  }
  .md\:gap-x-12 {
    @media (width >= 48rem) {
      column-gap: calc(var(--spacing) * 12);
    }
  }
  .md\:gap-x-16 {
    @media (width >= 48rem) {
      column-gap: calc(var(--spacing) * 16);
    }
  }
  .md\:gap-x-20 {
    @media (width >= 48rem) {
      column-gap: calc(var(--spacing) * 20);
    }
  }
  .md\:gap-y-0 {
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 0);
    }
  }
  .md\:gap-y-2 {
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 2);
    }
  }
  .md\:gap-y-4 {
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 4);
    }
  }
  .md\:gap-y-6 {
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 6);
    }
  }
  .md\:gap-y-8 {
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 8);
    }
  }
  .md\:gap-y-12 {
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 12);
    }
  }
  .md\:gap-y-16 {
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 16);
    }
  }
  .md\:gap-y-20 {
    @media (width >= 48rem) {
      row-gap: calc(var(--spacing) * 20);
    }
  }
  .md\:px-0 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 0);
    }
  }
  .md\:px-2 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .md\:px-4 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .md\:px-6 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .md\:px-8 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .md\:px-12 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 12);
    }
  }
  .md\:px-16 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 16);
    }
  }
  .md\:px-20 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 20);
    }
  }
  .md\:py-0 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 0);
    }
  }
  .md\:py-2 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .md\:py-4 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 4);
    }
  }
  .md\:py-6 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 6);
    }
  }
  .md\:py-8 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 8);
    }
  }
  .md\:py-12 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 12);
    }
  }
  .md\:py-16 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 16);
    }
  }
  .md\:py-20 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 20);
    }
  }
  .md\:ps-0 {
    @media (width >= 48rem) {
      padding-inline-start: calc(var(--spacing) * 0);
    }
  }
  .md\:ps-2 {
    @media (width >= 48rem) {
      padding-inline-start: calc(var(--spacing) * 2);
    }
  }
  .md\:ps-4 {
    @media (width >= 48rem) {
      padding-inline-start: calc(var(--spacing) * 4);
    }
  }
  .md\:ps-6 {
    @media (width >= 48rem) {
      padding-inline-start: calc(var(--spacing) * 6);
    }
  }
  .md\:ps-8 {
    @media (width >= 48rem) {
      padding-inline-start: calc(var(--spacing) * 8);
    }
  }
  .md\:ps-12 {
    @media (width >= 48rem) {
      padding-inline-start: calc(var(--spacing) * 12);
    }
  }
  .md\:ps-16 {
    @media (width >= 48rem) {
      padding-inline-start: calc(var(--spacing) * 16);
    }
  }
  .md\:ps-20 {
    @media (width >= 48rem) {
      padding-inline-start: calc(var(--spacing) * 20);
    }
  }
  .md\:pe-0 {
    @media (width >= 48rem) {
      padding-inline-end: calc(var(--spacing) * 0);
    }
  }
  .md\:pe-2 {
    @media (width >= 48rem) {
      padding-inline-end: calc(var(--spacing) * 2);
    }
  }
  .md\:pe-4 {
    @media (width >= 48rem) {
      padding-inline-end: calc(var(--spacing) * 4);
    }
  }
  .md\:pe-6 {
    @media (width >= 48rem) {
      padding-inline-end: calc(var(--spacing) * 6);
    }
  }
  .md\:pe-8 {
    @media (width >= 48rem) {
      padding-inline-end: calc(var(--spacing) * 8);
    }
  }
  .md\:pe-12 {
    @media (width >= 48rem) {
      padding-inline-end: calc(var(--spacing) * 12);
    }
  }
  .md\:pe-16 {
    @media (width >= 48rem) {
      padding-inline-end: calc(var(--spacing) * 16);
    }
  }
  .md\:pe-20 {
    @media (width >= 48rem) {
      padding-inline-end: calc(var(--spacing) * 20);
    }
  }
  .md\:pbs-0 {
    @media (width >= 48rem) {
      padding-block-start: calc(var(--spacing) * 0);
    }
  }
  .md\:pbs-2 {
    @media (width >= 48rem) {
      padding-block-start: calc(var(--spacing) * 2);
    }
  }
  .md\:pbs-4 {
    @media (width >= 48rem) {
      padding-block-start: calc(var(--spacing) * 4);
    }
  }
  .md\:pbs-6 {
    @media (width >= 48rem) {
      padding-block-start: calc(var(--spacing) * 6);
    }
  }
  .md\:pbs-8 {
    @media (width >= 48rem) {
      padding-block-start: calc(var(--spacing) * 8);
    }
  }
  .md\:pbs-12 {
    @media (width >= 48rem) {
      padding-block-start: calc(var(--spacing) * 12);
    }
  }
  .md\:pbs-16 {
    @media (width >= 48rem) {
      padding-block-start: calc(var(--spacing) * 16);
    }
  }
  .md\:pbs-20 {
    @media (width >= 48rem) {
      padding-block-start: calc(var(--spacing) * 20);
    }
  }
  .md\:pbe-0 {
    @media (width >= 48rem) {
      padding-block-end: calc(var(--spacing) * 0);
    }
  }
  .md\:pbe-2 {
    @media (width >= 48rem) {
      padding-block-end: calc(var(--spacing) * 2);
    }
  }
  .md\:pbe-4 {
    @media (width >= 48rem) {
      padding-block-end: calc(var(--spacing) * 4);
    }
  }
  .md\:pbe-6 {
    @media (width >= 48rem) {
      padding-block-end: calc(var(--spacing) * 6);
    }
  }
  .md\:pbe-8 {
    @media (width >= 48rem) {
      padding-block-end: calc(var(--spacing) * 8);
    }
  }
  .md\:pbe-12 {
    @media (width >= 48rem) {
      padding-block-end: calc(var(--spacing) * 12);
    }
  }
  .md\:pbe-16 {
    @media (width >= 48rem) {
      padding-block-end: calc(var(--spacing) * 16);
    }
  }
  .md\:pbe-20 {
    @media (width >= 48rem) {
      padding-block-end: calc(var(--spacing) * 20);
    }
  }
  .lg\:mx-0 {
    @media (width >= 64rem) {
      margin-inline: calc(var(--spacing) * 0);
    }
  }
  .lg\:mx-2 {
    @media (width >= 64rem) {
      margin-inline: calc(var(--spacing) * 2);
    }
  }
  .lg\:mx-4 {
    @media (width >= 64rem) {
      margin-inline: calc(var(--spacing) * 4);
    }
  }
  .lg\:mx-6 {
    @media (width >= 64rem) {
      margin-inline: calc(var(--spacing) * 6);
    }
  }
  .lg\:mx-8 {
    @media (width >= 64rem) {
      margin-inline: calc(var(--spacing) * 8);
    }
  }
  .lg\:mx-12 {
    @media (width >= 64rem) {
      margin-inline: calc(var(--spacing) * 12);
    }
  }
  .lg\:mx-16 {
    @media (width >= 64rem) {
      margin-inline: calc(var(--spacing) * 16);
    }
  }
  .lg\:mx-20 {
    @media (width >= 64rem) {
      margin-inline: calc(var(--spacing) * 20);
    }
  }
  .lg\:mx-auto {
    @media (width >= 64rem) {
      margin-inline: auto;
    }
  }
  .lg\:my-0 {
    @media (width >= 64rem) {
      margin-block: calc(var(--spacing) * 0);
    }
  }
  .lg\:my-2 {
    @media (width >= 64rem) {
      margin-block: calc(var(--spacing) * 2);
    }
  }
  .lg\:my-4 {
    @media (width >= 64rem) {
      margin-block: calc(var(--spacing) * 4);
    }
  }
  .lg\:my-6 {
    @media (width >= 64rem) {
      margin-block: calc(var(--spacing) * 6);
    }
  }
  .lg\:my-8 {
    @media (width >= 64rem) {
      margin-block: calc(var(--spacing) * 8);
    }
  }
  .lg\:my-12 {
    @media (width >= 64rem) {
      margin-block: calc(var(--spacing) * 12);
    }
  }
  .lg\:my-16 {
    @media (width >= 64rem) {
      margin-block: calc(var(--spacing) * 16);
    }
  }
  .lg\:my-20 {
    @media (width >= 64rem) {
      margin-block: calc(var(--spacing) * 20);
    }
  }
  .lg\:ms-0 {
    @media (width >= 64rem) {
      margin-inline-start: calc(var(--spacing) * 0);
    }
  }
  .lg\:ms-2 {
    @media (width >= 64rem) {
      margin-inline-start: calc(var(--spacing) * 2);
    }
  }
  .lg\:ms-4 {
    @media (width >= 64rem) {
      margin-inline-start: calc(var(--spacing) * 4);
    }
  }
  .lg\:ms-6 {
    @media (width >= 64rem) {
      margin-inline-start: calc(var(--spacing) * 6);
    }
  }
  .lg\:ms-8 {
    @media (width >= 64rem) {
      margin-inline-start: calc(var(--spacing) * 8);
    }
  }
  .lg\:ms-12 {
    @media (width >= 64rem) {
      margin-inline-start: calc(var(--spacing) * 12);
    }
  }
  .lg\:ms-16 {
    @media (width >= 64rem) {
      margin-inline-start: calc(var(--spacing) * 16);
    }
  }
  .lg\:ms-20 {
    @media (width >= 64rem) {
      margin-inline-start: calc(var(--spacing) * 20);
    }
  }
  .lg\:ms-auto {
    @media (width >= 64rem) {
      margin-inline-start: auto;
    }
  }
  .lg\:me-4 {
    @media (width >= 64rem) {
      margin-inline-end: calc(var(--spacing) * 4);
    }
  }
  .lg\:me-6 {
    @media (width >= 64rem) {
      margin-inline-end: calc(var(--spacing) * 6);
    }
  }
  .lg\:me-8 {
    @media (width >= 64rem) {
      margin-inline-end: calc(var(--spacing) * 8);
    }
  }
  .lg\:me-12 {
    @media (width >= 64rem) {
      margin-inline-end: calc(var(--spacing) * 12);
    }
  }
  .lg\:me-16 {
    @media (width >= 64rem) {
      margin-inline-end: calc(var(--spacing) * 16);
    }
  }
  .lg\:me-20 {
    @media (width >= 64rem) {
      margin-inline-end: calc(var(--spacing) * 20);
    }
  }
  .lg\:me-auto {
    @media (width >= 64rem) {
      margin-inline-end: auto;
    }
  }
  .lg\:mbs-0 {
    @media (width >= 64rem) {
      margin-block-start: calc(var(--spacing) * 0);
    }
  }
  .lg\:mbs-2 {
    @media (width >= 64rem) {
      margin-block-start: calc(var(--spacing) * 2);
    }
  }
  .lg\:mbs-4 {
    @media (width >= 64rem) {
      margin-block-start: calc(var(--spacing) * 4);
    }
  }
  .lg\:mbs-6 {
    @media (width >= 64rem) {
      margin-block-start: calc(var(--spacing) * 6);
    }
  }
  .lg\:mbs-8 {
    @media (width >= 64rem) {
      margin-block-start: calc(var(--spacing) * 8);
    }
  }
  .lg\:mbs-12 {
    @media (width >= 64rem) {
      margin-block-start: calc(var(--spacing) * 12);
    }
  }
  .lg\:mbs-16 {
    @media (width >= 64rem) {
      margin-block-start: calc(var(--spacing) * 16);
    }
  }
  .lg\:mbs-20 {
    @media (width >= 64rem) {
      margin-block-start: calc(var(--spacing) * 20);
    }
  }
  .lg\:mbe-0 {
    @media (width >= 64rem) {
      margin-block-end: calc(var(--spacing) * 0);
    }
  }
  .lg\:mbe-2 {
    @media (width >= 64rem) {
      margin-block-end: calc(var(--spacing) * 2);
    }
  }
  .lg\:mbe-4 {
    @media (width >= 64rem) {
      margin-block-end: calc(var(--spacing) * 4);
    }
  }
  .lg\:mbe-6 {
    @media (width >= 64rem) {
      margin-block-end: calc(var(--spacing) * 6);
    }
  }
  .lg\:mbe-8 {
    @media (width >= 64rem) {
      margin-block-end: calc(var(--spacing) * 8);
    }
  }
  .lg\:mbe-12 {
    @media (width >= 64rem) {
      margin-block-end: calc(var(--spacing) * 12);
    }
  }
  .lg\:mbe-16 {
    @media (width >= 64rem) {
      margin-block-end: calc(var(--spacing) * 16);
    }
  }
  .lg\:mbe-20 {
    @media (width >= 64rem) {
      margin-block-end: calc(var(--spacing) * 20);
    }
  }
  .lg\:w-auto {
    @media (width >= 64rem) {
      width: auto;
    }
  }
  .lg\:w-fit {
    @media (width >= 64rem) {
      width: fit-content;
    }
  }
  .lg\:w-full {
    @media (width >= 64rem) {
      width: 100%;
    }
  }
  .lg\:w-max {
    @media (width >= 64rem) {
      width: max-content;
    }
  }
  .lg\:w-min {
    @media (width >= 64rem) {
      width: min-content;
    }
  }
  .lg\:max-w-1\/2 {
    @media (width >= 64rem) {
      max-width: calc(1 / 2 * 100%);
    }
  }
  .lg\:max-w-1\/3 {
    @media (width >= 64rem) {
      max-width: calc(1 / 3 * 100%);
    }
  }
  .lg\:max-w-1\/4 {
    @media (width >= 64rem) {
      max-width: calc(1 / 4 * 100%);
    }
  }
  .lg\:max-w-2\/3 {
    @media (width >= 64rem) {
      max-width: calc(2 / 3 * 100%);
    }
  }
  .lg\:max-w-3\/4 {
    @media (width >= 64rem) {
      max-width: calc(3 / 4 * 100%);
    }
  }
  .lg\:max-w-9\/10 {
    @media (width >= 64rem) {
      max-width: calc(9 / 10 * 100%);
    }
  }
  .lg\:max-w-full {
    @media (width >= 64rem) {
      max-width: 100%;
    }
  }
  .lg\:flex-col {
    @media (width >= 64rem) {
      flex-direction: column;
    }
  }
  .lg\:flex-col-reverse {
    @media (width >= 64rem) {
      flex-direction: column-reverse;
    }
  }
  .lg\:flex-row {
    @media (width >= 64rem) {
      flex-direction: row;
    }
  }
  .lg\:flex-row-reverse {
    @media (width >= 64rem) {
      flex-direction: row-reverse;
    }
  }
  .lg\:items-baseline {
    @media (width >= 64rem) {
      align-items: baseline;
    }
  }
  .lg\:items-center {
    @media (width >= 64rem) {
      align-items: center;
    }
  }
  .lg\:items-end {
    @media (width >= 64rem) {
      align-items: flex-end;
    }
  }
  .lg\:items-start {
    @media (width >= 64rem) {
      align-items: flex-start;
    }
  }
  .lg\:justify-around {
    @media (width >= 64rem) {
      justify-content: space-around;
    }
  }
  .lg\:justify-between {
    @media (width >= 64rem) {
      justify-content: space-between;
    }
  }
  .lg\:justify-center {
    @media (width >= 64rem) {
      justify-content: center;
    }
  }
  .lg\:justify-end {
    @media (width >= 64rem) {
      justify-content: flex-end;
    }
  }
  .lg\:justify-evenly {
    @media (width >= 64rem) {
      justify-content: space-evenly;
    }
  }
  .lg\:justify-start {
    @media (width >= 64rem) {
      justify-content: flex-start;
    }
  }
  .lg\:gap-0 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 0);
    }
  }
  .lg\:gap-2 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .lg\:gap-4 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .lg\:gap-6 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .lg\:gap-8 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .lg\:gap-12 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 12);
    }
  }
  .lg\:gap-16 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .lg\:gap-20 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 20);
    }
  }
  .lg\:gap-x-0 {
    @media (width >= 64rem) {
      column-gap: calc(var(--spacing) * 0);
    }
  }
  .lg\:gap-x-2 {
    @media (width >= 64rem) {
      column-gap: calc(var(--spacing) * 2);
    }
  }
  .lg\:gap-x-4 {
    @media (width >= 64rem) {
      column-gap: calc(var(--spacing) * 4);
    }
  }
  .lg\:gap-x-6 {
    @media (width >= 64rem) {
      column-gap: calc(var(--spacing) * 6);
    }
  }
  .lg\:gap-x-8 {
    @media (width >= 64rem) {
      column-gap: calc(var(--spacing) * 8);
    }
  }
  .lg\:gap-x-12 {
    @media (width >= 64rem) {
      column-gap: calc(var(--spacing) * 12);
    }
  }
  .lg\:gap-x-16 {
    @media (width >= 64rem) {
      column-gap: calc(var(--spacing) * 16);
    }
  }
  .lg\:gap-x-20 {
    @media (width >= 64rem) {
      column-gap: calc(var(--spacing) * 20);
    }
  }
  .lg\:gap-y-0 {
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 0);
    }
  }
  .lg\:gap-y-2 {
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 2);
    }
  }
  .lg\:gap-y-4 {
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 4);
    }
  }
  .lg\:gap-y-6 {
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 6);
    }
  }
  .lg\:gap-y-8 {
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 8);
    }
  }
  .lg\:gap-y-12 {
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 12);
    }
  }
  .lg\:gap-y-16 {
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 16);
    }
  }
  .lg\:gap-y-20 {
    @media (width >= 64rem) {
      row-gap: calc(var(--spacing) * 20);
    }
  }
  .lg\:px-0 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 0);
    }
  }
  .lg\:px-2 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .lg\:px-4 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .lg\:px-6 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .lg\:px-8 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .lg\:px-12 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 12);
    }
  }
  .lg\:px-16 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 16);
    }
  }
  .lg\:px-20 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 20);
    }
  }
  .lg\:py-0 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 0);
    }
  }
  .lg\:py-2 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .lg\:py-4 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 4);
    }
  }
  .lg\:py-6 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 6);
    }
  }
  .lg\:py-8 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 8);
    }
  }
  .lg\:py-12 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 12);
    }
  }
  .lg\:py-16 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 16);
    }
  }
  .lg\:py-20 {
    @media (width >= 64rem) {
      padding-block: calc(var(--spacing) * 20);
    }
  }
  .lg\:ps-0 {
    @media (width >= 64rem) {
      padding-inline-start: calc(var(--spacing) * 0);
    }
  }
  .lg\:ps-2 {
    @media (width >= 64rem) {
      padding-inline-start: calc(var(--spacing) * 2);
    }
  }
  .lg\:ps-4 {
    @media (width >= 64rem) {
      padding-inline-start: calc(var(--spacing) * 4);
    }
  }
  .lg\:ps-6 {
    @media (width >= 64rem) {
      padding-inline-start: calc(var(--spacing) * 6);
    }
  }
  .lg\:ps-8 {
    @media (width >= 64rem) {
      padding-inline-start: calc(var(--spacing) * 8);
    }
  }
  .lg\:ps-12 {
    @media (width >= 64rem) {
      padding-inline-start: calc(var(--spacing) * 12);
    }
  }
  .lg\:ps-16 {
    @media (width >= 64rem) {
      padding-inline-start: calc(var(--spacing) * 16);
    }
  }
  .lg\:ps-20 {
    @media (width >= 64rem) {
      padding-inline-start: calc(var(--spacing) * 20);
    }
  }
  .lg\:pe-0 {
    @media (width >= 64rem) {
      padding-inline-end: calc(var(--spacing) * 0);
    }
  }
  .lg\:pe-2 {
    @media (width >= 64rem) {
      padding-inline-end: calc(var(--spacing) * 2);
    }
  }
  .lg\:pe-4 {
    @media (width >= 64rem) {
      padding-inline-end: calc(var(--spacing) * 4);
    }
  }
  .lg\:pe-6 {
    @media (width >= 64rem) {
      padding-inline-end: calc(var(--spacing) * 6);
    }
  }
  .lg\:pe-8 {
    @media (width >= 64rem) {
      padding-inline-end: calc(var(--spacing) * 8);
    }
  }
  .lg\:pe-12 {
    @media (width >= 64rem) {
      padding-inline-end: calc(var(--spacing) * 12);
    }
  }
  .lg\:pe-16 {
    @media (width >= 64rem) {
      padding-inline-end: calc(var(--spacing) * 16);
    }
  }
  .lg\:pe-20 {
    @media (width >= 64rem) {
      padding-inline-end: calc(var(--spacing) * 20);
    }
  }
  .lg\:pbs-0 {
    @media (width >= 64rem) {
      padding-block-start: calc(var(--spacing) * 0);
    }
  }
  .lg\:pbs-2 {
    @media (width >= 64rem) {
      padding-block-start: calc(var(--spacing) * 2);
    }
  }
  .lg\:pbs-4 {
    @media (width >= 64rem) {
      padding-block-start: calc(var(--spacing) * 4);
    }
  }
  .lg\:pbs-6 {
    @media (width >= 64rem) {
      padding-block-start: calc(var(--spacing) * 6);
    }
  }
  .lg\:pbs-8 {
    @media (width >= 64rem) {
      padding-block-start: calc(var(--spacing) * 8);
    }
  }
  .lg\:pbs-12 {
    @media (width >= 64rem) {
      padding-block-start: calc(var(--spacing) * 12);
    }
  }
  .lg\:pbs-16 {
    @media (width >= 64rem) {
      padding-block-start: calc(var(--spacing) * 16);
    }
  }
  .lg\:pbs-20 {
    @media (width >= 64rem) {
      padding-block-start: calc(var(--spacing) * 20);
    }
  }
  .lg\:pbe-0 {
    @media (width >= 64rem) {
      padding-block-end: calc(var(--spacing) * 0);
    }
  }
  .lg\:pbe-2 {
    @media (width >= 64rem) {
      padding-block-end: calc(var(--spacing) * 2);
    }
  }
  .lg\:pbe-4 {
    @media (width >= 64rem) {
      padding-block-end: calc(var(--spacing) * 4);
    }
  }
  .lg\:pbe-6 {
    @media (width >= 64rem) {
      padding-block-end: calc(var(--spacing) * 6);
    }
  }
  .lg\:pbe-8 {
    @media (width >= 64rem) {
      padding-block-end: calc(var(--spacing) * 8);
    }
  }
  .lg\:pbe-12 {
    @media (width >= 64rem) {
      padding-block-end: calc(var(--spacing) * 12);
    }
  }
  .lg\:pbe-16 {
    @media (width >= 64rem) {
      padding-block-end: calc(var(--spacing) * 16);
    }
  }
  .lg\:pbe-20 {
    @media (width >= 64rem) {
      padding-block-end: calc(var(--spacing) * 20);
    }
  }
  .xl\:mx-0 {
    @media (width >= 80rem) {
      margin-inline: calc(var(--spacing) * 0);
    }
  }
  .xl\:mx-2 {
    @media (width >= 80rem) {
      margin-inline: calc(var(--spacing) * 2);
    }
  }
  .xl\:mx-4 {
    @media (width >= 80rem) {
      margin-inline: calc(var(--spacing) * 4);
    }
  }
  .xl\:mx-6 {
    @media (width >= 80rem) {
      margin-inline: calc(var(--spacing) * 6);
    }
  }
  .xl\:mx-8 {
    @media (width >= 80rem) {
      margin-inline: calc(var(--spacing) * 8);
    }
  }
  .xl\:mx-12 {
    @media (width >= 80rem) {
      margin-inline: calc(var(--spacing) * 12);
    }
  }
  .xl\:mx-16 {
    @media (width >= 80rem) {
      margin-inline: calc(var(--spacing) * 16);
    }
  }
  .xl\:mx-20 {
    @media (width >= 80rem) {
      margin-inline: calc(var(--spacing) * 20);
    }
  }
  .xl\:mx-auto {
    @media (width >= 80rem) {
      margin-inline: auto;
    }
  }
  .xl\:my-0 {
    @media (width >= 80rem) {
      margin-block: calc(var(--spacing) * 0);
    }
  }
  .xl\:my-2 {
    @media (width >= 80rem) {
      margin-block: calc(var(--spacing) * 2);
    }
  }
  .xl\:my-4 {
    @media (width >= 80rem) {
      margin-block: calc(var(--spacing) * 4);
    }
  }
  .xl\:my-6 {
    @media (width >= 80rem) {
      margin-block: calc(var(--spacing) * 6);
    }
  }
  .xl\:my-8 {
    @media (width >= 80rem) {
      margin-block: calc(var(--spacing) * 8);
    }
  }
  .xl\:my-12 {
    @media (width >= 80rem) {
      margin-block: calc(var(--spacing) * 12);
    }
  }
  .xl\:my-16 {
    @media (width >= 80rem) {
      margin-block: calc(var(--spacing) * 16);
    }
  }
  .xl\:my-20 {
    @media (width >= 80rem) {
      margin-block: calc(var(--spacing) * 20);
    }
  }
  .xl\:ms-0 {
    @media (width >= 80rem) {
      margin-inline-start: calc(var(--spacing) * 0);
    }
  }
  .xl\:ms-2 {
    @media (width >= 80rem) {
      margin-inline-start: calc(var(--spacing) * 2);
    }
  }
  .xl\:ms-4 {
    @media (width >= 80rem) {
      margin-inline-start: calc(var(--spacing) * 4);
    }
  }
  .xl\:ms-6 {
    @media (width >= 80rem) {
      margin-inline-start: calc(var(--spacing) * 6);
    }
  }
  .xl\:ms-8 {
    @media (width >= 80rem) {
      margin-inline-start: calc(var(--spacing) * 8);
    }
  }
  .xl\:ms-12 {
    @media (width >= 80rem) {
      margin-inline-start: calc(var(--spacing) * 12);
    }
  }
  .xl\:ms-16 {
    @media (width >= 80rem) {
      margin-inline-start: calc(var(--spacing) * 16);
    }
  }
  .xl\:ms-20 {
    @media (width >= 80rem) {
      margin-inline-start: calc(var(--spacing) * 20);
    }
  }
  .xl\:ms-auto {
    @media (width >= 80rem) {
      margin-inline-start: auto;
    }
  }
  .xl\:me-4 {
    @media (width >= 80rem) {
      margin-inline-end: calc(var(--spacing) * 4);
    }
  }
  .xl\:me-6 {
    @media (width >= 80rem) {
      margin-inline-end: calc(var(--spacing) * 6);
    }
  }
  .xl\:me-8 {
    @media (width >= 80rem) {
      margin-inline-end: calc(var(--spacing) * 8);
    }
  }
  .xl\:me-12 {
    @media (width >= 80rem) {
      margin-inline-end: calc(var(--spacing) * 12);
    }
  }
  .xl\:me-16 {
    @media (width >= 80rem) {
      margin-inline-end: calc(var(--spacing) * 16);
    }
  }
  .xl\:me-20 {
    @media (width >= 80rem) {
      margin-inline-end: calc(var(--spacing) * 20);
    }
  }
  .xl\:me-auto {
    @media (width >= 80rem) {
      margin-inline-end: auto;
    }
  }
  .xl\:mbs-0 {
    @media (width >= 80rem) {
      margin-block-start: calc(var(--spacing) * 0);
    }
  }
  .xl\:mbs-2 {
    @media (width >= 80rem) {
      margin-block-start: calc(var(--spacing) * 2);
    }
  }
  .xl\:mbs-4 {
    @media (width >= 80rem) {
      margin-block-start: calc(var(--spacing) * 4);
    }
  }
  .xl\:mbs-6 {
    @media (width >= 80rem) {
      margin-block-start: calc(var(--spacing) * 6);
    }
  }
  .xl\:mbs-8 {
    @media (width >= 80rem) {
      margin-block-start: calc(var(--spacing) * 8);
    }
  }
  .xl\:mbs-12 {
    @media (width >= 80rem) {
      margin-block-start: calc(var(--spacing) * 12);
    }
  }
  .xl\:mbs-16 {
    @media (width >= 80rem) {
      margin-block-start: calc(var(--spacing) * 16);
    }
  }
  .xl\:mbs-20 {
    @media (width >= 80rem) {
      margin-block-start: calc(var(--spacing) * 20);
    }
  }
  .xl\:mbe-0 {
    @media (width >= 80rem) {
      margin-block-end: calc(var(--spacing) * 0);
    }
  }
  .xl\:mbe-2 {
    @media (width >= 80rem) {
      margin-block-end: calc(var(--spacing) * 2);
    }
  }
  .xl\:mbe-4 {
    @media (width >= 80rem) {
      margin-block-end: calc(var(--spacing) * 4);
    }
  }
  .xl\:mbe-6 {
    @media (width >= 80rem) {
      margin-block-end: calc(var(--spacing) * 6);
    }
  }
  .xl\:mbe-8 {
    @media (width >= 80rem) {
      margin-block-end: calc(var(--spacing) * 8);
    }
  }
  .xl\:mbe-12 {
    @media (width >= 80rem) {
      margin-block-end: calc(var(--spacing) * 12);
    }
  }
  .xl\:mbe-16 {
    @media (width >= 80rem) {
      margin-block-end: calc(var(--spacing) * 16);
    }
  }
  .xl\:mbe-20 {
    @media (width >= 80rem) {
      margin-block-end: calc(var(--spacing) * 20);
    }
  }
  .xl\:w-auto {
    @media (width >= 80rem) {
      width: auto;
    }
  }
  .xl\:w-fit {
    @media (width >= 80rem) {
      width: fit-content;
    }
  }
  .xl\:w-full {
    @media (width >= 80rem) {
      width: 100%;
    }
  }
  .xl\:w-max {
    @media (width >= 80rem) {
      width: max-content;
    }
  }
  .xl\:w-min {
    @media (width >= 80rem) {
      width: min-content;
    }
  }
  .xl\:flex-col {
    @media (width >= 80rem) {
      flex-direction: column;
    }
  }
  .xl\:flex-col-reverse {
    @media (width >= 80rem) {
      flex-direction: column-reverse;
    }
  }
  .xl\:flex-row {
    @media (width >= 80rem) {
      flex-direction: row;
    }
  }
  .xl\:flex-row-reverse {
    @media (width >= 80rem) {
      flex-direction: row-reverse;
    }
  }
  .xl\:items-baseline {
    @media (width >= 80rem) {
      align-items: baseline;
    }
  }
  .xl\:items-center {
    @media (width >= 80rem) {
      align-items: center;
    }
  }
  .xl\:items-end {
    @media (width >= 80rem) {
      align-items: flex-end;
    }
  }
  .xl\:items-start {
    @media (width >= 80rem) {
      align-items: flex-start;
    }
  }
  .xl\:justify-around {
    @media (width >= 80rem) {
      justify-content: space-around;
    }
  }
  .xl\:justify-between {
    @media (width >= 80rem) {
      justify-content: space-between;
    }
  }
  .xl\:justify-center {
    @media (width >= 80rem) {
      justify-content: center;
    }
  }
  .xl\:justify-end {
    @media (width >= 80rem) {
      justify-content: flex-end;
    }
  }
  .xl\:justify-evenly {
    @media (width >= 80rem) {
      justify-content: space-evenly;
    }
  }
  .xl\:justify-start {
    @media (width >= 80rem) {
      justify-content: flex-start;
    }
  }
  .xl\:gap-0 {
    @media (width >= 80rem) {
      gap: calc(var(--spacing) * 0);
    }
  }
  .xl\:gap-2 {
    @media (width >= 80rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .xl\:gap-4 {
    @media (width >= 80rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .xl\:gap-6 {
    @media (width >= 80rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .xl\:gap-8 {
    @media (width >= 80rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .xl\:gap-12 {
    @media (width >= 80rem) {
      gap: calc(var(--spacing) * 12);
    }
  }
  .xl\:gap-16 {
    @media (width >= 80rem) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .xl\:gap-20 {
    @media (width >= 80rem) {
      gap: calc(var(--spacing) * 20);
    }
  }
  .xl\:gap-x-0 {
    @media (width >= 80rem) {
      column-gap: calc(var(--spacing) * 0);
    }
  }
  .xl\:gap-x-2 {
    @media (width >= 80rem) {
      column-gap: calc(var(--spacing) * 2);
    }
  }
  .xl\:gap-x-4 {
    @media (width >= 80rem) {
      column-gap: calc(var(--spacing) * 4);
    }
  }
  .xl\:gap-x-6 {
    @media (width >= 80rem) {
      column-gap: calc(var(--spacing) * 6);
    }
  }
  .xl\:gap-x-8 {
    @media (width >= 80rem) {
      column-gap: calc(var(--spacing) * 8);
    }
  }
  .xl\:gap-x-12 {
    @media (width >= 80rem) {
      column-gap: calc(var(--spacing) * 12);
    }
  }
  .xl\:gap-x-16 {
    @media (width >= 80rem) {
      column-gap: calc(var(--spacing) * 16);
    }
  }
  .xl\:gap-x-20 {
    @media (width >= 80rem) {
      column-gap: calc(var(--spacing) * 20);
    }
  }
  .xl\:gap-y-0 {
    @media (width >= 80rem) {
      row-gap: calc(var(--spacing) * 0);
    }
  }
  .xl\:gap-y-2 {
    @media (width >= 80rem) {
      row-gap: calc(var(--spacing) * 2);
    }
  }
  .xl\:gap-y-4 {
    @media (width >= 80rem) {
      row-gap: calc(var(--spacing) * 4);
    }
  }
  .xl\:gap-y-6 {
    @media (width >= 80rem) {
      row-gap: calc(var(--spacing) * 6);
    }
  }
  .xl\:gap-y-8 {
    @media (width >= 80rem) {
      row-gap: calc(var(--spacing) * 8);
    }
  }
  .xl\:gap-y-12 {
    @media (width >= 80rem) {
      row-gap: calc(var(--spacing) * 12);
    }
  }
  .xl\:gap-y-16 {
    @media (width >= 80rem) {
      row-gap: calc(var(--spacing) * 16);
    }
  }
  .xl\:gap-y-20 {
    @media (width >= 80rem) {
      row-gap: calc(var(--spacing) * 20);
    }
  }
  .xl\:px-0 {
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing) * 0);
    }
  }
  .xl\:px-2 {
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .xl\:px-4 {
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .xl\:px-6 {
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .xl\:px-8 {
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .xl\:px-12 {
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing) * 12);
    }
  }
  .xl\:px-16 {
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing) * 16);
    }
  }
  .xl\:px-20 {
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing) * 20);
    }
  }
  .xl\:py-0 {
    @media (width >= 80rem) {
      padding-block: calc(var(--spacing) * 0);
    }
  }
  .xl\:py-2 {
    @media (width >= 80rem) {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .xl\:py-4 {
    @media (width >= 80rem) {
      padding-block: calc(var(--spacing) * 4);
    }
  }
  .xl\:py-6 {
    @media (width >= 80rem) {
      padding-block: calc(var(--spacing) * 6);
    }
  }
  .xl\:py-8 {
    @media (width >= 80rem) {
      padding-block: calc(var(--spacing) * 8);
    }
  }
  .xl\:py-12 {
    @media (width >= 80rem) {
      padding-block: calc(var(--spacing) * 12);
    }
  }
  .xl\:py-16 {
    @media (width >= 80rem) {
      padding-block: calc(var(--spacing) * 16);
    }
  }
  .xl\:py-20 {
    @media (width >= 80rem) {
      padding-block: calc(var(--spacing) * 20);
    }
  }
  .xl\:ps-0 {
    @media (width >= 80rem) {
      padding-inline-start: calc(var(--spacing) * 0);
    }
  }
  .xl\:ps-2 {
    @media (width >= 80rem) {
      padding-inline-start: calc(var(--spacing) * 2);
    }
  }
  .xl\:ps-4 {
    @media (width >= 80rem) {
      padding-inline-start: calc(var(--spacing) * 4);
    }
  }
  .xl\:ps-6 {
    @media (width >= 80rem) {
      padding-inline-start: calc(var(--spacing) * 6);
    }
  }
  .xl\:ps-8 {
    @media (width >= 80rem) {
      padding-inline-start: calc(var(--spacing) * 8);
    }
  }
  .xl\:ps-12 {
    @media (width >= 80rem) {
      padding-inline-start: calc(var(--spacing) * 12);
    }
  }
  .xl\:ps-16 {
    @media (width >= 80rem) {
      padding-inline-start: calc(var(--spacing) * 16);
    }
  }
  .xl\:ps-20 {
    @media (width >= 80rem) {
      padding-inline-start: calc(var(--spacing) * 20);
    }
  }
  .xl\:pe-0 {
    @media (width >= 80rem) {
      padding-inline-end: calc(var(--spacing) * 0);
    }
  }
  .xl\:pe-2 {
    @media (width >= 80rem) {
      padding-inline-end: calc(var(--spacing) * 2);
    }
  }
  .xl\:pe-4 {
    @media (width >= 80rem) {
      padding-inline-end: calc(var(--spacing) * 4);
    }
  }
  .xl\:pe-6 {
    @media (width >= 80rem) {
      padding-inline-end: calc(var(--spacing) * 6);
    }
  }
  .xl\:pe-8 {
    @media (width >= 80rem) {
      padding-inline-end: calc(var(--spacing) * 8);
    }
  }
  .xl\:pe-12 {
    @media (width >= 80rem) {
      padding-inline-end: calc(var(--spacing) * 12);
    }
  }
  .xl\:pe-16 {
    @media (width >= 80rem) {
      padding-inline-end: calc(var(--spacing) * 16);
    }
  }
  .xl\:pe-20 {
    @media (width >= 80rem) {
      padding-inline-end: calc(var(--spacing) * 20);
    }
  }
  .xl\:pbs-0 {
    @media (width >= 80rem) {
      padding-block-start: calc(var(--spacing) * 0);
    }
  }
  .xl\:pbs-2 {
    @media (width >= 80rem) {
      padding-block-start: calc(var(--spacing) * 2);
    }
  }
  .xl\:pbs-4 {
    @media (width >= 80rem) {
      padding-block-start: calc(var(--spacing) * 4);
    }
  }
  .xl\:pbs-6 {
    @media (width >= 80rem) {
      padding-block-start: calc(var(--spacing) * 6);
    }
  }
  .xl\:pbs-8 {
    @media (width >= 80rem) {
      padding-block-start: calc(var(--spacing) * 8);
    }
  }
  .xl\:pbs-12 {
    @media (width >= 80rem) {
      padding-block-start: calc(var(--spacing) * 12);
    }
  }
  .xl\:pbs-16 {
    @media (width >= 80rem) {
      padding-block-start: calc(var(--spacing) * 16);
    }
  }
  .xl\:pbs-20 {
    @media (width >= 80rem) {
      padding-block-start: calc(var(--spacing) * 20);
    }
  }
  .xl\:pbe-0 {
    @media (width >= 80rem) {
      padding-block-end: calc(var(--spacing) * 0);
    }
  }
  .xl\:pbe-2 {
    @media (width >= 80rem) {
      padding-block-end: calc(var(--spacing) * 2);
    }
  }
  .xl\:pbe-4 {
    @media (width >= 80rem) {
      padding-block-end: calc(var(--spacing) * 4);
    }
  }
  .xl\:pbe-6 {
    @media (width >= 80rem) {
      padding-block-end: calc(var(--spacing) * 6);
    }
  }
  .xl\:pbe-8 {
    @media (width >= 80rem) {
      padding-block-end: calc(var(--spacing) * 8);
    }
  }
  .xl\:pbe-12 {
    @media (width >= 80rem) {
      padding-block-end: calc(var(--spacing) * 12);
    }
  }
  .xl\:pbe-16 {
    @media (width >= 80rem) {
      padding-block-end: calc(var(--spacing) * 16);
    }
  }
  .xl\:pbe-20 {
    @media (width >= 80rem) {
      padding-block-end: calc(var(--spacing) * 20);
    }
  }
  .\@sm\:grid-cols-1 {
    @container (width >= 24rem) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .\@sm\:grid-cols-2 {
    @container (width >= 24rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .\@sm\:grid-cols-3 {
    @container (width >= 24rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .\@sm\:grid-cols-4 {
    @container (width >= 24rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .\@sm\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,2fr\)\] {
    @container (width >= 24rem) {
      grid-template-columns: minmax(0,1fr) minmax(0,2fr);
    }
  }
  .\@sm\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,1fr\)\] {
    @container (width >= 24rem) {
      grid-template-columns: minmax(0,2fr) minmax(0,1fr);
    }
  }
  .\@sm\:flex-col {
    @container (width >= 24rem) {
      flex-direction: column;
    }
  }
  .\@sm\:flex-col-reverse {
    @container (width >= 24rem) {
      flex-direction: column-reverse;
    }
  }
  .\@sm\:flex-row {
    @container (width >= 24rem) {
      flex-direction: row;
    }
  }
  .\@sm\:flex-row-reverse {
    @container (width >= 24rem) {
      flex-direction: row-reverse;
    }
  }
  .\@sm\:items-center {
    @container (width >= 24rem) {
      align-items: center;
    }
  }
  .\@sm\:items-end {
    @container (width >= 24rem) {
      align-items: flex-end;
    }
  }
  .\@sm\:items-start {
    @container (width >= 24rem) {
      align-items: flex-start;
    }
  }
  .\@sm\:items-stretch {
    @container (width >= 24rem) {
      align-items: stretch;
    }
  }
  .\@sm\:justify-between {
    @container (width >= 24rem) {
      justify-content: space-between;
    }
  }
  .\@sm\:justify-center {
    @container (width >= 24rem) {
      justify-content: center;
    }
  }
  .\@sm\:justify-end {
    @container (width >= 24rem) {
      justify-content: flex-end;
    }
  }
  .\@sm\:justify-start {
    @container (width >= 24rem) {
      justify-content: flex-start;
    }
  }
  .\@sm\:p-4 {
    @container (width >= 24rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .\@sm\:ps-0 {
    @container (width >= 24rem) {
      padding-inline-start: calc(var(--spacing) * 0);
    }
  }
  .\@sm\:pe-0 {
    @container (width >= 24rem) {
      padding-inline-end: calc(var(--spacing) * 0);
    }
  }
  .\@md\:grid-cols-1 {
    @container (width >= 28rem) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .\@md\:grid-cols-2 {
    @container (width >= 28rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .\@md\:grid-cols-3 {
    @container (width >= 28rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .\@md\:grid-cols-4 {
    @container (width >= 28rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .\@md\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,2fr\)\] {
    @container (width >= 28rem) {
      grid-template-columns: minmax(0,1fr) minmax(0,2fr);
    }
  }
  .\@md\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,1fr\)\] {
    @container (width >= 28rem) {
      grid-template-columns: minmax(0,2fr) minmax(0,1fr);
    }
  }
  .\@md\:flex-col {
    @container (width >= 28rem) {
      flex-direction: column;
    }
  }
  .\@md\:flex-col-reverse {
    @container (width >= 28rem) {
      flex-direction: column-reverse;
    }
  }
  .\@md\:flex-row {
    @container (width >= 28rem) {
      flex-direction: row;
    }
  }
  .\@md\:flex-row-reverse {
    @container (width >= 28rem) {
      flex-direction: row-reverse;
    }
  }
  .\@md\:items-center {
    @container (width >= 28rem) {
      align-items: center;
    }
  }
  .\@md\:items-end {
    @container (width >= 28rem) {
      align-items: flex-end;
    }
  }
  .\@md\:items-start {
    @container (width >= 28rem) {
      align-items: flex-start;
    }
  }
  .\@md\:items-stretch {
    @container (width >= 28rem) {
      align-items: stretch;
    }
  }
  .\@md\:justify-between {
    @container (width >= 28rem) {
      justify-content: space-between;
    }
  }
  .\@md\:justify-center {
    @container (width >= 28rem) {
      justify-content: center;
    }
  }
  .\@md\:justify-end {
    @container (width >= 28rem) {
      justify-content: flex-end;
    }
  }
  .\@md\:justify-start {
    @container (width >= 28rem) {
      justify-content: flex-start;
    }
  }
  .\@md\:p-4 {
    @container (width >= 28rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .\@md\:ps-0 {
    @container (width >= 28rem) {
      padding-inline-start: calc(var(--spacing) * 0);
    }
  }
  .\@md\:pe-0 {
    @container (width >= 28rem) {
      padding-inline-end: calc(var(--spacing) * 0);
    }
  }
  .\@lg\:grid-cols-1 {
    @container (width >= 32rem) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .\@lg\:grid-cols-2 {
    @container (width >= 32rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .\@lg\:grid-cols-3 {
    @container (width >= 32rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .\@lg\:grid-cols-4 {
    @container (width >= 32rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .\@lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,2fr\)\] {
    @container (width >= 32rem) {
      grid-template-columns: minmax(0,1fr) minmax(0,2fr);
    }
  }
  .\@lg\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,1fr\)\] {
    @container (width >= 32rem) {
      grid-template-columns: minmax(0,2fr) minmax(0,1fr);
    }
  }
  .\@lg\:flex-col {
    @container (width >= 32rem) {
      flex-direction: column;
    }
  }
  .\@lg\:flex-col-reverse {
    @container (width >= 32rem) {
      flex-direction: column-reverse;
    }
  }
  .\@lg\:flex-row {
    @container (width >= 32rem) {
      flex-direction: row;
    }
  }
  .\@lg\:flex-row-reverse {
    @container (width >= 32rem) {
      flex-direction: row-reverse;
    }
  }
  .\@lg\:items-center {
    @container (width >= 32rem) {
      align-items: center;
    }
  }
  .\@lg\:items-end {
    @container (width >= 32rem) {
      align-items: flex-end;
    }
  }
  .\@lg\:items-start {
    @container (width >= 32rem) {
      align-items: flex-start;
    }
  }
  .\@lg\:items-stretch {
    @container (width >= 32rem) {
      align-items: stretch;
    }
  }
  .\@lg\:justify-between {
    @container (width >= 32rem) {
      justify-content: space-between;
    }
  }
  .\@lg\:justify-center {
    @container (width >= 32rem) {
      justify-content: center;
    }
  }
  .\@lg\:justify-end {
    @container (width >= 32rem) {
      justify-content: flex-end;
    }
  }
  .\@lg\:justify-start {
    @container (width >= 32rem) {
      justify-content: flex-start;
    }
  }
  .\@lg\:p-4 {
    @container (width >= 32rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .\@lg\:ps-0 {
    @container (width >= 32rem) {
      padding-inline-start: calc(var(--spacing) * 0);
    }
  }
  .\@lg\:pe-0 {
    @container (width >= 32rem) {
      padding-inline-end: calc(var(--spacing) * 0);
    }
  }
  .\@xl\:grid-cols-1 {
    @container (width >= 36rem) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .\@xl\:grid-cols-2 {
    @container (width >= 36rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .\@xl\:grid-cols-3 {
    @container (width >= 36rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .\@xl\:grid-cols-4 {
    @container (width >= 36rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .\@xl\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,2fr\)\] {
    @container (width >= 36rem) {
      grid-template-columns: minmax(0,1fr) minmax(0,2fr);
    }
  }
  .\@xl\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,1fr\)\] {
    @container (width >= 36rem) {
      grid-template-columns: minmax(0,2fr) minmax(0,1fr);
    }
  }
  .\@xl\:flex-col {
    @container (width >= 36rem) {
      flex-direction: column;
    }
  }
  .\@xl\:flex-col-reverse {
    @container (width >= 36rem) {
      flex-direction: column-reverse;
    }
  }
  .\@xl\:flex-row {
    @container (width >= 36rem) {
      flex-direction: row;
    }
  }
  .\@xl\:flex-row-reverse {
    @container (width >= 36rem) {
      flex-direction: row-reverse;
    }
  }
  .\@xl\:items-center {
    @container (width >= 36rem) {
      align-items: center;
    }
  }
  .\@xl\:items-end {
    @container (width >= 36rem) {
      align-items: flex-end;
    }
  }
  .\@xl\:items-start {
    @container (width >= 36rem) {
      align-items: flex-start;
    }
  }
  .\@xl\:items-stretch {
    @container (width >= 36rem) {
      align-items: stretch;
    }
  }
  .\@xl\:justify-between {
    @container (width >= 36rem) {
      justify-content: space-between;
    }
  }
  .\@xl\:justify-center {
    @container (width >= 36rem) {
      justify-content: center;
    }
  }
  .\@xl\:justify-end {
    @container (width >= 36rem) {
      justify-content: flex-end;
    }
  }
  .\@xl\:justify-start {
    @container (width >= 36rem) {
      justify-content: flex-start;
    }
  }
  .\@xl\:p-4 {
    @container (width >= 36rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .\@xl\:ps-0 {
    @container (width >= 36rem) {
      padding-inline-start: calc(var(--spacing) * 0);
    }
  }
  .\@xl\:pe-0 {
    @container (width >= 36rem) {
      padding-inline-end: calc(var(--spacing) * 0);
    }
  }
  .\@2xl\:grid-cols-1 {
    @container (width >= 42rem) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .\@2xl\:grid-cols-2 {
    @container (width >= 42rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .\@2xl\:grid-cols-3 {
    @container (width >= 42rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .\@2xl\:grid-cols-4 {
    @container (width >= 42rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .\@2xl\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,2fr\)\] {
    @container (width >= 42rem) {
      grid-template-columns: minmax(0,1fr) minmax(0,2fr);
    }
  }
  .\@2xl\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,1fr\)\] {
    @container (width >= 42rem) {
      grid-template-columns: minmax(0,2fr) minmax(0,1fr);
    }
  }
  .\@2xl\:flex-col {
    @container (width >= 42rem) {
      flex-direction: column;
    }
  }
  .\@2xl\:flex-col-reverse {
    @container (width >= 42rem) {
      flex-direction: column-reverse;
    }
  }
  .\@2xl\:flex-row {
    @container (width >= 42rem) {
      flex-direction: row;
    }
  }
  .\@2xl\:flex-row-reverse {
    @container (width >= 42rem) {
      flex-direction: row-reverse;
    }
  }
  .\@2xl\:items-center {
    @container (width >= 42rem) {
      align-items: center;
    }
  }
  .\@2xl\:items-end {
    @container (width >= 42rem) {
      align-items: flex-end;
    }
  }
  .\@2xl\:items-start {
    @container (width >= 42rem) {
      align-items: flex-start;
    }
  }
  .\@2xl\:items-stretch {
    @container (width >= 42rem) {
      align-items: stretch;
    }
  }
  .\@2xl\:justify-between {
    @container (width >= 42rem) {
      justify-content: space-between;
    }
  }
  .\@2xl\:justify-center {
    @container (width >= 42rem) {
      justify-content: center;
    }
  }
  .\@2xl\:justify-end {
    @container (width >= 42rem) {
      justify-content: flex-end;
    }
  }
  .\@2xl\:justify-start {
    @container (width >= 42rem) {
      justify-content: flex-start;
    }
  }
  .\@2xl\:p-4 {
    @container (width >= 42rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .\@2xl\:ps-0 {
    @container (width >= 42rem) {
      padding-inline-start: calc(var(--spacing) * 0);
    }
  }
  .\@2xl\:pe-0 {
    @container (width >= 42rem) {
      padding-inline-end: calc(var(--spacing) * 0);
    }
  }
  .\@3xl\:grid-cols-1 {
    @container (width >= 48rem) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .\@3xl\:grid-cols-2 {
    @container (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .\@3xl\:grid-cols-3 {
    @container (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .\@3xl\:grid-cols-4 {
    @container (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .\@3xl\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,2fr\)\] {
    @container (width >= 48rem) {
      grid-template-columns: minmax(0,1fr) minmax(0,2fr);
    }
  }
  .\@3xl\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,1fr\)\] {
    @container (width >= 48rem) {
      grid-template-columns: minmax(0,2fr) minmax(0,1fr);
    }
  }
  .\@3xl\:flex-col {
    @container (width >= 48rem) {
      flex-direction: column;
    }
  }
  .\@3xl\:flex-col-reverse {
    @container (width >= 48rem) {
      flex-direction: column-reverse;
    }
  }
  .\@3xl\:flex-row {
    @container (width >= 48rem) {
      flex-direction: row;
    }
  }
  .\@3xl\:flex-row-reverse {
    @container (width >= 48rem) {
      flex-direction: row-reverse;
    }
  }
  .\@3xl\:items-center {
    @container (width >= 48rem) {
      align-items: center;
    }
  }
  .\@3xl\:items-end {
    @container (width >= 48rem) {
      align-items: flex-end;
    }
  }
  .\@3xl\:items-start {
    @container (width >= 48rem) {
      align-items: flex-start;
    }
  }
  .\@3xl\:items-stretch {
    @container (width >= 48rem) {
      align-items: stretch;
    }
  }
  .\@3xl\:justify-between {
    @container (width >= 48rem) {
      justify-content: space-between;
    }
  }
  .\@3xl\:justify-center {
    @container (width >= 48rem) {
      justify-content: center;
    }
  }
  .\@3xl\:justify-end {
    @container (width >= 48rem) {
      justify-content: flex-end;
    }
  }
  .\@3xl\:justify-start {
    @container (width >= 48rem) {
      justify-content: flex-start;
    }
  }
  .\@3xl\:p-4 {
    @container (width >= 48rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .\@3xl\:ps-0 {
    @container (width >= 48rem) {
      padding-inline-start: calc(var(--spacing) * 0);
    }
  }
  .\@3xl\:pe-0 {
    @container (width >= 48rem) {
      padding-inline-end: calc(var(--spacing) * 0);
    }
  }
  .\@4xl\:grid-cols-1 {
    @container (width >= 56rem) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .\@4xl\:grid-cols-2 {
    @container (width >= 56rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .\@4xl\:grid-cols-3 {
    @container (width >= 56rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .\@4xl\:grid-cols-4 {
    @container (width >= 56rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .\@4xl\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,2fr\)\] {
    @container (width >= 56rem) {
      grid-template-columns: minmax(0,1fr) minmax(0,2fr);
    }
  }
  .\@4xl\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,1fr\)\] {
    @container (width >= 56rem) {
      grid-template-columns: minmax(0,2fr) minmax(0,1fr);
    }
  }
  .\@4xl\:flex-col {
    @container (width >= 56rem) {
      flex-direction: column;
    }
  }
  .\@4xl\:flex-col-reverse {
    @container (width >= 56rem) {
      flex-direction: column-reverse;
    }
  }
  .\@4xl\:flex-row {
    @container (width >= 56rem) {
      flex-direction: row;
    }
  }
  .\@4xl\:flex-row-reverse {
    @container (width >= 56rem) {
      flex-direction: row-reverse;
    }
  }
  .\@4xl\:items-center {
    @container (width >= 56rem) {
      align-items: center;
    }
  }
  .\@4xl\:items-end {
    @container (width >= 56rem) {
      align-items: flex-end;
    }
  }
  .\@4xl\:items-start {
    @container (width >= 56rem) {
      align-items: flex-start;
    }
  }
  .\@4xl\:items-stretch {
    @container (width >= 56rem) {
      align-items: stretch;
    }
  }
  .\@4xl\:justify-between {
    @container (width >= 56rem) {
      justify-content: space-between;
    }
  }
  .\@4xl\:justify-center {
    @container (width >= 56rem) {
      justify-content: center;
    }
  }
  .\@4xl\:justify-end {
    @container (width >= 56rem) {
      justify-content: flex-end;
    }
  }
  .\@4xl\:justify-start {
    @container (width >= 56rem) {
      justify-content: flex-start;
    }
  }
  .\@4xl\:p-4 {
    @container (width >= 56rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .\@4xl\:ps-0 {
    @container (width >= 56rem) {
      padding-inline-start: calc(var(--spacing) * 0);
    }
  }
  .\@4xl\:pe-0 {
    @container (width >= 56rem) {
      padding-inline-end: calc(var(--spacing) * 0);
    }
  }
  .\@5xl\:grid-cols-1 {
    @container (width >= 64rem) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .\@5xl\:grid-cols-2 {
    @container (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .\@5xl\:grid-cols-3 {
    @container (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .\@5xl\:grid-cols-4 {
    @container (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .\@5xl\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,2fr\)\] {
    @container (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) minmax(0,2fr);
    }
  }
  .\@5xl\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,1fr\)\] {
    @container (width >= 64rem) {
      grid-template-columns: minmax(0,2fr) minmax(0,1fr);
    }
  }
  .\@5xl\:flex-col {
    @container (width >= 64rem) {
      flex-direction: column;
    }
  }
  .\@5xl\:flex-col-reverse {
    @container (width >= 64rem) {
      flex-direction: column-reverse;
    }
  }
  .\@5xl\:flex-row {
    @container (width >= 64rem) {
      flex-direction: row;
    }
  }
  .\@5xl\:flex-row-reverse {
    @container (width >= 64rem) {
      flex-direction: row-reverse;
    }
  }
  .\@5xl\:items-center {
    @container (width >= 64rem) {
      align-items: center;
    }
  }
  .\@5xl\:items-end {
    @container (width >= 64rem) {
      align-items: flex-end;
    }
  }
  .\@5xl\:items-start {
    @container (width >= 64rem) {
      align-items: flex-start;
    }
  }
  .\@5xl\:items-stretch {
    @container (width >= 64rem) {
      align-items: stretch;
    }
  }
  .\@5xl\:justify-between {
    @container (width >= 64rem) {
      justify-content: space-between;
    }
  }
  .\@5xl\:justify-center {
    @container (width >= 64rem) {
      justify-content: center;
    }
  }
  .\@5xl\:justify-end {
    @container (width >= 64rem) {
      justify-content: flex-end;
    }
  }
  .\@5xl\:justify-start {
    @container (width >= 64rem) {
      justify-content: flex-start;
    }
  }
  .\@5xl\:p-4 {
    @container (width >= 64rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .\@5xl\:ps-0 {
    @container (width >= 64rem) {
      padding-inline-start: calc(var(--spacing) * 0);
    }
  }
  .\@5xl\:pe-0 {
    @container (width >= 64rem) {
      padding-inline-end: calc(var(--spacing) * 0);
    }
  }
  .\@6xl\:grid-cols-1 {
    @container (width >= 72rem) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .\@6xl\:grid-cols-2 {
    @container (width >= 72rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .\@6xl\:grid-cols-3 {
    @container (width >= 72rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .\@6xl\:grid-cols-4 {
    @container (width >= 72rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .\@6xl\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,2fr\)\] {
    @container (width >= 72rem) {
      grid-template-columns: minmax(0,1fr) minmax(0,2fr);
    }
  }
  .\@6xl\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,1fr\)\] {
    @container (width >= 72rem) {
      grid-template-columns: minmax(0,2fr) minmax(0,1fr);
    }
  }
  .\@6xl\:flex-col {
    @container (width >= 72rem) {
      flex-direction: column;
    }
  }
  .\@6xl\:flex-col-reverse {
    @container (width >= 72rem) {
      flex-direction: column-reverse;
    }
  }
  .\@6xl\:flex-row {
    @container (width >= 72rem) {
      flex-direction: row;
    }
  }
  .\@6xl\:flex-row-reverse {
    @container (width >= 72rem) {
      flex-direction: row-reverse;
    }
  }
  .\@6xl\:items-center {
    @container (width >= 72rem) {
      align-items: center;
    }
  }
  .\@6xl\:items-end {
    @container (width >= 72rem) {
      align-items: flex-end;
    }
  }
  .\@6xl\:items-start {
    @container (width >= 72rem) {
      align-items: flex-start;
    }
  }
  .\@6xl\:items-stretch {
    @container (width >= 72rem) {
      align-items: stretch;
    }
  }
  .\@6xl\:justify-between {
    @container (width >= 72rem) {
      justify-content: space-between;
    }
  }
  .\@6xl\:justify-center {
    @container (width >= 72rem) {
      justify-content: center;
    }
  }
  .\@6xl\:justify-end {
    @container (width >= 72rem) {
      justify-content: flex-end;
    }
  }
  .\@6xl\:justify-start {
    @container (width >= 72rem) {
      justify-content: flex-start;
    }
  }
  .\@6xl\:p-4 {
    @container (width >= 72rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .\@6xl\:ps-0 {
    @container (width >= 72rem) {
      padding-inline-start: calc(var(--spacing) * 0);
    }
  }
  .\@6xl\:pe-0 {
    @container (width >= 72rem) {
      padding-inline-end: calc(var(--spacing) * 0);
    }
  }
  .\@7xl\:grid-cols-1 {
    @container (width >= 80rem) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .\@7xl\:grid-cols-2 {
    @container (width >= 80rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .\@7xl\:grid-cols-3 {
    @container (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .\@7xl\:grid-cols-4 {
    @container (width >= 80rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .\@7xl\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,2fr\)\] {
    @container (width >= 80rem) {
      grid-template-columns: minmax(0,1fr) minmax(0,2fr);
    }
  }
  .\@7xl\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,1fr\)\] {
    @container (width >= 80rem) {
      grid-template-columns: minmax(0,2fr) minmax(0,1fr);
    }
  }
  .\@7xl\:flex-col {
    @container (width >= 80rem) {
      flex-direction: column;
    }
  }
  .\@7xl\:flex-col-reverse {
    @container (width >= 80rem) {
      flex-direction: column-reverse;
    }
  }
  .\@7xl\:flex-row {
    @container (width >= 80rem) {
      flex-direction: row;
    }
  }
  .\@7xl\:flex-row-reverse {
    @container (width >= 80rem) {
      flex-direction: row-reverse;
    }
  }
  .\@7xl\:items-center {
    @container (width >= 80rem) {
      align-items: center;
    }
  }
  .\@7xl\:items-end {
    @container (width >= 80rem) {
      align-items: flex-end;
    }
  }
  .\@7xl\:items-start {
    @container (width >= 80rem) {
      align-items: flex-start;
    }
  }
  .\@7xl\:items-stretch {
    @container (width >= 80rem) {
      align-items: stretch;
    }
  }
  .\@7xl\:justify-between {
    @container (width >= 80rem) {
      justify-content: space-between;
    }
  }
  .\@7xl\:justify-center {
    @container (width >= 80rem) {
      justify-content: center;
    }
  }
  .\@7xl\:justify-end {
    @container (width >= 80rem) {
      justify-content: flex-end;
    }
  }
  .\@7xl\:justify-start {
    @container (width >= 80rem) {
      justify-content: flex-start;
    }
  }
  .\@7xl\:p-4 {
    @container (width >= 80rem) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .\@7xl\:ps-0 {
    @container (width >= 80rem) {
      padding-inline-start: calc(var(--spacing) * 0);
    }
  }
  .\@7xl\:pe-0 {
    @container (width >= 80rem) {
      padding-inline-end: calc(var(--spacing) * 0);
    }
  }
  .\[\&_\.view-content\]\:sm\:grid-cols-2 {
    & .view-content {
      @media (width >= 40rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
  }
  .\[\&_\.view-content\]\:md\:grid-cols-2 {
    & .view-content {
      @media (width >= 48rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
  }
  .\[\&_\.view-content\]\:md\:grid-cols-3 {
    & .view-content {
      @media (width >= 48rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
  }
  .\[\&_\.view-content\]\:lg\:grid-cols-4 {
    & .view-content {
      @media (width >= 64rem) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }
  }
  .\[\&\>\*\:last-child\]\:mbe-0 {
    &>*:last-child {
      margin-block-end: calc(var(--spacing) * 0);
    }
  }
}
:root {
  --content-width: 75rem;
  --content-width-wide: 96rem;
  --font-text: sans-serif;
  --font-heading: sans-serif;
}
@layer base {
  html {
    scrollbar-gutter: stable;
  }
  body {
    background-color: var(--background);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  a {
    text-decoration-line: underline;
    text-underline-offset: 0.15em;
    &:focus-visible {
      border-color: var(--ring);
    }
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus-visible {
      --tw-ring-color: var(--ring);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
      }
    }
    text-decoration-thickness: max(0.08em, 1px);
    text-decoration-skip-ink: auto;
  }
  *:has(h1, .like-h1), *:has(h2, .like-h2), *:has(h3, .like-h3), *:has(h4, .like-h4), *:has(h5, .like-h5), *:has(h6, .like-h6) {
    container-type: inline-size;
  }
  h1, .like-h1 {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-wrap: pretty;
    @container (width >= 32rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
    @container (width >= 64rem) {
      font-size: var(--text-8xl);
      line-height: var(--tw-leading, var(--text-8xl--line-height));
    }
    font-family: var(--font-heading);
  }
  h2, .like-h2 {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-wrap: pretty;
    @container (width >= 32rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
    @container (width >= 64rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
    font-family: var(--font-heading);
  }
  h3, .like-h3 {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-wrap: pretty;
    @container (width >= 32rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
    @container (width >= 64rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
    font-family: var(--font-heading);
  }
  h4, .like-h4 {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-wrap: pretty;
    @container (width >= 32rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
    font-family: var(--font-heading);
  }
  h5, .like-h5 {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-wrap: pretty;
    @container (width >= 32rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
    font-family: var(--font-heading);
  }
  h6, .like-h6 {
    font-size: var(--text-md);
    line-height: var(--tw-leading, var(--text-md--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    text-wrap: pretty;
    font-family: var(--font-heading);
  }
  p, li {
    text-wrap: pretty;
  }
  code, pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: inherit;
  }
  small {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: inherit;
  }
  strong, b {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: inherit;
  }
  em, i {
    color: inherit;
    font-style: italic;
  }
  hr {
    margin-block: calc(var(--spacing) * 4);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--muted);
  }
  table, th, td {
    font-size: var(--text-md);
    line-height: var(--tw-leading, var(--text-md--line-height));
    color: inherit;
    @media (width >= 64rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
    @media (width >= 96rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  sup {
    font-size: 60%;
    top: -0.5em;
  }
  .hide-scrollbar-x::-webkit-scrollbar {
    height: 0px;
  }
  .hide-scrollbar-x {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
}
@layer components {
  .ts-anchor.anchor-visible {
    display: block;
    min-height: calc(var(--spacing) * 10);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-border-style: dotted;
    border-style: dotted;
    border-color: var(--foreground);
    padding: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    opacity: 50%;
    & .anchor-help-text {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      gap: calc(var(--spacing) * 1);
    }
  }
}
@layer components {
  .ts-accordion {
    opacity: 100%;
  }
  .ts-accordion-item {
    overflow: hidden;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--border);
    background-clip: padding-box;
    .accordion-title {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
    .accordion-button {
      display: flex;
      width: 100%;
      cursor: pointer;
      align-items: center;
      justify-content: space-between;
      background-color: var(--card);
      padding: calc(var(--spacing) * 4);
      text-align: left;
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
      &:hover {
        @media (hover: hover) {
          background-color: var(--muted);
        }
      }
    }
    .accordion-content {
      height: calc(var(--spacing) * 0);
      overflow: hidden;
      padding-inline: calc(var(--spacing) * 4);
      padding-block: calc(var(--spacing) * 0);
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
      color: var(--foreground);
      transition-property: height,padding;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 0ms;
      transition-duration: 0ms;
      :where(*:is(.accordion-animate)) & {
        --tw-duration: 500ms;
        transition-duration: 500ms;
      }
      :where(*:is(.accordion-js.accordion-open)) & {
        height: var(--natural-height);
      }
      :where(*:is(.accordion-open)) & {
        overflow: visible;
      }
      :where(*:is(.accordion-open)) & {
        padding-block: calc(var(--spacing) * 5);
      }
      :where(*:is(.accordion-open:not(.accordion-js))) & {
        height: auto;
      }
      :where(*:is(.accordion-resizing.accordion-open)) & {
        height: auto;
      }
      &>:first-child {
        margin-top: calc(var(--spacing) * 0);
      }
      &>:last-child {
        margin-bottom: calc(var(--spacing) * 0);
      }
    }
    .accordion-icon {
      transition-property: transform, translate, scale, rotate;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 500ms;
      transition-duration: 500ms;
      :where(*:is(.accordion-js.accordion-open)) & {
        rotate: 180deg;
      }
    }
  }
}
@layer components {
  .ts-badge {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--radius);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    &:focus-visible {
      border-color: var(--ring);
    }
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus-visible {
      --tw-ring-color: var(--ring);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
      }
    }
    &.cs-primary {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--primary);
      background-color: var(--primary);
      color: var(--primary-foreground);
      &:hover {
        @media (hover: hover) {
          background-color: var(--primary);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--primary) 85%, transparent);
          }
        }
      }
    }
    &.cs-secondary {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--secondary);
      background-color: var(--secondary);
      color: var(--secondary-foreground);
      &:hover {
        @media (hover: hover) {
          background-color: var(--secondary);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--secondary) 85%, transparent);
          }
        }
      }
    }
    &.cs-accent {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--accent);
      background-color: var(--accent);
      color: var(--accent-foreground);
      &:hover {
        @media (hover: hover) {
          background-color: var(--accent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--accent) 85%, transparent);
          }
        }
      }
    }
    &.cs-muted {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--muted);
      background-color: var(--muted);
      color: var(--muted-foreground);
      &:hover {
        @media (hover: hover) {
          background-color: var(--accent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--accent) 85%, transparent);
          }
        }
      }
    }
    &.cs-primary-inverted {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--primary);
      background-color: var(--primary-foreground);
      color: var(--primary);
      &:hover {
        @media (hover: hover) {
          background-color: var(--primary-foreground);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--primary-foreground) 85%, transparent);
          }
        }
      }
    }
    &.cs-secondary-inverted {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--secondary-foreground);
      background-color: var(--secondary-foreground);
      color: var(--secondary);
      &:hover {
        @media (hover: hover) {
          background-color: var(--secondary-foreground);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--secondary-foreground) 85%, transparent);
          }
        }
      }
    }
    &.cs-accent-inverted {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--accent-foreground);
      background-color: var(--accent-foreground);
      color: var(--accent);
      &:hover {
        @media (hover: hover) {
          background-color: var(--accent-foreground);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--accent-foreground) 85%, transparent);
          }
        }
      }
    }
    &.cs-muted-inverted {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--muted-foreground);
      background-color: var(--muted-foreground);
      color: var(--muted);
      &:hover {
        @media (hover: hover) {
          background-color: var(--muted-foreground);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--muted-foreground) 85%, transparent);
          }
        }
      }
    }
    &.cs-primary-outline {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--primary);
      background-color: transparent;
      color: var(--primary);
    }
    &.cs-secondary-outline {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--secondary);
      background-color: transparent;
      color: var(--secondary);
    }
    &.cs-accent-outline {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--accent);
      background-color: transparent;
      color: var(--accent);
    }
    &.cs-muted-outline {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--muted);
      background-color: transparent;
      color: var(--muted);
    }
    &.cs-custom {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--color-gray-300);
      background-color: var(--color-gray-300);
      color: var(--color-gray-800);
    }
    &.icon-first {
      flex-direction: row;
    }
    &.icon-last {
      flex-direction: row-reverse;
    }
    & .label {
      --tw-leading: 1;
      line-height: 1;
      --tw-font-weight: var(--font-weight-normal);
      font-weight: var(--font-weight-normal);
      color: inherit;
    }
  }
}
@layer components {
  .ts-blockquote {
    position: relative;
    margin-block-end: calc(var(--spacing) * 6);
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 2px;
    border-inline-start-color: var(--color-gray-200);
    padding-inline-start: calc(var(--spacing) * 2);
    & .blockquote-source {
      margin-block-start: calc(var(--spacing) * 6);
    }
  }
}
@layer components {
  .ts-button {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-decoration-line: none;
    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, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 300ms;
    transition-duration: 300ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    --tw-outline-style: none;
    outline-style: none;
    &:hover {
      @media (hover: hover) {
        text-decoration-line: none;
      }
    }
    &:focus-visible {
      border-color: var(--ring);
    }
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus-visible {
      --tw-ring-color: var(--ring);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
      }
    }
    &:disabled {
      pointer-events: none;
    }
    &:disabled {
      opacity: 50%;
    }
    &.cs-primary {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--primary);
      background-color: var(--primary);
      color: var(--primary-foreground);
      &:hover {
        @media (hover: hover) {
          background-color: var(--primary);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--primary) 85%, transparent);
          }
        }
      }
    }
    &.cs-secondary {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--secondary);
      background-color: var(--secondary);
      color: var(--secondary-foreground);
      &:hover {
        @media (hover: hover) {
          background-color: var(--secondary);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--secondary) 85%, transparent);
          }
        }
      }
    }
    &.cs-accent {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--accent);
      background-color: var(--accent);
      color: var(--accent-foreground);
      &:hover {
        @media (hover: hover) {
          background-color: var(--accent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--accent) 85%, transparent);
          }
        }
      }
    }
    &.cs-muted {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--muted);
      background-color: var(--muted);
      color: var(--muted-foreground);
      &:hover {
        @media (hover: hover) {
          background-color: var(--accent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--accent) 85%, transparent);
          }
        }
      }
    }
    &.cs-primary-inverted {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--primary-foreground);
      background-color: var(--primary-foreground);
      color: var(--primary);
      &:hover {
        @media (hover: hover) {
          background-color: var(--primary-foreground);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--primary-foreground) 85%, transparent);
          }
        }
      }
    }
    &.cs-secondary-inverted {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--secondary-foreground);
      background-color: var(--secondary-foreground);
      color: var(--secondary);
      &:hover {
        @media (hover: hover) {
          background-color: var(--secondary-foreground);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--secondary-foreground) 85%, transparent);
          }
        }
      }
    }
    &.cs-accent-inverted {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--accent-foreground);
      background-color: var(--accent-foreground);
      color: var(--accent);
      &:hover {
        @media (hover: hover) {
          background-color: var(--accent-foreground);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--accent-foreground) 85%, transparent);
          }
        }
      }
    }
    &.cs-muted-inverted {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--muted-foreground);
      background-color: var(--muted-foreground);
      color: var(--muted);
      &:hover {
        @media (hover: hover) {
          background-color: var(--muted-foreground);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--muted-foreground) 85%, transparent);
          }
        }
      }
    }
    &.cs-primary-outline {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--primary);
      background-color: transparent;
      color: var(--primary);
    }
    &.cs-secondary-outline {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--secondary);
      background-color: transparent;
      color: var(--secondary);
    }
    &.cs-accent-outline {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--accent);
      background-color: transparent;
      color: var(--accent);
    }
    &.cs-muted-outline {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--muted);
      background-color: transparent;
      color: var(--muted);
    }
    &.cs-custom {
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--color-gray-300);
      background-color: var(--color-gray-300);
      color: var(--color-gray-800);
    }
    &.btn-size-sm {
      gap: calc(var(--spacing) * 1);
      padding-inline: calc(var(--spacing) * 4);
      padding-block: calc(var(--spacing) * 2);
      font-size: var(--text-md);
      line-height: var(--tw-leading, var(--text-md--line-height));
    }
    &.btn-size-md {
      gap: calc(var(--spacing) * 2);
      padding-inline: calc(var(--spacing) * 6);
      padding-block: calc(var(--spacing) * 3);
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
    &.btn-size-lg {
      gap: calc(var(--spacing) * 3);
      padding-inline: calc(var(--spacing) * 8);
      padding-block: calc(var(--spacing) * 4);
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
    &.btn-size-xl {
      gap: calc(var(--spacing) * 3);
      padding-inline: calc(var(--spacing) * 10);
      padding-block: calc(var(--spacing) * 5);
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
    &.width-full {
      width: 100%;
      @media (width >= 40rem) {
        width: fit-content;
      }
    }
    &.width-fit {
      width: fit-content;
    }
    &.icon-first {
      flex-direction: row;
    }
    &.icon-last {
      flex-direction: row-reverse;
    }
    & .icon {
      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, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 300ms;
      transition-duration: 300ms;
      --tw-ease: var(--ease-in-out);
      transition-timing-function: var(--ease-in-out);
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          --tw-translate-x: calc(var(--spacing) * 1);
          translate: var(--tw-translate-x) var(--tw-translate-y);
        }
      }
    }
  }
}
@layer components {
  .ts-card {
    container-type: inline-size;
    position: relative;
    margin-inline: auto;
    width: 100%;
    &.width-100 {
      @media (width >= 64rem) {
        max-width: 100%;
      }
    }
    &.width-90 {
      @media (width >= 64rem) {
        max-width: calc(9 / 10 * 100%);
      }
    }
    &.width-80 {
      @media (width >= 64rem) {
        max-width: calc(8 / 10 * 100%);
      }
    }
    &.width-75 {
      @media (width >= 64rem) {
        max-width: calc(3 / 4 * 100%);
      }
    }
    &.width-50 {
      @media (width >= 64rem) {
        max-width: calc(1 / 2 * 100%);
      }
    }
    &.width-auto {
      width: auto;
    }
    .card-bg-color {
      position: absolute;
      inset: calc(var(--spacing) * 0);
      z-index: -1;
    }
    .card-inner {
      margin-inline: auto;
      display: flex;
      max-width: none;
      flex-direction: column;
      &.card-gap-sm {
        gap: calc(var(--spacing) * 2);
      }
      &.card-gap-md {
        gap: calc(var(--spacing) * 4);
      }
      &.card-gap-lg {
        column-gap: calc(var(--spacing) * 8);
        row-gap: calc(var(--spacing) * 6);
      }
      &.card-gap-xl {
        gap: calc(var(--spacing) * 16);
        row-gap: calc(var(--spacing) * 6);
      }
    }
    .card-media, .card-content {
      width: 100%;
      flex: 1;
    }
    .card-media:has(.image-fill) {
      align-self: stretch;
      div, figure {
        height: 100%;
        width: 100%;
      }
    }
  }
}
@layer components {
  .ts-container {
    container-type: inline-size;
    position: relative;
    .container-bg-color {
      position: absolute;
      inset: calc(var(--spacing) * 0);
      z-index: -3;
    }
    .container-bg-media {
      position: absolute;
      inset: calc(var(--spacing) * 0);
      z-index: -2;
    }
    .container-overlay {
      position: absolute;
      inset: calc(var(--spacing) * 0);
      z-index: -1;
    }
    .container-content {
      margin-inline: auto;
      & .cq-full {
        margin-inline: calc(var(--spacing) * 0);
      }
      & .cq-full {
        width: 100%;
      }
      & .vw-full {
        margin-inline: calc(var(--spacing) * 0);
      }
      & .vw-full {
        width: 100%;
      }
    }
  }
}
@layer components {
  .ts-dialog {
    margin: auto;
    border: 0;
    padding: 2rem;
    background-color: white;
    width: 90vw;
    max-width: 48rem;
    &::backdrop {
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .dialog-inner {
      display: grid;
      grid-template-areas: "cell";
      padding-top: 2rem;
      background-color: transparent;
    }
    .dialog-content {
      grid-area: cell;
    }
    .close-button {
      grid-area: cell;
      z-index: 1;
      align-self: start;
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      transform: translateY(-2rem);
      button {
        padding: 0;
        border-radius: 50%;
        color: black;
        background-color: white;
        border-color: white;
      }
    }
  }
  .ts-dialog:focus:not(:focus-visible), .ts-dialog :focus:not(:focus-visible), .ts-dialog button:focus:not(:focus-visible) {
    outline: none;
  }
  .ts-dialog.dialog-visible {
    display: block;
    min-height: calc(var(--spacing) * 10);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-border-style: dotted;
    border-style: dotted;
    border-color: var(--foreground);
    padding: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    opacity: 50%;
  }
}
@layer components {
  .ts-dropdown-menu {
    position: relative;
    display: inline-block;
    .menu-button {
      .ts-button .icon {
        transform: rotate(0);
      }
    }
    .menu-content {
      width: 100%;
      border-radius: 0.25rem;
      background-color: var(--color-white);
      --tw-shadow: var(--shadow-md);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      position: absolute;
      left: 0;
      top: calc(100% + 0.25rem);
      z-index: 99;
      pointer-events: none;
      opacity: 0;
      transform: translateY(-1rem);
      transition: all 150ms ease-in-out;
      a {
        display: block;
        width: 100%;
        padding: calc(var(--spacing) * 2);
      }
    }
  }
  .ts-dropdown-menu.menu-open {
    .menu-button {
      .ts-button .icon {
        transform: rotate(180deg);
      }
    }
    .menu-content {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
  }
  .ts-dropdown-menu.menu-canvas {
    .menu-content {
      position: static;
      opacity: 1;
      transform: translateY(0);
    }
  }
}
@layer components {
  .ts-grid {
    container-type: inline-size;
    position: relative;
    margin-inline: auto;
    width: 100%;
    .grid-bg-color {
      position: absolute;
      inset: calc(var(--spacing) * 0);
      z-index: -1;
    }
    .grid-content {
      margin-inline: auto;
      display: grid;
      & .cq-full {
        margin-inline: calc(var(--spacing) * 0);
      }
      & .cq-full {
        width: 100%;
      }
      max-width: var(--content-width);
      &.grid-gap-none {
        gap: calc(var(--spacing) * 0);
      }
      &.grid-gap-sm {
        gap: calc(var(--spacing) * 2);
      }
      &.grid-gap-md {
        gap: calc(var(--spacing) * 4);
      }
      &.grid-gap-lg {
        gap: calc(var(--spacing) * 8);
      }
      &.grid-gap-xl {
        gap: calc(var(--spacing) * 16);
      }
    }
  }
}
@layer components {
  .ts-group {
    container-type: inline-size;
    position: relative;
    margin-inline: auto;
    width: 100%;
    .group-bg-color {
      position: absolute;
      inset: calc(var(--spacing) * 0);
      z-index: -1;
    }
    .group-content {
      margin-inline: auto;
      display: flex;
      & .cq-full {
        margin-inline: calc(var(--spacing) * 0);
      }
      & .cq-full {
        width: 100%;
      }
      max-width: var(--content-width);
      &.group-gap-none {
        gap: calc(var(--spacing) * 0);
      }
      &.group-gap-sm {
        gap: calc(var(--spacing) * 2);
      }
      &.group-gap-md {
        gap: calc(var(--spacing) * 4);
      }
      &.group-gap-lg {
        gap: calc(var(--spacing) * 8);
      }
      &.group-gap-xl {
        gap: calc(var(--spacing) * 16);
      }
    }
  }
}
@layer components;
@layer components;
@layer components {
  .ts-icon {
    width: fit-content;
  }
}
@layer components {
  .ts-image {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    &.img-float-left {
      float: left;
      margin-inline-end: calc(var(--spacing) * 6);
      margin-block-end: calc(var(--spacing) * 6);
    }
    &.img-float-right {
      float: right;
      margin-inline-start: calc(var(--spacing) * 6);
      margin-block-end: calc(var(--spacing) * 6);
    }
    &.img-push-left {
      margin-inline-end: auto;
      img {
        margin-inline-end: auto;
      }
    }
    &.img-push-right {
      margin-inline-start: auto;
      img {
        margin-inline-start: auto;
      }
    }
    &.img-center {
      margin-inline: auto;
      img {
        margin-inline: auto;
      }
    }
    &.image-fill {
      img {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
    }
    .img-container {
      &.img-radius-sm {
        border-radius: .25rem;
      }
      &.img-radius-md {
        border-radius: .5rem;
      }
      &.img-radius-lg {
        border-radius: 1rem;
      }
      &.img-radius-xl {
        border-radius: 2rem;
      }
    }
    figcaption {
      display: block;
      &>*:last-child {
        margin-block-end: calc(var(--spacing) * 0);
      }
    }
  }
}
@layer components {
  .ts-link {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    &.icon-first {
      flex-direction: row;
    }
    &.icon-last {
      flex-direction: row-reverse;
    }
    & .icon {
      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, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 300ms;
      transition-duration: 300ms;
      --tw-ease: var(--ease-in-out);
      transition-timing-function: var(--ease-in-out);
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          --tw-translate-x: calc(var(--spacing) * 1);
          translate: var(--tw-translate-x) var(--tw-translate-y);
        }
      }
    }
  }
}
:root {
  --navbar-level1-bg-color: transparent;
  --navbar-level1-hover-bg-color: transparent;
  --navbar-level1-gap: 2rem;
  --navbar-level1-link-color: inherit;
  --navbar-level1-hover-link-color: inherit;
  --navbar-level1-link-padding: 0;
  --navbar-level1-line-height: 3rem;
  --navbar-level1-font-weight: bold;
  --navbar-level1-text-align: center;
  --navbar-level1-text-transform: uppercase;
  --navbar-level2-bg-color: white;
  --navbar-level2-hover-bg-color: white;
  --navbar-level2-link-color: inherit;
  --navbar-level2-hover-link-color: inherit;
  --navbar-level2-link-padding: 0.5rem 1rem;
  --navbar-level2-width: 250px;
  --navbar-level2-text-transform: none;
  --navbar-mobile-bg-color: white;
  --navbar-mobile-link-color: inherit;
  --navbar-mobile-border-color: inherit;
  --navbar-toggle-color: var(--gray);
}
@layer components {
  .ts-navbar:not(.menu-sm) {
    overflow: hidden;
    nav {
      > ul {
        background-color: var(--navbar-level1-bg-color);
        display: flex;
        gap: var(--navbar-level1-gap);
        > li {
          margin: 0;
          display: block;
          position: relative;
          > a {
            display: block;
            padding: var(--navbar-level1-link-padding);
            line-height: var(--navbar-level1-line-height);
            color: var(--navbar-level1-link-color);
            font-weight: var(--navbar-level1-font-weight);
            text-align: var(--navbar-level1-text-align);
            text-transform: var(--navbar-level1-text-transform);
            text-decoration: none;
            transition: 0.25s;
            white-space: nowrap;
            &:hover {
              background-color: var(--navbar-level1-hover-bg-color);
              color: var(--navbar-level1-hover-link-color);
            }
          }
        }
      }
      .level2 {
        position: absolute;
        top: var(--navbar-level1-line-height);
        left: 0;
        z-index: 99999;
        height: 0;
        opacity: 0;
        overflow: hidden;
        transition: opacity 0.25s linear;
        ul {
          background-color: var(--navbar-level2-bg-color);
          li {
            a {
              display: block;
              padding: var(--navbar-level2-link-padding);
              width: var(--navbar-level2-width);
              color: var(--navbar-level2-link-color);
              text-transform: var(--navbar-level2-text-transform);
              text-decoration: none;
              &:hover {
                background-color: var(--navbar-level2-hover-bg-color);
                color: var(--navbar-level2-hover-link-color);
              }
            }
          }
        }
      }
      > ul > li:hover .level2 {
        height: auto;
        overflow: auto;
        opacity: 1;
      }
    }
    .navbar--close, .navbar--hamburger {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border-width: 0;
    }
  }
  .ts-navbar.menu-sm {
    .navbar--menu {
      position: fixed;
      top: 0;
      bottom: 0;
      right: -100%;
      overflow-y: scroll;
      z-index: 100;
      width: 100%;
      transition: 0.5s;
      padding: 1rem 2rem;
      background-color: var(--navbar-mobile-bg-color);
      display: flex;
      flex-direction: column;
      row-gap: 2rem;
      nav {
        li {
          margin-bottom: 0.75rem;
        }
        a {
          color: var(--nav-mobile-link-color);
        }
        .level2 {
          margin-top: 0.75rem;
          padding-left: 0.5rem;
        }
      }
      .navbar--close {
        align-self: end;
      }
    }
    .navbar--hamburger {
      transition: all 1s;
    }
  }
  .ts-navbar.menu-sm.is-open {
    .navbar--menu {
      right: 0;
      width: 100vw;
    }
    .navbar--hamburger {
      transform: rotate(90deg);
    }
  }
}
@layer components {
  .ts-raw-html {
    p, ul, ol, h2, h3, h4, h5, h6, table {
      margin-block-end: calc(var(--spacing) * 6);
    }
    .media {
      margin-block-end: calc(var(--spacing) * 6);
    }
    a {
      color: var(--primary);
    }
    ul, ol {
      margin-block-end: calc(var(--spacing) * 6);
      list-style-type: disc;
      padding-inline-start: calc(var(--spacing) * 5);
    }
    li {
      margin-inline-start: calc(var(--spacing) * 8);
      margin-block-end: calc(var(--spacing) * 2);
    }
  }
}
@layer components {
  .ts-section {
    container-type: inline-size;
    position: relative;
    .section-bg-color {
      position: absolute;
      inset: calc(var(--spacing) * 0);
      z-index: -300;
    }
    .section-bg-media {
      position: absolute;
      inset: calc(var(--spacing) * 0);
      z-index: -200;
    }
    .section-overlay {
      position: absolute;
      inset: calc(var(--spacing) * 0);
      z-index: -100;
    }
    .section-content {
      margin-inline: auto;
      & .cq-full {
        margin-inline: calc(var(--spacing) * 0);
      }
      & .cq-full {
        width: 100%;
      }
      max-width: var(--content-width);
    }
  }
}
@layer components {
  .ts-tabs {
    opacity: 100%;
  }
  .tabs-list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 4);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--border);
    padding-block-end: calc(var(--spacing) * 2);
  }
  .tabs-button.cs-custom {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-gray-300);
    color: var(--color-gray-800);
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(87.2% 0.01 258.338) 85%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-gray-300) 85%, transparent);
        }
      }
    }
    &[aria-selected="true"] {
      border-color: var(--color-gray-600);
      background-color: var(--color-gray-600);
      color: var(--color-white);
    }
  }
  .tabs-panels {
    padding-block: calc(var(--spacing) * 4);
  }
  .ts-tabs-panel {
    &>:first-child {
      margin-top: calc(var(--spacing) * 0);
    }
    &>:last-child {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }
}
@layer components {
  .ts-text {
    p, ul, ol, h2, h3, h4, h5, h6, table {
      margin-block-end: calc(var(--spacing) * 6);
    }
    .media {
      margin-block-end: calc(var(--spacing) * 6);
    }
    a {
      color: var(--primary);
    }
    ul, ol {
      margin-block-end: calc(var(--spacing) * 6);
      list-style-type: disc;
      padding-inline-start: calc(var(--spacing) * 5);
    }
    li {
      margin-inline-start: calc(var(--spacing) * 8);
      margin-block-end: calc(var(--spacing) * 2);
    }
    &.fontsize-88 {
      font-size: 0.875rem;
    }
    &.fontsize-100 {
      font-size: 1rem;
    }
    &.fontsize-112 {
      font-size: 1.125rem;
    }
    &.fontsize-125 {
      font-size: 1.25rem;
    }
    &.fontsize-150 {
      font-size: 1.5rem;
    }
    &.fontsize-200 {
      font-size: 2rem;
    }
  }
}
@layer components {
  .ts-video, .ts-video-local {
    &.vid-float-left {
      float: left;
      margin-inline-end: calc(var(--spacing) * 6);
      margin-block-end: calc(var(--spacing) * 6);
    }
    &.vid-float-right {
      float: right;
      margin-inline-start: calc(var(--spacing) * 6);
      margin-block-end: calc(var(--spacing) * 6);
    }
    &.vid-push-left {
      margin-inline-end: auto;
      iframe, video {
        margin-inline-end: auto;
      }
    }
    &.vid-push-right {
      margin-inline-start: auto;
      iframe, video {
        margin-inline-start: auto;
      }
    }
    &.vid-center {
      margin-inline: auto;
      iframe, video {
        margin-inline: auto;
      }
    }
    &.vid-caption-above {
      display: flex;
      flex-direction: column-reverse;
      align-items: flex-start;
      gap: calc(var(--spacing) * 2);
    }
    &.vid-caption-below {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: calc(var(--spacing) * 2);
    }
    &.vid-caption-hidden {
      & figcaption {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border-width: 0;
      }
    }
    figcaption {
      display: block;
      &>*:last-child {
        margin-block-end: calc(var(--spacing) * 0);
      }
    }
  }
}
@layer components {
  .webform-submission-form {
    container-type: inline-size;
    max-width: calc(var(--spacing) * 128);
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border-width: 0;
    }
  }
  .webform-submission-form, .fieldset-wrapper, *[id^="edit-page-"] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 6);
  }
  fieldset:not(.webform-type-fieldset) .fieldset-wrapper {
    gap: calc(var(--spacing) * 1);
  }
  label, legend {
    margin-block-end: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    @container (width >= 28rem) {
      font-size: var(--text-md);
      line-height: var(--tw-leading, var(--text-md--line-height));
    }
  }
  .webform-type-checkboxes, .webform-type-radios {
    legend {
      margin-block-end: calc(var(--spacing) * 2);
    }
  }
  .form-item, .form-actions {
    width: 100%;
  }
  .webform-element-description {
    margin-block-start: calc(var(--spacing) * 1);
    font-size: var(--text-md);
    line-height: var(--tw-leading, var(--text-md--line-height));
    font-style: italic;
  }
  .form-required::after {
    margin-inline-start: calc(var(--spacing) * 1);
    color: var(--color-red-500);
    content: "*";
  }
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], input[type="file"], textarea, select {
    width: 100%;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: transparent;
    padding: calc(var(--spacing) * 2);
    font-size: var(--text-md);
    line-height: var(--tw-leading, var(--text-md--line-height));
    --tw-outline-style: none;
    outline-style: none;
  }
  select {
    -webkit-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
    background-position: calc(100% - 15px) center, calc(100% - 10px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 30px;
  }
  input[type="file"]::file-selector-button {
    margin-inline-end: calc(var(--spacing) * 4);
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--muted);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--muted) 40%, transparent);
    }
    padding: calc(var(--spacing) * 1);
  }
  input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="date"]:focus, input[type="time"]:focus, textarea:focus, select:focus {
    border-color: var(--color-gray-300);
    background-color: var(--muted);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--muted) 40%, transparent);
    }
    --tw-shadow: var(--shadow-sm);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  input::placeholder, textarea::placeholder, select {
    color: var(--muted-foreground);
  }
  input.form-submit, input.button {
    border-radius: var(--radius);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--primary);
    background-color: var(--primary);
    padding-inline: calc(var(--spacing) * 8);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    color: var(--primary-foreground);
    &:hover {
      @media (hover: hover) {
        background-color: var(--primary);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--primary) 85%, transparent);
        }
      }
    }
  }
  input.form-submit:hover, input.button:hover {
    background-color: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--primary) 85%, transparent);
    }
  }
  .form-item--error input, .form-item--error textarea, .form-item--error select {
    border-color: var(--color-red-500);
  }
  .form-item--error input:focus, .form-item--error textarea:focus, .form-item--error select:focus {
    border-color: var(--color-red-500);
    --tw-shadow: var(--shadow-sm);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .form-item--error-message {
    margin-block-start: calc(var(--spacing) * 1);
    margin-block-end: calc(var(--spacing) * 3);
    flex-basis: 100%;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-red-500);
  }
  .webform-options-display-one-column {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .webform-type-checkbox.form-item, .webform-type-radio.form-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: calc(var(--spacing) * 2);
    padding-inline-start: calc(var(--spacing) * 2);
    label {
      margin: calc(var(--spacing) * 0);
      --tw-font-weight: var(--font-weight-normal);
      font-weight: var(--font-weight-normal);
    }
  }
  .progress-text {
    color: inherit !important;
  }
  fieldset.captcha {
    .captcha__title, .captcha__description {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border-width: 0;
    }
    .frc-captcha {
      border-radius: 0.25rem;
      border-color: var(--color-gray-300) !important;
      padding: calc(var(--spacing) * 1);
    }
  }
}
@media (min-width: 768px) {
  .webform-flexbox {
    margin: calc(var(--spacing) * 0);
    gap: calc(var(--spacing) * 6);
    .webform-flex--container {
      margin: calc(var(--spacing) * 0);
    }
  }
}
@media (max-width: 767px) {
  .webform-flexbox {
    margin: calc(var(--spacing) * 0);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 6);
  }
}
@layer components {
  .site-footer .main-nav {
    margin-block-end: 0.5rem;
    ul {
      display: flex;
      justify-content: end;
      column-gap: var(--navbar-level1-gap);
      row-gap: 0.75rem;
      > li {
        margin: 0;
        display: block;
        > a {
          display: block;
          color: var(--navbar-level1-link-color);
          font-weight: var(--navbar-level1-font-weight);
          text-align: var(--navbar-level1-text-align);
          text-transform: var(--navbar-level1-text-transform);
          text-decoration: none;
          white-space: nowrap;
        }
      }
    }
    .level2, .level3 {
      display: none;
    }
  }
}
@layer components {
  .footer-nav > ul {
    display: flex;
    flex-wrap: wrap;
    > li:not(:last-child)::after {
      content: "|";
      padding-inline: 0.75rem;
    }
  }
}
.entity-moderation-form {
  background: inherit;
}
.layout-container {
  position: relative;
  z-index: 1;
}
@layer utilities {
  .layout-content {
    container-type: inline-size;
  }
  .region-content, .region-header, .region-footer {
    margin-inline: auto;
    padding-inline: calc(var(--spacing) * 4);
    max-width: var(--content-width);
  }
  .vw-full {
    width: 100vw;
    margin-inline: calc(-50vw + 50%);
  }
  .cq-full {
    width: 100cqw;
    margin-inline: calc(-50cqw + 50%);
  }
  .cw-full {
    width: 100%;
    max-width: none;
  }
  .cw-wide {
    width: 100%;
    max-width: var(--content-width-wide);
  }
  .cw-100 {
    width: 100%;
    max-width: var(--content-width);
  }
  .cw-90 {
    width: 100%;
    max-width: calc(var(--content-width) * 0.9);
  }
  .cw-75 {
    width: 100%;
    max-width: calc(var(--content-width) * 0.75);
  }
  .cw-67 {
    width: 100%;
    max-width: calc(var(--content-width) * 0.67);
  }
  .cw-50 {
    width: 100%;
    max-width: calc(var(--content-width) * 0.5);
  }
  .views-exposed-form {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .view-header {
    padding-block-end: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      padding-block-end: calc(var(--spacing) * 6);
    }
  }
  .heading-responsive-8xl {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
    @media (width >= 48rem) {
      font-size: var(--text-7xl);
      line-height: var(--tw-leading, var(--text-7xl--line-height));
    }
    @media (width >= 80rem) {
      font-size: var(--text-8xl);
      line-height: var(--tw-leading, var(--text-8xl--line-height));
    }
  }
  .heading-responsive-7xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
    @media (width >= 48rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
    @media (width >= 80rem) {
      font-size: var(--text-7xl);
      line-height: var(--tw-leading, var(--text-7xl--line-height));
    }
  }
  .heading-responsive-6xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
    @media (width >= 48rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
    @media (width >= 80rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }
  .heading-responsive-5xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
    @media (width >= 80rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .heading-responsive-4xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    @media (width >= 80rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .heading-responsive-3xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    @media (width >= 80rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .heading-responsive-2xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    @media (width >= 48rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .heading-responsive-xl {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    @media (width >= 48rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
}
:root {
  --dark-blue: oklch(48.07% 0.0928 228.7);
  --light-blue: oklch(94.08% 0.0377 218.8);
  --bright-red: oklch(60.97% 0.2415 28.4);
  --light-silver: oklch(97.05% 0.0027 270);
  --text-color: oklch(38.04% 0.0047 280);
  --font-sans: Poppins, sans-serif;
  --font-serif: ui-serif, serif;
  --font-mono: ui-monospace, monospace;
  --font-text: var(--font-sans);
  --font-heading: "Saira Extra Condensed", sans-serif;
  --content-width: 75rem;
  --content-width-wide: 96rem;
  --radius: 0.75rem;
  --tracking-normal: 0em;
  --spacing: 0.25rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0% 0 0);
  --shadow-2xs: 0 1px 3px 0px oklch(0% 0 0 / 0.05);
  --shadow-xs: 0 1px 3px 0px oklch(0% 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0px oklch(0% 0 0 / 0.1), 0 1px 2px -1px oklch(0% 0 0 / 0.1);
  --shadow: 0 1px 3px 0px oklch(0% 0 0 / 0.1), 0 1px 2px -1px oklch(0% 0 0 / 0.1);
  --shadow-md: 0 1px 3px 0px oklch(0% 0 0 / 0.1), 0 2px 4px -1px oklch(0% 0 0 / 0.1);
  --shadow-lg: 0 1px 3px 0px oklch(0% 0 0 / 0.1), 0 4px 6px -1px oklch(0% 0 0 / 0.1);
  --shadow-xl: 0 1px 3px 0px oklch(0% 0 0 / 0.1), 0 8px 10px -1px oklch(0% 0 0 / 0.1);
  --shadow-2xl: 0 1px 3px 0px oklch(0% 0 0 / 0.25);
}
:root {
  --background: white;
  --foreground: var(--text-color);
  --card: white;
  --card-foreground: var(--text-color);
  --popover: white;
  --popover-foreground: var(--text-color);
  --primary: var(--dark-blue);
  --primary-foreground: white;
  --secondary: var(--light-blue);
  --secondary-foreground: var(--text-color);
  --muted: var(--light-silver);
  --muted-foreground: oklch(52% 0.005 265);
  --accent: var(--bright-red);
  --accent-foreground: white;
  --destructive: var(--bright-red);
  --destructive-foreground: white;
  --border: oklch(91% 0.004 265);
  --input: oklch(91% 0.004 265);
  --ring: var(--dark-blue);
  --chart-1: var(--dark-blue);
  --chart-2: var(--bright-red);
  --chart-3: oklch(65% 0.09 200);
  --chart-4: oklch(72% 0.14 35);
  --chart-5: oklch(55% 0.02 265);
}
.dark {
  --background: oklch(18% 0.04 228);
  --foreground: var(--light-silver);
  --card: oklch(22% 0.04 228);
  --card-foreground: var(--light-silver);
  --popover: oklch(22% 0.04 228);
  --popover-foreground: var(--light-silver);
  --primary: oklch(63% 0.095 225);
  --primary-foreground: white;
  --secondary: oklch(50% 0.08 225);
  --secondary-foreground: var(--light-silver);
  --muted: oklch(26% 0.04 228);
  --muted-foreground: oklch(72% 0.02 265);
  --accent: oklch(68% 0.21 28);
  --accent-foreground: white;
  --destructive: oklch(55% 0.2 27);
  --destructive-foreground: white;
  --border: oklch(32% 0.042 228);
  --input: oklch(32% 0.042 228);
  --ring: oklch(63% 0.095 225);
  --chart-1: oklch(68% 0.09 200);
  --chart-2: oklch(68% 0.21 28);
  --chart-3: var(--light-blue);
  --chart-4: oklch(72% 0.14 35);
  --chart-5: oklch(72% 0.02 265);
}
@font-face {
  font-display: swap;
  font-family: "Saira Extra Condensed";
  font-style: normal;
  font-weight: 400;
  src: url("/themes/custom/foundry_override/fonts/saira-extra-condensed-v15-latin-regular.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Saira Extra Condensed";
  font-style: normal;
  font-weight: 700;
  src: url("/themes/custom/foundry_override/fonts/saira-extra-condensed-v15-latin-700.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("/themes/custom/foundry_override/fonts/poppins-v24-latin-regular.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  src: url("/themes/custom/foundry_override/fonts/poppins-v24-latin-700.woff2") format("woff2");
}
.ts-button {
  text-transform: uppercase;
  border-radius: 0;
}
h1.ts-heading, h2.ts-heading, h3.ts-heading {
  text-transform: uppercase;
  color: var(--color-primary);
}
input.form-submit, input.button {
  border-radius: 0;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--accent);
  background-color: var(--accent);
  color: var(--color-white);
}
input.form-submit:hover, input.button:hover {
  background-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--accent) 85%, transparent);
  }
}
.header-logo, .footer-logo {
  max-width: 225px;
}
.site-footer {
  .region-footer > .ts-group {
    container-name: footer-group;
  }
  .main-nav > ul {
    flex-wrap: wrap;
  }
  .footer-nav {
    display: flex;
    justify-content: end;
    gap: var(--navbar-level1-gap);
  }
}
@container footer-group (max-width: 575px) {
  .site-footer {
    .main-nav {
      ul {
        justify-content: center;
      }
    }
    .text-align-right {
      text-align: center;
    }
    .footer-nav {
      justify-content: center;
      ul {
        justify-content: center;
      }
    }
  }
}
body:not(#page-1) main {
  padding-block: 2rem;
}
#page-1 {
  .hp-services, .hp-case-studies {
    h2 {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 2px;
      --tw-border-style: solid;
      border-style: solid;
      border-color: var(--accent);
      padding-block-end: calc(var(--spacing) * 2);
      text-transform: uppercase;
    }
  }
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-outline-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-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@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-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-border-style: solid;
      --tw-outline-style: solid;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-leading: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
    }
  }
}