/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-cyan-100: oklch(95.6% 0.045 203.388);
    --color-cyan-600: oklch(60.9% 0.126 221.723);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-indigo-100: oklch(93% 0.034 272.788);
    --color-indigo-600: oklch(51.1% 0.262 276.966);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-gray-950: oklch(13% 0.028 261.692);
    --color-neutral-50: var(--color-neutral-50);
    --color-neutral-100: var(--color-neutral-100);
    --color-neutral-200: var(--color-neutral-200);
    --color-neutral-300: var(--color-neutral-300);
    --color-neutral-400: var(--color-neutral-400);
    --color-neutral-500: var(--color-neutral-500);
    --color-neutral-600: var(--color-neutral-600);
    --color-neutral-700: var(--color-neutral-700);
    --color-neutral-800: var(--color-neutral-800);
    --color-neutral-900: var(--color-neutral-900);
    --color-neutral-950: var(--color-neutral-950);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-wide: 0.025em;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --blur-sm: 8px;
    --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);
    --color-on-background: var(--color-on-background);
    --color-background: var(--color-background);
    --color-background-50: var(--color-background-50);
    --color-background-100: var(--color-background-100);
    --color-background-200: var(--color-background-200);
    --color-background-300: var(--color-background-300);
    --color-background-400: var(--color-background-400);
    --color-background-500: var(--color-background-500);
    --color-background-600: var(--color-background-600);
    --color-background-700: var(--color-background-700);
    --color-background-800: var(--color-background-800);
    --color-background-900: var(--color-background-900);
    --color-background-950: var(--color-background-950);
    --color-on-primary: var(--color-on-primary);
    --color-primary: var(--color-primary);
    --color-primary-50: var(--color-primary-50);
    --color-primary-100: var(--color-primary-100);
    --color-primary-200: var(--color-primary-200);
    --color-primary-300: var(--color-primary-300);
    --color-primary-400: var(--color-primary-400);
    --color-primary-500: var(--color-primary-500);
    --color-primary-600: var(--color-primary-600);
    --color-primary-700: var(--color-primary-700);
    --color-primary-800: var(--color-primary-800);
    --color-primary-900: var(--color-primary-900);
    --color-primary-950: var(--color-primary-950);
    --color-on-secondary: var(--color-on-secondary);
    --color-secondary: var(--color-secondary);
    --color-secondary-50: var(--color-secondary-50);
    --color-secondary-100: var(--color-secondary-100);
    --color-secondary-200: var(--color-secondary-200);
    --color-secondary-300: var(--color-secondary-300);
    --color-secondary-400: var(--color-secondary-400);
    --color-secondary-500: var(--color-secondary-500);
    --color-secondary-600: var(--color-secondary-600);
    --color-secondary-700: var(--color-secondary-700);
    --color-secondary-800: var(--color-secondary-800);
    --color-secondary-900: var(--color-secondary-900);
    --color-secondary-950: var(--color-secondary-950);
    --color-on-accent: var(--color-on-accent);
    --color-accent: var(--color-accent);
    --color-accent-50: var(--color-accent-50);
    --color-accent-100: var(--color-accent-100);
    --color-accent-200: var(--color-accent-200);
    --color-accent-300: var(--color-accent-300);
    --color-accent-400: var(--color-accent-400);
    --color-accent-500: var(--color-accent-500);
    --color-accent-600: var(--color-accent-600);
    --color-accent-700: var(--color-accent-700);
    --color-accent-800: var(--color-accent-800);
    --color-accent-900: var(--color-accent-900);
    --color-accent-950: var(--color-accent-950);
    --color-on-neutral: var(--color-on-neutral);
    --color-neutral: var(--color-neutral);
    --color-on-surface: var(--color-on-surface);
    --color-surface: var(--color-surface);
    --color-surface-50: var(--color-surface-50);
    --color-surface-100: var(--color-surface-100);
    --color-surface-200: var(--color-surface-200);
    --color-surface-300: var(--color-surface-300);
    --color-surface-400: var(--color-surface-400);
    --color-surface-500: var(--color-surface-500);
    --color-surface-600: var(--color-surface-600);
    --color-surface-700: var(--color-surface-700);
    --color-surface-800: var(--color-surface-800);
    --color-surface-900: var(--color-surface-900);
    --color-surface-950: var(--color-surface-950);
    --color-on-surface-alt: var(--color-on-surface-alt);
    --color-surface-alt: var(--color-surface-alt);
    --color-surface-alt-50: var(--color-surface-alt-50);
    --color-surface-alt-100: var(--color-surface-alt-100);
    --color-surface-alt-200: var(--color-surface-alt-200);
    --color-surface-alt-300: var(--color-surface-alt-300);
    --color-surface-alt-400: var(--color-surface-alt-400);
    --color-surface-alt-500: var(--color-surface-alt-500);
    --color-surface-alt-600: var(--color-surface-alt-600);
    --color-surface-alt-700: var(--color-surface-alt-700);
    --color-surface-alt-800: var(--color-surface-alt-800);
    --color-surface-alt-900: var(--color-surface-alt-900);
    --color-surface-alt-950: var(--color-surface-alt-950);
    --color-on-success: var(--color-on-success);
    --color-success: var(--color-success);
    --color-success-50: var(--color-success-50);
    --color-success-100: var(--color-success-100);
    --color-success-200: var(--color-success-200);
    --color-success-300: var(--color-success-300);
    --color-success-400: var(--color-success-400);
    --color-success-500: var(--color-success-500);
    --color-success-600: var(--color-success-600);
    --color-success-700: var(--color-success-700);
    --color-success-800: var(--color-success-800);
    --color-success-900: var(--color-success-900);
    --color-success-950: var(--color-success-950);
    --color-on-warning: var(--color-on-warning);
    --color-warning: var(--color-warning);
    --color-warning-50: var(--color-warning-50);
    --color-warning-100: var(--color-warning-100);
    --color-warning-200: var(--color-warning-200);
    --color-warning-300: var(--color-warning-300);
    --color-warning-400: var(--color-warning-400);
    --color-warning-500: var(--color-warning-500);
    --color-warning-600: var(--color-warning-600);
    --color-warning-700: var(--color-warning-700);
    --color-warning-800: var(--color-warning-800);
    --color-warning-900: var(--color-warning-900);
    --color-warning-950: var(--color-warning-950);
    --color-on-danger: var(--color-on-danger);
    --color-danger: var(--color-danger);
    --color-danger-50: var(--color-danger-50);
    --color-danger-100: var(--color-danger-100);
    --color-danger-200: var(--color-danger-200);
    --color-danger-300: var(--color-danger-300);
    --color-danger-400: var(--color-danger-400);
    --color-danger-500: var(--color-danger-500);
    --color-danger-600: var(--color-danger-600);
    --color-danger-700: var(--color-danger-700);
    --color-danger-800: var(--color-danger-800);
    --color-danger-900: var(--color-danger-900);
    --color-danger-950: var(--color-danger-950);
    --color-on-info: var(--color-on-info);
    --color-info: var(--color-info);
    --color-info-50: var(--color-info-50);
    --color-info-100: var(--color-info-100);
    --color-info-200: var(--color-info-200);
    --color-info-300: var(--color-info-300);
    --color-info-400: var(--color-info-400);
    --color-info-500: var(--color-info-500);
    --color-info-600: var(--color-info-600);
    --color-info-700: var(--color-info-700);
    --color-info-800: var(--color-info-800);
    --color-info-900: var(--color-info-900);
    --color-info-950: var(--color-info-950);
    --animate-slide-in-down: slideInDown 0.3s ease-out forwards;
    --animate-slide-out-up: slideOutUp 0.3s ease-in forwards;
    --animate-slide-in-up: slideInUp 0.3s ease-out forwards;
    --animate-slide-out-down: slideOutDown 0.3s ease-in forwards;
  }
}
@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 {
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .collapse {
    visibility: collapse;
  }
  .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;
  }
  .\!absolute {
    position: absolute !important;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: 0;
  }
  .inset-y-0 {
    inset-block: 0;
  }
  .inset-s-0 {
    inset-inline-start: 0;
  }
  .inset-s-4 {
    inset-inline-start: calc(var(--spacing) * 4);
  }
  .start-0 {
    inset-inline-start: calc(var(--spacing) * 0);
  }
  .start-7 {
    inset-inline-start: calc(var(--spacing) * 7);
  }
  .end-0 {
    inset-inline-end: calc(var(--spacing) * 0);
  }
  .end-7 {
    inset-inline-end: calc(var(--spacing) * 7);
  }
  .inset-e-0 {
    inset-inline-end: 0;
  }
  .inset-e-4 {
    inset-inline-end: calc(var(--spacing) * 4);
  }
  .-top-2 {
    top: calc(var(--spacing) * -2);
  }
  .top-0 {
    top: 0;
  }
  .top-1\/2 {
    top: calc(1 / 2 * 100%);
  }
  .top-2 {
    top: calc(var(--spacing) * 2);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .top-16 {
    top: calc(var(--spacing) * 16);
  }
  .top-full {
    top: 100%;
  }
  .-right-2 {
    right: calc(var(--spacing) * -2);
  }
  .right-0 {
    right: 0;
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .bottom-0 {
    bottom: 0;
  }
  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }
  .left-0 {
    left: 0;
  }
  .left-1\/2 {
    left: calc(1 / 2 * 100%);
  }
  .left-2 {
    left: calc(var(--spacing) * 2);
  }
  .left-3 {
    left: calc(var(--spacing) * 3);
  }
  .left-4 {
    left: calc(var(--spacing) * 4);
  }
  .isolate {
    isolation: isolate;
  }
  .z-0 {
    z-index: 0;
  }
  .z-5 {
    z-index: 5;
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-30 {
    z-index: 30;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .z-\[1000\] {
    z-index: 1000;
  }
  .z-\[1100\] {
    z-index: 1100;
  }
  .order-first {
    order: -9999;
  }
  .order-last {
    order: 9999;
  }
  .row-1 {
    grid-row: 1;
  }
  .row-2 {
    grid-row: 2;
  }
  .row-3 {
    grid-row: 3;
  }
  .row-4 {
    grid-row: 4;
  }
  .row-5 {
    grid-row: 5;
  }
  .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;
    }
  }
  .m-0 {
    margin: 0;
  }
  .m-1 {
    margin: var(--spacing);
  }
  .m-2 {
    margin: calc(var(--spacing) * 2);
  }
  .m-3 {
    margin: calc(var(--spacing) * 3);
  }
  .m-4 {
    margin: calc(var(--spacing) * 4);
  }
  .m-5 {
    margin: calc(var(--spacing) * 5);
  }
  .m-6 {
    margin: calc(var(--spacing) * 6);
  }
  .m-7 {
    margin: calc(var(--spacing) * 7);
  }
  .m-8 {
    margin: calc(var(--spacing) * 8);
  }
  .m-9 {
    margin: calc(var(--spacing) * 9);
  }
  .m-10 {
    margin: calc(var(--spacing) * 10);
  }
  .m-11 {
    margin: calc(var(--spacing) * 11);
  }
  .m-12 {
    margin: calc(var(--spacing) * 12);
  }
  .m-13 {
    margin: calc(var(--spacing) * 13);
  }
  .m-14 {
    margin: calc(var(--spacing) * 14);
  }
  .m-15 {
    margin: calc(var(--spacing) * 15);
  }
  .m-16 {
    margin: calc(var(--spacing) * 16);
  }
  .m-17 {
    margin: calc(var(--spacing) * 17);
  }
  .m-18 {
    margin: calc(var(--spacing) * 18);
  }
  .m-19 {
    margin: calc(var(--spacing) * 19);
  }
  .m-20 {
    margin: calc(var(--spacing) * 20);
  }
  .m-21 {
    margin: calc(var(--spacing) * 21);
  }
  .m-22 {
    margin: calc(var(--spacing) * 22);
  }
  .m-23 {
    margin: calc(var(--spacing) * 23);
  }
  .m-24 {
    margin: calc(var(--spacing) * 24);
  }
  .container {
    margin-inline: auto;
    padding-inline: 1rem;
  }
  .mx-0 {
    margin-inline: 0;
  }
  .mx-1 {
    margin-inline: var(--spacing);
  }
  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }
  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }
  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }
  .mx-5 {
    margin-inline: calc(var(--spacing) * 5);
  }
  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }
  .mx-7 {
    margin-inline: calc(var(--spacing) * 7);
  }
  .mx-8 {
    margin-inline: calc(var(--spacing) * 8);
  }
  .mx-9 {
    margin-inline: calc(var(--spacing) * 9);
  }
  .mx-10 {
    margin-inline: calc(var(--spacing) * 10);
  }
  .mx-11 {
    margin-inline: calc(var(--spacing) * 11);
  }
  .mx-12 {
    margin-inline: calc(var(--spacing) * 12);
  }
  .mx-13 {
    margin-inline: calc(var(--spacing) * 13);
  }
  .mx-14 {
    margin-inline: calc(var(--spacing) * 14);
  }
  .mx-15 {
    margin-inline: calc(var(--spacing) * 15);
  }
  .mx-16 {
    margin-inline: calc(var(--spacing) * 16);
  }
  .mx-17 {
    margin-inline: calc(var(--spacing) * 17);
  }
  .mx-18 {
    margin-inline: calc(var(--spacing) * 18);
  }
  .mx-19 {
    margin-inline: calc(var(--spacing) * 19);
  }
  .mx-20 {
    margin-inline: calc(var(--spacing) * 20);
  }
  .mx-21 {
    margin-inline: calc(var(--spacing) * 21);
  }
  .mx-22 {
    margin-inline: calc(var(--spacing) * 22);
  }
  .mx-23 {
    margin-inline: calc(var(--spacing) * 23);
  }
  .mx-24 {
    margin-inline: calc(var(--spacing) * 24);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-0 {
    margin-block: 0;
  }
  .my-1 {
    margin-block: var(--spacing);
  }
  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }
  .my-3 {
    margin-block: calc(var(--spacing) * 3);
  }
  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }
  .my-5 {
    margin-block: calc(var(--spacing) * 5);
  }
  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }
  .my-7 {
    margin-block: calc(var(--spacing) * 7);
  }
  .my-8 {
    margin-block: calc(var(--spacing) * 8);
  }
  .my-9 {
    margin-block: calc(var(--spacing) * 9);
  }
  .my-10 {
    margin-block: calc(var(--spacing) * 10);
  }
  .my-11 {
    margin-block: calc(var(--spacing) * 11);
  }
  .my-12 {
    margin-block: calc(var(--spacing) * 12);
  }
  .my-13 {
    margin-block: calc(var(--spacing) * 13);
  }
  .my-14 {
    margin-block: calc(var(--spacing) * 14);
  }
  .my-15 {
    margin-block: calc(var(--spacing) * 15);
  }
  .my-16 {
    margin-block: calc(var(--spacing) * 16);
  }
  .my-17 {
    margin-block: calc(var(--spacing) * 17);
  }
  .my-18 {
    margin-block: calc(var(--spacing) * 18);
  }
  .my-19 {
    margin-block: calc(var(--spacing) * 19);
  }
  .my-20 {
    margin-block: calc(var(--spacing) * 20);
  }
  .my-21 {
    margin-block: calc(var(--spacing) * 21);
  }
  .my-22 {
    margin-block: calc(var(--spacing) * 22);
  }
  .my-23 {
    margin-block: calc(var(--spacing) * 23);
  }
  .my-24 {
    margin-block: calc(var(--spacing) * 24);
  }
  .ms-0 {
    margin-inline-start: 0;
  }
  .ms-1 {
    margin-inline-start: var(--spacing);
  }
  .ms-2 {
    margin-inline-start: calc(var(--spacing) * 2);
  }
  .ms-3 {
    margin-inline-start: calc(var(--spacing) * 3);
  }
  .ms-4 {
    margin-inline-start: calc(var(--spacing) * 4);
  }
  .ms-5 {
    margin-inline-start: calc(var(--spacing) * 5);
  }
  .ms-6 {
    margin-inline-start: calc(var(--spacing) * 6);
  }
  .ms-7 {
    margin-inline-start: calc(var(--spacing) * 7);
  }
  .ms-8 {
    margin-inline-start: calc(var(--spacing) * 8);
  }
  .ms-9 {
    margin-inline-start: calc(var(--spacing) * 9);
  }
  .ms-10 {
    margin-inline-start: calc(var(--spacing) * 10);
  }
  .ms-11 {
    margin-inline-start: calc(var(--spacing) * 11);
  }
  .ms-12 {
    margin-inline-start: calc(var(--spacing) * 12);
  }
  .ms-13 {
    margin-inline-start: calc(var(--spacing) * 13);
  }
  .ms-14 {
    margin-inline-start: calc(var(--spacing) * 14);
  }
  .ms-15 {
    margin-inline-start: calc(var(--spacing) * 15);
  }
  .ms-16 {
    margin-inline-start: calc(var(--spacing) * 16);
  }
  .ms-17 {
    margin-inline-start: calc(var(--spacing) * 17);
  }
  .ms-18 {
    margin-inline-start: calc(var(--spacing) * 18);
  }
  .ms-19 {
    margin-inline-start: calc(var(--spacing) * 19);
  }
  .ms-20 {
    margin-inline-start: calc(var(--spacing) * 20);
  }
  .ms-21 {
    margin-inline-start: calc(var(--spacing) * 21);
  }
  .ms-22 {
    margin-inline-start: calc(var(--spacing) * 22);
  }
  .ms-23 {
    margin-inline-start: calc(var(--spacing) * 23);
  }
  .ms-24 {
    margin-inline-start: calc(var(--spacing) * 24);
  }
  .ms-auto {
    margin-inline-start: auto;
  }
  .me-0 {
    margin-inline-end: 0;
  }
  .me-1 {
    margin-inline-end: var(--spacing);
  }
  .me-2 {
    margin-inline-end: calc(var(--spacing) * 2);
  }
  .me-3 {
    margin-inline-end: calc(var(--spacing) * 3);
  }
  .me-4 {
    margin-inline-end: calc(var(--spacing) * 4);
  }
  .me-5 {
    margin-inline-end: calc(var(--spacing) * 5);
  }
  .me-6 {
    margin-inline-end: calc(var(--spacing) * 6);
  }
  .me-7 {
    margin-inline-end: calc(var(--spacing) * 7);
  }
  .me-8 {
    margin-inline-end: calc(var(--spacing) * 8);
  }
  .me-9 {
    margin-inline-end: calc(var(--spacing) * 9);
  }
  .me-10 {
    margin-inline-end: calc(var(--spacing) * 10);
  }
  .me-11 {
    margin-inline-end: calc(var(--spacing) * 11);
  }
  .me-12 {
    margin-inline-end: calc(var(--spacing) * 12);
  }
  .me-13 {
    margin-inline-end: calc(var(--spacing) * 13);
  }
  .me-14 {
    margin-inline-end: calc(var(--spacing) * 14);
  }
  .me-15 {
    margin-inline-end: calc(var(--spacing) * 15);
  }
  .me-16 {
    margin-inline-end: calc(var(--spacing) * 16);
  }
  .me-17 {
    margin-inline-end: calc(var(--spacing) * 17);
  }
  .me-18 {
    margin-inline-end: calc(var(--spacing) * 18);
  }
  .me-19 {
    margin-inline-end: calc(var(--spacing) * 19);
  }
  .me-20 {
    margin-inline-end: calc(var(--spacing) * 20);
  }
  .me-21 {
    margin-inline-end: calc(var(--spacing) * 21);
  }
  .me-22 {
    margin-inline-end: calc(var(--spacing) * 22);
  }
  .me-23 {
    margin-inline-end: calc(var(--spacing) * 23);
  }
  .me-24 {
    margin-inline-end: calc(var(--spacing) * 24);
  }
  .prose {
    color: var(--tw-prose-body);
    max-width: 65ch;
    :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }
    :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-lead);
      font-size: 1.25em;
      line-height: 1.6;
      margin-top: 1.2em;
      margin-bottom: 1.2em;
    }
    :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-links);
      text-decoration: underline;
      font-weight: 500;
    }
    :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-bold);
      font-weight: 600;
    }
    :where(a strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(blockquote strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(thead th strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: decimal;
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }
    :where(ol[type="A"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: upper-alpha;
    }
    :where(ol[type="a"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: lower-alpha;
    }
    :where(ol[type="A" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: upper-alpha;
    }
    :where(ol[type="a" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: lower-alpha;
    }
    :where(ol[type="I"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: upper-roman;
    }
    :where(ol[type="i"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: lower-roman;
    }
    :where(ol[type="I" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: upper-roman;
    }
    :where(ol[type="i" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: lower-roman;
    }
    :where(ol[type="1"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: decimal;
    }
    :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      list-style-type: disc;
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }
    :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
      font-weight: 400;
      color: var(--tw-prose-counters);
    }
    :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
      color: var(--tw-prose-bullets);
    }
    :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      margin-top: 1.25em;
    }
    :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-color: var(--tw-prose-hr);
      border-top-width: 1px;
      margin-top: 3em;
      margin-bottom: 3em;
    }
    :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 500;
      font-style: italic;
      color: var(--tw-prose-quotes);
      border-inline-start-width: 0.25rem;
      border-inline-start-color: var(--tw-prose-quote-borders);
      quotes: "\201C""\201D""\2018""\2019";
      margin-top: 1.6em;
      margin-bottom: 1.6em;
      padding-inline-start: 1em;
    }
    :where(blockquote p:first-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
      content: open-quote;
    }
    :where(blockquote p:last-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
      content: close-quote;
    }
    :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 800;
      font-size: 2.25em;
      margin-top: 0;
      margin-bottom: 0.8888889em;
      line-height: 1.1111111;
    }
    :where(h1 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 900;
      color: inherit;
    }
    :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 700;
      font-size: 1.5em;
      margin-top: 2em;
      margin-bottom: 1em;
      line-height: 1.3333333;
    }
    :where(h2 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 800;
      color: inherit;
    }
    :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      font-size: 1.25em;
      margin-top: 1.6em;
      margin-bottom: 0.6em;
      line-height: 1.6;
    }
    :where(h3 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 700;
      color: inherit;
    }
    :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      line-height: 1.5;
    }
    :where(h4 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 700;
      color: inherit;
    }
    :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      display: block;
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-weight: 500;
      font-family: inherit;
      color: var(--tw-prose-kbd);
      box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
      font-size: 0.875em;
      border-radius: 0.3125rem;
      padding-top: 0.1875em;
      padding-inline-end: 0.375em;
      padding-bottom: 0.1875em;
      padding-inline-start: 0.375em;
    }
    :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-code);
      font-weight: 600;
      font-size: 0.875em;
    }
    :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
      content: "`";
    }
    :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
      content: "`";
    }
    :where(a code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(h1 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
      font-size: 0.875em;
    }
    :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
      font-size: 0.9em;
    }
    :where(h4 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(blockquote code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(thead th code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: inherit;
    }
    :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-pre-code);
      background-color: var(--tw-prose-pre-bg);
      overflow-x: auto;
      font-weight: 400;
      font-size: 0.875em;
      line-height: 1.7142857;
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
      border-radius: 0.375rem;
      padding-top: 0.8571429em;
      padding-inline-end: 1.1428571em;
      padding-bottom: 0.8571429em;
      padding-inline-start: 1.1428571em;
    }
    :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      background-color: transparent;
      border-width: 0;
      border-radius: 0;
      padding: 0;
      font-weight: inherit;
      color: inherit;
      font-size: inherit;
      font-family: inherit;
      line-height: inherit;
    }
    :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
      content: none;
    }
    :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
      content: none;
    }
    :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      width: 100%;
      table-layout: auto;
      margin-top: 2em;
      margin-bottom: 2em;
      font-size: 0.875em;
      line-height: 1.7142857;
    }
    :where(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-bottom-width: 1px;
      border-bottom-color: var(--tw-prose-th-borders);
    }
    :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      vertical-align: bottom;
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }
    :where(tbody tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-bottom-width: 1px;
      border-bottom-color: var(--tw-prose-td-borders);
    }
    :where(tbody tr:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-bottom-width: 0;
    }
    :where(tbody td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      vertical-align: baseline;
    }
    :where(tfoot):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-top-width: 1px;
      border-top-color: var(--tw-prose-th-borders);
    }
    :where(tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      vertical-align: top;
    }
    :where(th, td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      text-align: start;
    }
    :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      color: var(--tw-prose-captions);
      font-size: 0.875em;
      line-height: 1.4285714;
      margin-top: 0.8571429em;
    }
    --tw-prose-body: var(--color-on-background);
    --tw-prose-headings: var(--color-on-background);
    --tw-prose-lead: var(--color-on-background);
    --tw-prose-links: var(--color-primary);
    --tw-prose-bold: currentColor;
    --tw-prose-counters: oklch(55.1% 0.027 264.364);
    --tw-prose-bullets: var(--color-neutral-300);
    --tw-prose-hr: var(--color-neutral-200);
    --tw-prose-quotes: var(--color-on-background);
    --tw-prose-quote-borders: var(--color-neutral-200);
    --tw-prose-captions: var(--color-neutral-500);
    --tw-prose-kbd: var(--color-neutral-900);
    --tw-prose-kbd-shadows: var(--color-neutral-900);
    --tw-prose-code: var(--color-neutral-900);
    --tw-prose-pre-code: var(--color-neutral-200);
    --tw-prose-pre-bg: var(--color-neutral-800);
    --tw-prose-th-borders: var(--color-neutral-300);
    --tw-prose-td-borders: var(--color-neutral-200);
    --tw-prose-invert-body: oklch(87.2% 0.01 258.338);
    --tw-prose-invert-headings: #fff;
    --tw-prose-invert-lead: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-links: #fff;
    --tw-prose-invert-bold: #fff;
    --tw-prose-invert-counters: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-bullets: oklch(44.6% 0.03 256.802);
    --tw-prose-invert-hr: oklch(37.3% 0.034 259.733);
    --tw-prose-invert-quotes: oklch(96.7% 0.003 264.542);
    --tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733);
    --tw-prose-invert-captions: oklch(70.7% 0.022 261.325);
    --tw-prose-invert-kbd: #fff;
    --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
    --tw-prose-invert-code: #fff;
    --tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338);
    --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
    --tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802);
    --tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733);
    font-size: 1rem;
    line-height: 1.75;
    :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }
    :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0.375em;
    }
    :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0.375em;
    }
    :where(.prose > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }
    :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.25em;
    }
    :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-bottom: 1.25em;
    }
    :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.25em;
    }
    :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-bottom: 1.25em;
    }
    :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }
    :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }
    :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.5em;
      padding-inline-start: 1.625em;
    }
    :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(thead th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(thead th:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-top: 0.5714286em;
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }
    :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(.prose > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-bottom: 0;
    }
  }
  .prose-sm {
    font-size: 0.875rem;
    line-height: 1.7142857;
    :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.1428571em;
      margin-bottom: 1.1428571em;
    }
    :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-size: 1.2857143em;
      line-height: 1.5555556;
      margin-top: 0.8888889em;
      margin-bottom: 0.8888889em;
    }
    :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.3333333em;
      margin-bottom: 1.3333333em;
      padding-inline-start: 1.1111111em;
    }
    :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-size: 2.1428571em;
      margin-top: 0;
      margin-bottom: 0.8em;
      line-height: 1.2;
    }
    :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-size: 1.4285714em;
      margin-top: 1.6em;
      margin-bottom: 0.8em;
      line-height: 1.4;
    }
    :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-size: 1.2857143em;
      margin-top: 1.5555556em;
      margin-bottom: 0.4444444em;
      line-height: 1.5555556;
    }
    :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.4285714em;
      margin-bottom: 0.5714286em;
      line-height: 1.4285714;
    }
    :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
    }
    :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
    }
    :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
    }
    :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-size: 0.8571429em;
      border-radius: 0.3125rem;
      padding-top: 0.1428571em;
      padding-inline-end: 0.3571429em;
      padding-bottom: 0.1428571em;
      padding-inline-start: 0.3571429em;
    }
    :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-size: 0.8571429em;
    }
    :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-size: 0.9em;
    }
    :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-size: 0.8888889em;
    }
    :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-size: 0.8571429em;
      line-height: 1.6666667;
      margin-top: 1.6666667em;
      margin-bottom: 1.6666667em;
      border-radius: 0.25rem;
      padding-top: 0.6666667em;
      padding-inline-end: 1em;
      padding-bottom: 0.6666667em;
      padding-inline-start: 1em;
    }
    :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.1428571em;
      margin-bottom: 1.1428571em;
      padding-inline-start: 1.5714286em;
    }
    :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.1428571em;
      margin-bottom: 1.1428571em;
      padding-inline-start: 1.5714286em;
    }
    :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.2857143em;
      margin-bottom: 0.2857143em;
    }
    :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0.4285714em;
    }
    :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0.4285714em;
    }
    :where(.prose-sm > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.5714286em;
      margin-bottom: 0.5714286em;
    }
    :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.1428571em;
    }
    :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-bottom: 1.1428571em;
    }
    :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.1428571em;
    }
    :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-bottom: 1.1428571em;
    }
    :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.5714286em;
      margin-bottom: 0.5714286em;
    }
    :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.1428571em;
      margin-bottom: 1.1428571em;
    }
    :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.1428571em;
    }
    :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.2857143em;
      padding-inline-start: 1.5714286em;
    }
    :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 2.8571429em;
      margin-bottom: 2.8571429em;
    }
    :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-size: 0.8571429em;
      line-height: 1.5;
    }
    :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-end: 1em;
      padding-bottom: 0.6666667em;
      padding-inline-start: 1em;
    }
    :where(thead th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(thead th:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-top: 0.6666667em;
      padding-inline-end: 1em;
      padding-bottom: 0.6666667em;
      padding-inline-start: 1em;
    }
    :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
    }
    :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      font-size: 0.8571429em;
      line-height: 1.3333333;
      margin-top: 0.6666667em;
    }
    :where(.prose-sm > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0;
    }
    :where(.prose-sm > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-bottom: 0;
    }
  }
  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }
  .-mt-2 {
    margin-top: calc(var(--spacing) * -2);
  }
  .mt-0 {
    margin-top: 0;
  }
  .mt-1 {
    margin-top: var(--spacing);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-3\.5 {
    margin-top: calc(var(--spacing) * 3.5);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-9 {
    margin-top: calc(var(--spacing) * 9);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-11 {
    margin-top: calc(var(--spacing) * 11);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-13 {
    margin-top: calc(var(--spacing) * 13);
  }
  .mt-14 {
    margin-top: calc(var(--spacing) * 14);
  }
  .mt-15 {
    margin-top: calc(var(--spacing) * 15);
  }
  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }
  .mt-17 {
    margin-top: calc(var(--spacing) * 17);
  }
  .mt-18 {
    margin-top: calc(var(--spacing) * 18);
  }
  .mt-19 {
    margin-top: calc(var(--spacing) * 19);
  }
  .mt-20 {
    margin-top: calc(var(--spacing) * 20);
  }
  .mt-21 {
    margin-top: calc(var(--spacing) * 21);
  }
  .mt-22 {
    margin-top: calc(var(--spacing) * 22);
  }
  .mt-23 {
    margin-top: calc(var(--spacing) * 23);
  }
  .mt-24 {
    margin-top: calc(var(--spacing) * 24);
  }
  .mt-auto {
    margin-top: auto;
  }
  .mr-1 {
    margin-right: var(--spacing);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mr-6 {
    margin-right: calc(var(--spacing) * 6);
  }
  .mr-auto {
    margin-right: auto;
  }
  .\!mb-0 {
    margin-bottom: 0 !important;
  }
  .\!mb-2 {
    margin-bottom: calc(var(--spacing) * 2) !important;
  }
  .-mb-px {
    margin-bottom: -1px;
  }
  .mb-0 {
    margin-bottom: 0;
  }
  .mb-1 {
    margin-bottom: var(--spacing);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-2\.5 {
    margin-bottom: calc(var(--spacing) * 2.5);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-7 {
    margin-bottom: calc(var(--spacing) * 7);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-9 {
    margin-bottom: calc(var(--spacing) * 9);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .mb-11 {
    margin-bottom: calc(var(--spacing) * 11);
  }
  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }
  .mb-13 {
    margin-bottom: calc(var(--spacing) * 13);
  }
  .mb-14 {
    margin-bottom: calc(var(--spacing) * 14);
  }
  .mb-15 {
    margin-bottom: calc(var(--spacing) * 15);
  }
  .mb-16 {
    margin-bottom: calc(var(--spacing) * 16);
  }
  .mb-17 {
    margin-bottom: calc(var(--spacing) * 17);
  }
  .mb-18 {
    margin-bottom: calc(var(--spacing) * 18);
  }
  .mb-19 {
    margin-bottom: calc(var(--spacing) * 19);
  }
  .mb-20 {
    margin-bottom: calc(var(--spacing) * 20);
  }
  .mb-21 {
    margin-bottom: calc(var(--spacing) * 21);
  }
  .mb-22 {
    margin-bottom: calc(var(--spacing) * 22);
  }
  .mb-23 {
    margin-bottom: calc(var(--spacing) * 23);
  }
  .mb-24 {
    margin-bottom: calc(var(--spacing) * 24);
  }
  .-ml-px {
    margin-left: -1px;
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }
  .ml-5 {
    margin-left: calc(var(--spacing) * 5);
  }
  .ml-6 {
    margin-left: calc(var(--spacing) * 6);
  }
  .ml-auto {
    margin-left: auto;
  }
  .no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline\! {
    display: inline !important;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .list-item {
    display: list-item;
  }
  .table {
    display: table;
  }
  .table-caption {
    display: table-caption;
  }
  .table-cell {
    display: table-cell;
  }
  .table-row {
    display: table-row;
  }
  .aspect-\[3\/4\] {
    aspect-ratio: 3/4;
  }
  .aspect-\[4\/3\] {
    aspect-ratio: 4/3;
  }
  .aspect-square {
    aspect-ratio: 1 / 1;
  }
  .size-\[1\.2em\] {
    width: 1.2em;
    height: 1.2em;
  }
  .size-full {
    width: 100%;
    height: 100%;
  }
  .h-\(--height\) {
    height: var(--height);
  }
  .h-1 {
    height: var(--spacing);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-7 {
    height: calc(var(--spacing) * 7);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-13 {
    height: calc(var(--spacing) * 13);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-15 {
    height: calc(var(--spacing) * 15);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-17 {
    height: calc(var(--spacing) * 17);
  }
  .h-18 {
    height: calc(var(--spacing) * 18);
  }
  .h-19 {
    height: calc(var(--spacing) * 19);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-21 {
    height: calc(var(--spacing) * 21);
  }
  .h-22 {
    height: calc(var(--spacing) * 22);
  }
  .h-23 {
    height: calc(var(--spacing) * 23);
  }
  .h-24 {
    height: calc(var(--spacing) * 24);
  }
  .h-32 {
    height: calc(var(--spacing) * 32);
  }
  .h-\[20rem\] {
    height: 20rem;
  }
  .h-\[25rem\] {
    height: 25rem;
  }
  .h-\[37\.5rem\] {
    height: 37.5rem;
  }
  .h-\[50rem\] {
    height: 50rem;
  }
  .h-\[calc\(100\%-theme\(spacing\.0\)\)\] {
    height: calc(100% - 0px);
  }
  .h-auto {
    height: auto;
  }
  .h-fit {
    height: fit-content;
  }
  .h-full {
    height: 100%;
  }
  .h-max {
    height: max-content;
  }
  .h-screen {
    height: 100vh;
  }
  .max-h-40 {
    max-height: calc(var(--spacing) * 40);
  }
  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }
  .max-h-full {
    max-height: 100%;
  }
  .min-h-37\.5 {
    min-height: calc(var(--spacing) * 37.5);
  }
  .min-h-64 {
    min-height: calc(var(--spacing) * 64);
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-\(--width\) {
    width: var(--width);
  }
  .w-1 {
    width: var(--spacing);
  }
  .w-2 {
    width: calc(var(--spacing) * 2);
  }
  .w-2\/5 {
    width: calc(2 / 5 * 100%);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-11 {
    width: calc(var(--spacing) * 11);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-13 {
    width: calc(var(--spacing) * 13);
  }
  .w-14 {
    width: calc(var(--spacing) * 14);
  }
  .w-15 {
    width: calc(var(--spacing) * 15);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-17 {
    width: calc(var(--spacing) * 17);
  }
  .w-18 {
    width: calc(var(--spacing) * 18);
  }
  .w-19 {
    width: calc(var(--spacing) * 19);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-21 {
    width: calc(var(--spacing) * 21);
  }
  .w-22 {
    width: calc(var(--spacing) * 22);
  }
  .w-23 {
    width: calc(var(--spacing) * 23);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-40 {
    width: calc(var(--spacing) * 40);
  }
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
  .w-50 {
    width: calc(var(--spacing) * 50);
  }
  .w-52 {
    width: calc(var(--spacing) * 52);
  }
  .w-62\.5 {
    width: calc(var(--spacing) * 62.5);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .w-80 {
    width: calc(var(--spacing) * 80);
  }
  .w-\[360px\] {
    width: 360px;
  }
  .w-auto {
    width: auto;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .w-max {
    width: max-content;
  }
  .w-screen {
    width: 100vw;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-5xl {
    max-width: var(--container-5xl);
  }
  .max-w-6xl {
    max-width: var(--container-6xl);
  }
  .max-w-7xl {
    max-width: var(--container-7xl);
  }
  .max-w-72 {
    max-width: calc(var(--spacing) * 72);
  }
  .max-w-96 {
    max-width: calc(var(--spacing) * 96);
  }
  .max-w-\[1440px\] {
    max-width: 1440px;
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-none {
    max-width: none;
  }
  .max-w-prose {
    max-width: 65ch;
  }
  .max-w-screen {
    max-width: 100vw;
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .max-w-xs {
    max-width: var(--container-xs);
  }
  .min-w-0 {
    min-width: 0;
  }
  .min-w-5 {
    min-width: calc(var(--spacing) * 5);
  }
  .min-w-16 {
    min-width: calc(var(--spacing) * 16);
  }
  .min-w-32 {
    min-width: calc(var(--spacing) * 32);
  }
  .min-w-48 {
    min-width: calc(var(--spacing) * 48);
  }
  .min-w-60 {
    min-width: calc(var(--spacing) * 60);
  }
  .min-w-64 {
    min-width: calc(var(--spacing) * 64);
  }
  .min-w-96 {
    min-width: calc(var(--spacing) * 96);
  }
  .min-w-\[8rem\] {
    min-width: 8rem;
  }
  .min-w-full {
    min-width: 100%;
  }
  .min-w-max {
    min-width: max-content;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-none {
    flex: none;
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-full {
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-0 {
    --tw-translate-x: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-full {
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-full {
    --tw-translate-y: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-0 {
    --tw-translate-y: 0;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-4 {
    --tw-translate-y: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-full {
    --tw-translate-y: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-90 {
    --tw-scale-x: 90%;
    --tw-scale-y: 90%;
    --tw-scale-z: 90%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .transform\! {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,) !important;
  }
  .animate-spin {
    animation: var(--animate-spin);
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .scroll-snap-both {
    scroll-snap-type: both mandatory;
  }
  .scroll-snap-none {
    scroll-snap-type: none;
  }
  .scroll-snap-x {
    scroll-snap-type: x mandatory;
  }
  .scroll-snap-x-proximity {
    scroll-snap-type: x proximity;
  }
  .scroll-snap-y {
    scroll-snap-type: y mandatory;
  }
  .scroll-snap-y-proximity {
    scroll-snap-type: y proximity;
  }
  .scrollbar-auto {
    scrollbar-width: auto;
  }
  .scrollbar-auto {
    scrollbar-width: auto;
  }
  .scrollbar-none {
    scrollbar-width: none;
  }
  .scrollbar-none {
    scrollbar-width: none;
  }
  .scrollbar-thin {
    scrollbar-width: thin;
  }
  .scrollbar-thin {
    scrollbar-width: thin;
  }
  .list-none {
    list-style-type: none;
  }
  .appearance-none {
    appearance: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }
  .grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  .grid-rows-5 {
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }
  .grid-rows-6 {
    grid-template-rows: repeat(6, 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-nowrap {
    flex-wrap: nowrap;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .place-content-center {
    place-content: center;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-stretch {
    align-items: stretch;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .gap-0 {
    gap: 0;
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-7 {
    gap: calc(var(--spacing) * 7);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-9 {
    gap: calc(var(--spacing) * 9);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .gap-11 {
    gap: calc(var(--spacing) * 11);
  }
  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }
  .gap-13 {
    gap: calc(var(--spacing) * 13);
  }
  .gap-14 {
    gap: calc(var(--spacing) * 14);
  }
  .gap-15 {
    gap: calc(var(--spacing) * 15);
  }
  .gap-16 {
    gap: calc(var(--spacing) * 16);
  }
  .gap-17 {
    gap: calc(var(--spacing) * 17);
  }
  .gap-18 {
    gap: calc(var(--spacing) * 18);
  }
  .gap-19 {
    gap: calc(var(--spacing) * 19);
  }
  .gap-20 {
    gap: calc(var(--spacing) * 20);
  }
  .gap-21 {
    gap: calc(var(--spacing) * 21);
  }
  .gap-22 {
    gap: calc(var(--spacing) * 22);
  }
  .gap-23 {
    gap: calc(var(--spacing) * 23);
  }
  .gap-24 {
    gap: calc(var(--spacing) * 24);
  }
  .space-y-1 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-1\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-6 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-8 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-1 {
    column-gap: var(--spacing);
  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
  .gap-x-2\.5 {
    column-gap: calc(var(--spacing) * 2.5);
  }
  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .space-x-1 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(var(--spacing) * var(--tw-space-x-reverse));
      margin-inline-end: calc(var(--spacing) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-2 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-4 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .gap-y-1 {
    row-gap: var(--spacing);
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .divide-surface-alt-600 {
    :where(& > :not(:last-child)) {
      border-color: var(--color-surface-alt-600);
    }
  }
  .self-start {
    align-self: flex-start;
  }
  .self-stretch {
    align-self: stretch;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .overflow-y-hidden {
    overflow-y: hidden;
  }
  .scroll-auto {
    scroll-behavior: auto;
  }
  .scroll-auto {
    scroll-behavior: auto;
  }
  .scroll-smooth {
    scroll-behavior: smooth;
  }
  .scroll-smooth {
    scroll-behavior: smooth;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }
  .rounded-\[--input-radius\] {
    border-radius: --input-radius;
  }
  .rounded-\[2rem\] {
    border-radius: 2rem;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-none {
    border-radius: 0;
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .\!border {
    border-style: var(--tw-border-style) !important;
    border-width: 1px !important;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border\! {
    border-style: var(--tw-border-style) !important;
    border-width: 1px !important;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-1 {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-3 {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }
  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }
  .border-5 {
    border-style: var(--tw-border-style);
    border-width: 5px;
  }
  .border-6 {
    border-style: var(--tw-border-style);
    border-width: 6px;
  }
  .border-7 {
    border-style: var(--tw-border-style);
    border-width: 7px;
  }
  .border-8 {
    border-style: var(--tw-border-style);
    border-width: 8px;
  }
  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .border-b-4 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 4px;
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }
  .\!border-solid {
    --tw-border-style: solid !important;
    border-style: solid !important;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-dotted {
    --tw-border-style: dotted;
    border-style: dotted;
  }
  .border-none {
    --tw-border-style: none;
    border-style: none;
  }
  .border-solid {
    --tw-border-style: solid;
    border-style: solid;
  }
  .border-accent {
    border-color: var(--color-accent);
  }
  .border-background {
    border-color: var(--color-background);
  }
  .border-current {
    border-color: currentcolor;
  }
  .border-current\/\(--img-border-opacity\) {
    border-color: currentcolor;
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, currentcolor var(--img-border-opacity), transparent);
    }
  }
  .border-danger {
    border-color: var(--color-danger);
  }
  .border-gray-100 {
    border-color: var(--color-gray-100);
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .border-info {
    border-color: var(--color-info);
  }
  .border-neutral {
    border-color: var(--color-neutral);
  }
  .border-neutral-100 {
    border-color: var(--color-neutral-100);
  }
  .border-on-accent {
    border-color: var(--color-on-accent);
  }
  .border-on-background {
    border-color: var(--color-on-background);
  }
  .border-on-background\/8 {
    border-color: var(--color-on-background);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-on-background) 8%, transparent);
    }
  }
  .border-on-background\/10 {
    border-color: var(--color-on-background);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-on-background) 10%, transparent);
    }
  }
  .border-on-danger {
    border-color: var(--color-on-danger);
  }
  .border-on-info {
    border-color: var(--color-on-info);
  }
  .border-on-neutral {
    border-color: var(--color-on-neutral);
  }
  .border-on-primary {
    border-color: var(--color-on-primary);
  }
  .border-on-secondary {
    border-color: var(--color-on-secondary);
  }
  .border-on-secondary\/8 {
    border-color: var(--color-on-secondary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-on-secondary) 8%, transparent);
    }
  }
  .border-on-success {
    border-color: var(--color-on-success);
  }
  .border-on-surface {
    border-color: var(--color-on-surface);
  }
  .border-on-surface-alt {
    border-color: var(--color-on-surface-alt);
  }
  .border-on-surface-alt\/8 {
    border-color: var(--color-on-surface-alt);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-on-surface-alt) 8%, transparent);
    }
  }
  .border-on-surface-alt\/10 {
    border-color: var(--color-on-surface-alt);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-on-surface-alt) 10%, transparent);
    }
  }
  .border-on-surface\/7 {
    border-color: var(--color-on-surface);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-on-surface) 7%, transparent);
    }
  }
  .border-on-surface\/8 {
    border-color: var(--color-on-surface);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-on-surface) 8%, transparent);
    }
  }
  .border-on-surface\/10 {
    border-color: var(--color-on-surface);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-on-surface) 10%, transparent);
    }
  }
  .border-on-surface\/20 {
    border-color: var(--color-on-surface);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-on-surface) 20%, transparent);
    }
  }
  .border-on-warning {
    border-color: var(--color-on-warning);
  }
  .border-primary {
    border-color: var(--color-primary);
  }
  .border-secondary {
    border-color: var(--color-secondary);
  }
  .border-success {
    border-color: var(--color-success);
  }
  .border-surface {
    border-color: var(--color-surface);
  }
  .border-surface-alt {
    border-color: var(--color-surface-alt);
  }
  .border-surface\/70 {
    border-color: var(--color-surface);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-surface) 70%, transparent);
    }
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-warning {
    border-color: var(--color-warning);
  }
  .bg-accent {
    background-color: var(--color-accent);
  }
  .bg-background {
    background-color: var(--color-background);
  }
  .bg-black\/20 {
    background-color: color-mix(in srgb, #000 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
  }
  .bg-black\/30 {
    background-color: color-mix(in srgb, #000 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
    }
  }
  .bg-black\/40 {
    background-color: color-mix(in srgb, #000 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }
  .bg-black\/50 {
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }
  .bg-black\/70 {
    background-color: color-mix(in srgb, #000 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
    }
  }
  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }
  .bg-danger {
    background-color: var(--color-danger);
  }
  .bg-danger-50 {
    background-color: var(--color-danger-50);
  }
  .bg-danger-100 {
    background-color: var(--color-danger-100);
  }
  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }
  .bg-gray-900 {
    background-color: var(--color-gray-900);
  }
  .bg-info {
    background-color: var(--color-info);
  }
  .bg-info-100 {
    background-color: var(--color-info-100);
  }
  .bg-neutral {
    background-color: var(--color-neutral);
  }
  .bg-neutral-50 {
    background-color: var(--color-neutral-50);
  }
  .bg-neutral-100 {
    background-color: var(--color-neutral-100);
  }
  .bg-on-accent {
    background-color: var(--color-on-accent);
  }
  .bg-on-background {
    background-color: var(--color-on-background);
  }
  .bg-on-danger {
    background-color: var(--color-on-danger);
  }
  .bg-on-info {
    background-color: var(--color-on-info);
  }
  .bg-on-neutral {
    background-color: var(--color-on-neutral);
  }
  .bg-on-primary {
    background-color: var(--color-on-primary);
  }
  .bg-on-secondary {
    background-color: var(--color-on-secondary);
  }
  .bg-on-success {
    background-color: var(--color-on-success);
  }
  .bg-on-surface {
    background-color: var(--color-on-surface);
  }
  .bg-on-surface-alt {
    background-color: var(--color-on-surface-alt);
  }
  .bg-on-warning {
    background-color: var(--color-on-warning);
  }
  .bg-primary {
    background-color: var(--color-primary);
  }
  .bg-primary-50 {
    background-color: var(--color-primary-50);
  }
  .bg-primary\/10 {
    background-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
    }
  }
  .bg-secondary {
    background-color: var(--color-secondary);
  }
  .bg-success {
    background-color: var(--color-success);
  }
  .bg-success-100 {
    background-color: var(--color-success-100);
  }
  .bg-success\/10 {
    background-color: var(--color-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-success) 10%, transparent);
    }
  }
  .bg-surface {
    background-color: var(--color-surface);
  }
  .bg-surface-alt {
    background-color: var(--color-surface-alt);
  }
  .bg-surface-alt-600 {
    background-color: var(--color-surface-alt-600);
  }
  .bg-surface-alt\/40 {
    background-color: var(--color-surface-alt);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-surface-alt) 40%, transparent);
    }
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-warning {
    background-color: var(--color-warning);
  }
  .bg-warning-100 {
    background-color: var(--color-warning-100);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-auto {
    background-size: auto;
  }
  .bg-contain {
    background-size: contain;
  }
  .bg-cover {
    background-size: cover;
  }
  .bg-no-repeat {
    background-repeat: no-repeat;
  }
  .bg-repeat {
    background-repeat: repeat;
  }
  .bg-repeat-x {
    background-repeat: repeat-x;
  }
  .bg-repeat-y {
    background-repeat: repeat-y;
  }
  .fill-accent {
    fill: var(--color-accent);
  }
  .fill-surface {
    fill: var(--color-surface);
  }
  .stroke-accent {
    stroke: var(--color-accent);
  }
  .stroke-on-background {
    stroke: var(--color-on-background);
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .object-fill {
    object-fit: fill;
  }
  .object-center {
    object-position: center;
  }
  .\!p-0 {
    padding: 0 !important;
  }
  .p-0 {
    padding: 0;
  }
  .p-1 {
    padding: var(--spacing);
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-7 {
    padding: calc(var(--spacing) * 7);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .p-9 {
    padding: calc(var(--spacing) * 9);
  }
  .p-10 {
    padding: calc(var(--spacing) * 10);
  }
  .p-11 {
    padding: calc(var(--spacing) * 11);
  }
  .p-12 {
    padding: calc(var(--spacing) * 12);
  }
  .p-13 {
    padding: calc(var(--spacing) * 13);
  }
  .p-14 {
    padding: calc(var(--spacing) * 14);
  }
  .p-15 {
    padding: calc(var(--spacing) * 15);
  }
  .p-16 {
    padding: calc(var(--spacing) * 16);
  }
  .p-17 {
    padding: calc(var(--spacing) * 17);
  }
  .p-18 {
    padding: calc(var(--spacing) * 18);
  }
  .p-19 {
    padding: calc(var(--spacing) * 19);
  }
  .p-20 {
    padding: calc(var(--spacing) * 20);
  }
  .p-21 {
    padding: calc(var(--spacing) * 21);
  }
  .p-22 {
    padding: calc(var(--spacing) * 22);
  }
  .p-23 {
    padding: calc(var(--spacing) * 23);
  }
  .p-24 {
    padding: calc(var(--spacing) * 24);
  }
  .p-px {
    padding: 1px;
  }
  .px-0 {
    padding-inline: 0;
  }
  .px-1 {
    padding-inline: var(--spacing);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-7 {
    padding-inline: calc(var(--spacing) * 7);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .px-9 {
    padding-inline: calc(var(--spacing) * 9);
  }
  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }
  .px-11 {
    padding-inline: calc(var(--spacing) * 11);
  }
  .px-12 {
    padding-inline: calc(var(--spacing) * 12);
  }
  .px-13 {
    padding-inline: calc(var(--spacing) * 13);
  }
  .px-14 {
    padding-inline: calc(var(--spacing) * 14);
  }
  .px-15 {
    padding-inline: calc(var(--spacing) * 15);
  }
  .px-16 {
    padding-inline: calc(var(--spacing) * 16);
  }
  .px-17 {
    padding-inline: calc(var(--spacing) * 17);
  }
  .px-18 {
    padding-inline: calc(var(--spacing) * 18);
  }
  .px-19 {
    padding-inline: calc(var(--spacing) * 19);
  }
  .px-20 {
    padding-inline: calc(var(--spacing) * 20);
  }
  .px-21 {
    padding-inline: calc(var(--spacing) * 21);
  }
  .px-22 {
    padding-inline: calc(var(--spacing) * 22);
  }
  .px-23 {
    padding-inline: calc(var(--spacing) * 23);
  }
  .px-24 {
    padding-inline: calc(var(--spacing) * 24);
  }
  .\!py-1 {
    padding-block: var(--spacing) !important;
  }
  .py-0 {
    padding-block: 0;
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: var(--spacing);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-7 {
    padding-block: calc(var(--spacing) * 7);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-9 {
    padding-block: calc(var(--spacing) * 9);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .py-11 {
    padding-block: calc(var(--spacing) * 11);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-13 {
    padding-block: calc(var(--spacing) * 13);
  }
  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }
  .py-15 {
    padding-block: calc(var(--spacing) * 15);
  }
  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  .py-17 {
    padding-block: calc(var(--spacing) * 17);
  }
  .py-18 {
    padding-block: calc(var(--spacing) * 18);
  }
  .py-19 {
    padding-block: calc(var(--spacing) * 19);
  }
  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }
  .py-21 {
    padding-block: calc(var(--spacing) * 21);
  }
  .py-22 {
    padding-block: calc(var(--spacing) * 22);
  }
  .py-23 {
    padding-block: calc(var(--spacing) * 23);
  }
  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }
  .py-px {
    padding-block: 1px;
  }
  .ps-0 {
    padding-inline-start: 0;
  }
  .ps-1 {
    padding-inline-start: var(--spacing);
  }
  .ps-2 {
    padding-inline-start: calc(var(--spacing) * 2);
  }
  .ps-3 {
    padding-inline-start: calc(var(--spacing) * 3);
  }
  .ps-4 {
    padding-inline-start: calc(var(--spacing) * 4);
  }
  .ps-5 {
    padding-inline-start: calc(var(--spacing) * 5);
  }
  .ps-6 {
    padding-inline-start: calc(var(--spacing) * 6);
  }
  .ps-7 {
    padding-inline-start: calc(var(--spacing) * 7);
  }
  .ps-8 {
    padding-inline-start: calc(var(--spacing) * 8);
  }
  .ps-9 {
    padding-inline-start: calc(var(--spacing) * 9);
  }
  .ps-10 {
    padding-inline-start: calc(var(--spacing) * 10);
  }
  .ps-11 {
    padding-inline-start: calc(var(--spacing) * 11);
  }
  .ps-12 {
    padding-inline-start: calc(var(--spacing) * 12);
  }
  .ps-13 {
    padding-inline-start: calc(var(--spacing) * 13);
  }
  .ps-14 {
    padding-inline-start: calc(var(--spacing) * 14);
  }
  .ps-15 {
    padding-inline-start: calc(var(--spacing) * 15);
  }
  .ps-16 {
    padding-inline-start: calc(var(--spacing) * 16);
  }
  .ps-17 {
    padding-inline-start: calc(var(--spacing) * 17);
  }
  .ps-18 {
    padding-inline-start: calc(var(--spacing) * 18);
  }
  .ps-19 {
    padding-inline-start: calc(var(--spacing) * 19);
  }
  .ps-20 {
    padding-inline-start: calc(var(--spacing) * 20);
  }
  .ps-21 {
    padding-inline-start: calc(var(--spacing) * 21);
  }
  .ps-22 {
    padding-inline-start: calc(var(--spacing) * 22);
  }
  .ps-23 {
    padding-inline-start: calc(var(--spacing) * 23);
  }
  .ps-24 {
    padding-inline-start: calc(var(--spacing) * 24);
  }
  .pe-0 {
    padding-inline-end: 0;
  }
  .pe-1 {
    padding-inline-end: var(--spacing);
  }
  .pe-2 {
    padding-inline-end: calc(var(--spacing) * 2);
  }
  .pe-3 {
    padding-inline-end: calc(var(--spacing) * 3);
  }
  .pe-4 {
    padding-inline-end: calc(var(--spacing) * 4);
  }
  .pe-5 {
    padding-inline-end: calc(var(--spacing) * 5);
  }
  .pe-6 {
    padding-inline-end: calc(var(--spacing) * 6);
  }
  .pe-7 {
    padding-inline-end: calc(var(--spacing) * 7);
  }
  .pe-8 {
    padding-inline-end: calc(var(--spacing) * 8);
  }
  .pe-9 {
    padding-inline-end: calc(var(--spacing) * 9);
  }
  .pe-10 {
    padding-inline-end: calc(var(--spacing) * 10);
  }
  .pe-11 {
    padding-inline-end: calc(var(--spacing) * 11);
  }
  .pe-12 {
    padding-inline-end: calc(var(--spacing) * 12);
  }
  .pe-13 {
    padding-inline-end: calc(var(--spacing) * 13);
  }
  .pe-14 {
    padding-inline-end: calc(var(--spacing) * 14);
  }
  .pe-15 {
    padding-inline-end: calc(var(--spacing) * 15);
  }
  .pe-16 {
    padding-inline-end: calc(var(--spacing) * 16);
  }
  .pe-17 {
    padding-inline-end: calc(var(--spacing) * 17);
  }
  .pe-18 {
    padding-inline-end: calc(var(--spacing) * 18);
  }
  .pe-19 {
    padding-inline-end: calc(var(--spacing) * 19);
  }
  .pe-20 {
    padding-inline-end: calc(var(--spacing) * 20);
  }
  .pe-21 {
    padding-inline-end: calc(var(--spacing) * 21);
  }
  .pe-22 {
    padding-inline-end: calc(var(--spacing) * 22);
  }
  .pe-23 {
    padding-inline-end: calc(var(--spacing) * 23);
  }
  .pe-24 {
    padding-inline-end: calc(var(--spacing) * 24);
  }
  .pt-0 {
    padding-top: 0;
  }
  .pt-1 {
    padding-top: var(--spacing);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-7 {
    padding-top: calc(var(--spacing) * 7);
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pt-9 {
    padding-top: calc(var(--spacing) * 9);
  }
  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }
  .pt-11 {
    padding-top: calc(var(--spacing) * 11);
  }
  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }
  .pt-13 {
    padding-top: calc(var(--spacing) * 13);
  }
  .pt-14 {
    padding-top: calc(var(--spacing) * 14);
  }
  .pt-15 {
    padding-top: calc(var(--spacing) * 15);
  }
  .pt-16 {
    padding-top: calc(var(--spacing) * 16);
  }
  .pt-17 {
    padding-top: calc(var(--spacing) * 17);
  }
  .pt-18 {
    padding-top: calc(var(--spacing) * 18);
  }
  .pt-19 {
    padding-top: calc(var(--spacing) * 19);
  }
  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }
  .pt-21 {
    padding-top: calc(var(--spacing) * 21);
  }
  .pt-22 {
    padding-top: calc(var(--spacing) * 22);
  }
  .pt-23 {
    padding-top: calc(var(--spacing) * 23);
  }
  .pt-24 {
    padding-top: calc(var(--spacing) * 24);
  }
  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }
  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }
  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }
  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }
  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }
  .pr-12 {
    padding-right: calc(var(--spacing) * 12);
  }
  .pb-0 {
    padding-bottom: 0;
  }
  .pb-1 {
    padding-bottom: var(--spacing);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .pb-7 {
    padding-bottom: calc(var(--spacing) * 7);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pb-9 {
    padding-bottom: calc(var(--spacing) * 9);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .pb-11 {
    padding-bottom: calc(var(--spacing) * 11);
  }
  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }
  .pb-13 {
    padding-bottom: calc(var(--spacing) * 13);
  }
  .pb-14 {
    padding-bottom: calc(var(--spacing) * 14);
  }
  .pb-15 {
    padding-bottom: calc(var(--spacing) * 15);
  }
  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }
  .pb-17 {
    padding-bottom: calc(var(--spacing) * 17);
  }
  .pb-18 {
    padding-bottom: calc(var(--spacing) * 18);
  }
  .pb-19 {
    padding-bottom: calc(var(--spacing) * 19);
  }
  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }
  .pb-21 {
    padding-bottom: calc(var(--spacing) * 21);
  }
  .pb-22 {
    padding-bottom: calc(var(--spacing) * 22);
  }
  .pb-23 {
    padding-bottom: calc(var(--spacing) * 23);
  }
  .pb-24 {
    padding-bottom: calc(var(--spacing) * 24);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }
  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }
  .pl-12 {
    padding-left: calc(var(--spacing) * 12);
  }
  .text-center {
    text-align: center;
  }
  .text-end {
    text-align: end;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .text-start {
    text-align: start;
  }
  .align-middle {
    vertical-align: middle;
  }
  .align-top {
    vertical-align: top;
  }
  .font-serif {
    font-family: var(--font-serif);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[0\.6rem\] {
    font-size: 0.6rem;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .leading-normal {
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .\!text-gray-800 {
    color: var(--color-gray-800) !important;
  }
  .text-\[\#135F29\] {
    color: #135F29;
  }
  .text-\[\#161B9D\] {
    color: #161B9D;
  }
  .text-accent {
    color: var(--color-accent);
  }
  .text-background {
    color: var(--color-background);
  }
  .text-danger {
    color: var(--color-danger);
  }
  .text-danger-500 {
    color: var(--color-danger-500);
  }
  .text-danger-900 {
    color: var(--color-danger-900);
  }
  .text-gray-400 {
    color: var(--color-gray-400);
  }
  .text-gray-400\/50 {
    color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-gray-400) 50%, transparent);
    }
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-gray-700 {
    color: var(--color-gray-700);
  }
  .text-gray-800 {
    color: var(--color-gray-800);
  }
  .text-info {
    color: var(--color-info);
  }
  .text-info-900 {
    color: var(--color-info-900);
  }
  .text-neutral {
    color: var(--color-neutral);
  }
  .text-on-accent {
    color: var(--color-on-accent);
  }
  .text-on-background {
    color: var(--color-on-background);
  }
  .text-on-background\/50 {
    color: var(--color-on-background);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-on-background) 50%, transparent);
    }
  }
  .text-on-background\/60 {
    color: var(--color-on-background);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-on-background) 60%, transparent);
    }
  }
  .text-on-background\/70 {
    color: var(--color-on-background);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-on-background) 70%, transparent);
    }
  }
  .text-on-background\/80 {
    color: var(--color-on-background);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-on-background) 80%, transparent);
    }
  }
  .text-on-background\/90 {
    color: var(--color-on-background);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-on-background) 90%, transparent);
    }
  }
  .text-on-danger {
    color: var(--color-on-danger);
  }
  .text-on-info {
    color: var(--color-on-info);
  }
  .text-on-neutral {
    color: var(--color-on-neutral);
  }
  .text-on-primary {
    color: var(--color-on-primary);
  }
  .text-on-primary\/85 {
    color: var(--color-on-primary);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-on-primary) 85%, transparent);
    }
  }
  .text-on-secondary {
    color: var(--color-on-secondary);
  }
  .text-on-success {
    color: var(--color-on-success);
  }
  .text-on-surface {
    color: var(--color-on-surface);
  }
  .text-on-surface-alt {
    color: var(--color-on-surface-alt);
  }
  .text-on-surface-alt\/70 {
    color: var(--color-on-surface-alt);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-on-surface-alt) 70%, transparent);
    }
  }
  .text-on-surface-alt\/80 {
    color: var(--color-on-surface-alt);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-on-surface-alt) 80%, transparent);
    }
  }
  .text-on-surface\/70 {
    color: var(--color-on-surface);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-on-surface) 70%, transparent);
    }
  }
  .text-on-surface\/80 {
    color: var(--color-on-surface);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-on-surface) 80%, transparent);
    }
  }
  .text-on-warning {
    color: var(--color-on-warning);
  }
  .text-primary {
    color: var(--color-primary);
  }
  .text-primary-50 {
    color: var(--color-primary-50);
  }
  .text-primary-100 {
    color: var(--color-primary-100);
  }
  .text-secondary {
    color: var(--color-secondary);
  }
  .text-secondary-700 {
    color: var(--color-secondary-700);
  }
  .text-success {
    color: var(--color-success);
  }
  .text-success-900 {
    color: var(--color-success-900);
  }
  .text-surface {
    color: var(--color-surface);
  }
  .text-surface-200 {
    color: var(--color-surface-200);
  }
  .text-surface-200\/80 {
    color: var(--color-surface-200);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-surface-200) 80%, transparent);
    }
  }
  .text-surface-alt {
    color: var(--color-surface-alt);
  }
  .text-warning {
    color: var(--color-warning);
  }
  .text-warning-900 {
    color: var(--color-warning-900);
  }
  .text-white {
    color: var(--color-white);
  }
  .text-white\/80 {
    color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .no-underline {
    text-decoration-line: none;
  }
  .overline {
    text-decoration-line: overline;
  }
  .underline {
    text-decoration-line: underline;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xs {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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);
  }
  .ring-primary {
    --tw-ring-color: var(--color-primary);
  }
  .ring-primary-300\! {
    --tw-ring-color: var(--color-primary-300) !important;
  }
  .ring-offset-2 {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .brightness-50 {
    --tw-brightness: brightness(50%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .brightness-60 {
    --tw-brightness: brightness(60%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .brightness-75 {
    --tw-brightness: brightness(75%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter\! {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;
  }
  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, 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));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    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));
  }
  .duration-100 {
    --tw-duration: 100ms;
    transition-duration: 100ms;
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .\[wire\:model\=\"\`\+i\+\`\"\] {
    wire: model="`+i+`";
  }
  .\[wire\:model\] {
    wire: model;
  }
  .ms-overflow-auto {
    -ms-overflow-style: auto;
  }
  .ms-overflow-none {
    -ms-overflow-style: none;
  }
  .ms-overflow-scrollbar {
    -ms-overflow-style: scrollbar;
  }
  .overflow-auto-scroll {
    -webkit-overflow-scrolling: auto;
  }
  .overflow-touch {
    -webkit-overflow-scrolling: touch;
  }
  .not-last\:border-b {
    &:not(*:last-child) {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }
  }
  .group-hover\:visible {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        visibility: visible;
      }
    }
  }
  .group-hover\:mr-0 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        margin-right: 0;
      }
    }
  }
  .group-hover\:flex {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        display: flex;
      }
    }
  }
  .group-hover\:scale-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 100%;
        --tw-scale-y: 100%;
        --tw-scale-z: 100%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:scale-105 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:scale-110 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:scale-125 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 125%;
        --tw-scale-y: 125%;
        --tw-scale-z: 125%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:scale-150 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 150%;
        --tw-scale-y: 150%;
        --tw-scale-z: 150%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:opacity-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover\:brightness-90 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-brightness: brightness(90%);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
      }
    }
  }
  .group-hover\/product-card\:pointer-events-auto {
    &:is(:where(.group\/product-card):hover *) {
      @media (hover: hover) {
        pointer-events: auto;
      }
    }
  }
  .group-hover\/product-card\:pointer-events-none {
    &:is(:where(.group\/product-card):hover *) {
      @media (hover: hover) {
        pointer-events: none;
      }
    }
  }
  .group-hover\/product-card\:opacity-0 {
    &:is(:where(.group\/product-card):hover *) {
      @media (hover: hover) {
        opacity: 0%;
      }
    }
  }
  .group-hover\/product-card\:opacity-100 {
    &:is(:where(.group\/product-card):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .before\:absolute {
    &::before {
      content: var(--tw-content);
      position: absolute;
    }
  }
  .before\:inset-0 {
    &::before {
      content: var(--tw-content);
      inset: 0;
    }
  }
  .before\:z-5 {
    &::before {
      content: var(--tw-content);
      z-index: 5;
    }
  }
  .before\:z-10 {
    &::before {
      content: var(--tw-content);
      z-index: 10;
    }
  }
  .last\:border-b-0 {
    &:last-child {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }
  .last\:border-none {
    &:last-child {
      --tw-border-style: none;
      border-style: none;
    }
  }
  .focus-within\:ring-2 {
    &:focus-within {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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-within\:ring-primary {
    &:focus-within {
      --tw-ring-color: var(--color-primary);
    }
  }
  .hover\:scale-100 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 100%;
        --tw-scale-y: 100%;
        --tw-scale-z: 100%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:scale-105 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:scale-110 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:scale-125 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 125%;
        --tw-scale-y: 125%;
        --tw-scale-z: 125%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:scale-150 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 150%;
        --tw-scale-y: 150%;
        --tw-scale-z: 150%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:border-blue-600 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-blue-600);
      }
    }
  }
  .hover\:border-on-background\/12 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-on-background);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-on-background) 12%, transparent);
        }
      }
    }
  }
  .hover\:border-on-surface\/10 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-on-surface);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-on-surface) 10%, transparent);
        }
      }
    }
  }
  .hover\:border-primary {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-primary);
      }
    }
  }
  .hover\:bg-danger {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-danger);
      }
    }
  }
  .hover\:bg-danger-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-danger-200);
      }
    }
  }
  .hover\:bg-danger\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-danger);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-danger) 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-gray-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .hover\:bg-gray-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .hover\:bg-info-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-info-200);
      }
    }
  }
  .hover\:bg-neutral-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-neutral-100);
      }
    }
  }
  .hover\:bg-primary {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-primary);
      }
    }
  }
  .hover\:bg-secondary-400 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-secondary-400);
      }
    }
  }
  .hover\:bg-success-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-success-200);
      }
    }
  }
  .hover\:bg-surface {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-surface);
      }
    }
  }
  .hover\:bg-surface-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-surface-600);
      }
    }
  }
  .hover\:bg-surface-alt {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-surface-alt);
      }
    }
  }
  .hover\:bg-surface\/90 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-surface);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-surface) 90%, transparent);
        }
      }
    }
  }
  .hover\:bg-warning-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-warning-200);
      }
    }
  }
  .hover\:text-danger {
    &:hover {
      @media (hover: hover) {
        color: var(--color-danger);
      }
    }
  }
  .hover\:text-danger-50 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-danger-50);
      }
    }
  }
  .hover\:text-on-background {
    &:hover {
      @media (hover: hover) {
        color: var(--color-on-background);
      }
    }
  }
  .hover\:text-primary {
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary);
      }
    }
  }
  .hover\:text-primary\/80 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-primary);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-primary) 80%, transparent);
        }
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .hover\:no-underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: none;
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .hover\:opacity-75 {
    &:hover {
      @media (hover: hover) {
        opacity: 75%;
      }
    }
  }
  .hover\:opacity-80 {
    &:hover {
      @media (hover: hover) {
        opacity: 80%;
      }
    }
  }
  .hover\:opacity-90 {
    &:hover {
      @media (hover: hover) {
        opacity: 90%;
      }
    }
  }
  .hover\:opacity-100 {
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .hover\:shadow-md {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:ring-2 {
    &:hover {
      @media (hover: hover) {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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);
      }
    }
  }
  .hover\:ring-neutral-200 {
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--color-neutral-200);
      }
    }
  }
  .hover\:ring-offset-2 {
    &:hover {
      @media (hover: hover) {
        --tw-ring-offset-width: 2px;
        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
      }
    }
  }
  .focus\:z-10 {
    &:focus {
      z-index: 10;
    }
  }
  .focus\:border-primary {
    &:focus {
      border-color: var(--color-primary);
    }
  }
  .focus\:bg-gray-200 {
    &:focus {
      background-color: var(--color-gray-200);
    }
  }
  .focus\:ring-0 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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\:ring-primary {
    &:focus {
      --tw-ring-color: var(--color-primary);
    }
  }
  .focus\:ring-offset-2 {
    &:focus {
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .active\:bg-surface-100 {
    &:active {
      background-color: var(--color-surface-100);
    }
  }
  .active\:bg-surface-alt-600 {
    &:active {
      background-color: var(--color-surface-alt-600);
    }
  }
  .active\:text-on-background {
    &:active {
      color: var(--color-on-background);
    }
  }
  .disabled\:cursor-default {
    &:disabled {
      cursor: default;
    }
  }
  .disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed;
    }
  }
  .disabled\:text-on-background\/30 {
    &:disabled {
      color: var(--color-on-background);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-on-background) 30%, transparent);
      }
    }
  }
  .disabled\:opacity-10 {
    &:disabled {
      opacity: 10%;
    }
  }
  .disabled\:opacity-30 {
    &:disabled {
      opacity: 30%;
    }
  }
  .disabled\:hover\:bg-transparent {
    &:disabled {
      &:hover {
        @media (hover: hover) {
          background-color: transparent;
        }
      }
    }
  }
  .disabled\:hover\:text-neutral {
    &:disabled {
      &:hover {
        @media (hover: hover) {
          color: var(--color-neutral);
        }
      }
    }
  }
  .has-\[\:checked\]\:border-primary {
    &:has(*:is(:checked)) {
      border-color: var(--color-primary);
    }
  }
  .has-\[\:checked\]\:bg-primary\/10 {
    &:has(*:is(:checked)) {
      background-color: var(--color-primary);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
      }
    }
  }
  .data-active\:bg-on-surface {
    &[data-active] {
      background-color: var(--color-on-surface);
    }
  }
  .data-\[active\]\:text-primary {
    &[data-active] {
      color: var(--color-primary);
    }
  }
  .data-\[align\=center\]\:left-1\/2 {
    &[data-align="center"] {
      left: calc(1 / 2 * 100%);
    }
  }
  .data-\[align\=center\]\:-translate-x-1\/2 {
    &[data-align="center"] {
      --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .data-\[align\=end\]\:right-4 {
    &[data-align="end"] {
      right: calc(var(--spacing) * 4);
    }
  }
  .data-\[align\=start\]\:left-4 {
    &[data-align="start"] {
      left: calc(var(--spacing) * 4);
    }
  }
  .data-\[placement\=end\]\:end-0 {
    &[data-placement="end"] {
      inset-inline-end: calc(var(--spacing) * 0);
    }
  }
  .data-\[placement\=start\]\:start-0 {
    &[data-placement="start"] {
      inset-inline-start: calc(var(--spacing) * 0);
    }
  }
  .data-\[side\=bottom\]\:bottom-4 {
    &[data-side="bottom"] {
      bottom: calc(var(--spacing) * 4);
    }
  }
  .data-\[side\=top\]\:top-4 {
    &[data-side="top"] {
      top: calc(var(--spacing) * 4);
    }
  }
  .data-\[state\=closed\]\:animate-slide-out-down {
    &[data-state="closed"] {
      animation: var(--animate-slide-out-down);
    }
  }
  .data-\[state\=closed\]\:animate-slide-out-up {
    &[data-state="closed"] {
      animation: var(--animate-slide-out-up);
    }
  }
  .data-\[state\=open\]\:rotate-180 {
    &[data-state="open"] {
      rotate: 180deg;
    }
  }
  .data-\[state\=open\]\:animate-slide-in-down {
    &[data-state="open"] {
      animation: var(--animate-slide-in-down);
    }
  }
  .data-\[state\=open\]\:animate-slide-in-up {
    &[data-state="open"] {
      animation: var(--animate-slide-in-up);
    }
  }
  .max-xl\:flex-auto {
    @media (width < 80rem) {
      flex: auto;
    }
  }
  .max-xl\:flex-wrap {
    @media (width < 80rem) {
      flex-wrap: wrap;
    }
  }
  .max-md\:w-8 {
    @media (width < 48rem) {
      width: calc(var(--spacing) * 8);
    }
  }
  .max-md\:flex-wrap {
    @media (width < 48rem) {
      flex-wrap: wrap;
    }
  }
  .max-md\:gap-0 {
    @media (width < 48rem) {
      gap: 0;
    }
  }
  .max-md\:px-0 {
    @media (width < 48rem) {
      padding-inline: 0;
    }
  }
  .max-md\:text-lg {
    @media (width < 48rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .max-sm\:mb-4 {
    @media (width < 40rem) {
      margin-bottom: calc(var(--spacing) * 4);
    }
  }
  .max-sm\:block {
    @media (width < 40rem) {
      display: block;
    }
  }
  .max-sm\:flex {
    @media (width < 40rem) {
      display: flex;
    }
  }
  .max-sm\:hidden {
    @media (width < 40rem) {
      display: none;
    }
  }
  .max-sm\:w-full {
    @media (width < 40rem) {
      width: 100%;
    }
  }
  .max-sm\:flex-wrap {
    @media (width < 40rem) {
      flex-wrap: wrap;
    }
  }
  .max-sm\:justify-between {
    @media (width < 40rem) {
      justify-content: space-between;
    }
  }
  .max-sm\:overflow-x-auto {
    @media (width < 40rem) {
      overflow-x: auto;
    }
  }
  .max-sm\:rounded {
    @media (width < 40rem) {
      border-radius: 0.25rem;
    }
  }
  .max-sm\:border {
    @media (width < 40rem) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
  }
  .max-sm\:p-2 {
    @media (width < 40rem) {
      padding: calc(var(--spacing) * 2);
    }
  }
  .max-sm\:text-base {
    @media (width < 40rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .max-sm\:leading-4 {
    @media (width < 40rem) {
      --tw-leading: calc(var(--spacing) * 4);
      line-height: calc(var(--spacing) * 4);
    }
  }
  .max-sm\:before\:pr-2 {
    @media (width < 40rem) {
      &::before {
        content: var(--tw-content);
        padding-right: calc(var(--spacing) * 2);
      }
    }
  }
  .max-sm\:before\:text-sm {
    @media (width < 40rem) {
      &::before {
        content: var(--tw-content);
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
      }
    }
  }
  .max-sm\:before\:font-semibold {
    @media (width < 40rem) {
      &::before {
        content: var(--tw-content);
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
      }
    }
  }
  .max-sm\:before\:text-on-background {
    @media (width < 40rem) {
      &::before {
        content: var(--tw-content);
        color: var(--color-on-background);
      }
    }
  }
  .max-sm\:before\:content-\[attr\(data-label\)\] {
    @media (width < 40rem) {
      &::before {
        --tw-content: attr(data-label);
        content: var(--tw-content);
      }
    }
  }
  .sm\:mt-6 {
    @media (width >= 40rem) {
      margin-top: calc(var(--spacing) * 6);
    }
  }
  .sm\:block {
    @media (width >= 40rem) {
      display: block;
    }
  }
  .sm\:flex {
    @media (width >= 40rem) {
      display: flex;
    }
  }
  .sm\:hidden {
    @media (width >= 40rem) {
      display: none;
    }
  }
  .sm\:inline {
    @media (width >= 40rem) {
      display: inline;
    }
  }
  .sm\:max-w-64 {
    @media (width >= 40rem) {
      max-width: calc(var(--spacing) * 64);
    }
  }
  .sm\:flex-1 {
    @media (width >= 40rem) {
      flex: 1;
    }
  }
  .sm\:translate-y-0 {
    @media (width >= 40rem) {
      --tw-translate-y: 0;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .sm\:scale-95 {
    @media (width >= 40rem) {
      --tw-scale-x: 95%;
      --tw-scale-y: 95%;
      --tw-scale-z: 95%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .sm\:scale-100 {
    @media (width >= 40rem) {
      --tw-scale-x: 100%;
      --tw-scale-y: 100%;
      --tw-scale-z: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:flex-wrap {
    @media (width >= 40rem) {
      flex-wrap: wrap;
    }
  }
  .sm\:items-center {
    @media (width >= 40rem) {
      align-items: center;
    }
  }
  .sm\:justify-between {
    @media (width >= 40rem) {
      justify-content: space-between;
    }
  }
  .sm\:divide-y {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(1px * var(--tw-divide-y-reverse));
        border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
      }
    }
  }
  .sm\:p-6 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:py-4 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 4);
    }
  }
  .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\:text-right {
    @media (width >= 40rem) {
      text-align: right;
    }
  }
  .sm\:text-base {
    @media (width >= 40rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .sm\:text-sm {
    @media (width >= 40rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .sm\:text-xl {
    @media (width >= 40rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .sm\:duration-300 {
    @media (width >= 40rem) {
      --tw-duration: 300ms;
      transition-duration: 300ms;
    }
  }
  .md\:absolute {
    @media (width >= 48rem) {
      position: absolute;
    }
  }
  .md\:inset-y-0 {
    @media (width >= 48rem) {
      inset-block: 0;
    }
  }
  .md\:start-0 {
    @media (width >= 48rem) {
      inset-inline-start: calc(var(--spacing) * 0);
    }
  }
  .md\:end-0 {
    @media (width >= 48rem) {
      inset-inline-end: calc(var(--spacing) * 0);
    }
  }
  .md\:order-1 {
    @media (width >= 48rem) {
      order: 1;
    }
  }
  .md\:order-2 {
    @media (width >= 48rem) {
      order: 2;
    }
  }
  .md\:order-first {
    @media (width >= 48rem) {
      order: -9999;
    }
  }
  .md\:order-last {
    @media (width >= 48rem) {
      order: 9999;
    }
  }
  .md\:col-span-2 {
    @media (width >= 48rem) {
      grid-column: span 2 / span 2;
    }
  }
  .md\:ms-24 {
    @media (width >= 48rem) {
      margin-inline-start: calc(var(--spacing) * 24);
    }
  }
  .md\:me-24 {
    @media (width >= 48rem) {
      margin-inline-end: calc(var(--spacing) * 24);
    }
  }
  .md\:block {
    @media (width >= 48rem) {
      display: block;
    }
  }
  .md\:flex {
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .md\:inline {
    @media (width >= 48rem) {
      display: inline;
    }
  }
  .md\:h-32 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 32);
    }
  }
  .md\:w-32 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 32);
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:flex-col {
    @media (width >= 48rem) {
      flex-direction: column;
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:items-center {
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .md\:gap-2 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .md\:p-6 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .md\:text-2xl {
    @media (width >= 48rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .md\:text-sm {
    @media (width >= 48rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .md\:text-xl {
    @media (width >= 48rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .lg\:sticky {
    @media (width >= 64rem) {
      position: sticky;
    }
  }
  .lg\:top-8 {
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 8);
    }
  }
  .lg\:order-last {
    @media (width >= 64rem) {
      order: 9999;
    }
  }
  .lg\:col-span-1 {
    @media (width >= 64rem) {
      grid-column: span 1 / span 1;
    }
  }
  .lg\:col-span-2 {
    @media (width >= 64rem) {
      grid-column: span 2 / span 2;
    }
  }
  .lg\:col-span-3 {
    @media (width >= 64rem) {
      grid-column: span 3 / span 3;
    }
  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
    }
  }
  .lg\:flex {
    @media (width >= 64rem) {
      display: flex;
    }
  }
  .lg\:hidden {
    @media (width >= 64rem) {
      display: none;
    }
  }
  .lg\:inline {
    @media (width >= 64rem) {
      display: inline;
    }
  }
  .lg\:w-\[310px\] {
    @media (width >= 64rem) {
      width: 310px;
    }
  }
  .lg\:flex-shrink-0 {
    @media (width >= 64rem) {
      flex-shrink: 0;
    }
  }
  .lg\:grid-cols-1 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-2 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-5 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .lg\:flex-row {
    @media (width >= 64rem) {
      flex-direction: row;
    }
  }
  .lg\:gap-2 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .lg\:p-2 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 2);
    }
  }
  .lg\:px-0 {
    @media (width >= 64rem) {
      padding-inline: 0;
    }
  }
  .lg\:px-3 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  .lg\:px-8 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .lg\:px-16 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 16);
    }
  }
  .xl\:inline {
    @media (width >= 80rem) {
      display: inline;
    }
  }
  .xl\:grid-cols-1 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-2 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-3 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-4 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-5 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-6 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .xl\:text-xl {
    @media (width >= 80rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .rtl\:right-auto {
    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
      right: auto;
    }
  }
  .rtl\:left-2 {
    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
      left: calc(var(--spacing) * 2);
    }
  }
  .rtl\:hidden {
    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
      display: none;
    }
  }
  .rtl\:inline {
    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
      display: inline;
    }
  }
  .rtl\:rotate-180 {
    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
      rotate: 180deg;
    }
  }
  .rtl\:transform {
    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
      transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
    }
  }
  .rtl\:text-right {
    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
      text-align: right;
    }
  }
  .dark\:border-gray-700 {
    @media (prefers-color-scheme: dark) {
      border-color: var(--color-gray-700);
    }
  }
  .dark\:border-gray-800 {
    @media (prefers-color-scheme: dark) {
      border-color: var(--color-gray-800);
    }
  }
  .dark\:bg-gray-800 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-gray-800);
    }
  }
  .dark\:bg-gray-900 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-gray-900);
    }
  }
  .dark\:bg-gray-950 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-gray-950);
    }
  }
  .dark\:\!text-white {
    @media (prefers-color-scheme: dark) {
      color: var(--color-white) !important;
    }
  }
  .dark\:text-gray-200 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-gray-200);
    }
  }
  .dark\:text-gray-300 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-gray-300);
    }
  }
  .dark\:text-gray-400 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-gray-400);
    }
  }
  .dark\:text-white {
    @media (prefers-color-scheme: dark) {
      color: var(--color-white);
    }
  }
  .dark\:hover\:bg-gray-800 {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-800);
        }
      }
    }
  }
  .dark\:hover\:bg-gray-950 {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-gray-950);
        }
      }
    }
  }
  .dark\:focus\:bg-gray-800 {
    @media (prefers-color-scheme: dark) {
      &:focus {
        background-color: var(--color-gray-800);
      }
    }
  }
  .parent-hover\:pointer-events-auto {
    *:hover > & {
      pointer-events: auto;
    }
  }
  .parent-hover\:pointer-events-none {
    *:hover > & {
      pointer-events: none;
    }
  }
  .parent-hover\:opacity-0 {
    *:hover > & {
      opacity: 0%;
    }
  }
  .parent-hover\:opacity-100 {
    *:hover > & {
      opacity: 100%;
    }
  }
  .mobile\:z-0 {
    @media (max-width: 639px) {
      z-index: 0;
    }
  }
  .mobile\:z-10 {
    @media (max-width: 639px) {
      z-index: 10;
    }
  }
  .mobile\:z-20 {
    @media (max-width: 639px) {
      z-index: 20;
    }
  }
  .mobile\:z-30 {
    @media (max-width: 639px) {
      z-index: 30;
    }
  }
  .mobile\:z-40 {
    @media (max-width: 639px) {
      z-index: 40;
    }
  }
  .mobile\:z-50 {
    @media (max-width: 639px) {
      z-index: 50;
    }
  }
  .mobile\:m-0 {
    @media (max-width: 639px) {
      margin: 0;
    }
  }
  .mobile\:m-1 {
    @media (max-width: 639px) {
      margin: var(--spacing);
    }
  }
  .mobile\:m-2 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 2);
    }
  }
  .mobile\:m-3 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 3);
    }
  }
  .mobile\:m-4 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 4);
    }
  }
  .mobile\:m-5 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 5);
    }
  }
  .mobile\:m-6 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 6);
    }
  }
  .mobile\:m-7 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 7);
    }
  }
  .mobile\:m-8 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 8);
    }
  }
  .mobile\:m-9 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 9);
    }
  }
  .mobile\:m-10 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 10);
    }
  }
  .mobile\:m-11 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 11);
    }
  }
  .mobile\:m-12 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 12);
    }
  }
  .mobile\:m-13 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 13);
    }
  }
  .mobile\:m-14 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 14);
    }
  }
  .mobile\:m-15 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 15);
    }
  }
  .mobile\:m-16 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 16);
    }
  }
  .mobile\:m-17 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 17);
    }
  }
  .mobile\:m-18 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 18);
    }
  }
  .mobile\:m-19 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 19);
    }
  }
  .mobile\:m-20 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 20);
    }
  }
  .mobile\:m-21 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 21);
    }
  }
  .mobile\:m-22 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 22);
    }
  }
  .mobile\:m-23 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 23);
    }
  }
  .mobile\:m-24 {
    @media (max-width: 639px) {
      margin: calc(var(--spacing) * 24);
    }
  }
  .mobile\:mx-0 {
    @media (max-width: 639px) {
      margin-inline: 0;
    }
  }
  .mobile\:mx-1 {
    @media (max-width: 639px) {
      margin-inline: var(--spacing);
    }
  }
  .mobile\:mx-2 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 2);
    }
  }
  .mobile\:mx-3 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 3);
    }
  }
  .mobile\:mx-4 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 4);
    }
  }
  .mobile\:mx-5 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 5);
    }
  }
  .mobile\:mx-6 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 6);
    }
  }
  .mobile\:mx-7 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 7);
    }
  }
  .mobile\:mx-8 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 8);
    }
  }
  .mobile\:mx-9 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 9);
    }
  }
  .mobile\:mx-10 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 10);
    }
  }
  .mobile\:mx-11 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 11);
    }
  }
  .mobile\:mx-12 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 12);
    }
  }
  .mobile\:mx-13 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 13);
    }
  }
  .mobile\:mx-14 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 14);
    }
  }
  .mobile\:mx-15 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 15);
    }
  }
  .mobile\:mx-16 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 16);
    }
  }
  .mobile\:mx-17 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 17);
    }
  }
  .mobile\:mx-18 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 18);
    }
  }
  .mobile\:mx-19 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 19);
    }
  }
  .mobile\:mx-20 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 20);
    }
  }
  .mobile\:mx-21 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 21);
    }
  }
  .mobile\:mx-22 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 22);
    }
  }
  .mobile\:mx-23 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 23);
    }
  }
  .mobile\:mx-24 {
    @media (max-width: 639px) {
      margin-inline: calc(var(--spacing) * 24);
    }
  }
  .mobile\:my-0 {
    @media (max-width: 639px) {
      margin-block: 0;
    }
  }
  .mobile\:my-1 {
    @media (max-width: 639px) {
      margin-block: var(--spacing);
    }
  }
  .mobile\:my-2 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 2);
    }
  }
  .mobile\:my-3 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 3);
    }
  }
  .mobile\:my-4 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 4);
    }
  }
  .mobile\:my-5 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 5);
    }
  }
  .mobile\:my-6 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 6);
    }
  }
  .mobile\:my-7 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 7);
    }
  }
  .mobile\:my-8 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 8);
    }
  }
  .mobile\:my-9 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 9);
    }
  }
  .mobile\:my-10 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 10);
    }
  }
  .mobile\:my-11 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 11);
    }
  }
  .mobile\:my-12 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 12);
    }
  }
  .mobile\:my-13 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 13);
    }
  }
  .mobile\:my-14 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 14);
    }
  }
  .mobile\:my-15 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 15);
    }
  }
  .mobile\:my-16 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 16);
    }
  }
  .mobile\:my-17 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 17);
    }
  }
  .mobile\:my-18 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 18);
    }
  }
  .mobile\:my-19 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 19);
    }
  }
  .mobile\:my-20 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 20);
    }
  }
  .mobile\:my-21 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 21);
    }
  }
  .mobile\:my-22 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 22);
    }
  }
  .mobile\:my-23 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 23);
    }
  }
  .mobile\:my-24 {
    @media (max-width: 639px) {
      margin-block: calc(var(--spacing) * 24);
    }
  }
  .mobile\:ms-0 {
    @media (max-width: 639px) {
      margin-inline-start: 0;
    }
  }
  .mobile\:ms-1 {
    @media (max-width: 639px) {
      margin-inline-start: var(--spacing);
    }
  }
  .mobile\:ms-2 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 2);
    }
  }
  .mobile\:ms-3 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 3);
    }
  }
  .mobile\:ms-4 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 4);
    }
  }
  .mobile\:ms-5 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 5);
    }
  }
  .mobile\:ms-6 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 6);
    }
  }
  .mobile\:ms-7 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 7);
    }
  }
  .mobile\:ms-8 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 8);
    }
  }
  .mobile\:ms-9 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 9);
    }
  }
  .mobile\:ms-10 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 10);
    }
  }
  .mobile\:ms-11 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 11);
    }
  }
  .mobile\:ms-12 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 12);
    }
  }
  .mobile\:ms-13 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 13);
    }
  }
  .mobile\:ms-14 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 14);
    }
  }
  .mobile\:ms-15 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 15);
    }
  }
  .mobile\:ms-16 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 16);
    }
  }
  .mobile\:ms-17 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 17);
    }
  }
  .mobile\:ms-18 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 18);
    }
  }
  .mobile\:ms-19 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 19);
    }
  }
  .mobile\:ms-20 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 20);
    }
  }
  .mobile\:ms-21 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 21);
    }
  }
  .mobile\:ms-22 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 22);
    }
  }
  .mobile\:ms-23 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 23);
    }
  }
  .mobile\:ms-24 {
    @media (max-width: 639px) {
      margin-inline-start: calc(var(--spacing) * 24);
    }
  }
  .mobile\:me-0 {
    @media (max-width: 639px) {
      margin-inline-end: 0;
    }
  }
  .mobile\:me-1 {
    @media (max-width: 639px) {
      margin-inline-end: var(--spacing);
    }
  }
  .mobile\:me-2 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 2);
    }
  }
  .mobile\:me-3 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 3);
    }
  }
  .mobile\:me-4 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 4);
    }
  }
  .mobile\:me-5 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 5);
    }
  }
  .mobile\:me-6 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 6);
    }
  }
  .mobile\:me-7 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 7);
    }
  }
  .mobile\:me-8 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 8);
    }
  }
  .mobile\:me-9 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 9);
    }
  }
  .mobile\:me-10 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 10);
    }
  }
  .mobile\:me-11 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 11);
    }
  }
  .mobile\:me-12 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 12);
    }
  }
  .mobile\:me-13 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 13);
    }
  }
  .mobile\:me-14 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 14);
    }
  }
  .mobile\:me-15 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 15);
    }
  }
  .mobile\:me-16 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 16);
    }
  }
  .mobile\:me-17 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 17);
    }
  }
  .mobile\:me-18 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 18);
    }
  }
  .mobile\:me-19 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 19);
    }
  }
  .mobile\:me-20 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 20);
    }
  }
  .mobile\:me-21 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 21);
    }
  }
  .mobile\:me-22 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 22);
    }
  }
  .mobile\:me-23 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 23);
    }
  }
  .mobile\:me-24 {
    @media (max-width: 639px) {
      margin-inline-end: calc(var(--spacing) * 24);
    }
  }
  .mobile\:mt-0 {
    @media (max-width: 639px) {
      margin-top: 0;
    }
  }
  .mobile\:mt-1 {
    @media (max-width: 639px) {
      margin-top: var(--spacing);
    }
  }
  .mobile\:mt-2 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 2);
    }
  }
  .mobile\:mt-3 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 3);
    }
  }
  .mobile\:mt-4 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 4);
    }
  }
  .mobile\:mt-5 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 5);
    }
  }
  .mobile\:mt-6 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 6);
    }
  }
  .mobile\:mt-7 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 7);
    }
  }
  .mobile\:mt-8 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 8);
    }
  }
  .mobile\:mt-9 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 9);
    }
  }
  .mobile\:mt-10 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 10);
    }
  }
  .mobile\:mt-11 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 11);
    }
  }
  .mobile\:mt-12 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 12);
    }
  }
  .mobile\:mt-13 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 13);
    }
  }
  .mobile\:mt-14 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 14);
    }
  }
  .mobile\:mt-15 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 15);
    }
  }
  .mobile\:mt-16 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 16);
    }
  }
  .mobile\:mt-17 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 17);
    }
  }
  .mobile\:mt-18 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 18);
    }
  }
  .mobile\:mt-19 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 19);
    }
  }
  .mobile\:mt-20 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 20);
    }
  }
  .mobile\:mt-21 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 21);
    }
  }
  .mobile\:mt-22 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 22);
    }
  }
  .mobile\:mt-23 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 23);
    }
  }
  .mobile\:mt-24 {
    @media (max-width: 639px) {
      margin-top: calc(var(--spacing) * 24);
    }
  }
  .mobile\:mb-0 {
    @media (max-width: 639px) {
      margin-bottom: 0;
    }
  }
  .mobile\:mb-1 {
    @media (max-width: 639px) {
      margin-bottom: var(--spacing);
    }
  }
  .mobile\:mb-2 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 2);
    }
  }
  .mobile\:mb-3 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 3);
    }
  }
  .mobile\:mb-4 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 4);
    }
  }
  .mobile\:mb-5 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 5);
    }
  }
  .mobile\:mb-6 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 6);
    }
  }
  .mobile\:mb-7 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 7);
    }
  }
  .mobile\:mb-8 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 8);
    }
  }
  .mobile\:mb-9 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 9);
    }
  }
  .mobile\:mb-10 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 10);
    }
  }
  .mobile\:mb-11 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 11);
    }
  }
  .mobile\:mb-12 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 12);
    }
  }
  .mobile\:mb-13 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 13);
    }
  }
  .mobile\:mb-14 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 14);
    }
  }
  .mobile\:mb-15 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 15);
    }
  }
  .mobile\:mb-16 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 16);
    }
  }
  .mobile\:mb-17 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 17);
    }
  }
  .mobile\:mb-18 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 18);
    }
  }
  .mobile\:mb-19 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 19);
    }
  }
  .mobile\:mb-20 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 20);
    }
  }
  .mobile\:mb-21 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 21);
    }
  }
  .mobile\:mb-22 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 22);
    }
  }
  .mobile\:mb-23 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 23);
    }
  }
  .mobile\:mb-24 {
    @media (max-width: 639px) {
      margin-bottom: calc(var(--spacing) * 24);
    }
  }
  .mobile\:aspect-\[3\/4\] {
    @media (max-width: 639px) {
      aspect-ratio: 3/4;
    }
  }
  .mobile\:aspect-\[4\/3\] {
    @media (max-width: 639px) {
      aspect-ratio: 4/3;
    }
  }
  .mobile\:aspect-square {
    @media (max-width: 639px) {
      aspect-ratio: 1 / 1;
    }
  }
  .mobile\:h-\(--height-mobile\) {
    @media (max-width: 639px) {
      height: var(--height-mobile);
    }
  }
  .mobile\:h-1 {
    @media (max-width: 639px) {
      height: var(--spacing);
    }
  }
  .mobile\:h-2 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 2);
    }
  }
  .mobile\:h-3 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 3);
    }
  }
  .mobile\:h-4 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 4);
    }
  }
  .mobile\:h-5 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 5);
    }
  }
  .mobile\:h-6 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 6);
    }
  }
  .mobile\:h-7 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 7);
    }
  }
  .mobile\:h-8 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 8);
    }
  }
  .mobile\:h-9 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 9);
    }
  }
  .mobile\:h-10 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 10);
    }
  }
  .mobile\:h-11 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 11);
    }
  }
  .mobile\:h-12 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 12);
    }
  }
  .mobile\:h-13 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 13);
    }
  }
  .mobile\:h-14 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 14);
    }
  }
  .mobile\:h-15 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 15);
    }
  }
  .mobile\:h-16 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 16);
    }
  }
  .mobile\:h-17 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 17);
    }
  }
  .mobile\:h-18 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 18);
    }
  }
  .mobile\:h-19 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 19);
    }
  }
  .mobile\:h-20 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 20);
    }
  }
  .mobile\:h-21 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 21);
    }
  }
  .mobile\:h-22 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 22);
    }
  }
  .mobile\:h-23 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 23);
    }
  }
  .mobile\:h-24 {
    @media (max-width: 639px) {
      height: calc(var(--spacing) * 24);
    }
  }
  .mobile\:h-\[20rem\] {
    @media (max-width: 639px) {
      height: 20rem;
    }
  }
  .mobile\:h-\[25rem\] {
    @media (max-width: 639px) {
      height: 25rem;
    }
  }
  .mobile\:h-\[37\.5rem\] {
    @media (max-width: 639px) {
      height: 37.5rem;
    }
  }
  .mobile\:h-\[50rem\] {
    @media (max-width: 639px) {
      height: 50rem;
    }
  }
  .mobile\:h-auto {
    @media (max-width: 639px) {
      height: auto;
    }
  }
  .mobile\:h-fit {
    @media (max-width: 639px) {
      height: fit-content;
    }
  }
  .mobile\:h-full {
    @media (max-width: 639px) {
      height: 100%;
    }
  }
  .mobile\:h-screen {
    @media (max-width: 639px) {
      height: 100vh;
    }
  }
  .mobile\:w-\(--width-mobile\) {
    @media (max-width: 639px) {
      width: var(--width-mobile);
    }
  }
  .mobile\:w-1 {
    @media (max-width: 639px) {
      width: var(--spacing);
    }
  }
  .mobile\:w-2 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 2);
    }
  }
  .mobile\:w-3 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 3);
    }
  }
  .mobile\:w-4 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 4);
    }
  }
  .mobile\:w-5 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 5);
    }
  }
  .mobile\:w-6 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 6);
    }
  }
  .mobile\:w-7 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 7);
    }
  }
  .mobile\:w-8 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 8);
    }
  }
  .mobile\:w-9 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 9);
    }
  }
  .mobile\:w-10 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 10);
    }
  }
  .mobile\:w-11 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 11);
    }
  }
  .mobile\:w-12 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 12);
    }
  }
  .mobile\:w-13 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 13);
    }
  }
  .mobile\:w-14 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 14);
    }
  }
  .mobile\:w-15 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 15);
    }
  }
  .mobile\:w-16 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 16);
    }
  }
  .mobile\:w-17 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 17);
    }
  }
  .mobile\:w-18 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 18);
    }
  }
  .mobile\:w-19 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 19);
    }
  }
  .mobile\:w-20 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 20);
    }
  }
  .mobile\:w-21 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 21);
    }
  }
  .mobile\:w-22 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 22);
    }
  }
  .mobile\:w-23 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 23);
    }
  }
  .mobile\:w-24 {
    @media (max-width: 639px) {
      width: calc(var(--spacing) * 24);
    }
  }
  .mobile\:w-auto {
    @media (max-width: 639px) {
      width: auto;
    }
  }
  .mobile\:w-fit {
    @media (max-width: 639px) {
      width: fit-content;
    }
  }
  .mobile\:w-full {
    @media (max-width: 639px) {
      width: 100%;
    }
  }
  .mobile\:w-screen {
    @media (max-width: 639px) {
      width: 100vw;
    }
  }
  .mobile\:grid-cols-1 {
    @media (max-width: 639px) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .mobile\:grid-cols-2 {
    @media (max-width: 639px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .mobile\:grid-cols-3 {
    @media (max-width: 639px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .mobile\:grid-cols-4 {
    @media (max-width: 639px) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .mobile\:grid-cols-5 {
    @media (max-width: 639px) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .mobile\:grid-cols-6 {
    @media (max-width: 639px) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .mobile\:grid-cols-7 {
    @media (max-width: 639px) {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }
  }
  .mobile\:grid-cols-8 {
    @media (max-width: 639px) {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
  }
  .mobile\:grid-cols-9 {
    @media (max-width: 639px) {
      grid-template-columns: repeat(9, minmax(0, 1fr));
    }
  }
  .mobile\:grid-cols-10 {
    @media (max-width: 639px) {
      grid-template-columns: repeat(10, minmax(0, 1fr));
    }
  }
  .mobile\:grid-cols-11 {
    @media (max-width: 639px) {
      grid-template-columns: repeat(11, minmax(0, 1fr));
    }
  }
  .mobile\:grid-cols-12 {
    @media (max-width: 639px) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .mobile\:grid-rows-1 {
    @media (max-width: 639px) {
      grid-template-rows: repeat(1, minmax(0, 1fr));
    }
  }
  .mobile\:grid-rows-2 {
    @media (max-width: 639px) {
      grid-template-rows: repeat(2, minmax(0, 1fr));
    }
  }
  .mobile\:grid-rows-3 {
    @media (max-width: 639px) {
      grid-template-rows: repeat(3, minmax(0, 1fr));
    }
  }
  .mobile\:grid-rows-4 {
    @media (max-width: 639px) {
      grid-template-rows: repeat(4, minmax(0, 1fr));
    }
  }
  .mobile\:grid-rows-5 {
    @media (max-width: 639px) {
      grid-template-rows: repeat(5, minmax(0, 1fr));
    }
  }
  .mobile\:grid-rows-6 {
    @media (max-width: 639px) {
      grid-template-rows: repeat(6, minmax(0, 1fr));
    }
  }
  .mobile\:flex-col {
    @media (max-width: 639px) {
      flex-direction: column;
    }
  }
  .mobile\:flex-col-reverse {
    @media (max-width: 639px) {
      flex-direction: column-reverse;
    }
  }
  .mobile\:flex-row {
    @media (max-width: 639px) {
      flex-direction: row;
    }
  }
  .mobile\:flex-row-reverse {
    @media (max-width: 639px) {
      flex-direction: row-reverse;
    }
  }
  .mobile\:items-center {
    @media (max-width: 639px) {
      align-items: center;
    }
  }
  .mobile\:items-end {
    @media (max-width: 639px) {
      align-items: flex-end;
    }
  }
  .mobile\:items-start {
    @media (max-width: 639px) {
      align-items: flex-start;
    }
  }
  .mobile\:justify-between {
    @media (max-width: 639px) {
      justify-content: space-between;
    }
  }
  .mobile\:justify-center {
    @media (max-width: 639px) {
      justify-content: center;
    }
  }
  .mobile\:justify-end {
    @media (max-width: 639px) {
      justify-content: flex-end;
    }
  }
  .mobile\:justify-start {
    @media (max-width: 639px) {
      justify-content: flex-start;
    }
  }
  .mobile\:gap-0 {
    @media (max-width: 639px) {
      gap: 0;
    }
  }
  .mobile\:gap-1 {
    @media (max-width: 639px) {
      gap: var(--spacing);
    }
  }
  .mobile\:gap-2 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .mobile\:gap-3 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .mobile\:gap-4 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .mobile\:gap-5 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 5);
    }
  }
  .mobile\:gap-6 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .mobile\:gap-7 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 7);
    }
  }
  .mobile\:gap-8 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .mobile\:gap-9 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 9);
    }
  }
  .mobile\:gap-10 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 10);
    }
  }
  .mobile\:gap-11 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 11);
    }
  }
  .mobile\:gap-12 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 12);
    }
  }
  .mobile\:gap-13 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 13);
    }
  }
  .mobile\:gap-14 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 14);
    }
  }
  .mobile\:gap-15 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 15);
    }
  }
  .mobile\:gap-16 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .mobile\:gap-17 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 17);
    }
  }
  .mobile\:gap-18 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 18);
    }
  }
  .mobile\:gap-19 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 19);
    }
  }
  .mobile\:gap-20 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 20);
    }
  }
  .mobile\:gap-21 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 21);
    }
  }
  .mobile\:gap-22 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 22);
    }
  }
  .mobile\:gap-23 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 23);
    }
  }
  .mobile\:gap-24 {
    @media (max-width: 639px) {
      gap: calc(var(--spacing) * 24);
    }
  }
  .mobile\:border-dashed {
    @media (max-width: 639px) {
      --tw-border-style: dashed;
      border-style: dashed;
    }
  }
  .mobile\:border-dotted {
    @media (max-width: 639px) {
      --tw-border-style: dotted;
      border-style: dotted;
    }
  }
  .mobile\:p-0 {
    @media (max-width: 639px) {
      padding: 0;
    }
  }
  .mobile\:p-1 {
    @media (max-width: 639px) {
      padding: var(--spacing);
    }
  }
  .mobile\:p-2 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 2);
    }
  }
  .mobile\:p-3 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 3);
    }
  }
  .mobile\:p-4 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .mobile\:p-5 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 5);
    }
  }
  .mobile\:p-6 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .mobile\:p-7 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 7);
    }
  }
  .mobile\:p-8 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .mobile\:p-9 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 9);
    }
  }
  .mobile\:p-10 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 10);
    }
  }
  .mobile\:p-11 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 11);
    }
  }
  .mobile\:p-12 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 12);
    }
  }
  .mobile\:p-13 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 13);
    }
  }
  .mobile\:p-14 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 14);
    }
  }
  .mobile\:p-15 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 15);
    }
  }
  .mobile\:p-16 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 16);
    }
  }
  .mobile\:p-17 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 17);
    }
  }
  .mobile\:p-18 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 18);
    }
  }
  .mobile\:p-19 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 19);
    }
  }
  .mobile\:p-20 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 20);
    }
  }
  .mobile\:p-21 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 21);
    }
  }
  .mobile\:p-22 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 22);
    }
  }
  .mobile\:p-23 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 23);
    }
  }
  .mobile\:p-24 {
    @media (max-width: 639px) {
      padding: calc(var(--spacing) * 24);
    }
  }
  .mobile\:px-0 {
    @media (max-width: 639px) {
      padding-inline: 0;
    }
  }
  .mobile\:px-1 {
    @media (max-width: 639px) {
      padding-inline: var(--spacing);
    }
  }
  .mobile\:px-2 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .mobile\:px-3 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  .mobile\:px-4 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .mobile\:px-5 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  .mobile\:px-6 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .mobile\:px-7 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 7);
    }
  }
  .mobile\:px-8 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .mobile\:px-9 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 9);
    }
  }
  .mobile\:px-10 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 10);
    }
  }
  .mobile\:px-11 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 11);
    }
  }
  .mobile\:px-12 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 12);
    }
  }
  .mobile\:px-13 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 13);
    }
  }
  .mobile\:px-14 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 14);
    }
  }
  .mobile\:px-15 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 15);
    }
  }
  .mobile\:px-16 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 16);
    }
  }
  .mobile\:px-17 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 17);
    }
  }
  .mobile\:px-18 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 18);
    }
  }
  .mobile\:px-19 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 19);
    }
  }
  .mobile\:px-20 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 20);
    }
  }
  .mobile\:px-21 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 21);
    }
  }
  .mobile\:px-22 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 22);
    }
  }
  .mobile\:px-23 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 23);
    }
  }
  .mobile\:px-24 {
    @media (max-width: 639px) {
      padding-inline: calc(var(--spacing) * 24);
    }
  }
  .mobile\:py-0 {
    @media (max-width: 639px) {
      padding-block: 0;
    }
  }
  .mobile\:py-1 {
    @media (max-width: 639px) {
      padding-block: var(--spacing);
    }
  }
  .mobile\:py-2 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .mobile\:py-3 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 3);
    }
  }
  .mobile\:py-4 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 4);
    }
  }
  .mobile\:py-5 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 5);
    }
  }
  .mobile\:py-6 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 6);
    }
  }
  .mobile\:py-7 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 7);
    }
  }
  .mobile\:py-8 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 8);
    }
  }
  .mobile\:py-9 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 9);
    }
  }
  .mobile\:py-10 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 10);
    }
  }
  .mobile\:py-11 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 11);
    }
  }
  .mobile\:py-12 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 12);
    }
  }
  .mobile\:py-13 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 13);
    }
  }
  .mobile\:py-14 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 14);
    }
  }
  .mobile\:py-15 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 15);
    }
  }
  .mobile\:py-16 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 16);
    }
  }
  .mobile\:py-17 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 17);
    }
  }
  .mobile\:py-18 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 18);
    }
  }
  .mobile\:py-19 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 19);
    }
  }
  .mobile\:py-20 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 20);
    }
  }
  .mobile\:py-21 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 21);
    }
  }
  .mobile\:py-22 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 22);
    }
  }
  .mobile\:py-23 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 23);
    }
  }
  .mobile\:py-24 {
    @media (max-width: 639px) {
      padding-block: calc(var(--spacing) * 24);
    }
  }
  .mobile\:ps-0 {
    @media (max-width: 639px) {
      padding-inline-start: 0;
    }
  }
  .mobile\:ps-1 {
    @media (max-width: 639px) {
      padding-inline-start: var(--spacing);
    }
  }
  .mobile\:ps-2 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 2);
    }
  }
  .mobile\:ps-3 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 3);
    }
  }
  .mobile\:ps-4 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 4);
    }
  }
  .mobile\:ps-5 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 5);
    }
  }
  .mobile\:ps-6 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 6);
    }
  }
  .mobile\:ps-7 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 7);
    }
  }
  .mobile\:ps-8 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 8);
    }
  }
  .mobile\:ps-9 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 9);
    }
  }
  .mobile\:ps-10 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 10);
    }
  }
  .mobile\:ps-11 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 11);
    }
  }
  .mobile\:ps-12 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 12);
    }
  }
  .mobile\:ps-13 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 13);
    }
  }
  .mobile\:ps-14 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 14);
    }
  }
  .mobile\:ps-15 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 15);
    }
  }
  .mobile\:ps-16 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 16);
    }
  }
  .mobile\:ps-17 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 17);
    }
  }
  .mobile\:ps-18 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 18);
    }
  }
  .mobile\:ps-19 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 19);
    }
  }
  .mobile\:ps-20 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 20);
    }
  }
  .mobile\:ps-21 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 21);
    }
  }
  .mobile\:ps-22 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 22);
    }
  }
  .mobile\:ps-23 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 23);
    }
  }
  .mobile\:ps-24 {
    @media (max-width: 639px) {
      padding-inline-start: calc(var(--spacing) * 24);
    }
  }
  .mobile\:pe-0 {
    @media (max-width: 639px) {
      padding-inline-end: 0;
    }
  }
  .mobile\:pe-1 {
    @media (max-width: 639px) {
      padding-inline-end: var(--spacing);
    }
  }
  .mobile\:pe-2 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 2);
    }
  }
  .mobile\:pe-3 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 3);
    }
  }
  .mobile\:pe-4 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 4);
    }
  }
  .mobile\:pe-5 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 5);
    }
  }
  .mobile\:pe-6 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 6);
    }
  }
  .mobile\:pe-7 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 7);
    }
  }
  .mobile\:pe-8 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 8);
    }
  }
  .mobile\:pe-9 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 9);
    }
  }
  .mobile\:pe-10 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 10);
    }
  }
  .mobile\:pe-11 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 11);
    }
  }
  .mobile\:pe-12 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 12);
    }
  }
  .mobile\:pe-13 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 13);
    }
  }
  .mobile\:pe-14 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 14);
    }
  }
  .mobile\:pe-15 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 15);
    }
  }
  .mobile\:pe-16 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 16);
    }
  }
  .mobile\:pe-17 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 17);
    }
  }
  .mobile\:pe-18 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 18);
    }
  }
  .mobile\:pe-19 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 19);
    }
  }
  .mobile\:pe-20 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 20);
    }
  }
  .mobile\:pe-21 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 21);
    }
  }
  .mobile\:pe-22 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 22);
    }
  }
  .mobile\:pe-23 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 23);
    }
  }
  .mobile\:pe-24 {
    @media (max-width: 639px) {
      padding-inline-end: calc(var(--spacing) * 24);
    }
  }
  .mobile\:pt-0 {
    @media (max-width: 639px) {
      padding-top: 0;
    }
  }
  .mobile\:pt-1 {
    @media (max-width: 639px) {
      padding-top: var(--spacing);
    }
  }
  .mobile\:pt-2 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 2);
    }
  }
  .mobile\:pt-3 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 3);
    }
  }
  .mobile\:pt-4 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 4);
    }
  }
  .mobile\:pt-5 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 5);
    }
  }
  .mobile\:pt-6 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 6);
    }
  }
  .mobile\:pt-7 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 7);
    }
  }
  .mobile\:pt-8 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 8);
    }
  }
  .mobile\:pt-9 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 9);
    }
  }
  .mobile\:pt-10 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 10);
    }
  }
  .mobile\:pt-11 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 11);
    }
  }
  .mobile\:pt-12 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 12);
    }
  }
  .mobile\:pt-13 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 13);
    }
  }
  .mobile\:pt-14 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 14);
    }
  }
  .mobile\:pt-15 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 15);
    }
  }
  .mobile\:pt-16 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 16);
    }
  }
  .mobile\:pt-17 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 17);
    }
  }
  .mobile\:pt-18 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 18);
    }
  }
  .mobile\:pt-19 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 19);
    }
  }
  .mobile\:pt-20 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 20);
    }
  }
  .mobile\:pt-21 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 21);
    }
  }
  .mobile\:pt-22 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 22);
    }
  }
  .mobile\:pt-23 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 23);
    }
  }
  .mobile\:pt-24 {
    @media (max-width: 639px) {
      padding-top: calc(var(--spacing) * 24);
    }
  }
  .mobile\:pb-0 {
    @media (max-width: 639px) {
      padding-bottom: 0;
    }
  }
  .mobile\:pb-1 {
    @media (max-width: 639px) {
      padding-bottom: var(--spacing);
    }
  }
  .mobile\:pb-2 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 2);
    }
  }
  .mobile\:pb-3 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 3);
    }
  }
  .mobile\:pb-4 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 4);
    }
  }
  .mobile\:pb-5 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 5);
    }
  }
  .mobile\:pb-6 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 6);
    }
  }
  .mobile\:pb-7 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 7);
    }
  }
  .mobile\:pb-8 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 8);
    }
  }
  .mobile\:pb-9 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 9);
    }
  }
  .mobile\:pb-10 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 10);
    }
  }
  .mobile\:pb-11 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 11);
    }
  }
  .mobile\:pb-12 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 12);
    }
  }
  .mobile\:pb-13 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 13);
    }
  }
  .mobile\:pb-14 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 14);
    }
  }
  .mobile\:pb-15 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 15);
    }
  }
  .mobile\:pb-16 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 16);
    }
  }
  .mobile\:pb-17 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 17);
    }
  }
  .mobile\:pb-18 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 18);
    }
  }
  .mobile\:pb-19 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 19);
    }
  }
  .mobile\:pb-20 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 20);
    }
  }
  .mobile\:pb-21 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 21);
    }
  }
  .mobile\:pb-22 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 22);
    }
  }
  .mobile\:pb-23 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 23);
    }
  }
  .mobile\:pb-24 {
    @media (max-width: 639px) {
      padding-bottom: calc(var(--spacing) * 24);
    }
  }
  .mobile\:text-center {
    @media (max-width: 639px) {
      text-align: center;
    }
  }
  .mobile\:text-end {
    @media (max-width: 639px) {
      text-align: end;
    }
  }
  .mobile\:text-left {
    @media (max-width: 639px) {
      text-align: left;
    }
  }
  .mobile\:text-right {
    @media (max-width: 639px) {
      text-align: right;
    }
  }
  .mobile\:text-start {
    @media (max-width: 639px) {
      text-align: start;
    }
  }
  .tablet\:z-0 {
    @media (min-width: 640px) and (max-width: 1023px) {
      z-index: 0;
    }
  }
  .tablet\:z-10 {
    @media (min-width: 640px) and (max-width: 1023px) {
      z-index: 10;
    }
  }
  .tablet\:z-20 {
    @media (min-width: 640px) and (max-width: 1023px) {
      z-index: 20;
    }
  }
  .tablet\:z-30 {
    @media (min-width: 640px) and (max-width: 1023px) {
      z-index: 30;
    }
  }
  .tablet\:z-40 {
    @media (min-width: 640px) and (max-width: 1023px) {
      z-index: 40;
    }
  }
  .tablet\:z-50 {
    @media (min-width: 640px) and (max-width: 1023px) {
      z-index: 50;
    }
  }
  .tablet\:m-0 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: 0;
    }
  }
  .tablet\:m-1 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: var(--spacing);
    }
  }
  .tablet\:m-2 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 2);
    }
  }
  .tablet\:m-3 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 3);
    }
  }
  .tablet\:m-4 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 4);
    }
  }
  .tablet\:m-5 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 5);
    }
  }
  .tablet\:m-6 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 6);
    }
  }
  .tablet\:m-7 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 7);
    }
  }
  .tablet\:m-8 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 8);
    }
  }
  .tablet\:m-9 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 9);
    }
  }
  .tablet\:m-10 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 10);
    }
  }
  .tablet\:m-11 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 11);
    }
  }
  .tablet\:m-12 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 12);
    }
  }
  .tablet\:m-13 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 13);
    }
  }
  .tablet\:m-14 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 14);
    }
  }
  .tablet\:m-15 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 15);
    }
  }
  .tablet\:m-16 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 16);
    }
  }
  .tablet\:m-17 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 17);
    }
  }
  .tablet\:m-18 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 18);
    }
  }
  .tablet\:m-19 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 19);
    }
  }
  .tablet\:m-20 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 20);
    }
  }
  .tablet\:m-21 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 21);
    }
  }
  .tablet\:m-22 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 22);
    }
  }
  .tablet\:m-23 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 23);
    }
  }
  .tablet\:m-24 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin: calc(var(--spacing) * 24);
    }
  }
  .tablet\:mx-0 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: 0;
    }
  }
  .tablet\:mx-1 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: var(--spacing);
    }
  }
  .tablet\:mx-2 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 2);
    }
  }
  .tablet\:mx-3 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 3);
    }
  }
  .tablet\:mx-4 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 4);
    }
  }
  .tablet\:mx-5 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 5);
    }
  }
  .tablet\:mx-6 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 6);
    }
  }
  .tablet\:mx-7 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 7);
    }
  }
  .tablet\:mx-8 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 8);
    }
  }
  .tablet\:mx-9 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 9);
    }
  }
  .tablet\:mx-10 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 10);
    }
  }
  .tablet\:mx-11 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 11);
    }
  }
  .tablet\:mx-12 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 12);
    }
  }
  .tablet\:mx-13 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 13);
    }
  }
  .tablet\:mx-14 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 14);
    }
  }
  .tablet\:mx-15 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 15);
    }
  }
  .tablet\:mx-16 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 16);
    }
  }
  .tablet\:mx-17 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 17);
    }
  }
  .tablet\:mx-18 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 18);
    }
  }
  .tablet\:mx-19 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 19);
    }
  }
  .tablet\:mx-20 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 20);
    }
  }
  .tablet\:mx-21 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 21);
    }
  }
  .tablet\:mx-22 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 22);
    }
  }
  .tablet\:mx-23 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 23);
    }
  }
  .tablet\:mx-24 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline: calc(var(--spacing) * 24);
    }
  }
  .tablet\:my-0 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: 0;
    }
  }
  .tablet\:my-1 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: var(--spacing);
    }
  }
  .tablet\:my-2 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 2);
    }
  }
  .tablet\:my-3 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 3);
    }
  }
  .tablet\:my-4 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 4);
    }
  }
  .tablet\:my-5 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 5);
    }
  }
  .tablet\:my-6 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 6);
    }
  }
  .tablet\:my-7 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 7);
    }
  }
  .tablet\:my-8 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 8);
    }
  }
  .tablet\:my-9 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 9);
    }
  }
  .tablet\:my-10 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 10);
    }
  }
  .tablet\:my-11 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 11);
    }
  }
  .tablet\:my-12 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 12);
    }
  }
  .tablet\:my-13 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 13);
    }
  }
  .tablet\:my-14 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 14);
    }
  }
  .tablet\:my-15 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 15);
    }
  }
  .tablet\:my-16 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 16);
    }
  }
  .tablet\:my-17 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 17);
    }
  }
  .tablet\:my-18 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 18);
    }
  }
  .tablet\:my-19 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 19);
    }
  }
  .tablet\:my-20 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 20);
    }
  }
  .tablet\:my-21 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 21);
    }
  }
  .tablet\:my-22 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 22);
    }
  }
  .tablet\:my-23 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 23);
    }
  }
  .tablet\:my-24 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-block: calc(var(--spacing) * 24);
    }
  }
  .tablet\:ms-0 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: 0;
    }
  }
  .tablet\:ms-1 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: var(--spacing);
    }
  }
  .tablet\:ms-2 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 2);
    }
  }
  .tablet\:ms-3 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 3);
    }
  }
  .tablet\:ms-4 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 4);
    }
  }
  .tablet\:ms-5 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 5);
    }
  }
  .tablet\:ms-6 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 6);
    }
  }
  .tablet\:ms-7 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 7);
    }
  }
  .tablet\:ms-8 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 8);
    }
  }
  .tablet\:ms-9 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 9);
    }
  }
  .tablet\:ms-10 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 10);
    }
  }
  .tablet\:ms-11 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 11);
    }
  }
  .tablet\:ms-12 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 12);
    }
  }
  .tablet\:ms-13 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 13);
    }
  }
  .tablet\:ms-14 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 14);
    }
  }
  .tablet\:ms-15 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 15);
    }
  }
  .tablet\:ms-16 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 16);
    }
  }
  .tablet\:ms-17 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 17);
    }
  }
  .tablet\:ms-18 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 18);
    }
  }
  .tablet\:ms-19 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 19);
    }
  }
  .tablet\:ms-20 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 20);
    }
  }
  .tablet\:ms-21 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 21);
    }
  }
  .tablet\:ms-22 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 22);
    }
  }
  .tablet\:ms-23 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 23);
    }
  }
  .tablet\:ms-24 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-start: calc(var(--spacing) * 24);
    }
  }
  .tablet\:me-0 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: 0;
    }
  }
  .tablet\:me-1 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: var(--spacing);
    }
  }
  .tablet\:me-2 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 2);
    }
  }
  .tablet\:me-3 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 3);
    }
  }
  .tablet\:me-4 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 4);
    }
  }
  .tablet\:me-5 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 5);
    }
  }
  .tablet\:me-6 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 6);
    }
  }
  .tablet\:me-7 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 7);
    }
  }
  .tablet\:me-8 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 8);
    }
  }
  .tablet\:me-9 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 9);
    }
  }
  .tablet\:me-10 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 10);
    }
  }
  .tablet\:me-11 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 11);
    }
  }
  .tablet\:me-12 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 12);
    }
  }
  .tablet\:me-13 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 13);
    }
  }
  .tablet\:me-14 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 14);
    }
  }
  .tablet\:me-15 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 15);
    }
  }
  .tablet\:me-16 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 16);
    }
  }
  .tablet\:me-17 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 17);
    }
  }
  .tablet\:me-18 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 18);
    }
  }
  .tablet\:me-19 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 19);
    }
  }
  .tablet\:me-20 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 20);
    }
  }
  .tablet\:me-21 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 21);
    }
  }
  .tablet\:me-22 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 22);
    }
  }
  .tablet\:me-23 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 23);
    }
  }
  .tablet\:me-24 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-inline-end: calc(var(--spacing) * 24);
    }
  }
  .tablet\:mt-0 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: 0;
    }
  }
  .tablet\:mt-1 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: var(--spacing);
    }
  }
  .tablet\:mt-2 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 2);
    }
  }
  .tablet\:mt-3 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 3);
    }
  }
  .tablet\:mt-4 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 4);
    }
  }
  .tablet\:mt-5 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 5);
    }
  }
  .tablet\:mt-6 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 6);
    }
  }
  .tablet\:mt-7 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 7);
    }
  }
  .tablet\:mt-8 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 8);
    }
  }
  .tablet\:mt-9 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 9);
    }
  }
  .tablet\:mt-10 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 10);
    }
  }
  .tablet\:mt-11 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 11);
    }
  }
  .tablet\:mt-12 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 12);
    }
  }
  .tablet\:mt-13 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 13);
    }
  }
  .tablet\:mt-14 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 14);
    }
  }
  .tablet\:mt-15 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 15);
    }
  }
  .tablet\:mt-16 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 16);
    }
  }
  .tablet\:mt-17 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 17);
    }
  }
  .tablet\:mt-18 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 18);
    }
  }
  .tablet\:mt-19 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 19);
    }
  }
  .tablet\:mt-20 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 20);
    }
  }
  .tablet\:mt-21 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 21);
    }
  }
  .tablet\:mt-22 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 22);
    }
  }
  .tablet\:mt-23 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 23);
    }
  }
  .tablet\:mt-24 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-top: calc(var(--spacing) * 24);
    }
  }
  .tablet\:mb-0 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: 0;
    }
  }
  .tablet\:mb-1 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: var(--spacing);
    }
  }
  .tablet\:mb-2 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 2);
    }
  }
  .tablet\:mb-3 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 3);
    }
  }
  .tablet\:mb-4 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 4);
    }
  }
  .tablet\:mb-5 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 5);
    }
  }
  .tablet\:mb-6 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 6);
    }
  }
  .tablet\:mb-7 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 7);
    }
  }
  .tablet\:mb-8 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 8);
    }
  }
  .tablet\:mb-9 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 9);
    }
  }
  .tablet\:mb-10 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 10);
    }
  }
  .tablet\:mb-11 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 11);
    }
  }
  .tablet\:mb-12 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 12);
    }
  }
  .tablet\:mb-13 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 13);
    }
  }
  .tablet\:mb-14 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 14);
    }
  }
  .tablet\:mb-15 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 15);
    }
  }
  .tablet\:mb-16 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 16);
    }
  }
  .tablet\:mb-17 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 17);
    }
  }
  .tablet\:mb-18 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 18);
    }
  }
  .tablet\:mb-19 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 19);
    }
  }
  .tablet\:mb-20 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 20);
    }
  }
  .tablet\:mb-21 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 21);
    }
  }
  .tablet\:mb-22 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 22);
    }
  }
  .tablet\:mb-23 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 23);
    }
  }
  .tablet\:mb-24 {
    @media (min-width: 640px) and (max-width: 1023px) {
      margin-bottom: calc(var(--spacing) * 24);
    }
  }
  .tablet\:aspect-\[3\/4\] {
    @media (min-width: 640px) and (max-width: 1023px) {
      aspect-ratio: 3/4;
    }
  }
  .tablet\:aspect-\[4\/3\] {
    @media (min-width: 640px) and (max-width: 1023px) {
      aspect-ratio: 4/3;
    }
  }
  .tablet\:aspect-square {
    @media (min-width: 640px) and (max-width: 1023px) {
      aspect-ratio: 1 / 1;
    }
  }
  .tablet\:h-\(--height-tablet\) {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: var(--height-tablet);
    }
  }
  .tablet\:h-1 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: var(--spacing);
    }
  }
  .tablet\:h-2 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 2);
    }
  }
  .tablet\:h-3 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 3);
    }
  }
  .tablet\:h-4 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 4);
    }
  }
  .tablet\:h-5 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 5);
    }
  }
  .tablet\:h-6 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 6);
    }
  }
  .tablet\:h-7 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 7);
    }
  }
  .tablet\:h-8 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 8);
    }
  }
  .tablet\:h-9 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 9);
    }
  }
  .tablet\:h-10 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 10);
    }
  }
  .tablet\:h-11 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 11);
    }
  }
  .tablet\:h-12 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 12);
    }
  }
  .tablet\:h-13 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 13);
    }
  }
  .tablet\:h-14 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 14);
    }
  }
  .tablet\:h-15 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 15);
    }
  }
  .tablet\:h-16 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 16);
    }
  }
  .tablet\:h-17 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 17);
    }
  }
  .tablet\:h-18 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 18);
    }
  }
  .tablet\:h-19 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 19);
    }
  }
  .tablet\:h-20 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 20);
    }
  }
  .tablet\:h-21 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 21);
    }
  }
  .tablet\:h-22 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 22);
    }
  }
  .tablet\:h-23 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 23);
    }
  }
  .tablet\:h-24 {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: calc(var(--spacing) * 24);
    }
  }
  .tablet\:h-\[20rem\] {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: 20rem;
    }
  }
  .tablet\:h-\[25rem\] {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: 25rem;
    }
  }
  .tablet\:h-\[37\.5rem\] {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: 37.5rem;
    }
  }
  .tablet\:h-\[50rem\] {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: 50rem;
    }
  }
  .tablet\:h-auto {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: auto;
    }
  }
  .tablet\:h-fit {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: fit-content;
    }
  }
  .tablet\:h-full {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: 100%;
    }
  }
  .tablet\:h-screen {
    @media (min-width: 640px) and (max-width: 1023px) {
      height: 100vh;
    }
  }
  .tablet\:w-\(--width-tablet\) {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: var(--width-tablet);
    }
  }
  .tablet\:w-1 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: var(--spacing);
    }
  }
  .tablet\:w-2 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 2);
    }
  }
  .tablet\:w-3 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 3);
    }
  }
  .tablet\:w-4 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 4);
    }
  }
  .tablet\:w-5 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 5);
    }
  }
  .tablet\:w-6 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 6);
    }
  }
  .tablet\:w-7 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 7);
    }
  }
  .tablet\:w-8 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 8);
    }
  }
  .tablet\:w-9 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 9);
    }
  }
  .tablet\:w-10 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 10);
    }
  }
  .tablet\:w-11 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 11);
    }
  }
  .tablet\:w-12 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 12);
    }
  }
  .tablet\:w-13 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 13);
    }
  }
  .tablet\:w-14 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 14);
    }
  }
  .tablet\:w-15 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 15);
    }
  }
  .tablet\:w-16 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 16);
    }
  }
  .tablet\:w-17 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 17);
    }
  }
  .tablet\:w-18 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 18);
    }
  }
  .tablet\:w-19 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 19);
    }
  }
  .tablet\:w-20 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 20);
    }
  }
  .tablet\:w-21 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 21);
    }
  }
  .tablet\:w-22 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 22);
    }
  }
  .tablet\:w-23 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 23);
    }
  }
  .tablet\:w-24 {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: calc(var(--spacing) * 24);
    }
  }
  .tablet\:w-auto {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: auto;
    }
  }
  .tablet\:w-fit {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: fit-content;
    }
  }
  .tablet\:w-full {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: 100%;
    }
  }
  .tablet\:w-screen {
    @media (min-width: 640px) and (max-width: 1023px) {
      width: 100vw;
    }
  }
  .tablet\:grid-cols-1 {
    @media (min-width: 640px) and (max-width: 1023px) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .tablet\:grid-cols-2 {
    @media (min-width: 640px) and (max-width: 1023px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .tablet\:grid-cols-3 {
    @media (min-width: 640px) and (max-width: 1023px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .tablet\:grid-cols-4 {
    @media (min-width: 640px) and (max-width: 1023px) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .tablet\:grid-cols-5 {
    @media (min-width: 640px) and (max-width: 1023px) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .tablet\:grid-cols-6 {
    @media (min-width: 640px) and (max-width: 1023px) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .tablet\:grid-cols-7 {
    @media (min-width: 640px) and (max-width: 1023px) {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }
  }
  .tablet\:grid-cols-8 {
    @media (min-width: 640px) and (max-width: 1023px) {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
  }
  .tablet\:grid-cols-9 {
    @media (min-width: 640px) and (max-width: 1023px) {
      grid-template-columns: repeat(9, minmax(0, 1fr));
    }
  }
  .tablet\:grid-cols-10 {
    @media (min-width: 640px) and (max-width: 1023px) {
      grid-template-columns: repeat(10, minmax(0, 1fr));
    }
  }
  .tablet\:grid-cols-11 {
    @media (min-width: 640px) and (max-width: 1023px) {
      grid-template-columns: repeat(11, minmax(0, 1fr));
    }
  }
  .tablet\:grid-cols-12 {
    @media (min-width: 640px) and (max-width: 1023px) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .tablet\:grid-rows-1 {
    @media (min-width: 640px) and (max-width: 1023px) {
      grid-template-rows: repeat(1, minmax(0, 1fr));
    }
  }
  .tablet\:grid-rows-2 {
    @media (min-width: 640px) and (max-width: 1023px) {
      grid-template-rows: repeat(2, minmax(0, 1fr));
    }
  }
  .tablet\:grid-rows-3 {
    @media (min-width: 640px) and (max-width: 1023px) {
      grid-template-rows: repeat(3, minmax(0, 1fr));
    }
  }
  .tablet\:grid-rows-4 {
    @media (min-width: 640px) and (max-width: 1023px) {
      grid-template-rows: repeat(4, minmax(0, 1fr));
    }
  }
  .tablet\:grid-rows-5 {
    @media (min-width: 640px) and (max-width: 1023px) {
      grid-template-rows: repeat(5, minmax(0, 1fr));
    }
  }
  .tablet\:grid-rows-6 {
    @media (min-width: 640px) and (max-width: 1023px) {
      grid-template-rows: repeat(6, minmax(0, 1fr));
    }
  }
  .tablet\:flex-col {
    @media (min-width: 640px) and (max-width: 1023px) {
      flex-direction: column;
    }
  }
  .tablet\:flex-col-reverse {
    @media (min-width: 640px) and (max-width: 1023px) {
      flex-direction: column-reverse;
    }
  }
  .tablet\:flex-row {
    @media (min-width: 640px) and (max-width: 1023px) {
      flex-direction: row;
    }
  }
  .tablet\:flex-row-reverse {
    @media (min-width: 640px) and (max-width: 1023px) {
      flex-direction: row-reverse;
    }
  }
  .tablet\:items-center {
    @media (min-width: 640px) and (max-width: 1023px) {
      align-items: center;
    }
  }
  .tablet\:items-end {
    @media (min-width: 640px) and (max-width: 1023px) {
      align-items: flex-end;
    }
  }
  .tablet\:items-start {
    @media (min-width: 640px) and (max-width: 1023px) {
      align-items: flex-start;
    }
  }
  .tablet\:justify-between {
    @media (min-width: 640px) and (max-width: 1023px) {
      justify-content: space-between;
    }
  }
  .tablet\:justify-center {
    @media (min-width: 640px) and (max-width: 1023px) {
      justify-content: center;
    }
  }
  .tablet\:justify-end {
    @media (min-width: 640px) and (max-width: 1023px) {
      justify-content: flex-end;
    }
  }
  .tablet\:justify-start {
    @media (min-width: 640px) and (max-width: 1023px) {
      justify-content: flex-start;
    }
  }
  .tablet\:gap-0 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: 0;
    }
  }
  .tablet\:gap-1 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: var(--spacing);
    }
  }
  .tablet\:gap-2 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .tablet\:gap-3 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .tablet\:gap-4 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .tablet\:gap-5 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 5);
    }
  }
  .tablet\:gap-6 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .tablet\:gap-7 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 7);
    }
  }
  .tablet\:gap-8 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .tablet\:gap-9 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 9);
    }
  }
  .tablet\:gap-10 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 10);
    }
  }
  .tablet\:gap-11 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 11);
    }
  }
  .tablet\:gap-12 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 12);
    }
  }
  .tablet\:gap-13 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 13);
    }
  }
  .tablet\:gap-14 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 14);
    }
  }
  .tablet\:gap-15 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 15);
    }
  }
  .tablet\:gap-16 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .tablet\:gap-17 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 17);
    }
  }
  .tablet\:gap-18 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 18);
    }
  }
  .tablet\:gap-19 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 19);
    }
  }
  .tablet\:gap-20 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 20);
    }
  }
  .tablet\:gap-21 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 21);
    }
  }
  .tablet\:gap-22 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 22);
    }
  }
  .tablet\:gap-23 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 23);
    }
  }
  .tablet\:gap-24 {
    @media (min-width: 640px) and (max-width: 1023px) {
      gap: calc(var(--spacing) * 24);
    }
  }
  .tablet\:border-dashed {
    @media (min-width: 640px) and (max-width: 1023px) {
      --tw-border-style: dashed;
      border-style: dashed;
    }
  }
  .tablet\:border-dotted {
    @media (min-width: 640px) and (max-width: 1023px) {
      --tw-border-style: dotted;
      border-style: dotted;
    }
  }
  .tablet\:p-0 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: 0;
    }
  }
  .tablet\:p-1 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: var(--spacing);
    }
  }
  .tablet\:p-2 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 2);
    }
  }
  .tablet\:p-3 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 3);
    }
  }
  .tablet\:p-4 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .tablet\:p-5 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 5);
    }
  }
  .tablet\:p-6 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .tablet\:p-7 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 7);
    }
  }
  .tablet\:p-8 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .tablet\:p-9 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 9);
    }
  }
  .tablet\:p-10 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 10);
    }
  }
  .tablet\:p-11 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 11);
    }
  }
  .tablet\:p-12 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 12);
    }
  }
  .tablet\:p-13 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 13);
    }
  }
  .tablet\:p-14 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 14);
    }
  }
  .tablet\:p-15 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 15);
    }
  }
  .tablet\:p-16 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 16);
    }
  }
  .tablet\:p-17 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 17);
    }
  }
  .tablet\:p-18 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 18);
    }
  }
  .tablet\:p-19 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 19);
    }
  }
  .tablet\:p-20 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 20);
    }
  }
  .tablet\:p-21 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 21);
    }
  }
  .tablet\:p-22 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 22);
    }
  }
  .tablet\:p-23 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 23);
    }
  }
  .tablet\:p-24 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding: calc(var(--spacing) * 24);
    }
  }
  .tablet\:px-0 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: 0;
    }
  }
  .tablet\:px-1 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: var(--spacing);
    }
  }
  .tablet\:px-2 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .tablet\:px-3 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  .tablet\:px-4 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .tablet\:px-5 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  .tablet\:px-6 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .tablet\:px-7 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 7);
    }
  }
  .tablet\:px-8 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .tablet\:px-9 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 9);
    }
  }
  .tablet\:px-10 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 10);
    }
  }
  .tablet\:px-11 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 11);
    }
  }
  .tablet\:px-12 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 12);
    }
  }
  .tablet\:px-13 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 13);
    }
  }
  .tablet\:px-14 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 14);
    }
  }
  .tablet\:px-15 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 15);
    }
  }
  .tablet\:px-16 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 16);
    }
  }
  .tablet\:px-17 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 17);
    }
  }
  .tablet\:px-18 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 18);
    }
  }
  .tablet\:px-19 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 19);
    }
  }
  .tablet\:px-20 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 20);
    }
  }
  .tablet\:px-21 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 21);
    }
  }
  .tablet\:px-22 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 22);
    }
  }
  .tablet\:px-23 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 23);
    }
  }
  .tablet\:px-24 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline: calc(var(--spacing) * 24);
    }
  }
  .tablet\:py-0 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: 0;
    }
  }
  .tablet\:py-1 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: var(--spacing);
    }
  }
  .tablet\:py-2 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .tablet\:py-3 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 3);
    }
  }
  .tablet\:py-4 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 4);
    }
  }
  .tablet\:py-5 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 5);
    }
  }
  .tablet\:py-6 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 6);
    }
  }
  .tablet\:py-7 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 7);
    }
  }
  .tablet\:py-8 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 8);
    }
  }
  .tablet\:py-9 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 9);
    }
  }
  .tablet\:py-10 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 10);
    }
  }
  .tablet\:py-11 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 11);
    }
  }
  .tablet\:py-12 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 12);
    }
  }
  .tablet\:py-13 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 13);
    }
  }
  .tablet\:py-14 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 14);
    }
  }
  .tablet\:py-15 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 15);
    }
  }
  .tablet\:py-16 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 16);
    }
  }
  .tablet\:py-17 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 17);
    }
  }
  .tablet\:py-18 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 18);
    }
  }
  .tablet\:py-19 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 19);
    }
  }
  .tablet\:py-20 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 20);
    }
  }
  .tablet\:py-21 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 21);
    }
  }
  .tablet\:py-22 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 22);
    }
  }
  .tablet\:py-23 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 23);
    }
  }
  .tablet\:py-24 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-block: calc(var(--spacing) * 24);
    }
  }
  .tablet\:ps-0 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: 0;
    }
  }
  .tablet\:ps-1 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: var(--spacing);
    }
  }
  .tablet\:ps-2 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 2);
    }
  }
  .tablet\:ps-3 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 3);
    }
  }
  .tablet\:ps-4 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 4);
    }
  }
  .tablet\:ps-5 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 5);
    }
  }
  .tablet\:ps-6 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 6);
    }
  }
  .tablet\:ps-7 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 7);
    }
  }
  .tablet\:ps-8 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 8);
    }
  }
  .tablet\:ps-9 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 9);
    }
  }
  .tablet\:ps-10 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 10);
    }
  }
  .tablet\:ps-11 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 11);
    }
  }
  .tablet\:ps-12 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 12);
    }
  }
  .tablet\:ps-13 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 13);
    }
  }
  .tablet\:ps-14 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 14);
    }
  }
  .tablet\:ps-15 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 15);
    }
  }
  .tablet\:ps-16 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 16);
    }
  }
  .tablet\:ps-17 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 17);
    }
  }
  .tablet\:ps-18 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 18);
    }
  }
  .tablet\:ps-19 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 19);
    }
  }
  .tablet\:ps-20 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 20);
    }
  }
  .tablet\:ps-21 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 21);
    }
  }
  .tablet\:ps-22 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 22);
    }
  }
  .tablet\:ps-23 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 23);
    }
  }
  .tablet\:ps-24 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-start: calc(var(--spacing) * 24);
    }
  }
  .tablet\:pe-0 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: 0;
    }
  }
  .tablet\:pe-1 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: var(--spacing);
    }
  }
  .tablet\:pe-2 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 2);
    }
  }
  .tablet\:pe-3 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 3);
    }
  }
  .tablet\:pe-4 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 4);
    }
  }
  .tablet\:pe-5 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 5);
    }
  }
  .tablet\:pe-6 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 6);
    }
  }
  .tablet\:pe-7 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 7);
    }
  }
  .tablet\:pe-8 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 8);
    }
  }
  .tablet\:pe-9 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 9);
    }
  }
  .tablet\:pe-10 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 10);
    }
  }
  .tablet\:pe-11 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 11);
    }
  }
  .tablet\:pe-12 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 12);
    }
  }
  .tablet\:pe-13 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 13);
    }
  }
  .tablet\:pe-14 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 14);
    }
  }
  .tablet\:pe-15 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 15);
    }
  }
  .tablet\:pe-16 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 16);
    }
  }
  .tablet\:pe-17 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 17);
    }
  }
  .tablet\:pe-18 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 18);
    }
  }
  .tablet\:pe-19 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 19);
    }
  }
  .tablet\:pe-20 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 20);
    }
  }
  .tablet\:pe-21 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 21);
    }
  }
  .tablet\:pe-22 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 22);
    }
  }
  .tablet\:pe-23 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 23);
    }
  }
  .tablet\:pe-24 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-inline-end: calc(var(--spacing) * 24);
    }
  }
  .tablet\:pt-0 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: 0;
    }
  }
  .tablet\:pt-1 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: var(--spacing);
    }
  }
  .tablet\:pt-2 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 2);
    }
  }
  .tablet\:pt-3 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 3);
    }
  }
  .tablet\:pt-4 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 4);
    }
  }
  .tablet\:pt-5 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 5);
    }
  }
  .tablet\:pt-6 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 6);
    }
  }
  .tablet\:pt-7 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 7);
    }
  }
  .tablet\:pt-8 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 8);
    }
  }
  .tablet\:pt-9 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 9);
    }
  }
  .tablet\:pt-10 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 10);
    }
  }
  .tablet\:pt-11 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 11);
    }
  }
  .tablet\:pt-12 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 12);
    }
  }
  .tablet\:pt-13 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 13);
    }
  }
  .tablet\:pt-14 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 14);
    }
  }
  .tablet\:pt-15 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 15);
    }
  }
  .tablet\:pt-16 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 16);
    }
  }
  .tablet\:pt-17 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 17);
    }
  }
  .tablet\:pt-18 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 18);
    }
  }
  .tablet\:pt-19 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 19);
    }
  }
  .tablet\:pt-20 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 20);
    }
  }
  .tablet\:pt-21 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 21);
    }
  }
  .tablet\:pt-22 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 22);
    }
  }
  .tablet\:pt-23 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 23);
    }
  }
  .tablet\:pt-24 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-top: calc(var(--spacing) * 24);
    }
  }
  .tablet\:pb-0 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: 0;
    }
  }
  .tablet\:pb-1 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: var(--spacing);
    }
  }
  .tablet\:pb-2 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 2);
    }
  }
  .tablet\:pb-3 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 3);
    }
  }
  .tablet\:pb-4 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 4);
    }
  }
  .tablet\:pb-5 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 5);
    }
  }
  .tablet\:pb-6 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 6);
    }
  }
  .tablet\:pb-7 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 7);
    }
  }
  .tablet\:pb-8 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 8);
    }
  }
  .tablet\:pb-9 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 9);
    }
  }
  .tablet\:pb-10 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 10);
    }
  }
  .tablet\:pb-11 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 11);
    }
  }
  .tablet\:pb-12 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 12);
    }
  }
  .tablet\:pb-13 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 13);
    }
  }
  .tablet\:pb-14 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 14);
    }
  }
  .tablet\:pb-15 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 15);
    }
  }
  .tablet\:pb-16 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 16);
    }
  }
  .tablet\:pb-17 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 17);
    }
  }
  .tablet\:pb-18 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 18);
    }
  }
  .tablet\:pb-19 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 19);
    }
  }
  .tablet\:pb-20 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 20);
    }
  }
  .tablet\:pb-21 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 21);
    }
  }
  .tablet\:pb-22 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 22);
    }
  }
  .tablet\:pb-23 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 23);
    }
  }
  .tablet\:pb-24 {
    @media (min-width: 640px) and (max-width: 1023px) {
      padding-bottom: calc(var(--spacing) * 24);
    }
  }
  .tablet\:text-center {
    @media (min-width: 640px) and (max-width: 1023px) {
      text-align: center;
    }
  }
  .tablet\:text-end {
    @media (min-width: 640px) and (max-width: 1023px) {
      text-align: end;
    }
  }
  .tablet\:text-left {
    @media (min-width: 640px) and (max-width: 1023px) {
      text-align: left;
    }
  }
  .tablet\:text-right {
    @media (min-width: 640px) and (max-width: 1023px) {
      text-align: right;
    }
  }
  .tablet\:text-start {
    @media (min-width: 640px) and (max-width: 1023px) {
      text-align: start;
    }
  }
  .desktop\:z-0 {
    @media (min-width: 1024px) {
      z-index: 0;
    }
  }
  .desktop\:z-10 {
    @media (min-width: 1024px) {
      z-index: 10;
    }
  }
  .desktop\:z-20 {
    @media (min-width: 1024px) {
      z-index: 20;
    }
  }
  .desktop\:z-30 {
    @media (min-width: 1024px) {
      z-index: 30;
    }
  }
  .desktop\:z-40 {
    @media (min-width: 1024px) {
      z-index: 40;
    }
  }
  .desktop\:z-50 {
    @media (min-width: 1024px) {
      z-index: 50;
    }
  }
  .desktop\:m-0 {
    @media (min-width: 1024px) {
      margin: 0;
    }
  }
  .desktop\:m-1 {
    @media (min-width: 1024px) {
      margin: var(--spacing);
    }
  }
  .desktop\:m-2 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 2);
    }
  }
  .desktop\:m-3 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 3);
    }
  }
  .desktop\:m-4 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 4);
    }
  }
  .desktop\:m-5 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 5);
    }
  }
  .desktop\:m-6 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 6);
    }
  }
  .desktop\:m-7 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 7);
    }
  }
  .desktop\:m-8 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 8);
    }
  }
  .desktop\:m-9 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 9);
    }
  }
  .desktop\:m-10 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 10);
    }
  }
  .desktop\:m-11 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 11);
    }
  }
  .desktop\:m-12 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 12);
    }
  }
  .desktop\:m-13 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 13);
    }
  }
  .desktop\:m-14 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 14);
    }
  }
  .desktop\:m-15 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 15);
    }
  }
  .desktop\:m-16 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 16);
    }
  }
  .desktop\:m-17 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 17);
    }
  }
  .desktop\:m-18 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 18);
    }
  }
  .desktop\:m-19 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 19);
    }
  }
  .desktop\:m-20 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 20);
    }
  }
  .desktop\:m-21 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 21);
    }
  }
  .desktop\:m-22 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 22);
    }
  }
  .desktop\:m-23 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 23);
    }
  }
  .desktop\:m-24 {
    @media (min-width: 1024px) {
      margin: calc(var(--spacing) * 24);
    }
  }
  .desktop\:mx-0 {
    @media (min-width: 1024px) {
      margin-inline: 0;
    }
  }
  .desktop\:mx-1 {
    @media (min-width: 1024px) {
      margin-inline: var(--spacing);
    }
  }
  .desktop\:mx-2 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 2);
    }
  }
  .desktop\:mx-3 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 3);
    }
  }
  .desktop\:mx-4 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 4);
    }
  }
  .desktop\:mx-5 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 5);
    }
  }
  .desktop\:mx-6 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 6);
    }
  }
  .desktop\:mx-7 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 7);
    }
  }
  .desktop\:mx-8 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 8);
    }
  }
  .desktop\:mx-9 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 9);
    }
  }
  .desktop\:mx-10 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 10);
    }
  }
  .desktop\:mx-11 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 11);
    }
  }
  .desktop\:mx-12 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 12);
    }
  }
  .desktop\:mx-13 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 13);
    }
  }
  .desktop\:mx-14 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 14);
    }
  }
  .desktop\:mx-15 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 15);
    }
  }
  .desktop\:mx-16 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 16);
    }
  }
  .desktop\:mx-17 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 17);
    }
  }
  .desktop\:mx-18 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 18);
    }
  }
  .desktop\:mx-19 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 19);
    }
  }
  .desktop\:mx-20 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 20);
    }
  }
  .desktop\:mx-21 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 21);
    }
  }
  .desktop\:mx-22 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 22);
    }
  }
  .desktop\:mx-23 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 23);
    }
  }
  .desktop\:mx-24 {
    @media (min-width: 1024px) {
      margin-inline: calc(var(--spacing) * 24);
    }
  }
  .desktop\:my-0 {
    @media (min-width: 1024px) {
      margin-block: 0;
    }
  }
  .desktop\:my-1 {
    @media (min-width: 1024px) {
      margin-block: var(--spacing);
    }
  }
  .desktop\:my-2 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 2);
    }
  }
  .desktop\:my-3 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 3);
    }
  }
  .desktop\:my-4 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 4);
    }
  }
  .desktop\:my-5 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 5);
    }
  }
  .desktop\:my-6 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 6);
    }
  }
  .desktop\:my-7 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 7);
    }
  }
  .desktop\:my-8 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 8);
    }
  }
  .desktop\:my-9 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 9);
    }
  }
  .desktop\:my-10 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 10);
    }
  }
  .desktop\:my-11 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 11);
    }
  }
  .desktop\:my-12 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 12);
    }
  }
  .desktop\:my-13 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 13);
    }
  }
  .desktop\:my-14 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 14);
    }
  }
  .desktop\:my-15 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 15);
    }
  }
  .desktop\:my-16 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 16);
    }
  }
  .desktop\:my-17 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 17);
    }
  }
  .desktop\:my-18 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 18);
    }
  }
  .desktop\:my-19 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 19);
    }
  }
  .desktop\:my-20 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 20);
    }
  }
  .desktop\:my-21 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 21);
    }
  }
  .desktop\:my-22 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 22);
    }
  }
  .desktop\:my-23 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 23);
    }
  }
  .desktop\:my-24 {
    @media (min-width: 1024px) {
      margin-block: calc(var(--spacing) * 24);
    }
  }
  .desktop\:ms-0 {
    @media (min-width: 1024px) {
      margin-inline-start: 0;
    }
  }
  .desktop\:ms-1 {
    @media (min-width: 1024px) {
      margin-inline-start: var(--spacing);
    }
  }
  .desktop\:ms-2 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 2);
    }
  }
  .desktop\:ms-3 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 3);
    }
  }
  .desktop\:ms-4 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 4);
    }
  }
  .desktop\:ms-5 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 5);
    }
  }
  .desktop\:ms-6 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 6);
    }
  }
  .desktop\:ms-7 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 7);
    }
  }
  .desktop\:ms-8 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 8);
    }
  }
  .desktop\:ms-9 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 9);
    }
  }
  .desktop\:ms-10 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 10);
    }
  }
  .desktop\:ms-11 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 11);
    }
  }
  .desktop\:ms-12 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 12);
    }
  }
  .desktop\:ms-13 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 13);
    }
  }
  .desktop\:ms-14 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 14);
    }
  }
  .desktop\:ms-15 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 15);
    }
  }
  .desktop\:ms-16 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 16);
    }
  }
  .desktop\:ms-17 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 17);
    }
  }
  .desktop\:ms-18 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 18);
    }
  }
  .desktop\:ms-19 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 19);
    }
  }
  .desktop\:ms-20 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 20);
    }
  }
  .desktop\:ms-21 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 21);
    }
  }
  .desktop\:ms-22 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 22);
    }
  }
  .desktop\:ms-23 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 23);
    }
  }
  .desktop\:ms-24 {
    @media (min-width: 1024px) {
      margin-inline-start: calc(var(--spacing) * 24);
    }
  }
  .desktop\:me-0 {
    @media (min-width: 1024px) {
      margin-inline-end: 0;
    }
  }
  .desktop\:me-1 {
    @media (min-width: 1024px) {
      margin-inline-end: var(--spacing);
    }
  }
  .desktop\:me-2 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 2);
    }
  }
  .desktop\:me-3 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 3);
    }
  }
  .desktop\:me-4 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 4);
    }
  }
  .desktop\:me-5 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 5);
    }
  }
  .desktop\:me-6 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 6);
    }
  }
  .desktop\:me-7 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 7);
    }
  }
  .desktop\:me-8 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 8);
    }
  }
  .desktop\:me-9 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 9);
    }
  }
  .desktop\:me-10 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 10);
    }
  }
  .desktop\:me-11 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 11);
    }
  }
  .desktop\:me-12 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 12);
    }
  }
  .desktop\:me-13 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 13);
    }
  }
  .desktop\:me-14 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 14);
    }
  }
  .desktop\:me-15 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 15);
    }
  }
  .desktop\:me-16 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 16);
    }
  }
  .desktop\:me-17 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 17);
    }
  }
  .desktop\:me-18 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 18);
    }
  }
  .desktop\:me-19 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 19);
    }
  }
  .desktop\:me-20 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 20);
    }
  }
  .desktop\:me-21 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 21);
    }
  }
  .desktop\:me-22 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 22);
    }
  }
  .desktop\:me-23 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 23);
    }
  }
  .desktop\:me-24 {
    @media (min-width: 1024px) {
      margin-inline-end: calc(var(--spacing) * 24);
    }
  }
  .desktop\:mt-0 {
    @media (min-width: 1024px) {
      margin-top: 0;
    }
  }
  .desktop\:mt-1 {
    @media (min-width: 1024px) {
      margin-top: var(--spacing);
    }
  }
  .desktop\:mt-2 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 2);
    }
  }
  .desktop\:mt-3 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 3);
    }
  }
  .desktop\:mt-4 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 4);
    }
  }
  .desktop\:mt-5 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 5);
    }
  }
  .desktop\:mt-6 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 6);
    }
  }
  .desktop\:mt-7 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 7);
    }
  }
  .desktop\:mt-8 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 8);
    }
  }
  .desktop\:mt-9 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 9);
    }
  }
  .desktop\:mt-10 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 10);
    }
  }
  .desktop\:mt-11 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 11);
    }
  }
  .desktop\:mt-12 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 12);
    }
  }
  .desktop\:mt-13 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 13);
    }
  }
  .desktop\:mt-14 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 14);
    }
  }
  .desktop\:mt-15 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 15);
    }
  }
  .desktop\:mt-16 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 16);
    }
  }
  .desktop\:mt-17 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 17);
    }
  }
  .desktop\:mt-18 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 18);
    }
  }
  .desktop\:mt-19 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 19);
    }
  }
  .desktop\:mt-20 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 20);
    }
  }
  .desktop\:mt-21 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 21);
    }
  }
  .desktop\:mt-22 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 22);
    }
  }
  .desktop\:mt-23 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 23);
    }
  }
  .desktop\:mt-24 {
    @media (min-width: 1024px) {
      margin-top: calc(var(--spacing) * 24);
    }
  }
  .desktop\:mb-0 {
    @media (min-width: 1024px) {
      margin-bottom: 0;
    }
  }
  .desktop\:mb-1 {
    @media (min-width: 1024px) {
      margin-bottom: var(--spacing);
    }
  }
  .desktop\:mb-2 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 2);
    }
  }
  .desktop\:mb-3 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 3);
    }
  }
  .desktop\:mb-4 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 4);
    }
  }
  .desktop\:mb-5 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 5);
    }
  }
  .desktop\:mb-6 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 6);
    }
  }
  .desktop\:mb-7 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 7);
    }
  }
  .desktop\:mb-8 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 8);
    }
  }
  .desktop\:mb-9 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 9);
    }
  }
  .desktop\:mb-10 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 10);
    }
  }
  .desktop\:mb-11 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 11);
    }
  }
  .desktop\:mb-12 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 12);
    }
  }
  .desktop\:mb-13 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 13);
    }
  }
  .desktop\:mb-14 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 14);
    }
  }
  .desktop\:mb-15 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 15);
    }
  }
  .desktop\:mb-16 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 16);
    }
  }
  .desktop\:mb-17 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 17);
    }
  }
  .desktop\:mb-18 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 18);
    }
  }
  .desktop\:mb-19 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 19);
    }
  }
  .desktop\:mb-20 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 20);
    }
  }
  .desktop\:mb-21 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 21);
    }
  }
  .desktop\:mb-22 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 22);
    }
  }
  .desktop\:mb-23 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 23);
    }
  }
  .desktop\:mb-24 {
    @media (min-width: 1024px) {
      margin-bottom: calc(var(--spacing) * 24);
    }
  }
  .desktop\:aspect-\[3\/4\] {
    @media (min-width: 1024px) {
      aspect-ratio: 3/4;
    }
  }
  .desktop\:aspect-\[4\/3\] {
    @media (min-width: 1024px) {
      aspect-ratio: 4/3;
    }
  }
  .desktop\:aspect-square {
    @media (min-width: 1024px) {
      aspect-ratio: 1 / 1;
    }
  }
  .desktop\:h-\(--height-desktop\) {
    @media (min-width: 1024px) {
      height: var(--height-desktop);
    }
  }
  .desktop\:h-1 {
    @media (min-width: 1024px) {
      height: var(--spacing);
    }
  }
  .desktop\:h-2 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 2);
    }
  }
  .desktop\:h-3 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 3);
    }
  }
  .desktop\:h-4 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 4);
    }
  }
  .desktop\:h-5 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 5);
    }
  }
  .desktop\:h-6 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 6);
    }
  }
  .desktop\:h-7 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 7);
    }
  }
  .desktop\:h-8 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 8);
    }
  }
  .desktop\:h-9 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 9);
    }
  }
  .desktop\:h-10 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 10);
    }
  }
  .desktop\:h-11 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 11);
    }
  }
  .desktop\:h-12 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 12);
    }
  }
  .desktop\:h-13 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 13);
    }
  }
  .desktop\:h-14 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 14);
    }
  }
  .desktop\:h-15 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 15);
    }
  }
  .desktop\:h-16 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 16);
    }
  }
  .desktop\:h-17 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 17);
    }
  }
  .desktop\:h-18 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 18);
    }
  }
  .desktop\:h-19 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 19);
    }
  }
  .desktop\:h-20 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 20);
    }
  }
  .desktop\:h-21 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 21);
    }
  }
  .desktop\:h-22 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 22);
    }
  }
  .desktop\:h-23 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 23);
    }
  }
  .desktop\:h-24 {
    @media (min-width: 1024px) {
      height: calc(var(--spacing) * 24);
    }
  }
  .desktop\:h-\[20rem\] {
    @media (min-width: 1024px) {
      height: 20rem;
    }
  }
  .desktop\:h-\[25rem\] {
    @media (min-width: 1024px) {
      height: 25rem;
    }
  }
  .desktop\:h-\[37\.5rem\] {
    @media (min-width: 1024px) {
      height: 37.5rem;
    }
  }
  .desktop\:h-\[50rem\] {
    @media (min-width: 1024px) {
      height: 50rem;
    }
  }
  .desktop\:h-auto {
    @media (min-width: 1024px) {
      height: auto;
    }
  }
  .desktop\:h-fit {
    @media (min-width: 1024px) {
      height: fit-content;
    }
  }
  .desktop\:h-full {
    @media (min-width: 1024px) {
      height: 100%;
    }
  }
  .desktop\:h-screen {
    @media (min-width: 1024px) {
      height: 100vh;
    }
  }
  .desktop\:w-\(--width-desktop\) {
    @media (min-width: 1024px) {
      width: var(--width-desktop);
    }
  }
  .desktop\:w-1 {
    @media (min-width: 1024px) {
      width: var(--spacing);
    }
  }
  .desktop\:w-2 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 2);
    }
  }
  .desktop\:w-3 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 3);
    }
  }
  .desktop\:w-4 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 4);
    }
  }
  .desktop\:w-5 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 5);
    }
  }
  .desktop\:w-6 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 6);
    }
  }
  .desktop\:w-7 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 7);
    }
  }
  .desktop\:w-8 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 8);
    }
  }
  .desktop\:w-9 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 9);
    }
  }
  .desktop\:w-10 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 10);
    }
  }
  .desktop\:w-11 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 11);
    }
  }
  .desktop\:w-12 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 12);
    }
  }
  .desktop\:w-13 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 13);
    }
  }
  .desktop\:w-14 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 14);
    }
  }
  .desktop\:w-15 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 15);
    }
  }
  .desktop\:w-16 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 16);
    }
  }
  .desktop\:w-17 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 17);
    }
  }
  .desktop\:w-18 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 18);
    }
  }
  .desktop\:w-19 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 19);
    }
  }
  .desktop\:w-20 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 20);
    }
  }
  .desktop\:w-21 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 21);
    }
  }
  .desktop\:w-22 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 22);
    }
  }
  .desktop\:w-23 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 23);
    }
  }
  .desktop\:w-24 {
    @media (min-width: 1024px) {
      width: calc(var(--spacing) * 24);
    }
  }
  .desktop\:w-auto {
    @media (min-width: 1024px) {
      width: auto;
    }
  }
  .desktop\:w-fit {
    @media (min-width: 1024px) {
      width: fit-content;
    }
  }
  .desktop\:w-full {
    @media (min-width: 1024px) {
      width: 100%;
    }
  }
  .desktop\:w-screen {
    @media (min-width: 1024px) {
      width: 100vw;
    }
  }
  .desktop\:grid-cols-1 {
    @media (min-width: 1024px) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .desktop\:grid-cols-2 {
    @media (min-width: 1024px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .desktop\:grid-cols-3 {
    @media (min-width: 1024px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .desktop\:grid-cols-4 {
    @media (min-width: 1024px) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .desktop\:grid-cols-5 {
    @media (min-width: 1024px) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .desktop\:grid-cols-6 {
    @media (min-width: 1024px) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .desktop\:grid-cols-7 {
    @media (min-width: 1024px) {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }
  }
  .desktop\:grid-cols-8 {
    @media (min-width: 1024px) {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
  }
  .desktop\:grid-cols-9 {
    @media (min-width: 1024px) {
      grid-template-columns: repeat(9, minmax(0, 1fr));
    }
  }
  .desktop\:grid-cols-10 {
    @media (min-width: 1024px) {
      grid-template-columns: repeat(10, minmax(0, 1fr));
    }
  }
  .desktop\:grid-cols-11 {
    @media (min-width: 1024px) {
      grid-template-columns: repeat(11, minmax(0, 1fr));
    }
  }
  .desktop\:grid-cols-12 {
    @media (min-width: 1024px) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .desktop\:grid-rows-1 {
    @media (min-width: 1024px) {
      grid-template-rows: repeat(1, minmax(0, 1fr));
    }
  }
  .desktop\:grid-rows-2 {
    @media (min-width: 1024px) {
      grid-template-rows: repeat(2, minmax(0, 1fr));
    }
  }
  .desktop\:grid-rows-3 {
    @media (min-width: 1024px) {
      grid-template-rows: repeat(3, minmax(0, 1fr));
    }
  }
  .desktop\:grid-rows-4 {
    @media (min-width: 1024px) {
      grid-template-rows: repeat(4, minmax(0, 1fr));
    }
  }
  .desktop\:grid-rows-5 {
    @media (min-width: 1024px) {
      grid-template-rows: repeat(5, minmax(0, 1fr));
    }
  }
  .desktop\:grid-rows-6 {
    @media (min-width: 1024px) {
      grid-template-rows: repeat(6, minmax(0, 1fr));
    }
  }
  .desktop\:flex-col {
    @media (min-width: 1024px) {
      flex-direction: column;
    }
  }
  .desktop\:flex-col-reverse {
    @media (min-width: 1024px) {
      flex-direction: column-reverse;
    }
  }
  .desktop\:flex-row {
    @media (min-width: 1024px) {
      flex-direction: row;
    }
  }
  .desktop\:flex-row-reverse {
    @media (min-width: 1024px) {
      flex-direction: row-reverse;
    }
  }
  .desktop\:items-center {
    @media (min-width: 1024px) {
      align-items: center;
    }
  }
  .desktop\:items-end {
    @media (min-width: 1024px) {
      align-items: flex-end;
    }
  }
  .desktop\:items-start {
    @media (min-width: 1024px) {
      align-items: flex-start;
    }
  }
  .desktop\:justify-between {
    @media (min-width: 1024px) {
      justify-content: space-between;
    }
  }
  .desktop\:justify-center {
    @media (min-width: 1024px) {
      justify-content: center;
    }
  }
  .desktop\:justify-end {
    @media (min-width: 1024px) {
      justify-content: flex-end;
    }
  }
  .desktop\:justify-start {
    @media (min-width: 1024px) {
      justify-content: flex-start;
    }
  }
  .desktop\:gap-0 {
    @media (min-width: 1024px) {
      gap: 0;
    }
  }
  .desktop\:gap-1 {
    @media (min-width: 1024px) {
      gap: var(--spacing);
    }
  }
  .desktop\:gap-2 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .desktop\:gap-3 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .desktop\:gap-4 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .desktop\:gap-5 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 5);
    }
  }
  .desktop\:gap-6 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .desktop\:gap-7 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 7);
    }
  }
  .desktop\:gap-8 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .desktop\:gap-9 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 9);
    }
  }
  .desktop\:gap-10 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 10);
    }
  }
  .desktop\:gap-11 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 11);
    }
  }
  .desktop\:gap-12 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 12);
    }
  }
  .desktop\:gap-13 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 13);
    }
  }
  .desktop\:gap-14 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 14);
    }
  }
  .desktop\:gap-15 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 15);
    }
  }
  .desktop\:gap-16 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 16);
    }
  }
  .desktop\:gap-17 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 17);
    }
  }
  .desktop\:gap-18 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 18);
    }
  }
  .desktop\:gap-19 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 19);
    }
  }
  .desktop\:gap-20 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 20);
    }
  }
  .desktop\:gap-21 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 21);
    }
  }
  .desktop\:gap-22 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 22);
    }
  }
  .desktop\:gap-23 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 23);
    }
  }
  .desktop\:gap-24 {
    @media (min-width: 1024px) {
      gap: calc(var(--spacing) * 24);
    }
  }
  .desktop\:border-dashed {
    @media (min-width: 1024px) {
      --tw-border-style: dashed;
      border-style: dashed;
    }
  }
  .desktop\:border-dotted {
    @media (min-width: 1024px) {
      --tw-border-style: dotted;
      border-style: dotted;
    }
  }
  .desktop\:p-0 {
    @media (min-width: 1024px) {
      padding: 0;
    }
  }
  .desktop\:p-1 {
    @media (min-width: 1024px) {
      padding: var(--spacing);
    }
  }
  .desktop\:p-2 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 2);
    }
  }
  .desktop\:p-3 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 3);
    }
  }
  .desktop\:p-4 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 4);
    }
  }
  .desktop\:p-5 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 5);
    }
  }
  .desktop\:p-6 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .desktop\:p-7 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 7);
    }
  }
  .desktop\:p-8 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .desktop\:p-9 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 9);
    }
  }
  .desktop\:p-10 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 10);
    }
  }
  .desktop\:p-11 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 11);
    }
  }
  .desktop\:p-12 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 12);
    }
  }
  .desktop\:p-13 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 13);
    }
  }
  .desktop\:p-14 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 14);
    }
  }
  .desktop\:p-15 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 15);
    }
  }
  .desktop\:p-16 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 16);
    }
  }
  .desktop\:p-17 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 17);
    }
  }
  .desktop\:p-18 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 18);
    }
  }
  .desktop\:p-19 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 19);
    }
  }
  .desktop\:p-20 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 20);
    }
  }
  .desktop\:p-21 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 21);
    }
  }
  .desktop\:p-22 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 22);
    }
  }
  .desktop\:p-23 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 23);
    }
  }
  .desktop\:p-24 {
    @media (min-width: 1024px) {
      padding: calc(var(--spacing) * 24);
    }
  }
  .desktop\:px-0 {
    @media (min-width: 1024px) {
      padding-inline: 0;
    }
  }
  .desktop\:px-1 {
    @media (min-width: 1024px) {
      padding-inline: var(--spacing);
    }
  }
  .desktop\:px-2 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 2);
    }
  }
  .desktop\:px-3 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  .desktop\:px-4 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .desktop\:px-5 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  .desktop\:px-6 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .desktop\:px-7 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 7);
    }
  }
  .desktop\:px-8 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .desktop\:px-9 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 9);
    }
  }
  .desktop\:px-10 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 10);
    }
  }
  .desktop\:px-11 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 11);
    }
  }
  .desktop\:px-12 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 12);
    }
  }
  .desktop\:px-13 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 13);
    }
  }
  .desktop\:px-14 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 14);
    }
  }
  .desktop\:px-15 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 15);
    }
  }
  .desktop\:px-16 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 16);
    }
  }
  .desktop\:px-17 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 17);
    }
  }
  .desktop\:px-18 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 18);
    }
  }
  .desktop\:px-19 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 19);
    }
  }
  .desktop\:px-20 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 20);
    }
  }
  .desktop\:px-21 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 21);
    }
  }
  .desktop\:px-22 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 22);
    }
  }
  .desktop\:px-23 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 23);
    }
  }
  .desktop\:px-24 {
    @media (min-width: 1024px) {
      padding-inline: calc(var(--spacing) * 24);
    }
  }
  .desktop\:py-0 {
    @media (min-width: 1024px) {
      padding-block: 0;
    }
  }
  .desktop\:py-1 {
    @media (min-width: 1024px) {
      padding-block: var(--spacing);
    }
  }
  .desktop\:py-2 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .desktop\:py-3 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 3);
    }
  }
  .desktop\:py-4 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 4);
    }
  }
  .desktop\:py-5 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 5);
    }
  }
  .desktop\:py-6 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 6);
    }
  }
  .desktop\:py-7 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 7);
    }
  }
  .desktop\:py-8 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 8);
    }
  }
  .desktop\:py-9 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 9);
    }
  }
  .desktop\:py-10 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 10);
    }
  }
  .desktop\:py-11 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 11);
    }
  }
  .desktop\:py-12 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 12);
    }
  }
  .desktop\:py-13 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 13);
    }
  }
  .desktop\:py-14 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 14);
    }
  }
  .desktop\:py-15 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 15);
    }
  }
  .desktop\:py-16 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 16);
    }
  }
  .desktop\:py-17 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 17);
    }
  }
  .desktop\:py-18 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 18);
    }
  }
  .desktop\:py-19 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 19);
    }
  }
  .desktop\:py-20 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 20);
    }
  }
  .desktop\:py-21 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 21);
    }
  }
  .desktop\:py-22 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 22);
    }
  }
  .desktop\:py-23 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 23);
    }
  }
  .desktop\:py-24 {
    @media (min-width: 1024px) {
      padding-block: calc(var(--spacing) * 24);
    }
  }
  .desktop\:ps-0 {
    @media (min-width: 1024px) {
      padding-inline-start: 0;
    }
  }
  .desktop\:ps-1 {
    @media (min-width: 1024px) {
      padding-inline-start: var(--spacing);
    }
  }
  .desktop\:ps-2 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 2);
    }
  }
  .desktop\:ps-3 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 3);
    }
  }
  .desktop\:ps-4 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 4);
    }
  }
  .desktop\:ps-5 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 5);
    }
  }
  .desktop\:ps-6 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 6);
    }
  }
  .desktop\:ps-7 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 7);
    }
  }
  .desktop\:ps-8 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 8);
    }
  }
  .desktop\:ps-9 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 9);
    }
  }
  .desktop\:ps-10 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 10);
    }
  }
  .desktop\:ps-11 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 11);
    }
  }
  .desktop\:ps-12 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 12);
    }
  }
  .desktop\:ps-13 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 13);
    }
  }
  .desktop\:ps-14 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 14);
    }
  }
  .desktop\:ps-15 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 15);
    }
  }
  .desktop\:ps-16 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 16);
    }
  }
  .desktop\:ps-17 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 17);
    }
  }
  .desktop\:ps-18 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 18);
    }
  }
  .desktop\:ps-19 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 19);
    }
  }
  .desktop\:ps-20 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 20);
    }
  }
  .desktop\:ps-21 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 21);
    }
  }
  .desktop\:ps-22 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 22);
    }
  }
  .desktop\:ps-23 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 23);
    }
  }
  .desktop\:ps-24 {
    @media (min-width: 1024px) {
      padding-inline-start: calc(var(--spacing) * 24);
    }
  }
  .desktop\:pe-0 {
    @media (min-width: 1024px) {
      padding-inline-end: 0;
    }
  }
  .desktop\:pe-1 {
    @media (min-width: 1024px) {
      padding-inline-end: var(--spacing);
    }
  }
  .desktop\:pe-2 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 2);
    }
  }
  .desktop\:pe-3 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 3);
    }
  }
  .desktop\:pe-4 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 4);
    }
  }
  .desktop\:pe-5 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 5);
    }
  }
  .desktop\:pe-6 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 6);
    }
  }
  .desktop\:pe-7 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 7);
    }
  }
  .desktop\:pe-8 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 8);
    }
  }
  .desktop\:pe-9 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 9);
    }
  }
  .desktop\:pe-10 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 10);
    }
  }
  .desktop\:pe-11 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 11);
    }
  }
  .desktop\:pe-12 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 12);
    }
  }
  .desktop\:pe-13 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 13);
    }
  }
  .desktop\:pe-14 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 14);
    }
  }
  .desktop\:pe-15 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 15);
    }
  }
  .desktop\:pe-16 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 16);
    }
  }
  .desktop\:pe-17 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 17);
    }
  }
  .desktop\:pe-18 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 18);
    }
  }
  .desktop\:pe-19 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 19);
    }
  }
  .desktop\:pe-20 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 20);
    }
  }
  .desktop\:pe-21 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 21);
    }
  }
  .desktop\:pe-22 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 22);
    }
  }
  .desktop\:pe-23 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 23);
    }
  }
  .desktop\:pe-24 {
    @media (min-width: 1024px) {
      padding-inline-end: calc(var(--spacing) * 24);
    }
  }
  .desktop\:pt-0 {
    @media (min-width: 1024px) {
      padding-top: 0;
    }
  }
  .desktop\:pt-1 {
    @media (min-width: 1024px) {
      padding-top: var(--spacing);
    }
  }
  .desktop\:pt-2 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 2);
    }
  }
  .desktop\:pt-3 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 3);
    }
  }
  .desktop\:pt-4 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 4);
    }
  }
  .desktop\:pt-5 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 5);
    }
  }
  .desktop\:pt-6 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 6);
    }
  }
  .desktop\:pt-7 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 7);
    }
  }
  .desktop\:pt-8 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 8);
    }
  }
  .desktop\:pt-9 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 9);
    }
  }
  .desktop\:pt-10 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 10);
    }
  }
  .desktop\:pt-11 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 11);
    }
  }
  .desktop\:pt-12 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 12);
    }
  }
  .desktop\:pt-13 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 13);
    }
  }
  .desktop\:pt-14 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 14);
    }
  }
  .desktop\:pt-15 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 15);
    }
  }
  .desktop\:pt-16 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 16);
    }
  }
  .desktop\:pt-17 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 17);
    }
  }
  .desktop\:pt-18 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 18);
    }
  }
  .desktop\:pt-19 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 19);
    }
  }
  .desktop\:pt-20 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 20);
    }
  }
  .desktop\:pt-21 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 21);
    }
  }
  .desktop\:pt-22 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 22);
    }
  }
  .desktop\:pt-23 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 23);
    }
  }
  .desktop\:pt-24 {
    @media (min-width: 1024px) {
      padding-top: calc(var(--spacing) * 24);
    }
  }
  .desktop\:pb-0 {
    @media (min-width: 1024px) {
      padding-bottom: 0;
    }
  }
  .desktop\:pb-1 {
    @media (min-width: 1024px) {
      padding-bottom: var(--spacing);
    }
  }
  .desktop\:pb-2 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 2);
    }
  }
  .desktop\:pb-3 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 3);
    }
  }
  .desktop\:pb-4 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 4);
    }
  }
  .desktop\:pb-5 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 5);
    }
  }
  .desktop\:pb-6 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 6);
    }
  }
  .desktop\:pb-7 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 7);
    }
  }
  .desktop\:pb-8 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 8);
    }
  }
  .desktop\:pb-9 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 9);
    }
  }
  .desktop\:pb-10 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 10);
    }
  }
  .desktop\:pb-11 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 11);
    }
  }
  .desktop\:pb-12 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 12);
    }
  }
  .desktop\:pb-13 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 13);
    }
  }
  .desktop\:pb-14 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 14);
    }
  }
  .desktop\:pb-15 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 15);
    }
  }
  .desktop\:pb-16 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 16);
    }
  }
  .desktop\:pb-17 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 17);
    }
  }
  .desktop\:pb-18 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 18);
    }
  }
  .desktop\:pb-19 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 19);
    }
  }
  .desktop\:pb-20 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 20);
    }
  }
  .desktop\:pb-21 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 21);
    }
  }
  .desktop\:pb-22 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 22);
    }
  }
  .desktop\:pb-23 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 23);
    }
  }
  .desktop\:pb-24 {
    @media (min-width: 1024px) {
      padding-bottom: calc(var(--spacing) * 24);
    }
  }
  .desktop\:text-center {
    @media (min-width: 1024px) {
      text-align: center;
    }
  }
  .desktop\:text-end {
    @media (min-width: 1024px) {
      text-align: end;
    }
  }
  .desktop\:text-left {
    @media (min-width: 1024px) {
      text-align: left;
    }
  }
  .desktop\:text-right {
    @media (min-width: 1024px) {
      text-align: right;
    }
  }
  .desktop\:text-start {
    @media (min-width: 1024px) {
      text-align: start;
    }
  }
  .\[\&_\.control-error\]\:text-xs {
    & .control-error {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
  }
  .\[\&_\.control-error\]\:text-danger {
    & .control-error {
      color: var(--color-danger);
    }
  }
  .\[\&_\.line-through\]\:text-on-background {
    & .line-through {
      color: var(--color-on-background);
    }
  }
  .\[\&\>\*\]\:pointer-events-auto {
    &>* {
      pointer-events: auto;
    }
  }
  .\[\&\>div\]\:flex {
    &>div {
      display: flex;
    }
  }
  .\[\&\>div\]\:items-center {
    &>div {
      align-items: center;
    }
  }
  .\[\&\>div\>p\:nth-of-type\(2\)\]\:text-xs {
    &>div>p:nth-of-type(2) {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
  }
  .\[\&\>div\>p\:nth-of-type\(2\)\]\:text-neutral {
    &>div>p:nth-of-type(2) {
      color: var(--color-neutral);
    }
  }
  .data-\[expanded\=true\]\:\[\&\>svg\]\:rotate-180 {
    &[data-expanded="true"] {
      &>svg {
        rotate: 180deg;
      }
    }
  }
}
@layer theme;
@layer base {
  @font-face {
    font-family: 'Dana';
    src: url('/themes/shop/petro-debut/assets/dana-thin-hckmeOwr.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Dana';
    src: url('/themes/shop/petro-debut/assets/dana-extralight-BAhtcHfK.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Dana';
    src: url('/themes/shop/petro-debut/assets/dana-light-DPuGh1gR.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Dana';
    src: url('/themes/shop/petro-debut/assets/dana-regular-CBmkwJ6H.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Dana';
    src: url('/themes/shop/petro-debut/assets/dana-medium-Cb63Xog7.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Dana';
    src: url('/themes/shop/petro-debut/assets/dana-demibold-DyOVb7xj.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Dana';
    src: url('/themes/shop/petro-debut/assets/dana-bold-D708A_vY.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Dana';
    src: url('/themes/shop/petro-debut/assets/dana-extrabold-N50n__-m.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Dana';
    src: url('/themes/shop/petro-debut/assets/dana-black-CGs1OHOV.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Dana';
    src: url('/themes/shop/petro-debut/assets/dana-thinitalic-6h6mgRmH.woff2') format('woff2');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Dana';
    src: url('/themes/shop/petro-debut/assets/dana-extralightitalic-FBv6dCdp.woff2') format('woff2');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Dana';
    src: url('/themes/shop/petro-debut/assets/dana-lightitalic-B8baksa9.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Dana';
    src: url('/themes/shop/petro-debut/assets/dana-regularitalic-eVJ6AjJd.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Dana';
    src: url('/themes/shop/petro-debut/assets/dana-mediumitalic-CkYM8WiQ.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Dana';
    src: url('/themes/shop/petro-debut/assets/dana-demibolditalic-DdVDaGmm.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Dana';
    src: url('/themes/shop/petro-debut/assets/dana-bolditalic-By43NShW.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Dana';
    src: url('/themes/shop/petro-debut/assets/dana-ultrabolditalic-D3dfuSGW.woff2') format('woff2');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Dana';
    src: url('/themes/shop/petro-debut/assets/dana-blackitalic-cRuQRB1D.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'IRANSans';
    src: url('/themes/shop/petro-debut/assets/iransans_ultralight-aZXjLIur.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'IRANSans';
    src: url('/themes/shop/petro-debut/assets/iransans_light-pvmVn2Jf.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'IRANSans';
    src: url('/themes/shop/petro-debut/assets/iransans-aRTobJdX.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'IRANSans';
    src: url('/themes/shop/petro-debut/assets/iransans_medium-Dse4kw9z.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'IRANSans';
    src: url('/themes/shop/petro-debut/assets/iransans_bold-CvFCnT63.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'IRANSans';
    src: url('/themes/shop/petro-debut/assets/iransans_black-Mmtq49EL.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Poppins';
    src: url('/themes/shop/petro-debut/assets/poppins-latin-100-normal-CY-M_i9k.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Poppins';
    src: url('/themes/shop/petro-debut/assets/poppins-latin-200-normal-B8tqA5oA.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Poppins';
    src: url('/themes/shop/petro-debut/assets/poppins-latin-300-normal-Dku2WoCh.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Poppins';
    src: url('/themes/shop/petro-debut/assets/poppins-latin-400-normal-cpxAROuN.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Poppins';
    src: url('/themes/shop/petro-debut/assets/poppins-latin-500-normal-C8OXljZJ.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Poppins';
    src: url('/themes/shop/petro-debut/assets/poppins-latin-600-normal-zEkxB9Mr.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Poppins';
    src: url('/themes/shop/petro-debut/assets/poppins-latin-700-normal-Qrb0O0WB.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Poppins';
    src: url('/themes/shop/petro-debut/assets/poppins-latin-800-normal-Bd8-pIP1.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Poppins';
    src: url('/themes/shop/petro-debut/assets/poppins-latin-900-normal-BmL1zqjw.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Poppins';
    src: url('/themes/shop/petro-debut/assets/poppins-latin-100-italic-DuNkhShJ.woff2') format('woff2');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Poppins';
    src: url('/themes/shop/petro-debut/assets/poppins-latin-200-italic-CeOz3Dg2.woff2') format('woff2');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Poppins';
    src: url('/themes/shop/petro-debut/assets/poppins-latin-300-italic-EWCPeN2Y.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Poppins';
    src: url('/themes/shop/petro-debut/assets/poppins-latin-400-italic-B4GYq972.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Poppins';
    src: url('/themes/shop/petro-debut/assets/poppins-latin-500-italic-o28Otv0U.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Poppins';
    src: url('/themes/shop/petro-debut/assets/poppins-latin-600-italic-CZ4wqKBi.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Poppins';
    src: url('/themes/shop/petro-debut/assets/poppins-latin-700-italic-RKf6esGj.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Poppins';
    src: url('/themes/shop/petro-debut/assets/poppins-latin-800-italic-B-yag6pl.woff2') format('woff2');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Poppins';
    src: url('/themes/shop/petro-debut/assets/poppins-latin-900-italic-DzxCezIC.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Vazirmatn';
    src: url('/themes/shop/petro-debut/assets/Vazirmatn-Variable-BeciDpKm.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Vazirmatn';
    src: url('/themes/shop/petro-debut/assets/Vazirmatn-Thin-DdUiS1cj.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Vazirmatn';
    src: url('/themes/shop/petro-debut/assets/Vazirmatn-ExtraLight-DNfybfsL.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Vazirmatn';
    src: url('/themes/shop/petro-debut/assets/Vazirmatn-Light-Byrs-DlH.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Vazirmatn';
    src: url('/themes/shop/petro-debut/assets/Vazirmatn-Regular-CtGL0YI-.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Vazirmatn';
    src: url('/themes/shop/petro-debut/assets/Vazirmatn-Medium-D86t5Axy.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Vazirmatn';
    src: url('/themes/shop/petro-debut/assets/Vazirmatn-SemiBold-26ZP1ILp.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Vazirmatn';
    src: url('/themes/shop/petro-debut/assets/Vazirmatn-Bold-_OhAJEdh.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Vazirmatn';
    src: url('/themes/shop/petro-debut/assets/Vazirmatn-ExtraBold-DCjt2qDm.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Vazirmatn';
    src: url('/themes/shop/petro-debut/assets/Vazirmatn-Black-DA1YqYMq.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }
}
@layer base {
  :root, [data-color-scheme] {
    --depth: 1;
    background-color: var(--color-background);
    color: var(--color-on-background);
  }
  html {
    font-family: 'Poppins', sans-serif;
  }
  html[lang='fa'] {
    font-family: 'IRANSans', sans-serif;
  }
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    border-color: var(--color-on-background);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-on-background) 8%, transparent);
    }
  }
  .box {
    border-radius: var(--box-radius, 0);
    border-width: var(--box-border-width, 0px);
  }
}
@layer base;
@layer components {
  :where(.btn) {
    width: unset;
  }
  .btn {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1.5);
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
    padding-inline: var(--btn-p);
    color: var(--btn-fg);
    background: var(--btn-bg);
    height: var(--btn-size);
    font-size: var(--btn-font-size, 0.875rem);
    font-weight: 600;
    letter-spacing: var(--btn-letter-spacing, normal);
    text-transform: var(--btn-text-transform, none);
    text-decoration: none;
    border-radius: var(--btn-radius, 0.375rem);
    border-width: var(--btn-border-width, 0px);
    border-style: solid;
    border-color: var(--btn-border);
    box-shadow: var(--btn-shadow-x, 0px) var(--btn-shadow-y, 0px) var(--btn-shadow-blur, 0px) var(--btn-shadow-spread, 0px) rgb( from var(--btn-shadow-color, #000) r g b / var(--btn-shadow-opacity, 0) ), inset var(--btn-inset-x, 0px) var(--btn-inset-y, 0px) var(--btn-inset-blur, 0px) var(--btn-inset-spread, 0px) rgb( from var(--btn-inset-color, #000) r g b / var(--btn-inset-opacity, 0) );
    transition-property: color, background-color, border-color, box-shadow, translate;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transition-duration: 0.2s;
    --btn-p: 1rem;
    --btn-size-base: 0.25rem;
    --btn-size: calc(var(--btn-size-base) * 10);
    --btn-icon-size: 1.25rem;
    --btn-fg: var(--color-on-background);
    --btn-bg: var(--btn-color, var(--color-surface));
    --btn-border: var(--btn-color, var(--color-surface));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-border: color-mix(
            in oklab,
            var(--btn-color, var(--color-surface)),
            #000 calc(var(--depth, 1) * 5%)
        );
    }
  }
  .btn-icon {
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
  }
  .btn:hover {
    --btn-bg: var(--btn-color, var(--color-surface));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-bg: color-mix(
            in oklab,
            var(--btn-color, var(--color-surface)),
            #000 7%
        );
    }
  }
  .btn:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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);
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-outline-style: none;
    outline-style: none;
    --tw-ring-color: var(--btn-color);
  }
  .btn:active {
    translate: 0 0.5px;
    --btn-bg: var(--btn-color, var(--color-surface));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-bg: color-mix(
            in oklab,
            var(--btn-color, var(--color-surface)),
            #000 5%
        );
    }
    --btn-border: var(--btn-color, var(--color-surface));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-border: color-mix(
            in oklab,
            var(--btn-color, var(--color-surface)),
            #000 7%
        );
    }
  }
  .btn:disabled:not([loading]), .btn[disabled]:not([loading]) {
    pointer-events: none;
    --btn-border: #0000;
    --btn-fg: var(--color-on-background);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-fg: color-mix(in oklch, var(--color-on-background) 20%, #0000);
    }
  }
  .btn:disabled:not(.btn-link, .btn-ghost, [loading]), .btn[disabled]:not(.btn-link, .btn-ghost, [loading]), .btn.btn-disabled:not(.btn-link, .btn-ghost, [loading]) {
    background-color: var(--color-on-background);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-on-background) 10%, transparent);
    }
    box-shadow: none;
  }
  .btn[loading] {
    pointer-events: none;
    opacity: 80%;
  }
  .btn-primary {
    --btn-color: var(--color-primary);
    --btn-fg: var(--color-on-primary);
  }
  .btn-secondary {
    --btn-color: var(--color-secondary);
    --btn-fg: var(--color-on-secondary);
  }
  .btn-accent {
    --btn-color: var(--color-accent);
    --btn-fg: var(--color-on-accent);
  }
  .btn-neutral {
    --btn-color: var(--color-neutral);
    --btn-fg: var(--color-on-neutral);
  }
  .btn-info {
    --btn-color: var(--color-info);
    --btn-fg: var(--color-on-info);
  }
  .btn-success {
    --btn-color: var(--color-success);
    --btn-fg: var(--color-on-success);
  }
  .btn-warning {
    --btn-color: var(--color-warning);
    --btn-fg: var(--color-on-warning);
  }
  .btn-danger {
    --btn-color: var(--color-danger);
    --btn-fg: var(--color-on-danger);
  }
  .btn-soft:not(:hover, :active, :disabled, [disabled]) {
    --btn-fg: var(--btn-color, var(--color-on-background));
    --btn-bg: var(--btn-color);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-bg: color-mix(
            in oklab,
            var(--btn-color) 8%,
            var(--color-background)
        );
    }
    --btn-border: var(--btn-color);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-border: color-mix(
            in oklab,
            var(--btn-color) 10%,
            var(--color-background)
        );
    }
  }
  .btn-soft:hover:not(:active, :disabled, [disabled]) {
    --btn-fg: var(--btn-color);
    --btn-bg: var(--btn-color);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-bg: color-mix(
            in oklab,
            var(--btn-color) 18%,
            var(--color-background)
        );
    }
    --btn-border: var(--btn-color);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-border: color-mix(
            in oklab,
            var(--btn-color) 20%,
            var(--color-background)
        );
    }
  }
  .btn-soft:active {
    --btn-fg: var(--btn-color);
    --btn-bg: var(--btn-color);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-bg: color-mix(
            in oklab,
            var(--btn-color) 25%,
            var(--color-background)
        );
    }
    --btn-border: var(--btn-color);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-border: color-mix(
            in oklab,
            var(--btn-color) 27%,
            var(--color-background)
        );
    }
  }
  .btn-outline:not(:hover, :active, :disabled, [disabled]) {
    --btn-bg: transparent;
    --btn-fg: var(--btn-color);
    --btn-border: var(--btn-color);
    border-width: max(1px, var(--btn-border-width, 1px));
  }
  .btn-outline:hover:not(:active, :disabled, [disabled]) {
    border-width: max(1px, var(--btn-border-width, 1px));
    --btn-bg: var(--btn-color, var(--color-on-background));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-bg: color-mix(
            in oklab,
            var(--btn-color, var(--color-on-background)) 10%,
            var(--color-background)
        );
    }
    --btn-fg: var(--btn-color);
    --btn-border: var(--btn-color);
  }
  .btn-outline:active {
    border-width: max(1px, var(--btn-border-width, 1px));
    --btn-bg: var(--btn-color, var(--color-on-background));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-bg: color-mix(
            in oklab,
            var(--btn-color, var(--color-on-background)) 15%,
            var(--color-background)
        );
    }
    --btn-fg: var(--btn-color);
    --btn-border: var(--btn-color);
  }
  .btn-ghost:not(:hover, :active) {
    --btn-bg: transparent;
    --btn-border: transparent;
    border-width: 0px;
    --btn-fg: var(--btn-color);
  }
  .btn-ghost:hover:not(:active, :disabled, [disabled]) {
    --btn-border: transparent;
    --btn-bg: var(--btn-color, var(--color-on-background));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-bg: color-mix(
            in oklab,
            var(--btn-color, var(--color-on-background)) 7%,
            var(--color-background)
        );
    }
    border-width: 0px;
    --btn-fg: var(--btn-color);
  }
  .btn-ghost:active {
    --btn-border: transparent;
    --btn-bg: var(--btn-color, var(--color-on-background));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-bg: color-mix(
            in oklab,
            var(--btn-color, var(--color-on-background)) 12%,
            var(--color-background)
        );
    }
    border-width: 0px;
    --btn-fg: var(--btn-color);
  }
  .btn-link {
    --btn-border: transparent;
    --btn-bg: transparent;
    --btn-fg: var(--btn-color);
    box-shadow: none;
  }
  .btn-link:is(.btn-active, :hover, :active:focus, :focus-visible) {
    text-decoration-line: underline;
    --btn-border: transparent;
    --btn-bg: transparent;
  }
  .btn-xs {
    --btn-font-size: 0.6875rem;
    --btn-p: 0.5rem;
    --btn-size: calc(var(--btn-size-base) * 6);
    --btn-icon-size: 0.75rem;
  }
  .btn-sm {
    --btn-font-size: 0.75rem;
    --btn-p: 0.75rem;
    --btn-size: calc(var(--btn-size-base) * 8);
    --btn-icon-size: 1rem;
  }
  .btn-md {
    --btn-font-size: 0.875rem;
    --btn-p: 1rem;
    --btn-size: calc(var(--btn-size-base) * 10);
    --btn-icon-size: 1.25rem;
  }
  .btn-lg {
    --btn-font-size: 1.125rem;
    --btn-p: 1.25rem;
    --btn-size: calc(var(--btn-size-base) * 12);
    --btn-icon-size: 1.5rem;
  }
  .btn-xl {
    --btn-font-size: 1.375rem;
    --btn-p: 1.5rem;
    --btn-size: calc(var(--btn-size-base) * 14);
    --btn-icon-size: 1.75rem;
  }
  .btn-square {
    padding-inline: 0;
    width: var(--btn-size);
    height: var(--btn-size);
  }
  .btn-circle {
    border-radius: calc(infinity * 1px);
    padding-inline: 0;
    width: var(--btn-size);
    height: var(--btn-size);
  }
  .btn-wide {
    width: 100%;
    max-width: calc(var(--spacing) * 64);
  }
  .btn-block {
    width: 100%;
  }
  .loading {
    pointer-events: none;
    display: inline-block;
    aspect-ratio: 1 / 1;
    background-color: currentcolor;
    vertical-align: middle;
    width: calc(var(--btn-size-base) * 6);
    mask-size: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
  }
}
@layer components {
  [type='text'], [type='email'], [type='password'], [type='number'], [type='date'], [type='datetime-local'], [type='time'], [type='search'], [type='tel'], [type='url'], [type='file'], input:where(:not([type])), textarea, select {
    background-color: var(--color-background);
    appearance: none;
    background-repeat: no-repeat;
    width: 100%;
    padding-inline: calc(var(--spacing) * 4);
    height: var(--input-size);
    border: var(--input-border-width) solid #0000;
    border-color: var(--input-color);
    border-radius: var(--input-radius);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
    --input-size-base: 0.25rem;
    --input-size: calc(var(--input-size-base, 0.25rem) * 10);
    --input-color: var(--color-on-background);
    @supports (color: color-mix(in lab, red, red)) {
      --input-color: color-mix(in oklab, var(--color-on-background) 20%, #0000);
    }
    &:focus, &:focus-within {
      border-color: transparent;
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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);
      --tw-ring-color: var(--color-primary);
      --tw-outline-style: none;
      outline-style: none;
      --input-color: var(--color-on-background);
    }
    &:is(:disabled, [disabled]) {
      border-color: var(--color-surface);
      background-color: var(--color-surface);
      color: var(--color-on-background);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-on-background) 40%, transparent);
      }
      &::placeholder {
        color: var(--color-on-background);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-on-background) 20%, transparent);
        }
      }
      &:disabled {
        cursor: not-allowed;
      }
      box-shadow: none;
    }
  }
  textarea {
    height: auto;
    padding-block: calc(var(--spacing) * 3);
  }
  select:is([multiple]) {
    --input-size: calc(var(--input-size-base, 0.25rem) * 20);
    padding-block: calc(var(--spacing) * 2.5);
  }
  select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
      background-position: left;
    }
  }
  [type='checkbox'], [type='radio'] {
    appearance: none;
    padding: 0;
    -webkit-user-select: none;
    user-select: none;
    display: inline-block;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-background);
    color: var(--color-primary);
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 50%;
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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 {
      --tw-ring-color: var(--color-primary);
    }
    &:focus {
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    border: max(var(--input-border-width), 1px) solid #0000;
    border-color: var(--input-color);
    --input-color: var(--color-on-background);
    @supports (color: color-mix(in lab, red, red)) {
      --input-color: color-mix(in oklab, var(--color-on-background) 20%, #0000);
    }
  }
  [type='checkbox'] {
    border-radius: min(var(--input-radius), 0.25rem);
  }
  [type='radio'] {
    border-radius: calc(infinity * 1px);
  }
  [type='checkbox']:checked, [type='radio']:checked {
    border-color: transparent;
    background-color: currentcolor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  input[type='checkbox']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }
  input[type='radio']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  }
  required:after, label[required]:after {
    content: '*';
  }
  .input-xs {
    --input-size: calc(var(--input-size-base, 0.25rem) * 6);
    font-size: 0.6875rem;
    &[type='number'] {
      &::-webkit-inner-spin-button {
        margin-block: calc(var(--spacing) * -1);
        margin-inline-end: calc(var(--spacing) * -3);
      }
    }
  }
  .input-sm {
    --input-size: calc(var(--input-size-base, 0.25rem) * 8);
    font-size: 0.75rem;
    &[type='number'] {
      &::-webkit-inner-spin-button {
        margin-block: calc(var(--spacing) * -2);
        margin-inline-end: calc(var(--spacing) * -3);
      }
    }
  }
  .input-md {
    --input-size: calc(var(--input-size-base, 0.25rem) * 10);
    font-size: 0.875rem;
    &[type='number'] {
      &::-webkit-inner-spin-button {
        margin-block: calc(var(--spacing) * -3);
        margin-inline-end: calc(var(--spacing) * -3);
      }
    }
  }
  .input-lg {
    --input-size: calc(var(--input-size-base, 0.25rem) * 12);
    font-size: 1.125rem;
    &[type='number'] {
      &::-webkit-inner-spin-button {
        margin-block: calc(var(--spacing) * -3);
        margin-inline-end: calc(var(--spacing) * -3);
      }
    }
  }
  .input-xl {
    --input-size: calc(var(--input-size-base, 0.25rem) * 14);
    font-size: 1.375rem;
    &[type='number'] {
      &::-webkit-inner-spin-button {
        margin-block: calc(var(--spacing) * -4);
        margin-inline-end: calc(var(--spacing) * -3);
      }
    }
  }
}
@layer base {
  h1 {
    font-weight: 700;
  }
  h2 {
    font-weight: 600;
  }
  h3 {
    font-weight: 600;
  }
  h4 {
    font-weight: 500;
  }
  h5 {
    font-weight: 500;
  }
  h6 {
    font-weight: 500;
  }
  body, h1, h2, h3, h4, h5, h6, [data-typography] {
    font-family: inherit;
    font-style: var(--typography-font-style);
    font-weight: var(--typography-font-weight);
    font-size: var(--typography-font-size);
    line-height: var(--typography-line-height);
    letter-spacing: var(--typography-letter-spacing);
    text-transform: var(--typography-text-transform);
  }
  html[lang='fa'] :where(h1, h2, h3, h4, h5, h6) {
    font-family: 'Dana', sans-serif;
  }
}
@layer components {
  .petro-article-page {
    background: #DCE8FF;
    color: #243244;
    font-family: 'IRANSans', sans-serif;
  }
  .petro-article-hero {
    background: #243244;
    color: #FAA63B;
  }
  .petro-article-hero__inner, .petro-article-main__inner {
    width: min(90%, 1540px);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 4rem);
  }
  .petro-article-hero__inner {
    padding-block: clamp(1.125rem, 3vw, 2.5rem);
  }
  .petro-article-hero__title {
    margin: 0;
    color: #FAA63B;
    font-family: 'IRANSans', sans-serif;
    font-size: clamp(1.75rem, 3.8vw, 2.5rem);
    font-weight: 500;
    line-height: 1;
    text-wrap: balance;
  }
  .petro-article-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1rem;
    color: #FAA63B;
    font-family: 'IRANSans', sans-serif;
    font-size: 0.9rem;
    line-height: 1.8;
  }
  .petro-article-breadcrumbs a {
    color: inherit;
    text-decoration: none;
    transition: opacity 160ms ease;
  }
  .petro-article-breadcrumbs a:hover, .petro-article-breadcrumbs a:focus-visible {
    opacity: 0.72;
  }
  .petro-article-main {
    background: #DCE8FF;
    padding-block: clamp(2rem, 5vw, 4.5rem);
  }
  .petro-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) minmax(16rem, 1fr);
    gap: clamp(1.5rem, 4vw, 3.75rem);
    align-items: stretch;
  }
  .petro-article-toc-shell {
    order: 2;
  }
  .petro-article-content {
    order: 1;
  }
  .petro-article-layout--without-toc {
    grid-template-columns: minmax(0, 1fr);
  }
  .petro-article-card {
    min-width: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
  }
  .petro-article-toc-shell {
    padding: clamp(0.35rem, 0.75vw, 0.6rem);
  }
  .petro-article-toc {
    --petro-article-toc-offset: clamp(9.6rem, 18vh, 12rem);
    position: sticky;
    top: var(--petro-article-toc-offset);
    max-height: calc(100vh - var(--petro-article-toc-offset) - 1rem);
    overflow-y: auto;
    padding: clamp(0.75rem, 1.5vw, 1.15rem);
    color: #FAA63B;
    background: #243244;
    border: 2px solid #FAA63B;
    border-radius: 7px;
    box-shadow: none;
    scrollbar-color: #FAA63B transparent;
  }
  .petro-article-toc__heading {
    margin: 0;
  }
  .petro-article-toc__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border: 0;
    color: #FAA63B;
    background: transparent;
    font-family: 'IRANSans', sans-serif;
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    font-weight: 700;
    line-height: 1.6;
    text-align: start;
  }
  .petro-article-toc__title:focus-visible {
    outline: 2px solid #FAA63B;
    outline-offset: 0.25rem;
  }
  .petro-article-toc__indicator {
    display: flex;
    flex-shrink: 0;
    margin-inline-start: 1rem;
    transition: transform 160ms ease;
  }
  .petro-article-toc__indicator[data-state='open'] {
    transform: rotate(180deg);
  }
  .petro-article-toc__content {
    overflow: hidden;
  }
  .petro-article-toc__separator {
    width: 100%;
    height: 5px;
    margin: 0.8rem 0 1rem;
    border-radius: 999px;
    background: #FAA63B;
  }
  .petro-article-toc__list {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .petro-article-toc__list a {
    display: block;
    padding-block: 0.2rem;
    color: #FAA63B;
    font-family: 'IRANSans', sans-serif;
    font-size: 0.94rem;
    line-height: 1.8;
    text-decoration: none;
    transition: opacity 160ms ease, transform 160ms ease;
  }
  .petro-article-toc__list a:hover, .petro-article-toc__list a:focus-visible {
    opacity: 0.72;
    transform: translateX(-2px);
  }
  .petro-article-content {
    padding: clamp(1rem, 2.5vw, 2rem);
  }
  .petro-article-content__media {
    margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
  }
  .petro-article-content__media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 34rem;
    border-radius: 7px;
    object-fit: cover;
  }
  .petro-article-content__body {
    color: #243244;
    font-family: 'IRANSans', sans-serif;
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    line-height: 2;
    text-align: start;
  }
  .petro-article-content__body :where(h1, h2, h3, h4, h5, h6) {
    color: #243244;
    font-family: 'IRANSans', sans-serif;
    scroll-margin-top: 1.5rem;
  }
  .petro-article-content__body :where(h2, h3) {
    margin-top: 2.5em;
  }
  .petro-article-content__body :where(a) {
    color: #243244;
    text-decoration-color: #FAA63B;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
  }
  .petro-article-content__body :where(img, video, iframe) {
    max-width: 100%;
  }
  .petro-cms-rich-content :where(img) {
    display: inline-block;
  }
  @media (max-width: 767px) {
    .petro-article-layout {
      grid-template-columns: minmax(0, 1fr);
    }
    .petro-article-toc-shell, .petro-article-content {
      order: initial;
    }
    .petro-article-toc-shell {
      padding: 0;
    }
    .petro-article-toc {
      position: relative;
      top: auto;
      max-height: none;
      padding: 0.75rem;
    }
    .petro-article-content {
      padding: 1rem;
    }
  }
}
@layer base {
  .label-pending, .label-processing, .label-closed, .label-canceled, .label-info, .label-fraud, .label-pending_payment, .label-completed, .label-active {
    max-width: max-content;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: 1px;
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .label-pending, .label-pending_payment {
    background-color: var(--color-warning);
    color: var(--color-warning-50);
  }
  .label-processing {
    background-color: var(--color-cyan-600);
    color: var(--color-cyan-100);
  }
  .label-completed, .label-active {
    background-color: var(--color-success);
    color: var(--color-success-50);
  }
  .label-closed {
    background-color: var(--color-indigo-600);
    color: var(--color-indigo-100);
  }
  .label-canceled, .label-fraud {
    background-color: var(--color-danger);
    color: var(--color-danger-50);
  }
  .label-info {
    background-color: var(--color-info-400);
    color: var(--color-info-50);
  }
  .icon-eye {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(110,110,110)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
  }
}
@layer components {
  @layer components {
    .btn-background {
      --btn-color: var(--color-background);
      --btn-fg: var(--color-on-background);
    }
    .btn-on-background {
      --btn-color: var(--color-on-background);
      --btn-fg: var(--color-background);
    }
    .btn-surface {
      --btn-color: var(--color-surface);
      --btn-fg: var(--color-on-surface);
    }
    .btn-on-surface {
      --btn-color: var(--color-on-surface);
      --btn-fg: var(--color-surface);
    }
    .btn-surface-alt {
      --btn-color: var(--color-surface-alt);
      --btn-fg: var(--color-on-surface-alt);
    }
    .btn-on-surface-alt {
      --btn-color: var(--color-on-surface-alt);
      --btn-fg: var(--color-surface-alt);
    }
    .btn-on-primary {
      --btn-color: var(--color-on-primary);
      --btn-fg: var(--color-primary);
    }
    .btn-on-secondary {
      --btn-color: var(--color-on-secondary);
      --btn-fg: var(--color-secondary);
    }
    .btn-on-accent {
      --btn-color: var(--color-on-accent);
      --btn-fg: var(--color-accent);
    }
    .btn-on-neutral {
      --btn-color: var(--color-on-neutral);
      --btn-fg: var(--color-neutral);
    }
    .btn-on-info {
      --btn-color: var(--color-on-info);
      --btn-fg: var(--color-info);
    }
    .btn-on-success {
      --btn-color: var(--color-on-success);
      --btn-fg: var(--color-success);
    }
    .btn-on-warning {
      --btn-color: var(--color-on-warning);
      --btn-fg: var(--color-warning);
    }
    .btn-on-danger {
      --btn-color: var(--color-on-danger);
      --btn-fg: var(--color-danger);
    }
    .btn-custom {
      --btn-fg: var(--color-on-primary, #fff);
    }
    .petro-rich-text :where(*) {
      color: inherit !important;
    }
  }
}
:root {
  --petro-navy: #243244;
  --petro-blue: #dce8ff;
  --petro-orange: #faa63b;
  --petro-ink: #172235;
  --petro-muted: #667085;
  --petro-card-radius: 7px;
}
html {
  scroll-behavior: smooth;
}
.petro-header-shell {
  position: relative;
  z-index: 30;
  isolation: isolate;
  width: 100%;
  color: var(--petro-navy);
  background: var(--petro-blue);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
  pointer-events: auto;
}
.petro-header-bar {
  display: contents;
}
.petro-header-mobile-drawer {
  display: none;
}
.petro-rounded-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--petro-rounded-heading-height, 124px);
  padding: 1rem 1.25rem;
  border-radius: 1rem 1rem 0 0;
  text-align: center;
}
.petro-rounded-heading > :where(h1, h2, h3, h4, h5, h6, p) {
  width: 100%;
  margin: 0;
}
.petro-export-grease-grid > .relative.z-10.flex > .petro-rounded-heading, .petro-export-oil-grid > .relative.z-10.flex > .petro-rounded-heading {
  align-self: flex-start;
  width: fit-content !important;
  max-width: min(calc(100% - 2rem), 40rem);
  min-height: 0;
  padding: .75rem 1rem;
  margin-block: clamp(1rem, 2vw, 1.5rem) 0;
  margin-inline-start: clamp(2rem, 10vw, 8rem);
  border-radius: 1rem 1rem 0 0;
}
.petro-export-grease-grid > .relative.z-10.flex > .petro-rounded-heading > :where(h1, h2, h3, h4, h5, h6, p), .petro-export-oil-grid > .relative.z-10.flex > .petro-rounded-heading > :where(h1, h2, h3, h4, h5, h6, p) {
  font-size: calc(var(--typography-font-size) * .75) !important;
}
.petro-export-grease-grid__cards, .petro-export-oil-grid__cards {
  direction: ltr;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
}
.petro-export-grease-grid__cards {
  padding-top: 1rem;
}
.petro-export-grease-grid__cards > .group {
  width: 160px;
  max-width: 160px;
  flex: 0 0 160px;
}
.petro-export-oil-grid__cards > .petro-export-image-card {
  width: 190px;
  max-width: 190px;
  flex: 0 0 190px;
}
.petro-export-grease-grid__cards > .group > .petro-export-image-card {
  height: 100%;
}
.petro-export-grease-grid .petro-export-image-card, .petro-export-oil-grid .petro-export-image-card {
  border-color: transparent;
}
.petro-export-oil-grid .petro-export-image-card {
  background: #243244;
}
.petro-export-grease-grid__cards > .group:nth-child(n + 7) .petro-export-image-card__label {
  display: flex;
  min-height: 4rem;
  align-items: center;
  justify-content: center;
}
@media (max-width: 639px) {
  .petro-rounded-heading {
    width: var(--petro-rounded-heading-width-mobile, 88%) !important;
    min-height: var(--petro-rounded-heading-height-mobile, 104px);
  }
  .petro-export-grease-grid > .relative.z-10.flex > .petro-rounded-heading, .petro-export-oil-grid > .relative.z-10.flex > .petro-rounded-heading {
    margin-inline-start: clamp(1rem, 6vw, 2rem);
    margin-inline: auto;
  }
  .petro-export-grease-grid__cards, .petro-export-oil-grid__cards {
    gap: .5rem;
  }
  .petro-export-grease-grid__cards > .group {
    width: calc((100% - .5rem) / 2);
    max-width: none;
    flex-basis: calc((100% - .5rem) / 2);
  }
  .petro-export-oil-grid__cards > .petro-export-image-card {
    width: calc((100% - .5rem) / 2);
    max-width: none;
    flex-basis: calc((100% - .5rem) / 2);
  }
}
.petro-header-contact {
  max-height: 4rem;
  overflow: hidden;
  color: var(--petro-orange);
  background: var(--petro-navy);
  font-size: .75rem;
  font-weight: 600;
  opacity: 1;
  transition: max-height .2s ease, opacity .15s ease;
}
.petro-header-shell.is-scrolled .petro-header-contact {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
.petro-header-contact__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem;
  min-height: 2.25rem;
}
.petro-header-contact a, .petro-header-contact span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--petro-orange);
}
.petro-header-contact svg {
  width: .9rem;
  height: .9rem;
  flex: 0 0 auto;
}
.petro-header-main {
  background: var(--petro-blue);
}
.petro-header-main > .container {
  padding-top: .35rem;
}
.petro-header-content {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) minmax(11rem, 25%);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 1.25rem;
}
.petro-header-content > :nth-child(1) {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  min-width: 0;
  width: min(10rem, 100%);
}
.petro-header-content > :nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.petro-header-content > :nth-child(3) {
  grid-column: 3;
  grid-row: 1;
  justify-self: stretch;
}
.petro-header-content > :nth-child(4) {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
}
.petro-header-content > :nth-child(4) > nav {
  width: 90%;
}
.petro-header-shell.is-nav-collapsed .petro-header-bar {
  display: flex;
  align-items: center;
  gap: .25rem;
}
.petro-header-shell.is-nav-collapsed .petro-header-main > .container {
  padding-bottom: .75rem;
}
.petro-header-shell.is-nav-collapsed .petro-header-mobile-drawer {
  display: block;
  flex: 0 0 auto;
}
.petro-header-shell.is-nav-collapsed .petro-header-mobile-trigger {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
}
.petro-header-shell.is-nav-collapsed .petro-header-content {
  flex: 1;
}
.petro-header-shell.is-nav-collapsed .petro-header-content > :nth-child(4), .petro-header-shell.is-nav-collapsed .petro-header-content > :nth-child(4) > nav {
  display: none;
}
.petro-header-content > :nth-child(2) .petro-header-search-form {
  width: min(100%, 22rem);
}
.petro-header-content > :nth-child(2) > :first-child {
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}
.petro-header-content > :nth-child(3) > div {
  justify-content: flex-end;
}
.petro-header-content [data-block='header-tagline'] {
  margin-bottom: .35rem;
  color: var(--petro-navy);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: start;
}
.petro-header-shell .petro-logo-tagline {
  display: none;
  max-width: 14rem;
  margin-inline-start: .75rem;
  color: var(--petro-navy);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.65;
}
.petro-header-shell img[src*='petroravankar-old-logo'] {
  width: min(10rem, 100%) !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
}
.petro-header-shell a:has(img[src*='petroravankar-old-logo']) {
  display: flex;
  align-items: center;
}
.petro-header-shell #search-form {
  color: var(--petro-navy);
}
.petro-header-search-form {
  display: flex;
  align-items: stretch;
  max-width: 100%;
}
.petro-header-shell #search-form input {
  min-width: 0;
  flex: 1;
  padding: .55rem .7rem;
  border: 2px solid var(--petro-navy);
  border-inline-end: 0;
  border-start-start-radius: 5px;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  border-end-start-radius: 5px;
  background: var(--petro-blue);
  color: var(--petro-navy);
  outline: none;
}
.petro-header-shell #search-form input:focus {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
}
.petro-header-shell #search-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.65rem;
  color: var(--petro-orange);
  background: var(--petro-navy);
  border: 0;
  border-start-start-radius: 0;
  border-start-end-radius: 20px;
  border-end-end-radius: 20px;
  border-end-start-radius: 0;
}
.petro-header-mobile-trigger {
  display: none;
  padding: .5rem;
  color: #FAA63B;
  background: var(--petro-navy);
  border-radius: 7px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
}
.petro-mobile-drawer-close {
  position: absolute !important;
  inset-inline-end: 1rem !important;
  top: 1rem !important;
  color: #243244 !important;
  transform: none;
}
.petro-mobile-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  min-height: 2.5rem;
  margin-inline: .25rem .5rem;
  color: var(--petro-navy);
  background: var(--petro-blue);
  border: 1px solid var(--petro-navy);
  border-radius: 5px;
}
.petro-mobile-nav-toggle__icon {
  width: 1.25rem;
  height: 1.25rem;
}
.petro-mobile-nav-toggle:focus-visible {
  outline: 2px solid var(--petro-orange);
  outline-offset: 2px;
}
@media (max-width: 639px) {
  .petro-export-hero > .relative.z-10.flex > .group:first-child {
    margin-top: 213px !important;
    padding: 23px !important;
    gap: 4px;
  }
  .petro-export-hero > .relative.z-10.flex > .group:first-child > :first-child, .petro-export-hero > .relative.z-10.flex > .group:first-child > .group:last-child {
    display: none;
  }
  .petro-export-hero > .relative.z-10.flex > .group:first-child > h1 {
    font-size: 25px;
    font-weight: 800;
    line-height: 1.2;
  }
  .petro-export-hero > .relative.z-10.flex > .group:first-child > :nth-child(3) {
    padding: 8px 5px 3px;
    color: var(--petro-orange) !important;
    font-size: 14px;
    line-height: 1.25;
    background: rgb(36 50 68 / 77%);
    border-radius: 10px 10px 0 0;
  }
  .petro-export-hero > .relative.z-10.flex > .group:first-child > .petro-export-bullet {
    gap: .3rem;
    padding: 0 0 .25rem;
    color: var(--petro-orange);
    font-size: 10px;
    line-height: 1.5;
    background: rgb(36 50 68 / 77%);
  }
  .petro-export-hero > .relative.z-10.flex > .group:first-child > .petro-export-bullet:nth-last-child(2) {
    padding-bottom: 4px;
    border-radius: 0 0 10px 10px;
  }
  .petro-export-hero .petro-export-bullet__icon {
    width: 10px;
    height: 10px;
    margin-top: 2px;
  }
}
.petro-header-nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 1.3rem;
  min-height: 2.75rem;
  margin: .7rem 0 0;
  padding: .15rem 0 0;
  list-style: none;
  color: var(--petro-orange);
  background: var(--petro-navy);
  border-radius: 7px 7px 0 0;
}
@media (min-width: 768px) {
  .petro-header-content > :nth-child(4) {
    width: calc(100% + 2rem);
    margin-inline: -1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .petro-header-main > .container {
    padding-bottom: .75rem;
  }
  .petro-header-bar {
    display: flex;
    align-items: center;
    gap: .25rem;
  }
  .petro-header-mobile-drawer {
    display: block;
    flex: 0 0 auto;
  }
  .petro-header-mobile-trigger {
    display: inline-flex;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
  }
  .petro-header-content {
    flex: 1;
  }
  .petro-header-content > :nth-child(4) {
    display: none;
  }
}
.petro-header-nav-list > li > :where(a, span), .petro-header-nav-item > .petro-header-nav-item__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-height: 2.25rem;
  padding: .35rem .7rem;
  color: var(--petro-orange);
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 5px;
  transition: background-color .2s, color .2s;
}
.petro-header-nav-item {
  position: relative;
}
.petro-header-nav-item__chevron {
  width: .85rem;
  height: .85rem;
  transition: transform .2s;
}
.petro-header-nav-item:hover > .petro-header-nav-item__trigger .petro-header-nav-item__chevron, .petro-header-nav-item:focus-within > .petro-header-nav-item__trigger .petro-header-nav-item__chevron {
  transform: rotate(180deg);
}
.petro-header-nav-list > li > :where(a, span):hover, .petro-header-nav-list > li > :where(a, span):focus-visible, .petro-header-nav-item > .petro-header-nav-item__trigger:hover, .petro-header-nav-item > .petro-header-nav-item__trigger:focus-visible {
  color: var(--petro-navy);
  background: var(--petro-blue);
}
.petro-header-nav-dropdown {
  position: absolute;
  z-index: 50;
  top: calc(100% - 1px);
  inset-inline-start: 0;
  display: grid;
  min-width: 14rem;
  margin: 0;
  padding: .35rem;
  list-style: none;
  visibility: hidden;
  opacity: 0;
  background: var(--petro-navy);
  border-radius: 0 0 7px 7px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
  transform: translateY(-.35rem);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.petro-header-nav-item:hover > .petro-header-nav-dropdown, .petro-header-nav-item:focus-within > .petro-header-nav-dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.petro-header-nav-dropdown .petro-header-nav-item > a {
  width: 100%;
  justify-content: flex-start;
  color: var(--petro-orange);
  text-align: start;
}
.petro-header-nav-dropdown .petro-header-nav-item > a:hover, .petro-header-nav-dropdown .petro-header-nav-item > a:focus-visible {
  color: var(--petro-navy);
  background: var(--petro-blue);
}
.petro-header-nav-dropdown .petro-header-nav-item__chevron {
  display: none;
}
.petro-export-image-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  color: var(--petro-orange);
  background: var(--petro-navy);
  border: 2px solid var(--petro-orange);
  border-radius: var(--petro-card-radius);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
  transition: transform .2s, box-shadow .2s;
}
.petro-export-image-card:hover {
  transform: translateY(-3px);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
}
.petro-export-image-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.petro-export-image-card__label {
  display: block;
  padding: .55rem .4rem .7rem;
  color: inherit;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}
.petro-export-image-card--light {
  color: var(--petro-navy);
  background: #fff;
}
.petro-export-image-card--light .petro-export-image-card__label {
  color: var(--petro-navy);
}
.petro-export-products {
  color: #243244;
  background: #DCE8FF;
}
.petro-export-products > .container {
  width: min(100%, 96rem);
  max-width: 96rem;
  margin-inline: auto;
  box-sizing: border-box;
}
.petro-export-products > .container > :where(h1, h2, h3, h4, h5, h6) {
  display: flex;
  width: 800px;
  max-width: 100%;
  min-height: 4.5rem;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0 auto 1.5rem;
  padding: 1rem 1.5rem;
  direction: inherit;
  color: #FAA63B !important;
  background: #243244 !important;
  border-radius: 7px;
}
.petro-export-products .group\/product-card {
  color: #DCE8FF;
  background: #243244;
}
.petro-export-products .group\/product-card > .group:first-child, .petro-export-products .group\/product-card > .group:first-child > :first-child {
  width: 100%;
  min-width: 0;
}
.petro-export-products .group\/product-card > .group:first-child > :first-child {
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
  background: #243244;
}
.petro-export-products .group\/product-card > .group:first-child > :first-child > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.petro-export-product-card-shell {
  display: flex;
  min-width: 0;
  cursor: pointer;
  flex-direction: column;
  overflow: hidden;
  color: #DCE8FF;
  background: #243244;
  border-radius: 7px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
}
.petro-export-product-card-shell > .group\/product-card {
  flex: 1 1 auto;
  border-radius: 0;
  box-shadow: none;
}
.petro-export-products .group\/product-card [data-typography='body'] {
  color: #FAA63B !important;
}
.petro-export-products .group\/product-card .text-on-background\/70, .petro-export-products .group\/product-card .text-primary-100 {
  color: #DCE8FF !important;
}
.petro-export-products .group\/product-card .group.absolute.inset-0, .petro-export-products .group\/product-card .group.static.flex.flex-row {
  display: none !important;
}
.petro-export-product-card__specs {
  color: #DCE8FF;
  background: #243244;
  line-height: 1.5;
}
.petro-ungilo-products-listing {
  color: #243244;
  background: #DCE8FF;
}
.petro-ungilo-products-listing .bg-surface.text-on-surface.box.group {
  color: #DCE8FF;
  background: #243244 !important;
  border-color: transparent;
  border-radius: 7px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
}
.petro-ungilo-products-listing .bg-surface.text-on-surface.box.group > .relative.aspect-square {
  background: #243244;
}
.petro-ungilo-products-listing .bg-surface.text-on-surface.box.group > .relative.z-10 {
  color: #DCE8FF;
  background: #243244;
}
.petro-ungilo-products-listing .bg-surface.text-on-surface.box.group .text-on-background {
  color: #FAA63B !important;
}
.petro-ungilo-products-listing .bg-surface.text-on-surface.box.group .text-on-background\/70, .petro-ungilo-products-listing .bg-surface.text-on-surface.box.group .text-on-surface {
  color: #DCE8FF !important;
}
.petro-ungilo-products-listing .bg-surface.text-on-surface.box.group .text-primary {
  color: #FAA63B !important;
}
.petro-ungilo-products-listing .bg-surface.text-on-surface.box.group .btn-primary {
  color: #243244 !important;
  background: #FAA63B !important;
  border-color: #FAA63B !important;
}
.petro-ungilo-products-listing .petro-product-card__full-link:focus-visible {
  outline: 2px solid #FAA63B;
  outline-offset: -2px;
}
.petro-ungilo-products-listing .filters label:has(input[type='checkbox']) {
  color: #243244;
  background: #DCE8FF;
  background-color: #DCE8FF;
}
.petro-ungilo-products-listing .filters :where( input[type='checkbox'], input[data-scope='slider'], input:not([type]) ) {
  color: #243244 !important;
  background: #DCE8FF !important;
  background-color: #DCE8FF !important;
}
.petro-ungilo-products-listing :where(select.sorting, select[name='limit']) {
  color: #243244 !important;
  background-color: #DCE8FF !important;
}
.petro-ungilo-products-listing :where(select.sorting, select[name='limit']) option {
  color: #243244 !important;
  background-color: #DCE8FF !important;
}
.petro-ungilo-products-listing__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 232px)) !important;
  justify-content: center;
}
.petro-ungilo-products-listing__grid .petro-product-card__grid-specs {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.petro-ungilo-products-listing__grid .petro-product-card__grid-specs > span {
  display: block;
  width: 100%;
}
@media (min-width: 640px) {
  .petro-ungilo-products-listing__grid > .petro-product-card--full-link {
    height: 400px;
  }
  .petro-ungilo-products-listing__grid > .petro-product-card--full-link > .petro-product-card__grid-content {
    box-sizing: border-box;
    height: 168px;
    min-height: 0;
    overflow: hidden;
    padding: 8px;
  }
  .petro-ungilo-products-listing__grid > .petro-product-card--full-link > .petro-product-card__grid-content > .text-on-background {
    margin-bottom: 2px;
    line-height: 20px;
  }
  .petro-ungilo-products-listing .petro-product-card__grid-specs {
    gap: 0 12px;
    margin-bottom: 2px;
    font-size: 11px;
    line-height: 14px;
  }
  .petro-ungilo-products-listing .petro-product-card__grid-actions {
    gap: 4px;
    padding-top: 4px;
  }
  .petro-ungilo-products-listing .petro-product-card__grid-actions > a {
    min-height: 28px;
    height: 28px;
  }
}
@media (max-width: 639px) {
  .petro-ungilo-products-listing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .petro-ungilo-products-listing__grid > .petro-product-card--full-link {
    height: calc((100vw - 80px) / 2 + 228px);
  }
  .petro-ungilo-products-listing__grid > .petro-product-card--full-link > .petro-product-card__grid-content {
    box-sizing: border-box;
    height: 228px;
    min-height: 0;
    overflow: hidden;
    padding: 8px;
  }
  .petro-ungilo-products-listing__grid > .petro-product-card--full-link > .petro-product-card__grid-content > .text-on-background {
    margin-bottom: 2px;
    line-height: 20px;
  }
  .petro-ungilo-products-listing .petro-product-card__grid-specs {
    gap: 0 8px;
    margin-bottom: 2px;
    font-size: 11px;
    line-height: 14px;
  }
  .petro-ungilo-products-listing .petro-product-card__grid-actions {
    gap: 4px;
    padding-top: 4px;
  }
  .petro-ungilo-products-listing .petro-product-card__grid-actions > a {
    min-height: 28px;
    height: 28px;
  }
}
html[lang='fa'] .petro-export-products .petro-export-product-card__specs {
  flex-direction: column;
  align-items: stretch;
}
html[lang='fa'] .petro-export-products .petro-export-product-card__specs > span {
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}
.petro-export-products__grid {
  padding-top: 1rem;
  margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 232px)) !important;
  justify-content: center;
}
@media (max-width: 639px) {
  .petro-export-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
.petro-export-standards__intro, .petro-export-standards__certificate {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
}
.petro-export-standards__certificate :where(h1, h2, h3, h4, h5, h6, span) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.petro-export-standards__intro, .petro-export-standards__cards {
  margin-inline: clamp(1rem, 4vw, 2rem);
}
.petro-export-standards__intro {
  color: var(--petro-navy);
  align-items: flex-start;
  background: transparent;
}
.petro-export-standards__intro > .btn {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  direction: inherit;
  text-align: center;
}
.petro-export-standards__intro > .btn, .petro-export-standards__intro > .btn > span {
  font-size: .65rem !important;
}
@media (min-width: 768px) {
  .petro-export-standards__intro > .btn {
    font-size: .9rem !important;
  }
  .petro-export-standards__intro > .btn > span {
    font-size: .9rem !important;
    font-weight: 700 !important;
  }
}
@media (max-width: 639px) {
  .petro-export-standards__intro, .petro-export-standards__cards {
    width: calc(100% - 2rem) !important;
    margin-inline: 1rem;
  }
  .petro-export-standards__intro > :where(h1, h2, h3, h4, h5, h6) {
    text-align: center !important;
  }
  .petro-export-standards__intro > .btn {
    align-self: center;
  }
}
.petro-export-bullet {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  color: var(--petro-orange);
  font-size: .95rem;
  line-height: 1.7;
}
.petro-export-bullet__icon {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .28rem;
  flex: 0 0 auto;
}
.petro-export-articles {
  padding: 4rem 1rem;
  color: #243244;
  background: #DCE8FF;
}
.petro-export-container {
  width: min(100%, 1120px);
  margin-inline: auto;
}
.petro-export-section-heading {
  display: flex;
  width: 800px;
  max-width: 100%;
  min-height: 4.5rem;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  padding: 1rem 1.5rem;
  direction: inherit;
  color: #FAA63B;
  text-align: center;
  background: #243244;
  border-radius: 7px;
}
.petro-export-section-heading :where(h2, h3) {
  margin: 0;
  color: #FAA63B;
  direction: inherit;
  font-size: var(--typography-font-size, clamp(1.4rem, 2.5vw, 2rem));
  line-height: 1.25;
  text-wrap: balance;
}
html[lang='en'] .petro-export-products > .container > :where(h1, h2, h3, h4, h5, h6), html[lang='en'] .petro-export-section-heading, html[lang='en'] .petro-export-section-heading > :where(h1, h2, h3, h4, h5, h6) {
  direction: ltr;
}
html[lang='fa'] .petro-export-products > .container > :where(h1, h2, h3, h4, h5, h6), html[lang='fa'] .petro-export-section-heading, html[lang='fa'] .petro-export-section-heading > :where(h1, h2, h3, h4, h5, h6) {
  direction: rtl;
}
.petro-export-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.petro-export-article-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #DCE8FF;
  background: #243244;
  border: 1px solid #243244;
  border-radius: var(--petro-card-radius);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
}
.petro-export-article-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.petro-export-article-card__body {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1rem;
}
.petro-export-article-card__title {
  margin: 0;
  color: #FAA63B;
  font-size: 1.05rem;
  font-weight: 700;
}
.petro-export-article-card__excerpt, .petro-export-article-card__excerpt :where(p, strong, span, a, li) {
  color: #DCE8FF;
  font-size: .85rem;
  line-height: 1.65;
}
.petro-export-article-card__excerpt p {
  margin: 0;
}
.petro-export-article-card__excerpt > :first-child {
  margin-top: 0;
}
.petro-export-article-card__excerpt > :last-child {
  margin-bottom: 0;
}
.petro-export-articles__empty {
  padding: 2rem;
  text-align: center;
  color: var(--petro-muted);
  border: 1px dashed rgb(36 50 68 / 25%);
}
.petro-blog-hero {
  --petro-blog-panel-height: 130px;
  display: grid;
  min-height: calc(var(--petro-blog-panel-height) * 2);
  place-items: center;
  padding: 1rem;
  background: #DCE8FF;
}
.petro-blog-hero__panel {
  display: grid;
  width: min(50%, 760px);
  height: var(--petro-blog-panel-height);
  place-items: center;
  padding: 1.5rem;
  background: #243244;
  border-radius: 7px;
}
.petro-blog-hero__title {
  margin: 0;
  color: #FAA63B;
  font-family: 'Dana', sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}
.petro-blog-articles {
  min-height: 40rem;
  padding: clamp(3rem, 6vw, 6rem) 1rem;
  color: #DCE8FF;
  background: #243244;
}
.petro-blog-articles__inner {
  width: min(60vw, 1120px);
  min-width: 1104px;
  margin-inline: auto;
}
.petro-blog-articles__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.25rem;
}
.petro-blog-article-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: .5rem;
  color: #DCE8FF;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 7px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
  transition: transform .2s ease;
}
.petro-blog-article-card:hover, .petro-blog-article-card:focus-visible {
  transform: translateY(-4px);
}
.petro-blog-article-card:focus-visible {
  outline: 2px solid #DCE8FF;
  outline-offset: .35rem;
}
.petro-blog-article-card img {
  display: block;
  width: 245px;
  height: 245px;
  max-width: 100%;
  margin-inline: auto;
  object-fit: cover;
  border-radius: 7px;
}
.petro-blog-article-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem .5rem .75rem;
}
.petro-blog-article-card__title {
  margin: 0;
  color: #FAA63B;
  font-family: 'Dana', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.45;
}
.petro-blog-article-card__excerpt {
  color: #DCE8FF;
  font-family: 'IRANSans', sans-serif;
  font-size: 0.75rem;
  line-height: 1.8;
}
.petro-blog-article-card__excerpt p {
  margin: 0;
}
.petro-blog-articles__load-more {
  display: block;
  margin: 3rem auto 0;
  padding: .85rem 2rem;
  color: #243244;
  font-family: 'Dana', sans-serif;
  font-size: 1rem;
  background: #FAA63B;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}
.petro-blog-articles__load-more:focus-visible {
  outline: 2px solid #DCE8FF;
  outline-offset: .35rem;
}
.petro-blog-articles__empty {
  margin: 0;
  color: #DCE8FF;
  font-family: 'IRANSans', sans-serif;
  font-size: 1rem;
  text-align: center;
}
html[lang='fa'] .petro-blog-hero__title, html[lang='fa'] .petro-blog-article-card__title, html[lang='fa'] .petro-blog-articles__load-more {
  font-family: 'Dana', sans-serif;
}
html[lang='fa'] .petro-blog-article-card__excerpt, html[lang='fa'] .petro-blog-articles__empty {
  font-family: 'IRANSans', sans-serif;
}
@media (max-width: 1199px) {
  .petro-blog-articles__inner {
    width: min(100%, 760px);
    min-width: 0;
  }
  .petro-blog-articles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .petro-blog-hero {
    --petro-blog-panel-height: 90px;
  }
  .petro-blog-hero__panel {
    width: calc(100% - 1rem);
    padding: 1rem;
  }
  .petro-blog-hero__title {
    min-width: 0;
    max-width: 100%;
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: -.5px;
    overflow-wrap: anywhere;
  }
  .petro-blog-articles {
    padding-inline: .75rem;
    padding-top: 1.5rem;
  }
  .petro-blog-articles__inner {
    width: min(100%, 26rem);
  }
  .petro-blog-articles__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .petro-blog-article-card {
    width: 80%;
    margin-inline: auto;
    overflow: hidden;
  }
  .petro-blog-article-card img {
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 1;
  }
  .petro-blog-article-card__body {
    gap: .45rem;
    padding: .6rem .5rem .45rem;
  }
  .petro-export-inquiry:has(.petro-export-inquiry__intro) > div {
    row-gap: 1.05rem !important;
  }
}
.petro-contact-breadcrumbs {
  background: #DCE8FF !important;
}
.petro-contact-section {
  background: #DCE8FF;
}
.petro-contact-info, .petro-contact-form-card {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
}
.petro-contact-info :where(h2, p) {
  color: #FAA63B !important;
}
.petro-contact-form-card {
  color: #FAA63B !important;
  background: #243244 !important;
}
.petro-contact-form-card :where(h1, h2, h3, h4, h5, h6, p, label) {
  color: #FAA63B !important;
}
.petro-contact-form-card :where(input, select, textarea) {
  color: #243244 !important;
  background: #DCE8FF !important;
  border: 0 !important;
  border-color: transparent !important;
}
.petro-contact-form-card :where(input, select, textarea)::placeholder {
  color: #243244 !important;
  opacity: .8;
}
.petro-contact-form-card select option {
  color: #243244;
  background: #DCE8FF;
}
.petro-contact-form-card .petro-contact-submit, .petro-contact-form-card .petro-contact-submit * {
  color: #243244 !important;
  background: #FAA63B !important;
}
:where(.petro-export-faq, .petro-export-landing-faq) {
  color: var(--petro-blue);
  background-color: #243244;
  scroll-margin-top: 5rem;
}
.petro-export-faq {
  position: relative;
  isolation: isolate;
}
.petro-export-faq::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('/themes/shop/petro-debut/images/export/gear-pattern-1.png') center / cover no-repeat;
  content: '';
  opacity: .05;
  mix-blend-mode: screen;
  pointer-events: none;
}
.petro-export-faq > div {
  position: relative;
  z-index: 1;
}
:where(.petro-export-faq, .petro-export-landing-faq) [data-block='heading'] :where(h1, h2, h3, h4, h5, h6), :where(.petro-export-faq, .petro-export-landing-faq) [data-block='subheading'], :where(.petro-export-faq, .petro-export-landing-faq) [data-block='subheading'] :where(p, a) {
  color: #FAA63B !important;
}
:where(.petro-export-faq, .petro-export-landing-faq) [data-block='heading'], :where(.petro-export-faq, .petro-export-landing-faq) > div > :nth-child(1), :where(.petro-export-faq, .petro-export-landing-faq) [data-block='subheading'], :where(.petro-export-faq, .petro-export-landing-faq) > div > :nth-child(2) {
  width: min(calc(100% - 2rem), 42rem) !important;
  margin-inline: auto;
}
:where(.petro-export-faq, .petro-export-landing-faq) [data-block='subheading'], :where(.petro-export-faq, .petro-export-landing-faq) > div > :nth-child(2) {
  line-height: 1.8;
}
:where(.petro-export-faq, .petro-export-landing-faq) a[href='#form'] {
  text-decoration: underline;
  text-underline-offset: .15em;
}
:where(.petro-export-faq, .petro-export-landing-faq) .accordion {
  width: min(100%, 58rem);
  padding: 1rem;
  background: transparent;
  border-radius: var(--petro-card-radius);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
}
:where(.petro-export-faq, .petro-export-landing-faq) .accordion-row {
  min-height: 0;
  margin-top: .75rem;
  border: 0;
  background: transparent;
}
:where(.petro-export-faq, .petro-export-landing-faq) .accordion-row:first-child {
  margin-top: 0;
}
:where(.petro-export-faq, .petro-export-landing-faq) .petro-accordion-question {
  min-height: 0;
  padding: .9rem 1rem;
  color: #FAA63B !important;
  background: transparent;
  border-radius: var(--petro-card-radius);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
  line-height: 1.7;
}
:where(.petro-export-faq, .petro-export-landing-faq) .petro-accordion-question[data-state='open'] {
  color: #DCE8FF !important;
}
:where(.petro-export-faq, .petro-export-landing-faq) .petro-accordion-question :where(span, svg) {
  color: inherit;
}
:where(.petro-export-faq, .petro-export-landing-faq) .petro-accordion-answer {
  min-height: 0;
  margin-top: 0;
  color: #DCE8FF !important;
  background: transparent;
  border-radius: var(--petro-card-radius);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
  opacity: 0;
  line-height: 1.8;
}
:where(.petro-export-faq, .petro-export-landing-faq) .petro-accordion-answer[data-state='open'] {
  margin-top: .75rem;
  grid-template-rows: minmax(0, 1fr);
  opacity: 1;
}
:where(.petro-export-faq, .petro-export-landing-faq) .petro-accordion-answer__inner {
  padding: .9rem 1rem;
}
:where(.petro-export-faq, .petro-export-landing-faq) .petro-accordion-answer :where(div, p, span) {
  color: #DCE8FF !important;
}
.petro-export-landing-faq [data-block='subheading'] {
  display: none !important;
}
.petro-export-faq .petro-accordion-answer, .petro-export-landing-faq .petro-accordion-answer {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  overflow: hidden;
  contain: paint;
  will-change: grid-template-rows, margin-top, opacity;
  transition-property: grid-template-rows, margin-top, opacity !important;
  transition-duration: 500ms !important;
}
.petro-export-faq .petro-accordion-answer[data-state='open'], .petro-export-landing-faq .petro-accordion-answer[data-state='open'] {
  grid-template-rows: minmax(0, 1fr);
}
.petro-export-faq .petro-accordion-answer__inner, .petro-export-landing-faq .petro-accordion-answer__inner {
  min-height: 0;
  overflow: hidden;
}
.petro-export-faq .petro-accordion-answer[aria-hidden='true'], .petro-export-landing-faq .petro-accordion-answer[aria-hidden='true'] {
  pointer-events: none;
}
.petro-export-faq .petro-accordion-question .transition-transform, .petro-export-landing-faq .petro-accordion-question .transition-transform {
  transition-duration: 300ms !important;
}
@media (max-width: 1199px) {
  :where(.petro-export-faq, .petro-export-landing-faq) .petro-accordion-question {
    font-size: clamp(.7rem, 1.4vw, 1rem);
  }
  :where(.petro-export-faq, .petro-export-landing-faq) .petro-accordion-question > :first-child, :where(.petro-export-faq, .petro-export-landing-faq) .petro-accordion-question__label {
    min-width: 0;
    white-space: nowrap;
  }
}
@media (max-width: 1199px) {
  html[lang='fa'] :where(.petro-export-faq, .petro-export-landing-faq) .petro-accordion-question {
    font-size: calc(clamp(.7rem, 1.4vw, 1rem) * 1.25) !important;
  }
}
@media (min-width: 1200px) {
  html[lang='fa'] :where(.petro-export-faq, .petro-export-landing-faq) .petro-accordion-question {
    font-size: 125% !important;
  }
}
.petro-export-inquiry {
  color: #243244;
  background: #DCE8FF;
  scroll-margin-top: 5rem;
}
.petro-export-inquiry__intro {
  width: var(--width, 42%) !important;
  min-width: 0;
  color: #243244;
}
.petro-export-inquiry__intro > :where(h1, h2, h3, h4, h5, h6) {
  font-size: calc(var(--typography-font-size, 2.25rem) * .8) !important;
}
.petro-export-inquiry__intro :where(h1, h2, h3, h4, h5, h6, p) {
  color: #243244;
  text-align: start;
  white-space: pre-line;
}
html[lang='en'] .petro-export-inquiry__intro h2 {
  font-size: 28px;
}
.petro-export-inquiry__form {
  min-width: 0;
  flex: 1 1 0%;
  padding: clamp(1rem, 3vw, 2rem);
  color: var(--petro-inquiry-text-color, #DCE8FF);
  background: #243244;
  border: none;
  border-radius: 20px;
}
.petro-export-inquiry__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.petro-export-inquiry__field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .45rem;
}
.petro-export-inquiry__field label {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  color: var(--petro-inquiry-label-color, #FAA63B);
  font-size: .85rem;
  font-weight: 600;
}
.petro-export-inquiry__field label b {
  color: inherit;
}
.petro-export-inquiry__field input, .petro-export-inquiry__field select, .petro-export-inquiry__field textarea {
  width: 100%;
  padding: .7rem .8rem;
  color: #243244;
  background: #DCE8FF;
  border: 1px solid color-mix(in srgb, #243244 45%, transparent);
  border-radius: 5px;
}
.petro-export-inquiry__field input::placeholder, .petro-export-inquiry__field textarea::placeholder {
  color: #243244;
  opacity: .7;
}
.petro-export-inquiry__field select option {
  color: #243244;
  background: #DCE8FF;
}
.petro-export-inquiry__field small {
  display: block;
  color: var(--petro-inquiry-text-color, #DCE8FF);
  font-size: .75rem;
  font-weight: 500;
}
.petro-export-inquiry__message {
  grid-column: 1 / -1;
}
.petro-export-inquiry__captcha {
  margin-top: 1rem;
  color: var(--petro-inquiry-text-color, #DCE8FF);
}
.petro-export-inquiry__submit {
  display: block;
  margin: 1.25rem auto 0;
  padding: .8rem 2rem;
  color: #243244;
  font-weight: 700;
  background: #FAA63B;
  border: none;
  border-radius: 5px;
}
.petro-export-production-landing, .petro-export-inquiry:has(.petro-production-landing__form) {
  position: relative;
  isolation: isolate;
  color: #DCE8FF;
  background-color: #243244;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  scroll-margin-top: 5rem;
}
.petro-export-inquiry:has(.petro-production-landing__form)::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url('/themes/shop/petro-debut/images/export/gear-pattern-1.png') center / cover no-repeat;
  content: '';
  opacity: 0.150;
  filter: brightness(0%) contrast(100%) saturate(0%);
  mix-blend-mode: color-burn;
  pointer-events: none;
}
.petro-export-inquiry:has(.petro-production-landing__form) > .absolute {
  z-index: 0 !important;
}
.petro-export-inquiry:has(.petro-production-landing__form) > div {
  width: min(1320px, calc(100% - 2rem));
  max-width: 1320px;
  margin-inline: auto;
  align-items: stretch !important;
}
.petro-production-landing__panel {
  align-self: stretch;
  min-width: 0;
  color: #DCE8FF;
  background: transparent;
  border: none !important;
  border-radius: 7px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
}
.petro-production-landing__intro :where(h1, h2, h3, h4, h5, h6, p) {
  color: #FFFFFF;
  text-align: start;
}
.petro-production-landing__intro :where(h1, h2, h3, h4, h5, h6) {
  color: #FAA63B;
  font-size: 33px !important;
  font-weight: 800;
  line-height: 1.4;
}
.petro-production-landing__form {
  color: #DCE8FF;
}
.petro-production-landing__form > :where(h1, h2, h3, h4, h5, h6, p) {
  color: #FAA63B;
  font-size: 22px !important;
  font-weight: 800;
  line-height: 1.6;
  text-align: start;
}
html[lang='en'] .petro-production-landing__intro :where(h1, h2, h3, h4, h5, h6) {
  font-size: 24.75px !important;
}
html[lang='en'] .petro-production-landing__form > :where(h1, h2, h3, h4, h5, h6, p) {
  font-size: 16.5px !important;
}
html[lang='en'] .petro-production-landing__form .petro-export-inquiry__field label {
  font-size: .75rem;
  line-height: 1.25;
  white-space: nowrap;
}
.petro-production-landing__form .petro-export-inquiry__form {
  padding: 0;
  color: #020101;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.petro-production-landing__form .petro-export-inquiry__fields {
  gap: .75rem;
}
.petro-production-landing__form .petro-export-inquiry__field label {
  color: #FAA63B;
}
.petro-production-landing__form .petro-export-inquiry__field input, .petro-production-landing__form .petro-export-inquiry__field select, .petro-production-landing__form .petro-export-inquiry__field textarea {
  color: #020101;
  background: #DCE8FF;
  background-color: #DCE8FF;
  border: 0;
  border-radius: 5px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
}
.petro-production-landing__form .petro-export-inquiry__field input::placeholder, .petro-production-landing__form .petro-export-inquiry__field textarea::placeholder {
  color: #020101;
  opacity: .7;
}
.petro-production-landing__form .petro-export-inquiry__field select option {
  color: #020101;
  background: #DCE8FF;
}
.petro-production-landing__form .petro-export-inquiry__submit {
  color: #243244;
}
.petro-export-landing-grease-grid {
  color: #DCE8FF;
  background: #243244;
}
.petro-export-landing-grease-grid .group[data-block='grease-grid-heading'] h2 {
  color: #FAA63B;
  text-align: center;
}
.petro-footer-shell {
  position: relative;
  overflow: hidden;
  color: var(--petro-navy);
  background: var(--petro-blue);
}
.petro-footer-shell::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('/themes/shop/petro-debut/images/export/gear-pattern-1.png') center / cover no-repeat;
  content: '';
  opacity: .05;
  pointer-events: none;
}
.petro-footer-content {
  position: relative;
  z-index: 1;
  width: min(100%, 1243px);
  max-width: 1243px;
  margin-inline: auto;
  padding-top: 1rem;
  padding-bottom: 0;
  text-align: center;
}
.petro-footer-content > :where(.petro-footer-intro, [data-block='footer-intro']) {
  color: var(--petro-orange);
  background: var(--petro-navy);
  border-radius: 0 0 107px 107px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
}
.petro-footer-content > :where(.petro-footer-intro, [data-block="footer-intro"]) {
  padding-block: .8rem .8rem !important;
}
.petro-footer-content > :where(.petro-footer-intro, [data-block='footer-intro']) :where(h1, h2, h3, p, span) {
  color: var(--petro-orange);
  font-size: clamp(2.5rem, 5vw, 3.125rem);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.petro-footer-content > :where(.petro-footer-panels, [data-block='footer-panels']) {
  align-items: stretch;
  color: var(--petro-navy);
}
.petro-footer-content > :where(.petro-footer-panels, [data-block='footer-panels']) > :where(.petro-footer-panel, [data-block^='footer-panel-']) {
  min-height: 15rem;
  padding: 1.5rem 1.25rem;
  color: var(--petro-navy);
  background: transparent;
  border-radius: 7px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
  text-align: center;
}
.petro-footer-content :where(.petro-footer-panel-links, [data-block='footer-panel-links']), .petro-footer-content :where(.petro-footer-panel-contact, [data-block='footer-panel-contact']) {
  gap: .5rem;
}
.petro-footer-content :where(.petro-footer-panel, [data-block^='footer-panel-']) h1, .petro-footer-content :where(.petro-footer-panel, [data-block^='footer-panel-']) h2, .petro-footer-content :where(.petro-footer-panel, [data-block^='footer-panel-']) :where(h1, h2, h3, h4, p, a, span) {
  color: var(--petro-navy);
}
.petro-footer-content :where(.petro-footer-panel, [data-block^='footer-panel-']) :where(h3, h4) {
  margin: 0 0 .65rem;
  color: var(--petro-navy);
  font-size: 1rem;
  font-weight: 900;
  text-align: center;
}
.petro-footer-content :where(.petro-footer-panel, [data-block^='footer-panel-']) > [data-block^='footer-link-'] {
  width: 100%;
}
.petro-footer-link {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .5rem;
  width: min(100%, 20rem);
  max-width: 100%;
  margin-inline: auto;
  padding-block: 0;
  color: var(--petro-navy);
  font-size: 1rem;
  line-height: 1.4;
  text-align: start;
  text-decoration: none;
  direction: inherit;
}
.petro-footer-content .petro-footer-link > h4 {
  margin: 0;
}
.petro-footer-link > span:last-child, .petro-footer-link > h4 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: start;
}
.petro-footer-link:hover {
  color: var(--petro-navy);
  text-decoration: underline;
}
.petro-footer-link[aria-disabled='true'] {
  cursor: default;
  opacity: .85;
}
.petro-footer-content .petro-footer-link__icon {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .22rem;
  flex: 0 0 auto;
  color: var(--petro-orange);
}
.petro-footer-link__icon svg {
  width: 100%;
  height: 100%;
}
.petro-footer-content :where(.petro-footer-panel-brand, [data-block='footer-panel-brand']) > :has(> img[src*='petroravankar-old-logo']) {
  width: min(100%, 18rem) !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  border-radius: 0 !important;
}
.petro-footer-content :where(.petro-footer-panel-brand, [data-block='footer-panel-brand']) img[src*='petroravankar-old-logo'] {
  display: block;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain;
  border: 0;
  border-radius: 0 !important;
}
.petro-footer-content > :where(.petro-footer-ribbons, [data-block='footer-ribbons']) {
  align-items: stretch;
  width: 100vw;
  max-width: none;
  margin-inline-start: calc(50% - 50vw);
  padding-top: .6rem;
}
.petro-footer-content > :where(.petro-footer-ribbons, [data-block='footer-ribbons']) > :where(.petro-footer-ribbon-brand, [data-block='footer-ribbon-brand']), .petro-footer-content > :where(.petro-footer-ribbons, [data-block='footer-ribbons']) > :where(.petro-footer-ribbon-export, [data-block='footer-ribbon-export']) {
  min-height: 0;
  padding: .4rem .75rem;
  color: var(--petro-navy);
  background: var(--petro-orange);
  border-radius: 0;
  border-start-end-radius: 100px;
}
.petro-footer-content > :where(.petro-footer-ribbons, [data-block='footer-ribbons']) > :where(.petro-footer-ribbon-export, [data-block='footer-ribbon-export']) {
  border-radius: 0;
  border-start-start-radius: 100px;
}
.petro-footer-content > :where(.petro-footer-ribbons, [data-block='footer-ribbons']) > :where(.petro-footer-ribbon-copyright, [data-block='footer-ribbon-copyright']) {
  min-height: 0;
  padding: .4rem .75rem;
  color: var(--petro-orange);
  background: var(--petro-navy);
  border-radius: 0;
  border-start-start-radius: 100px;
  border-start-end-radius: 100px;
}
.petro-footer-content > :where(.petro-footer-ribbons, [data-block='footer-ribbons']) > :where(.petro-footer-ribbon-brand, [data-block='footer-ribbon-brand']), .petro-footer-content > :where(.petro-footer-ribbons, [data-block='footer-ribbons']) > :where(.petro-footer-ribbon-export, [data-block='footer-ribbon-export']) {
  color: var(--petro-navy);
}
.petro-footer-content > :where(.petro-footer-ribbons, [data-block='footer-ribbons']) > :where(.petro-footer-ribbon-copyright, [data-block='footer-ribbon-copyright']) {
  color: var(--petro-orange);
}
.petro-footer-content :where(.petro-footer-ribbon, [data-block^='footer-ribbon-']) p, .petro-footer-content :where(.petro-footer-ribbon, [data-block^='footer-ribbon-']) > :where(h1, h2, h3, h4, h5, h6, p, div, span) {
  color: inherit !important;
  text-align: center;
}
main > header[data-block='main-header'] {
  position: sticky;
  top: 0;
  z-index: 40;
  isolation: isolate;
  pointer-events: auto;
}
@media (min-width: 1024px) {
  .petro-header-shell .petro-logo-tagline {
    display: inline-block;
  }
}
@media (min-width: 768px) {
  .petro-footer-content > :where(.petro-footer-ribbons, [data-block='footer-ribbons']) {
    grid-template-columns: repeat(3, 30%) !important;
    column-gap: 5% !important;
    row-gap: 0;
  }
}
@media (max-width: 767px) {
  .petro-header-contact__inner {
    justify-content: center;
    gap: .65rem;
    font-size: .68rem;
  }
  .petro-header-contact__address {
    display: none !important;
  }
  .petro-header-main > .container {
    padding-top: .4rem;
    padding-bottom: .5rem;
  }
  .petro-header-bar {
    display: flex;
    align-items: center;
    gap: .25rem;
  }
  .petro-header-mobile-drawer {
    display: block;
    flex: 0 0 auto;
  }
  .petro-header-content {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .petro-header-content > :nth-child(1) {
    order: 1;
    width: min(10rem, 100%);
    flex: 0 1 auto;
  }
  .petro-header-content > :nth-child(3) {
    order: 2;
    min-width: 0;
    flex: 0 1 auto;
  }
  .petro-header-content > :nth-child(2) {
    order: 3;
    width: 100%;
  }
  .petro-header-content > :nth-child(4) {
    display: none;
  }
  .petro-header-content > :nth-child(2) > :first-child, .petro-header-content > :nth-child(2) [data-block='header-tagline'], .petro-header-content > :nth-child(2) #search-form, .petro-header-content .petro-logo-tagline {
    display: none !important;
  }
  .petro-header-mobile-trigger {
    display: inline-flex;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
  }
  .petro-header-mobile-trigger svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  .petro-header-nav-list {
    display: none;
  }
  .petro-export-articles__grid {
    grid-template-columns: 1fr;
  }
  :where(.petro-export-faq, .petro-export-landing-faq) .accordion {
    padding: .75rem;
  }
  :where(.petro-export-faq, .petro-export-landing-faq) .petro-accordion-question {
    padding-inline: .75rem;
  }
  :where(.petro-export-faq, .petro-export-landing-faq) .petro-accordion-answer__inner {
    padding-inline: .75rem;
  }
  .petro-export-faq > div {
    gap: 1rem !important;
  }
  .petro-export-landing-faq > div {
    gap: 1rem !important;
    padding-block: 1.5rem !important;
  }
  .petro-export-inquiry__fields {
    grid-template-columns: 1fr;
  }
  .petro-export-inquiry__message {
    grid-column: auto;
  }
  .petro-production-landing__panel {
    width: 100% !important;
  }
  .petro-production-landing__intro {
    gap: .5rem !important;
  }
  .petro-production-landing__intro :where(h1, h2, h3, h4, h5, h6) {
    margin-bottom: 0 !important;
    font-size: 25px !important;
  }
  .petro-production-landing__intro :where(h1, h2, h3, h4, h5, h6, p), .petro-production-landing__form > :where(h1, h2, h3, h4, h5, h6, p) {
    text-align: center;
  }
  .petro-export-inquiry__intro {
    width: calc(100% - 2rem) !important;
    gap: .5rem !important;
    margin-inline: auto;
    padding-block: .25rem !important;
    text-align: center;
  }
  .petro-export-inquiry__intro :where(h1, h2, h3, h4, h5, h6) {
    margin-block: 0 !important;
  }
  .petro-export-inquiry__intro :where(h1, h2, h3, h4, h5, h6, p) {
    text-align: center;
  }
  .petro-footer-content > :where(.petro-footer-panels, [data-block='footer-panels']) {
    padding: 1.25rem 0;
  }
  .petro-footer-content > :where(.petro-footer-ribbons, [data-block='footer-ribbons']) {
    row-gap: .75rem !important;
  }
  .petro-footer-content > :where(.petro-footer-ribbons, [data-block='footer-ribbons']) > :where(.petro-footer-ribbon-brand, [data-block='footer-ribbon-brand']) {
    border-radius: 0;
    border-start-end-radius: 100px;
    border-end-end-radius: 100px;
  }
  .petro-footer-content > :where(.petro-footer-ribbons, [data-block='footer-ribbons']) > :where(.petro-footer-ribbon-copyright, [data-block='footer-ribbon-copyright']) {
    width: calc(100% - 2rem);
    margin-inline: auto;
    border-radius: 100px;
  }
  .petro-footer-content > :where(.petro-footer-ribbons, [data-block='footer-ribbons']) > :where(.petro-footer-ribbon-export, [data-block='footer-ribbon-export']) {
    border-radius: 0;
    border-start-start-radius: 100px;
    border-end-start-radius: 100px;
  }
  html[lang='fa'] .petro-footer-content > :where(.petro-footer-ribbons, [data-block='footer-ribbons']) > :where(.petro-footer-ribbon-brand, [data-block='footer-ribbon-brand']) {
    margin-left: .25rem;
  }
  html[lang='fa'] .petro-footer-content > :where(.petro-footer-ribbons, [data-block='footer-ribbons']) > :where(.petro-footer-ribbon-copyright, [data-block='footer-ribbon-copyright']) {
    width: calc(106% - 2.2rem);
    padding: .8rem;
  }
  html[lang='fa'] .petro-footer-content > :where(.petro-footer-ribbons, [data-block='footer-ribbons']) > :where(.petro-footer-ribbon-export, [data-block='footer-ribbon-export']) {
    margin-right: .25rem;
  }
  html[lang='en'] .petro-footer-content > :where(.petro-footer-ribbons, [data-block='footer-ribbons']) > :where(.petro-footer-ribbon-brand, [data-block='footer-ribbon-brand']) {
    margin-right: .25rem;
  }
  html[lang='en'] .petro-footer-content > :where(.petro-footer-ribbons, [data-block='footer-ribbons']) > :where(.petro-footer-ribbon-copyright, [data-block='footer-ribbon-copyright']) {
    width: calc(106% - 2.2rem);
  }
  html[lang='en'] .petro-footer-content > :where(.petro-footer-ribbons, [data-block='footer-ribbons']) > :where(.petro-footer-ribbon-export, [data-block='footer-ribbon-export']) {
    margin-left: .25rem;
  }
}
.petro-export-child-landing {
  color: #243244;
  background: #DCE8FF;
  scroll-margin-top: 5rem;
}
.petro-export-child-landing > div, .petro-export-inquiry:has([data-block='child-inquiry-shell']) > div {
  box-sizing: border-box;
  padding-inline: clamp(1rem, 3vw, 2rem);
}
.petro-export-child-landing [data-block='child-landing-heading'] {
  color: #FAA63B;
  background: #243244;
  border-radius: 6px;
  box-shadow: none !important;
}
.petro-export-child-landing [data-block='child-landing-heading'] h1, .petro-export-child-landing h1[data-typography='heading-1'] {
  color: #FAA63B;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
html[lang='fa'] .petro-export-child-landing [data-block='child-landing-heading'] h1, html[lang='fa'] .petro-export-child-landing h1[data-typography='heading-1'] {
  font-size: 2rem;
}
.petro-export-child-landing [data-block='child-landing-panels'], .petro-export-child-landing > div > div:nth-of-type(2) {
  width: min(100%, 1320px);
  max-width: 1320px;
  overflow: visible;
  border: 0 !important;
  border-radius: 20px;
}
.petro-export-child-landing [data-block='child-landing-image'], .petro-export-child-landing [data-block='child-landing-copy'], .petro-export-child-landing > div > div:nth-of-type(2) > div:nth-of-type(1), .petro-export-child-landing > div > div:nth-of-type(2) > div:nth-of-type(2) {
  min-width: 0;
  min-height: 100%;
}
.petro-export-child-landing [data-block='child-landing-image'], .petro-export-child-landing > div > div:nth-of-type(2) > div:nth-of-type(1) {
  overflow: hidden;
  background: #243244;
  border: 0 !important;
  border-radius: 20px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
}
.petro-export-child-landing [data-block='child-landing-image'] img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.petro-export-child-landing [data-block='child-landing-copy'], .petro-export-child-landing > div > div:nth-of-type(2) > div:nth-of-type(2) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.75rem 1.5rem;
  color: #FFFFFF;
  background: #243244;
  border: 2px solid #FAA63B !important;
  border-radius: 20px;
  box-shadow: none !important;
}
.petro-export-child-landing [data-block='child-landing-copy'] :where(p, strong, a) {
  color: #FFFFFF;
}
.petro-export-child-landing [data-block='child-landing-copy'] strong {
  color: #FAA63B;
}
.petro-export-inquiry:has([data-block='child-inquiry-shell']) {
  color: #243244;
  background: #DCE8FF;
  scroll-margin-top: 5rem;
}
.petro-export-inquiry:has([data-block='child-inquiry-shell']) :where([data-block='child-inquiry-heading'], [data-block='child-inquiry-heading'] h2) {
  color: #243244;
  text-align: center;
}
.petro-export-inquiry:has([data-block='child-inquiry-shell']) [data-block='child-inquiry-shell'], .petro-export-inquiry:has(.petro-export-inquiry__form) > div > div:nth-of-type(1) {
  width: min(100%, 1320px);
  max-width: 1320px;
  overflow: visible;
  border: 0 !important;
  border-radius: 20px;
}
.petro-export-inquiry:has([data-block='child-inquiry-shell']) [data-block='child-inquiry-benefits'], .petro-export-inquiry:has(.petro-export-inquiry__form) > div > div:nth-of-type(1) > div:nth-of-type(1) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  padding: 1.75rem 1.5rem;
  color: #DCE8FF;
  background: #243244;
  border: 2px solid #FAA63B !important;
  border-radius: 20px;
  box-shadow: none !important;
}
.petro-export-inquiry:has(.petro-export-inquiry__form):has(.petro-production-landing__intro) > div > div:nth-of-type(1) > div:nth-of-type(1) {
  border: none !important;
  background: transparent !important;
}
.petro-export-inquiry:has([data-block='child-inquiry-shell']) [data-block^='child-inquiry-benefit-'] {
  color: #DCE8FF;
}
.petro-export-inquiry:has([data-block='child-inquiry-shell']) [data-block^='child-inquiry-benefit-'] .petro-export-bullet__icon {
  color: #FAA63B;
}
.petro-export-inquiry:has([data-block='child-inquiry-shell']) [data-block='child-inquiry-form-panel'], .petro-export-inquiry:has(.petro-export-inquiry__form) > div > div:nth-of-type(1) > div:nth-of-type(2) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  padding: .75rem;
  color: #243244;
  border: 0 !important;
  border-radius: 20px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
}
.petro-export-inquiry:has([data-block='child-inquiry-shell']) .petro-export-inquiry__form {
  padding: 2rem;
  color: #243244;
  background: transparent;
  border-radius: 0;
}
.petro-export-inquiry:has([data-block='child-inquiry-shell']) .petro-export-inquiry__field label, .petro-export-inquiry:has([data-block='child-inquiry-shell']) .petro-export-inquiry__field label b {
  color: #243244;
}
.petro-export-inquiry:has([data-block='child-inquiry-shell']) .petro-export-inquiry__field :where(input, select, textarea) {
  color: #243244;
  background: #E6E9F5;
  border: 0;
}
.petro-export-inquiry:has([data-block='child-inquiry-shell']) .petro-export-inquiry__field :where(input, select, textarea)::placeholder {
  color: #243244;
  opacity: .7;
}
.petro-export-inquiry:has([data-block='child-inquiry-shell']) .petro-export-inquiry__field select option {
  color: #243244;
  background: #E6E9F5;
}
.petro-export-inquiry:has([data-block='child-inquiry-shell']) .petro-export-inquiry__submit {
  color: #243244;
  background: #FAA63B;
}
.petro-export-child-landing > div > div:nth-of-type(2) > div:nth-of-type(2) :where(p, strong, a) {
  color: #FFFFFF;
}
.petro-export-child-landing > div > div:nth-of-type(2) > div:nth-of-type(2) strong {
  color: #FAA63B;
}
.petro-export-child-inquiry {
  color: #243244;
  background: #DCE8FF;
  scroll-margin-top: 5rem;
}
.petro-export-child-inquiry > div {
  box-sizing: border-box;
  padding-inline: clamp(1rem, 3vw, 2rem);
}
.petro-export-child-inquiry > div > div:nth-of-type(2) {
  width: min(100%, 1320px);
  max-width: 1320px;
  overflow: visible;
  border: 0 !important;
  border-radius: 20px;
}
.petro-export-child-inquiry > div > div:nth-of-type(2) > div:nth-of-type(1) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  padding: 1.75rem 1.5rem;
  color: #DCE8FF;
  background: #243244;
  border: 2px solid #FAA63B !important;
  border-radius: 20px;
  box-shadow: none !important;
}
.petro-export-child-inquiry > div > div:nth-of-type(2) > div:nth-of-type(1) .petro-export-bullet {
  color: #DCE8FF;
}
.petro-export-child-inquiry > div > div:nth-of-type(2) > div:nth-of-type(1) .petro-export-bullet__icon {
  color: #FAA63B;
}
.petro-export-child-inquiry > div > div:nth-of-type(2) > div:nth-of-type(2) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  padding: .75rem;
  color: #243244;
  border: 0 !important;
  border-radius: 20px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
}
.petro-export-child-inquiry .petro-export-inquiry__form {
  padding: 2rem;
  color: #243244;
  background: transparent;
  border-radius: 0;
}
.petro-export-child-inquiry .petro-export-inquiry__field label, .petro-export-child-inquiry .petro-export-inquiry__field label b {
  color: #243244;
}
.petro-export-child-inquiry .petro-export-inquiry__field :where(input, select, textarea) {
  color: #243244;
  background-color: #DCE8FF !important;
  border: 0;
}
.petro-export-child-inquiry .petro-export-inquiry__field :where(input, select, textarea)::placeholder {
  color: #243244;
  opacity: .7;
}
.petro-export-child-inquiry .petro-export-inquiry__field select option {
  color: #243244;
  background-color: #DCE8FF !important;
}
.petro-export-child-inquiry .petro-export-inquiry__submit {
  color: #243244;
  background: #FAA63B;
}
#form.petro-export-inquiry:not(:has([data-block='child-inquiry-shell'])):not(:has(.petro-production-landing__intro)) .petro-export-inquiry__intro > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#form.petro-export-inquiry:not(:has([data-block='child-inquiry-shell'])):not(:has(.petro-production-landing__intro)) .petro-export-inquiry__intro :where(h1, h2, h3, h4, h5, h6, p) {
  text-align: center !important;
}
#form.petro-export-inquiry:not(:has([data-block='child-inquiry-shell'])):not(:has(.petro-production-landing__intro)) .petro-export-inquiry__field select {
  color: #243244 !important;
  background: #DCE8FF !important;
  background-color: #DCE8FF !important;
  color-scheme: light;
}
#form.petro-export-inquiry:not(:has([data-block='child-inquiry-shell'])):not(:has(.petro-production-landing__intro)) .petro-export-inquiry__field select option {
  color: #243244 !important;
  background: #DCE8FF !important;
  background-color: #DCE8FF !important;
}
.petro-landing-content {
  color: #243244;
  background: #DCE8FF;
  padding: clamp(2rem, 5vw, 4rem) 1rem;
}
.petro-landing-content__inner {
  width: min(100%, 1720px);
  max-width: 1720px;
  margin-inline: auto;
}
.petro-landing-content h2 {
  margin: 0 0 1.5rem;
  color: #243244;
  font-size: clamp(1.5rem, 3vw, 1.8rem);
  font-weight: 700;
  text-align: center;
}
.petro-landing-content__rich-text {
  width: min(100%, 83.2rem);
  max-width: min(100%, 83.2rem) !important;
  margin-inline: auto;
  padding: 1.5rem;
  color: #243244;
  background: #DCE8FF;
  border: 0;
  border-radius: 7px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
}
.petro-landing-content__rich-text :where(h1, h2, h3, h4, h5, h6, p, li, a) {
  color: #243244;
}
.petro-product-information {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  color: #243244;
  background: #DCE8FF !important;
}
.petro-product-information > form > .container {
  width: min(100%, 1280px);
  max-width: 1280px;
  margin-inline: auto;
}
.petro-product-details table {
  border-collapse: collapse;
}
.petro-product-details > .w-full > div:has(> table) {
  border: 2px solid #243244 !important;
}
.petro-product-details table tbody tr + tr {
  border-top: 1px solid #243244 !important;
}
.petro-product-details > .w-full:has(table) ~ .flex.items-center.justify-center.self-stretch.p-0 {
  display: none !important;
}
@media (max-width: 1199px) {
  .petro-product-header-box [data-typography='heading-1'] {
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    line-height: 1.1 !important;
  }
  .petro-product-header-box nav {
    font-size: clamp(.7rem, 1.1vw, .75rem) !important;
    line-height: 1.5 !important;
  }
}
@media (max-width: 767px) {
  .petro-product-header-box {
    zoom: .85;
  }
}
.petro-ungilo-products-hero {
  width: 100%;
  padding: clamp(2.5rem, 6vw, 5rem) 1rem;
  color: #DCE8FF;
  background: #243244;
}
.petro-ungilo-products-hero__inner {
  width: min(calc(100% - 3rem), 1230px);
  margin-inline: auto;
}
.petro-ungilo-products-hero h1 {
  margin: 0 0 clamp(1.75rem, 4vw, 3.5rem);
  color: #FAA63B;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.2;
  text-align: start;
}
.petro-ungilo-products-hero__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 600px));
  gap: 30px;
  align-items: start;
  justify-items: center;
}
.petro-ungilo-products-hero__card {
  display: flex;
  width: 100%;
  max-width: 600px;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: #DCE8FF;
  text-align: center;
  text-decoration: none;
}
.petro-ungilo-products-hero__card img {
  display: block;
  width: min(100%, 600px);
  height: auto;
  aspect-ratio: 1024 / 683;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
  transition: transform .2s ease, box-shadow .2s ease;
}
.petro-ungilo-products-hero__card span {
  color: #FAA63B;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  font-weight: 700;
  line-height: 1.6;
}
.petro-ungilo-products-hero__card:hover img, .petro-ungilo-products-hero__card:focus-visible img {
  transform: translateY(-3px);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.89);
}
.petro-ungilo-products-hero__card:focus-visible {
  outline: 2px solid #DCE8FF;
  outline-offset: .5rem;
}
html[lang='fa'] .petro-ungilo-products-hero, html[lang='fa'] .petro-ungilo-products-hero__card, html[lang='fa'] .petro-landing-content {
  font-family: 'IRANSans', sans-serif;
}
html[lang='fa'] .petro-ungilo-products-hero h1, html[lang='fa'] .petro-landing-content :where(h1, h2, h3, h4, h5, h6) {
  font-family: 'Dana', sans-serif;
}
@media (max-width: 767px) {
  .petro-ungilo-products-hero {
    padding-inline: .75rem;
  }
  .petro-ungilo-products-hero__cards {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .petro-ungilo-products-hero__card {
    max-width: 600px;
  }
  html[lang='en'] .petro-export-child-landing [data-block='child-landing-heading'] h1, html[lang='en'] .petro-export-child-landing h1[data-typography='heading-1'], html[lang='fa'] .petro-export-child-landing [data-block='child-landing-heading'] h1, html[lang='fa'] .petro-export-child-landing h1[data-typography='heading-1'] {
    font-size: 1.8rem;
  }
  .petro-export-inquiry:has([data-block='child-inquiry-shell']) :where([data-block='child-inquiry-heading'], [data-block='child-inquiry-heading'] h2), .petro-export-inquiry:has(.petro-export-inquiry__form) h2[data-typography='heading-2'] {
    font-size: 1.575rem;
  }
  .petro-export-child-landing [data-block='child-landing-copy'] {
    border-radius: 20px;
  }
  .petro-export-inquiry:has(.petro-export-bullet) > div {
    width: calc(100% - 2rem);
    margin-inline: auto;
  }
  .petro-export-inquiry:has([data-block='child-inquiry-shell']) > div {
    width: 100% !important;
    margin-inline: 0;
  }
  .petro-export-inquiry:has([data-block='child-inquiry-shell']) [data-block='child-inquiry-benefits'] {
    border-radius: 20px;
  }
  .petro-export-inquiry:has([data-block='child-inquiry-shell']) .petro-export-inquiry__form {
    padding: 1rem;
  }
}
html[dir='rtl'] :where(.text-left):not([dir='ltr']):not([dir='ltr'] *) {
  text-align: right;
}
html[dir='rtl'] :where(.text-right):not([dir='ltr']):not([dir='ltr'] *) {
  text-align: left;
}
html[dir='rtl'] :where(th.text-left, td.text-left, table.text-left):not([dir='ltr']):not([dir='ltr'] *) {
  text-align: right;
}
@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;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  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-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes slideInDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideOutUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}
@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideOutDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 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-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: 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-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
    }
  }
}