@import url("https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");

*,
::before,
::after,
::backdrop,
::file-selector-button {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
}

html {
  -moz-text-size-adjust: none;
  /* stylelint-disable-line */
  -webkit-text-size-adjust: none;
  /* stylelint-disable-line */
  text-size-adjust: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  text-rendering: optimizespeed;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

img,
picture,
video,
canvas,
svg,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
picture,
video,
svg {
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  cursor: pointer;
}

input:disabled,
button:disabled,
textarea:disabled,
select:disabled {
  cursor: not-allowed;
}

ul[role=list],
ol[role=list] {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline-start: 0;
  margin-block: 0;
}

ul[role=list]>li,
ol[role=list]>li {
  margin: 0;
  padding: 0;
  margin-block: 0;
}

a {
  text-decoration-skip-ink: auto;
  text-decoration: none;
  color: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

:target {
  scroll-margin-block: 5ex;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Import variables */
/**
 * Ensures a value has a unit, adding $default-unit if none exists
 * @param {Number|String} $val - The value to check
 * @return {String} - The value with units
 */
/**
 * @description Media query mixins.
 * @param {string|number} $breakpoint - The breakpoint value.
 * @param {string} $type - The media query type (e.g. 'lg', 'md').
 */
:root {
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

html {
  font-size: 16;
}

body {
  font-family: var(--font-family-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0.5em;
  font-family: var(--font-family-heading);
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

p {
  margin-bottom: 1rem;
}

small {
  font-size: 0.875rem;
}

button {
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 0.25rem;
  font-family: var(--font-family-base);
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

button:focus {
  outline: none;
}

button:disabled {
  background-color: #E0E0E0;
  color: #A0A0A0;
  cursor: not-allowed;
}

button:not([class*=bg-]) {
  background-color: var(--button-bg-color, #007BFF);
  color: var(--button-text-color, #FFF);
}

button:not([class*=bg-]):hover {
  background-color: var(--button-bg-color-hover, #0056B3);
}

input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=search],
textarea {
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  width: 100%;
  font-family: var(--font-family-base);
  transition: border 0.2s ease-in-out;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=search]:focus,
textarea:focus {
  border-color: var(--link-color);
  outline: none;
}

input[type=checkbox],
input[type=radio] {
  margin-right: 0.5rem;
}

select {
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  width: 100%;
  font-family: var(--font-family-base);
  transition: border 0.2s ease-in-out;
}

select:focus {
  border-color: var(--link-color);
  outline: none;
}

blockquote {
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  border-left: 4px solid var(--border);
  font-style: italic;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1rem 0;
}

img {
  max-width: 100%;
  height: auto;
}

figure {
  margin: 1rem 0;
}

figcaption {
  font-size: 0.875rem;
  color: var(--text-secondary, #666);
}

a {
  transition: color 0.2s ease-in-out;
}

a:not([class*=text-]) {
  color: var(--link-color);
}

a:not([class*=text-]):hover {
  color: var(--link-hover-color);
}

label[for] {
  cursor: pointer;
}

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

code {
  font-family: "Courier New", Courier, monospace;
  background-color: #f8f8f8;
  color: #d63384;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

[data-theme=dark] code {
  background-color: #333;
  color: #f8f8f2;
}

@media (prefers-color-scheme: dark) {
  [data-theme=system] code {
    background-color: #333;
    color: #f8f8f2;
  }
}

.container {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 480px) {
  .container {
    max-width: 380px;
  }
}

@media (min-width: 640px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 668px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 924px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1180px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1436px;
  }
}

.container {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/**
 * @component Flex
 * @description Flexbox layout system for creating flexible page layouts
 *
 * @example
 * <div class="flex row between x-center">
 *   <div class="w-6">Left column (6 units)</div>
 *   <div class="w-6">Right column (6 units)</div>
 * </div>
 * 
 * <div class="flex col@md row@lg">
 *   <!-- Changes direction based on breakpoint -->
 * </div>
 *
 * @classes
 * Base:
 * - flex: Creates a flex container
 * 
 * Direction:
 * - row: Sets flex-direction to row
 * - col: Sets flex-direction to column
 * - row-reverse: Reverses row direction
 * - col-reverse: Reverses column direction
 * 
 * Alignment:
 * - start/end/center: Controls justify-content
 * - x-start/x-end/x-center: Controls align-items
 * 
 * Child elements:
 * - w-{1-12}: Sets width based on column count
 * - grow: Allows item to grow
 * - shrink/no-shrink: Controls shrink behavior
 *
 * @responsive
 * All classes support responsive variants using @breakpoint suffix:
 * - row@md: Row direction on medium screens and up
 * - between@lg: Space-between on large screens
 *
 * @see grid
 */
/**
 * @description Establishes a flex container.
 */
/**
 * @description Establishes a flex-inline container.
 */
/**
 * @description Sets flex-direction to row.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets flex-direction to row-reverse.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets flex-direction to column.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets flex-direction to column-reverse.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets flex-wrap to wrap.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets flex-wrap to nowrap.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets flex-wrap to wrap-reverse
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets justify-content to flex-start
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets justify-content to flex-end
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets justify-content to center
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets justify-content to stretch
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets justify-content to space-between
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets justify-content to space-around
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets justify-content to space-evenly
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets align-items to flex-start - aligns items to the start of the cross axis.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets align-items to flex-end - aligns items to the end of the cross axis.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets align-items to center - aligns items to the center of the cross axis.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets align-items to stretch - aligns items to the stretch of the cross axis.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets align-items to baseline - aligns items to the baseline of the cross axis.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets align-content to flex-start - aligns content to the start of the cross axis.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets align-content to flex-end - aligns content to the end of the cross axis.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets align-content to center - aligns content to the center of the cross axis.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets align-content to space-between - aligns content to the space between the cross axis.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets align-content to space-around - aligns content to the space around the cross axis.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets align-content to space-evenly - aligns content to the space evenly between the cross axis.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets align-content to stretch - aligns content to the stretch of the cross axis.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets align-self to auto
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets align-self to flex-start
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets align-self to flex-end
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets align-self to center
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets align-self to stretch
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets align-self to baseline
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets flex-shrink to 1 - allows the item to shrink.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets flex-shrink to 0 - prevents the item from shrinking.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets flex-shrink to 2 - allows the item to shrink twice as much as the other items.
 * @dependencies flex | flex-inline
 */
/**
 * @description Sets flex to 0 0 100%
 */
/**
 * @description Sets flex to 1 1 auto - allows the item to grow and shrink.
 */
/**
 * @description Sets flex to 1 1 0% - allows the item to grow but not shrink.
 */
/**
 * @description Sets flex to none - prevents the item from growing.
 */
/**
 * @description Sets flex to 1 0 auto - allows the item to grow but not shrink.
 */
/**
 * @description Sets how many columns this would take using percentage of VAR.$column-count.
 * @param {Number} $size - The number of columns to span.
 */
.flex {
  display: flex;
}

.flex.row {
  flex-direction: row;
}

.flex.row-reverse {
  flex-direction: row-reverse;
}

.flex.col {
  flex-direction: column;
}

.flex.col-reverse {
  flex-direction: column-reverse;
}

.flex.wrap {
  flex-wrap: wrap;
}

.flex.nowrap {
  flex-wrap: nowrap;
}

.flex.wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex.start {
  justify-content: flex-start;
}

.flex.end {
  justify-content: flex-end;
}

.flex.center {
  justify-content: center;
}

.flex.stretch {
  justify-content: stretch;
}

.flex.between {
  justify-content: space-between;
}

.flex.around {
  justify-content: space-around;
}

.flex.evenly {
  justify-content: space-evenly;
}

.flex.x-start {
  align-items: flex-start;
}

.flex.x-end {
  align-items: flex-end;
}

.flex.x-center {
  align-items: center;
}

.flex.x-baseline {
  align-items: baseline;
}

.flex.x-stretch {
  align-items: stretch;
}

.flex.x-content-start {
  align-content: flex-start;
}

.flex.x-content-end {
  align-content: flex-end;
}

.flex.x-content-center {
  align-content: center;
}

.flex.x-content-between {
  align-content: space-between;
}

.flex.x-content-around {
  align-content: space-around;
}

.flex.x-content-evenly {
  align-content: space-evenly;
}

.flex.x-content-stretch {
  align-content: stretch;
}

.flex>.fill-auto {
  flex: 1 1 auto;
}

.flex>.fill-full {
  flex: 0 0 100%;
}

.flex>.grow {
  flex: 1 1 0%;
}

.flex>.no-grow {
  flex: none;
}

.flex>.order-first {
  order: -1;
}

.flex>.order-last {
  order: 9999;
}

.flex>.order-none {
  order: 0;
}

.flex>.shrink {
  flex-shrink: 1;
}

.flex>.no-shrink {
  flex-shrink: 0;
}

.flex>.shrink-twice {
  flex-shrink: 2;
}

.flex>.self-end {
  align-self: flex-end;
}

.flex>.self-start {
  align-self: flex-start;
}

.flex>.self-center {
  align-self: center;
}

.flex>.self-stretch {
  align-self: stretch;
}

.flex>.self-baseline {
  align-self: baseline;
}

.flex>.self-auto {
  align-self: auto;
}

.flex>.fill-1 {
  flex: 0 0 8.3333333333%;
}

.flex>.order-1 {
  order: 1;
}

.flex>.fill-2 {
  flex: 0 0 16.6666666667%;
}

.flex>.order-2 {
  order: 2;
}

.flex>.fill-3 {
  flex: 0 0 25%;
}

.flex>.order-3 {
  order: 3;
}

.flex>.fill-4 {
  flex: 0 0 33.3333333333%;
}

.flex>.order-4 {
  order: 4;
}

.flex>.fill-5 {
  flex: 0 0 41.6666666667%;
}

.flex>.order-5 {
  order: 5;
}

.flex>.fill-6 {
  flex: 0 0 50%;
}

.flex>.order-6 {
  order: 6;
}

.flex>.fill-7 {
  flex: 0 0 58.3333333333%;
}

.flex>.order-7 {
  order: 7;
}

.flex>.fill-8 {
  flex: 0 0 66.6666666667%;
}

.flex>.order-8 {
  order: 8;
}

.flex>.fill-9 {
  flex: 0 0 75%;
}

.flex>.order-9 {
  order: 9;
}

.flex>.fill-10 {
  flex: 0 0 83.3333333333%;
}

.flex>.order-10 {
  order: 10;
}

.flex>.fill-11 {
  flex: 0 0 91.6666666667%;
}

.flex>.order-11 {
  order: 11;
}

.flex>.fill-12 {
  flex: 0 0 100%;
}

.flex>.order-12 {
  order: 12;
}

@media (min-width: 480px) {
  .flex.row\@xs {
    flex-direction: row;
  }

  .flex.row-reverse\@xs {
    flex-direction: row-reverse;
  }

  .flex.col\@xs {
    flex-direction: column;
  }

  .flex.col-reverse\@xs {
    flex-direction: column-reverse;
  }

  .flex.wrap\@xs {
    flex-wrap: wrap;
  }

  .flex.nowrap\@xs {
    flex-wrap: nowrap;
  }

  .flex.wrap-reverse\@xs {
    flex-wrap: wrap-reverse;
  }

  .flex.start\@xs {
    justify-content: flex-start;
  }

  .flex.end\@xs {
    justify-content: flex-end;
  }

  .flex.center\@xs {
    justify-content: center;
  }

  .flex.between\@xs {
    justify-content: space-between;
  }

  .flex.stretch\@xs {
    justify-content: stretch;
  }

  .flex.around\@xs {
    justify-content: space-around;
  }

  .flex.evenly\@xs {
    justify-content: space-evenly;
  }

  .flex.x-start\@xs {
    align-items: flex-start;
  }

  .flex.x-end\@xs {
    align-items: flex-end;
  }

  .flex.x-center\@xs {
    align-items: center;
  }

  .flex.x-baseline\@xs {
    align-items: baseline;
  }

  .flex.x-stretch\@xs {
    align-items: stretch;
  }

  .flex.x-content-start\@xs {
    align-content: flex-start;
  }

  .flex.x-content-end\@xs {
    align-content: flex-end;
  }

  .flex.x-content-center\@xs {
    align-content: center;
  }

  .flex.x-content-between\@xs {
    align-content: space-between;
  }

  .flex.x-content-around\@xs {
    align-content: space-around;
  }

  .flex.x-content-evenly\@xs {
    align-content: space-evenly;
  }

  .flex.x-content-stretch\@xs {
    align-content: stretch;
  }

  .flex>.fill-auto\@xs {
    flex: 1 1 auto;
  }

  .flex>.fill-full\@xs {
    flex: 0 0 100%;
  }

  .flex>.grow\@xs {
    flex: 1 1 0%;
  }

  .flex>.no-grow\@xs {
    flex: none;
  }

  .flex>.order-first\@xs {
    order: -1;
  }

  .flex>.order-last\@xs {
    order: 9999;
  }

  .flex>.order-none\@xs {
    order: 0;
  }

  .flex>.shrink\@xs {
    flex-shrink: 1;
  }

  .flex>.no-shrink\@xs {
    flex-shrink: 0;
  }

  .flex>.shrink-twice\@xs {
    flex-shrink: 2;
  }

  .flex>.self-end\@xs {
    align-self: flex-end;
  }

  .flex>.self-start\@xs {
    align-self: flex-start;
  }

  .flex>.self-center\@xs {
    align-self: center;
  }

  .flex>.self-stretch\@xs {
    align-self: stretch;
  }

  .flex>.self-baseline\@xs {
    align-self: baseline;
  }

  .flex>.self-auto\@xs {
    align-self: auto;
  }

  .flex>.fill-1\@xs {
    flex: 0 0 8.3333333333%;
  }

  .flex>.order-1\@xs {
    order: 1;
  }

  .flex>.fill-2\@xs {
    flex: 0 0 16.6666666667%;
  }

  .flex>.order-2\@xs {
    order: 2;
  }

  .flex>.fill-3\@xs {
    flex: 0 0 25%;
  }

  .flex>.order-3\@xs {
    order: 3;
  }

  .flex>.fill-4\@xs {
    flex: 0 0 33.3333333333%;
  }

  .flex>.order-4\@xs {
    order: 4;
  }

  .flex>.fill-5\@xs {
    flex: 0 0 41.6666666667%;
  }

  .flex>.order-5\@xs {
    order: 5;
  }

  .flex>.fill-6\@xs {
    flex: 0 0 50%;
  }

  .flex>.order-6\@xs {
    order: 6;
  }

  .flex>.fill-7\@xs {
    flex: 0 0 58.3333333333%;
  }

  .flex>.order-7\@xs {
    order: 7;
  }

  .flex>.fill-8\@xs {
    flex: 0 0 66.6666666667%;
  }

  .flex>.order-8\@xs {
    order: 8;
  }

  .flex>.fill-9\@xs {
    flex: 0 0 75%;
  }

  .flex>.order-9\@xs {
    order: 9;
  }

  .flex>.fill-10\@xs {
    flex: 0 0 83.3333333333%;
  }

  .flex>.order-10\@xs {
    order: 10;
  }

  .flex>.fill-11\@xs {
    flex: 0 0 91.6666666667%;
  }

  .flex>.order-11\@xs {
    order: 11;
  }

  .flex>.fill-12\@xs {
    flex: 0 0 100%;
  }

  .flex>.order-12\@xs {
    order: 12;
  }
}

@media (min-width: 640px) {
  .flex.row\@sm {
    flex-direction: row;
  }

  .flex.row-reverse\@sm {
    flex-direction: row-reverse;
  }

  .flex.col\@sm {
    flex-direction: column;
  }

  .flex.col-reverse\@sm {
    flex-direction: column-reverse;
  }

  .flex.wrap\@sm {
    flex-wrap: wrap;
  }

  .flex.nowrap\@sm {
    flex-wrap: nowrap;
  }

  .flex.wrap-reverse\@sm {
    flex-wrap: wrap-reverse;
  }

  .flex.start\@sm {
    justify-content: flex-start;
  }

  .flex.end\@sm {
    justify-content: flex-end;
  }

  .flex.center\@sm {
    justify-content: center;
  }

  .flex.between\@sm {
    justify-content: space-between;
  }

  .flex.stretch\@sm {
    justify-content: stretch;
  }

  .flex.around\@sm {
    justify-content: space-around;
  }

  .flex.evenly\@sm {
    justify-content: space-evenly;
  }

  .flex.x-start\@sm {
    align-items: flex-start;
  }

  .flex.x-end\@sm {
    align-items: flex-end;
  }

  .flex.x-center\@sm {
    align-items: center;
  }

  .flex.x-baseline\@sm {
    align-items: baseline;
  }

  .flex.x-stretch\@sm {
    align-items: stretch;
  }

  .flex.x-content-start\@sm {
    align-content: flex-start;
  }

  .flex.x-content-end\@sm {
    align-content: flex-end;
  }

  .flex.x-content-center\@sm {
    align-content: center;
  }

  .flex.x-content-between\@sm {
    align-content: space-between;
  }

  .flex.x-content-around\@sm {
    align-content: space-around;
  }

  .flex.x-content-evenly\@sm {
    align-content: space-evenly;
  }

  .flex.x-content-stretch\@sm {
    align-content: stretch;
  }

  .flex>.fill-auto\@sm {
    flex: 1 1 auto;
  }

  .flex>.fill-full\@sm {
    flex: 0 0 100%;
  }

  .flex>.grow\@sm {
    flex: 1 1 0%;
  }

  .flex>.no-grow\@sm {
    flex: none;
  }

  .flex>.order-first\@sm {
    order: -1;
  }

  .flex>.order-last\@sm {
    order: 9999;
  }

  .flex>.order-none\@sm {
    order: 0;
  }

  .flex>.shrink\@sm {
    flex-shrink: 1;
  }

  .flex>.no-shrink\@sm {
    flex-shrink: 0;
  }

  .flex>.shrink-twice\@sm {
    flex-shrink: 2;
  }

  .flex>.self-end\@sm {
    align-self: flex-end;
  }

  .flex>.self-start\@sm {
    align-self: flex-start;
  }

  .flex>.self-center\@sm {
    align-self: center;
  }

  .flex>.self-stretch\@sm {
    align-self: stretch;
  }

  .flex>.self-baseline\@sm {
    align-self: baseline;
  }

  .flex>.self-auto\@sm {
    align-self: auto;
  }

  .flex>.fill-1\@sm {
    flex: 0 0 8.3333333333%;
  }

  .flex>.order-1\@sm {
    order: 1;
  }

  .flex>.fill-2\@sm {
    flex: 0 0 16.6666666667%;
  }

  .flex>.order-2\@sm {
    order: 2;
  }

  .flex>.fill-3\@sm {
    flex: 0 0 25%;
  }

  .flex>.order-3\@sm {
    order: 3;
  }

  .flex>.fill-4\@sm {
    flex: 0 0 33.3333333333%;
  }

  .flex>.order-4\@sm {
    order: 4;
  }

  .flex>.fill-5\@sm {
    flex: 0 0 41.6666666667%;
  }

  .flex>.order-5\@sm {
    order: 5;
  }

  .flex>.fill-6\@sm {
    flex: 0 0 50%;
  }

  .flex>.order-6\@sm {
    order: 6;
  }

  .flex>.fill-7\@sm {
    flex: 0 0 58.3333333333%;
  }

  .flex>.order-7\@sm {
    order: 7;
  }

  .flex>.fill-8\@sm {
    flex: 0 0 66.6666666667%;
  }

  .flex>.order-8\@sm {
    order: 8;
  }

  .flex>.fill-9\@sm {
    flex: 0 0 75%;
  }

  .flex>.order-9\@sm {
    order: 9;
  }

  .flex>.fill-10\@sm {
    flex: 0 0 83.3333333333%;
  }

  .flex>.order-10\@sm {
    order: 10;
  }

  .flex>.fill-11\@sm {
    flex: 0 0 91.6666666667%;
  }

  .flex>.order-11\@sm {
    order: 11;
  }

  .flex>.fill-12\@sm {
    flex: 0 0 100%;
  }

  .flex>.order-12\@sm {
    order: 12;
  }
}

@media (min-width: 768px) {
  .flex.row\@md {
    flex-direction: row;
  }

  .flex.row-reverse\@md {
    flex-direction: row-reverse;
  }

  .flex.col\@md {
    flex-direction: column;
  }

  .flex.col-reverse\@md {
    flex-direction: column-reverse;
  }

  .flex.wrap\@md {
    flex-wrap: wrap;
  }

  .flex.nowrap\@md {
    flex-wrap: nowrap;
  }

  .flex.wrap-reverse\@md {
    flex-wrap: wrap-reverse;
  }

  .flex.start\@md {
    justify-content: flex-start;
  }

  .flex.end\@md {
    justify-content: flex-end;
  }

  .flex.center\@md {
    justify-content: center;
  }

  .flex.between\@md {
    justify-content: space-between;
  }

  .flex.stretch\@md {
    justify-content: stretch;
  }

  .flex.around\@md {
    justify-content: space-around;
  }

  .flex.evenly\@md {
    justify-content: space-evenly;
  }

  .flex.x-start\@md {
    align-items: flex-start;
  }

  .flex.x-end\@md {
    align-items: flex-end;
  }

  .flex.x-center\@md {
    align-items: center;
  }

  .flex.x-baseline\@md {
    align-items: baseline;
  }

  .flex.x-stretch\@md {
    align-items: stretch;
  }

  .flex.x-content-start\@md {
    align-content: flex-start;
  }

  .flex.x-content-end\@md {
    align-content: flex-end;
  }

  .flex.x-content-center\@md {
    align-content: center;
  }

  .flex.x-content-between\@md {
    align-content: space-between;
  }

  .flex.x-content-around\@md {
    align-content: space-around;
  }

  .flex.x-content-evenly\@md {
    align-content: space-evenly;
  }

  .flex.x-content-stretch\@md {
    align-content: stretch;
  }

  .flex>.fill-auto\@md {
    flex: 1 1 auto;
  }

  .flex>.fill-full\@md {
    flex: 0 0 100%;
  }

  .flex>.grow\@md {
    flex: 1 1 0%;
  }

  .flex>.no-grow\@md {
    flex: none;
  }

  .flex>.order-first\@md {
    order: -1;
  }

  .flex>.order-last\@md {
    order: 9999;
  }

  .flex>.order-none\@md {
    order: 0;
  }

  .flex>.shrink\@md {
    flex-shrink: 1;
  }

  .flex>.no-shrink\@md {
    flex-shrink: 0;
  }

  .flex>.shrink-twice\@md {
    flex-shrink: 2;
  }

  .flex>.self-end\@md {
    align-self: flex-end;
  }

  .flex>.self-start\@md {
    align-self: flex-start;
  }

  .flex>.self-center\@md {
    align-self: center;
  }

  .flex>.self-stretch\@md {
    align-self: stretch;
  }

  .flex>.self-baseline\@md {
    align-self: baseline;
  }

  .flex>.self-auto\@md {
    align-self: auto;
  }

  .flex>.fill-1\@md {
    flex: 0 0 8.3333333333%;
  }

  .flex>.order-1\@md {
    order: 1;
  }

  .flex>.fill-2\@md {
    flex: 0 0 16.6666666667%;
  }

  .flex>.order-2\@md {
    order: 2;
  }

  .flex>.fill-3\@md {
    flex: 0 0 25%;
  }

  .flex>.order-3\@md {
    order: 3;
  }

  .flex>.fill-4\@md {
    flex: 0 0 33.3333333333%;
  }

  .flex>.order-4\@md {
    order: 4;
  }

  .flex>.fill-5\@md {
    flex: 0 0 41.6666666667%;
  }

  .flex>.order-5\@md {
    order: 5;
  }

  .flex>.fill-6\@md {
    flex: 0 0 50%;
  }

  .flex>.order-6\@md {
    order: 6;
  }

  .flex>.fill-7\@md {
    flex: 0 0 58.3333333333%;
  }

  .flex>.order-7\@md {
    order: 7;
  }

  .flex>.fill-8\@md {
    flex: 0 0 66.6666666667%;
  }

  .flex>.order-8\@md {
    order: 8;
  }

  .flex>.fill-9\@md {
    flex: 0 0 75%;
  }

  .flex>.order-9\@md {
    order: 9;
  }

  .flex>.fill-10\@md {
    flex: 0 0 83.3333333333%;
  }

  .flex>.order-10\@md {
    order: 10;
  }

  .flex>.fill-11\@md {
    flex: 0 0 91.6666666667%;
  }

  .flex>.order-11\@md {
    order: 11;
  }

  .flex>.fill-12\@md {
    flex: 0 0 100%;
  }

  .flex>.order-12\@md {
    order: 12;
  }
}

@media (min-width: 1024px) {
  .flex.row\@lg {
    flex-direction: row;
  }

  .flex.row-reverse\@lg {
    flex-direction: row-reverse;
  }

  .flex.col\@lg {
    flex-direction: column;
  }

  .flex.col-reverse\@lg {
    flex-direction: column-reverse;
  }

  .flex.wrap\@lg {
    flex-wrap: wrap;
  }

  .flex.nowrap\@lg {
    flex-wrap: nowrap;
  }

  .flex.wrap-reverse\@lg {
    flex-wrap: wrap-reverse;
  }

  .flex.start\@lg {
    justify-content: flex-start;
  }

  .flex.end\@lg {
    justify-content: flex-end;
  }

  .flex.center\@lg {
    justify-content: center;
  }

  .flex.between\@lg {
    justify-content: space-between;
  }

  .flex.stretch\@lg {
    justify-content: stretch;
  }

  .flex.around\@lg {
    justify-content: space-around;
  }

  .flex.evenly\@lg {
    justify-content: space-evenly;
  }

  .flex.x-start\@lg {
    align-items: flex-start;
  }

  .flex.x-end\@lg {
    align-items: flex-end;
  }

  .flex.x-center\@lg {
    align-items: center;
  }

  .flex.x-baseline\@lg {
    align-items: baseline;
  }

  .flex.x-stretch\@lg {
    align-items: stretch;
  }

  .flex.x-content-start\@lg {
    align-content: flex-start;
  }

  .flex.x-content-end\@lg {
    align-content: flex-end;
  }

  .flex.x-content-center\@lg {
    align-content: center;
  }

  .flex.x-content-between\@lg {
    align-content: space-between;
  }

  .flex.x-content-around\@lg {
    align-content: space-around;
  }

  .flex.x-content-evenly\@lg {
    align-content: space-evenly;
  }

  .flex.x-content-stretch\@lg {
    align-content: stretch;
  }

  .flex>.fill-auto\@lg {
    flex: 1 1 auto;
  }

  .flex>.fill-full\@lg {
    flex: 0 0 100%;
  }

  .flex>.grow\@lg {
    flex: 1 1 0%;
  }

  .flex>.no-grow\@lg {
    flex: none;
  }

  .flex>.order-first\@lg {
    order: -1;
  }

  .flex>.order-last\@lg {
    order: 9999;
  }

  .flex>.order-none\@lg {
    order: 0;
  }

  .flex>.shrink\@lg {
    flex-shrink: 1;
  }

  .flex>.no-shrink\@lg {
    flex-shrink: 0;
  }

  .flex>.shrink-twice\@lg {
    flex-shrink: 2;
  }

  .flex>.self-end\@lg {
    align-self: flex-end;
  }

  .flex>.self-start\@lg {
    align-self: flex-start;
  }

  .flex>.self-center\@lg {
    align-self: center;
  }

  .flex>.self-stretch\@lg {
    align-self: stretch;
  }

  .flex>.self-baseline\@lg {
    align-self: baseline;
  }

  .flex>.self-auto\@lg {
    align-self: auto;
  }

  .flex>.fill-1\@lg {
    flex: 0 0 8.3333333333%;
  }

  .flex>.order-1\@lg {
    order: 1;
  }

  .flex>.fill-2\@lg {
    flex: 0 0 16.6666666667%;
  }

  .flex>.order-2\@lg {
    order: 2;
  }

  .flex>.fill-3\@lg {
    flex: 0 0 25%;
  }

  .flex>.order-3\@lg {
    order: 3;
  }

  .flex>.fill-4\@lg {
    flex: 0 0 33.3333333333%;
  }

  .flex>.order-4\@lg {
    order: 4;
  }

  .flex>.fill-5\@lg {
    flex: 0 0 41.6666666667%;
  }

  .flex>.order-5\@lg {
    order: 5;
  }

  .flex>.fill-6\@lg {
    flex: 0 0 50%;
  }

  .flex>.order-6\@lg {
    order: 6;
  }

  .flex>.fill-7\@lg {
    flex: 0 0 58.3333333333%;
  }

  .flex>.order-7\@lg {
    order: 7;
  }

  .flex>.fill-8\@lg {
    flex: 0 0 66.6666666667%;
  }

  .flex>.order-8\@lg {
    order: 8;
  }

  .flex>.fill-9\@lg {
    flex: 0 0 75%;
  }

  .flex>.order-9\@lg {
    order: 9;
  }

  .flex>.fill-10\@lg {
    flex: 0 0 83.3333333333%;
  }

  .flex>.order-10\@lg {
    order: 10;
  }

  .flex>.fill-11\@lg {
    flex: 0 0 91.6666666667%;
  }

  .flex>.order-11\@lg {
    order: 11;
  }

  .flex>.fill-12\@lg {
    flex: 0 0 100%;
  }

  .flex>.order-12\@lg {
    order: 12;
  }
}

@media (min-width: 1280px) {
  .flex.row\@xl {
    flex-direction: row;
  }

  .flex.row-reverse\@xl {
    flex-direction: row-reverse;
  }

  .flex.col\@xl {
    flex-direction: column;
  }

  .flex.col-reverse\@xl {
    flex-direction: column-reverse;
  }

  .flex.wrap\@xl {
    flex-wrap: wrap;
  }

  .flex.nowrap\@xl {
    flex-wrap: nowrap;
  }

  .flex.wrap-reverse\@xl {
    flex-wrap: wrap-reverse;
  }

  .flex.start\@xl {
    justify-content: flex-start;
  }

  .flex.end\@xl {
    justify-content: flex-end;
  }

  .flex.center\@xl {
    justify-content: center;
  }

  .flex.between\@xl {
    justify-content: space-between;
  }

  .flex.stretch\@xl {
    justify-content: stretch;
  }

  .flex.around\@xl {
    justify-content: space-around;
  }

  .flex.evenly\@xl {
    justify-content: space-evenly;
  }

  .flex.x-start\@xl {
    align-items: flex-start;
  }

  .flex.x-end\@xl {
    align-items: flex-end;
  }

  .flex.x-center\@xl {
    align-items: center;
  }

  .flex.x-baseline\@xl {
    align-items: baseline;
  }

  .flex.x-stretch\@xl {
    align-items: stretch;
  }

  .flex.x-content-start\@xl {
    align-content: flex-start;
  }

  .flex.x-content-end\@xl {
    align-content: flex-end;
  }

  .flex.x-content-center\@xl {
    align-content: center;
  }

  .flex.x-content-between\@xl {
    align-content: space-between;
  }

  .flex.x-content-around\@xl {
    align-content: space-around;
  }

  .flex.x-content-evenly\@xl {
    align-content: space-evenly;
  }

  .flex.x-content-stretch\@xl {
    align-content: stretch;
  }

  .flex>.fill-auto\@xl {
    flex: 1 1 auto;
  }

  .flex>.fill-full\@xl {
    flex: 0 0 100%;
  }

  .flex>.grow\@xl {
    flex: 1 1 0%;
  }

  .flex>.no-grow\@xl {
    flex: none;
  }

  .flex>.order-first\@xl {
    order: -1;
  }

  .flex>.order-last\@xl {
    order: 9999;
  }

  .flex>.order-none\@xl {
    order: 0;
  }

  .flex>.shrink\@xl {
    flex-shrink: 1;
  }

  .flex>.no-shrink\@xl {
    flex-shrink: 0;
  }

  .flex>.shrink-twice\@xl {
    flex-shrink: 2;
  }

  .flex>.self-end\@xl {
    align-self: flex-end;
  }

  .flex>.self-start\@xl {
    align-self: flex-start;
  }

  .flex>.self-center\@xl {
    align-self: center;
  }

  .flex>.self-stretch\@xl {
    align-self: stretch;
  }

  .flex>.self-baseline\@xl {
    align-self: baseline;
  }

  .flex>.self-auto\@xl {
    align-self: auto;
  }

  .flex>.fill-1\@xl {
    flex: 0 0 8.3333333333%;
  }

  .flex>.order-1\@xl {
    order: 1;
  }

  .flex>.fill-2\@xl {
    flex: 0 0 16.6666666667%;
  }

  .flex>.order-2\@xl {
    order: 2;
  }

  .flex>.fill-3\@xl {
    flex: 0 0 25%;
  }

  .flex>.order-3\@xl {
    order: 3;
  }

  .flex>.fill-4\@xl {
    flex: 0 0 33.3333333333%;
  }

  .flex>.order-4\@xl {
    order: 4;
  }

  .flex>.fill-5\@xl {
    flex: 0 0 41.6666666667%;
  }

  .flex>.order-5\@xl {
    order: 5;
  }

  .flex>.fill-6\@xl {
    flex: 0 0 50%;
  }

  .flex>.order-6\@xl {
    order: 6;
  }

  .flex>.fill-7\@xl {
    flex: 0 0 58.3333333333%;
  }

  .flex>.order-7\@xl {
    order: 7;
  }

  .flex>.fill-8\@xl {
    flex: 0 0 66.6666666667%;
  }

  .flex>.order-8\@xl {
    order: 8;
  }

  .flex>.fill-9\@xl {
    flex: 0 0 75%;
  }

  .flex>.order-9\@xl {
    order: 9;
  }

  .flex>.fill-10\@xl {
    flex: 0 0 83.3333333333%;
  }

  .flex>.order-10\@xl {
    order: 10;
  }

  .flex>.fill-11\@xl {
    flex: 0 0 91.6666666667%;
  }

  .flex>.order-11\@xl {
    order: 11;
  }

  .flex>.fill-12\@xl {
    flex: 0 0 100%;
  }

  .flex>.order-12\@xl {
    order: 12;
  }
}

@media (min-width: 1536px) {
  .flex.row\@2xl {
    flex-direction: row;
  }

  .flex.row-reverse\@2xl {
    flex-direction: row-reverse;
  }

  .flex.col\@2xl {
    flex-direction: column;
  }

  .flex.col-reverse\@2xl {
    flex-direction: column-reverse;
  }

  .flex.wrap\@2xl {
    flex-wrap: wrap;
  }

  .flex.nowrap\@2xl {
    flex-wrap: nowrap;
  }

  .flex.wrap-reverse\@2xl {
    flex-wrap: wrap-reverse;
  }

  .flex.start\@2xl {
    justify-content: flex-start;
  }

  .flex.end\@2xl {
    justify-content: flex-end;
  }

  .flex.center\@2xl {
    justify-content: center;
  }

  .flex.between\@2xl {
    justify-content: space-between;
  }

  .flex.stretch\@2xl {
    justify-content: stretch;
  }

  .flex.around\@2xl {
    justify-content: space-around;
  }

  .flex.evenly\@2xl {
    justify-content: space-evenly;
  }

  .flex.x-start\@2xl {
    align-items: flex-start;
  }

  .flex.x-end\@2xl {
    align-items: flex-end;
  }

  .flex.x-center\@2xl {
    align-items: center;
  }

  .flex.x-baseline\@2xl {
    align-items: baseline;
  }

  .flex.x-stretch\@2xl {
    align-items: stretch;
  }

  .flex.x-content-start\@2xl {
    align-content: flex-start;
  }

  .flex.x-content-end\@2xl {
    align-content: flex-end;
  }

  .flex.x-content-center\@2xl {
    align-content: center;
  }

  .flex.x-content-between\@2xl {
    align-content: space-between;
  }

  .flex.x-content-around\@2xl {
    align-content: space-around;
  }

  .flex.x-content-evenly\@2xl {
    align-content: space-evenly;
  }

  .flex.x-content-stretch\@2xl {
    align-content: stretch;
  }

  .flex>.fill-auto\@2xl {
    flex: 1 1 auto;
  }

  .flex>.fill-full\@2xl {
    flex: 0 0 100%;
  }

  .flex>.grow\@2xl {
    flex: 1 1 0%;
  }

  .flex>.no-grow\@2xl {
    flex: none;
  }

  .flex>.order-first\@2xl {
    order: -1;
  }

  .flex>.order-last\@2xl {
    order: 9999;
  }

  .flex>.order-none\@2xl {
    order: 0;
  }

  .flex>.shrink\@2xl {
    flex-shrink: 1;
  }

  .flex>.no-shrink\@2xl {
    flex-shrink: 0;
  }

  .flex>.shrink-twice\@2xl {
    flex-shrink: 2;
  }

  .flex>.self-end\@2xl {
    align-self: flex-end;
  }

  .flex>.self-start\@2xl {
    align-self: flex-start;
  }

  .flex>.self-center\@2xl {
    align-self: center;
  }

  .flex>.self-stretch\@2xl {
    align-self: stretch;
  }

  .flex>.self-baseline\@2xl {
    align-self: baseline;
  }

  .flex>.self-auto\@2xl {
    align-self: auto;
  }

  .flex>.fill-1\@2xl {
    flex: 0 0 8.3333333333%;
  }

  .flex>.order-1\@2xl {
    order: 1;
  }

  .flex>.fill-2\@2xl {
    flex: 0 0 16.6666666667%;
  }

  .flex>.order-2\@2xl {
    order: 2;
  }

  .flex>.fill-3\@2xl {
    flex: 0 0 25%;
  }

  .flex>.order-3\@2xl {
    order: 3;
  }

  .flex>.fill-4\@2xl {
    flex: 0 0 33.3333333333%;
  }

  .flex>.order-4\@2xl {
    order: 4;
  }

  .flex>.fill-5\@2xl {
    flex: 0 0 41.6666666667%;
  }

  .flex>.order-5\@2xl {
    order: 5;
  }

  .flex>.fill-6\@2xl {
    flex: 0 0 50%;
  }

  .flex>.order-6\@2xl {
    order: 6;
  }

  .flex>.fill-7\@2xl {
    flex: 0 0 58.3333333333%;
  }

  .flex>.order-7\@2xl {
    order: 7;
  }

  .flex>.fill-8\@2xl {
    flex: 0 0 66.6666666667%;
  }

  .flex>.order-8\@2xl {
    order: 8;
  }

  .flex>.fill-9\@2xl {
    flex: 0 0 75%;
  }

  .flex>.order-9\@2xl {
    order: 9;
  }

  .flex>.fill-10\@2xl {
    flex: 0 0 83.3333333333%;
  }

  .flex>.order-10\@2xl {
    order: 10;
  }

  .flex>.fill-11\@2xl {
    flex: 0 0 91.6666666667%;
  }

  .flex>.order-11\@2xl {
    order: 11;
  }

  .flex>.fill-12\@2xl {
    flex: 0 0 100%;
  }

  .flex>.order-12\@2xl {
    order: 12;
  }
}

/**
 * @description Establishes a grid container.
 */
/**
 * @description Establishes a inline-grid container.
 */
/**
* @description Establishes a grid container with a specified number of columns.
* @param {number} $count - The number of columns.

/// EXAMPLE USAGE
.custom-grid {
  display: grid;
  @include cols-custom("1fr_auto_1fr");
}

*/
/**
 * @description justify-items container.
 * @param {string} $value - The value for the justify-items property.
 */
/**
 * @description Establishes a align-items container.
 * @param {string} $value - The value for the align-items property.
 */
/**
 * @description Establishes a place-items container.
 * @param {string} $value - The value for the place-items property.
 */
.grid {
  display: grid;
}

.grid.inline {
  display: inline-grid;
}

.grid.cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid.rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr));
}

.grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid.rows-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.grid.cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid.rows-5 {
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

.grid.cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid.rows-6 {
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

.grid.cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid.rows-7 {
  grid-template-rows: repeat(7, minmax(0, 1fr));
}

.grid.cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid.rows-8 {
  grid-template-rows: repeat(8, minmax(0, 1fr));
}

.grid.cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.grid.rows-9 {
  grid-template-rows: repeat(9, minmax(0, 1fr));
}

.grid.cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid.rows-10 {
  grid-template-rows: repeat(10, minmax(0, 1fr));
}

.grid.cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

.grid.rows-11 {
  grid-template-rows: repeat(11, minmax(0, 1fr));
}

.grid.cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid.rows-12 {
  grid-template-rows: repeat(12, minmax(0, 1fr));
}

@media (min-width: 480px) {
  .grid.cols-1\@xs {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid.rows-1\@xs {
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }

  .grid.cols-2\@xs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid.rows-2\@xs {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .grid.cols-3\@xs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid.rows-3\@xs {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .grid.cols-4\@xs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid.rows-4\@xs {
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .grid.cols-5\@xs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .grid.rows-5\@xs {
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }

  .grid.cols-6\@xs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .grid.rows-6\@xs {
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }

  .grid.cols-7\@xs {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .grid.rows-7\@xs {
    grid-template-rows: repeat(7, minmax(0, 1fr));
  }

  .grid.cols-8\@xs {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .grid.rows-8\@xs {
    grid-template-rows: repeat(8, minmax(0, 1fr));
  }

  .grid.cols-9\@xs {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .grid.rows-9\@xs {
    grid-template-rows: repeat(9, minmax(0, 1fr));
  }

  .grid.cols-10\@xs {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .grid.rows-10\@xs {
    grid-template-rows: repeat(10, minmax(0, 1fr));
  }

  .grid.cols-11\@xs {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .grid.rows-11\@xs {
    grid-template-rows: repeat(11, minmax(0, 1fr));
  }

  .grid.cols-12\@xs {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .grid.rows-12\@xs {
    grid-template-rows: repeat(12, minmax(0, 1fr));
  }
}

@media (min-width: 640px) {
  .grid.cols-1\@sm {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid.rows-1\@sm {
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }

  .grid.cols-2\@sm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid.rows-2\@sm {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .grid.cols-3\@sm {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid.rows-3\@sm {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .grid.cols-4\@sm {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid.rows-4\@sm {
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .grid.cols-5\@sm {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .grid.rows-5\@sm {
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }

  .grid.cols-6\@sm {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .grid.rows-6\@sm {
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }

  .grid.cols-7\@sm {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .grid.rows-7\@sm {
    grid-template-rows: repeat(7, minmax(0, 1fr));
  }

  .grid.cols-8\@sm {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .grid.rows-8\@sm {
    grid-template-rows: repeat(8, minmax(0, 1fr));
  }

  .grid.cols-9\@sm {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .grid.rows-9\@sm {
    grid-template-rows: repeat(9, minmax(0, 1fr));
  }

  .grid.cols-10\@sm {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .grid.rows-10\@sm {
    grid-template-rows: repeat(10, minmax(0, 1fr));
  }

  .grid.cols-11\@sm {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .grid.rows-11\@sm {
    grid-template-rows: repeat(11, minmax(0, 1fr));
  }

  .grid.cols-12\@sm {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .grid.rows-12\@sm {
    grid-template-rows: repeat(12, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .grid.cols-1\@md {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid.rows-1\@md {
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }

  .grid.cols-2\@md {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid.rows-2\@md {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .grid.cols-3\@md {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid.rows-3\@md {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .grid.cols-4\@md {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid.rows-4\@md {
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .grid.cols-5\@md {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .grid.rows-5\@md {
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }

  .grid.cols-6\@md {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .grid.rows-6\@md {
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }

  .grid.cols-7\@md {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .grid.rows-7\@md {
    grid-template-rows: repeat(7, minmax(0, 1fr));
  }

  .grid.cols-8\@md {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .grid.rows-8\@md {
    grid-template-rows: repeat(8, minmax(0, 1fr));
  }

  .grid.cols-9\@md {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .grid.rows-9\@md {
    grid-template-rows: repeat(9, minmax(0, 1fr));
  }

  .grid.cols-10\@md {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .grid.rows-10\@md {
    grid-template-rows: repeat(10, minmax(0, 1fr));
  }

  .grid.cols-11\@md {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .grid.rows-11\@md {
    grid-template-rows: repeat(11, minmax(0, 1fr));
  }

  .grid.cols-12\@md {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .grid.rows-12\@md {
    grid-template-rows: repeat(12, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid.cols-1\@lg {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid.rows-1\@lg {
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }

  .grid.cols-2\@lg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid.rows-2\@lg {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .grid.cols-3\@lg {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid.rows-3\@lg {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .grid.cols-4\@lg {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid.rows-4\@lg {
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .grid.cols-5\@lg {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .grid.rows-5\@lg {
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }

  .grid.cols-6\@lg {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .grid.rows-6\@lg {
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }

  .grid.cols-7\@lg {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .grid.rows-7\@lg {
    grid-template-rows: repeat(7, minmax(0, 1fr));
  }

  .grid.cols-8\@lg {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .grid.rows-8\@lg {
    grid-template-rows: repeat(8, minmax(0, 1fr));
  }

  .grid.cols-9\@lg {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .grid.rows-9\@lg {
    grid-template-rows: repeat(9, minmax(0, 1fr));
  }

  .grid.cols-10\@lg {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .grid.rows-10\@lg {
    grid-template-rows: repeat(10, minmax(0, 1fr));
  }

  .grid.cols-11\@lg {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .grid.rows-11\@lg {
    grid-template-rows: repeat(11, minmax(0, 1fr));
  }

  .grid.cols-12\@lg {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .grid.rows-12\@lg {
    grid-template-rows: repeat(12, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .grid.cols-1\@xl {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid.rows-1\@xl {
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }

  .grid.cols-2\@xl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid.rows-2\@xl {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .grid.cols-3\@xl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid.rows-3\@xl {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .grid.cols-4\@xl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid.rows-4\@xl {
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .grid.cols-5\@xl {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .grid.rows-5\@xl {
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }

  .grid.cols-6\@xl {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .grid.rows-6\@xl {
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }

  .grid.cols-7\@xl {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .grid.rows-7\@xl {
    grid-template-rows: repeat(7, minmax(0, 1fr));
  }

  .grid.cols-8\@xl {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .grid.rows-8\@xl {
    grid-template-rows: repeat(8, minmax(0, 1fr));
  }

  .grid.cols-9\@xl {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .grid.rows-9\@xl {
    grid-template-rows: repeat(9, minmax(0, 1fr));
  }

  .grid.cols-10\@xl {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .grid.rows-10\@xl {
    grid-template-rows: repeat(10, minmax(0, 1fr));
  }

  .grid.cols-11\@xl {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .grid.rows-11\@xl {
    grid-template-rows: repeat(11, minmax(0, 1fr));
  }

  .grid.cols-12\@xl {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .grid.rows-12\@xl {
    grid-template-rows: repeat(12, minmax(0, 1fr));
  }
}

@media (min-width: 1536px) {
  .grid.cols-1\@2xl {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid.rows-1\@2xl {
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }

  .grid.cols-2\@2xl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid.rows-2\@2xl {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .grid.cols-3\@2xl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid.rows-3\@2xl {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .grid.cols-4\@2xl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid.rows-4\@2xl {
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  .grid.cols-5\@2xl {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .grid.rows-5\@2xl {
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }

  .grid.cols-6\@2xl {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .grid.rows-6\@2xl {
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }

  .grid.cols-7\@2xl {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .grid.rows-7\@2xl {
    grid-template-rows: repeat(7, minmax(0, 1fr));
  }

  .grid.cols-8\@2xl {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .grid.rows-8\@2xl {
    grid-template-rows: repeat(8, minmax(0, 1fr));
  }

  .grid.cols-9\@2xl {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .grid.rows-9\@2xl {
    grid-template-rows: repeat(9, minmax(0, 1fr));
  }

  .grid.cols-10\@2xl {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .grid.rows-10\@2xl {
    grid-template-rows: repeat(10, minmax(0, 1fr));
  }

  .grid.cols-11\@2xl {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .grid.rows-11\@2xl {
    grid-template-rows: repeat(11, minmax(0, 1fr));
  }

  .grid.cols-12\@2xl {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .grid.rows-12\@2xl {
    grid-template-rows: repeat(12, minmax(0, 1fr));
  }
}

.col-span-1 {
  grid-column: span 1/span 1;
}

.row-span-1 {
  grid-row: span 1/span 1;
}

@media (min-width: 480px) {
  .col-span-1\@xs {
    grid-column: span 1/span 1;
  }

  .row-span-1\@xs {
    grid-row: span 1/span 1;
  }
}

@media (min-width: 640px) {
  .col-span-1\@sm {
    grid-column: span 1/span 1;
  }

  .row-span-1\@sm {
    grid-row: span 1/span 1;
  }
}

@media (min-width: 768px) {
  .col-span-1\@md {
    grid-column: span 1/span 1;
  }

  .row-span-1\@md {
    grid-row: span 1/span 1;
  }
}

@media (min-width: 1024px) {
  .col-span-1\@lg {
    grid-column: span 1/span 1;
  }

  .row-span-1\@lg {
    grid-row: span 1/span 1;
  }
}

@media (min-width: 1280px) {
  .col-span-1\@xl {
    grid-column: span 1/span 1;
  }

  .row-span-1\@xl {
    grid-row: span 1/span 1;
  }
}

@media (min-width: 1536px) {
  .col-span-1\@2xl {
    grid-column: span 1/span 1;
  }

  .row-span-1\@2xl {
    grid-row: span 1/span 1;
  }
}

.col-span-2 {
  grid-column: span 2/span 2;
}

.row-span-2 {
  grid-row: span 2/span 2;
}

@media (min-width: 480px) {
  .col-span-2\@xs {
    grid-column: span 2/span 2;
  }

  .row-span-2\@xs {
    grid-row: span 2/span 2;
  }
}

@media (min-width: 640px) {
  .col-span-2\@sm {
    grid-column: span 2/span 2;
  }

  .row-span-2\@sm {
    grid-row: span 2/span 2;
  }
}

@media (min-width: 768px) {
  .col-span-2\@md {
    grid-column: span 2/span 2;
  }

  .row-span-2\@md {
    grid-row: span 2/span 2;
  }
}

@media (min-width: 1024px) {
  .col-span-2\@lg {
    grid-column: span 2/span 2;
  }

  .row-span-2\@lg {
    grid-row: span 2/span 2;
  }
}

@media (min-width: 1280px) {
  .col-span-2\@xl {
    grid-column: span 2/span 2;
  }

  .row-span-2\@xl {
    grid-row: span 2/span 2;
  }
}

@media (min-width: 1536px) {
  .col-span-2\@2xl {
    grid-column: span 2/span 2;
  }

  .row-span-2\@2xl {
    grid-row: span 2/span 2;
  }
}

.col-span-3 {
  grid-column: span 3/span 3;
}

.row-span-3 {
  grid-row: span 3/span 3;
}

@media (min-width: 480px) {
  .col-span-3\@xs {
    grid-column: span 3/span 3;
  }

  .row-span-3\@xs {
    grid-row: span 3/span 3;
  }
}

@media (min-width: 640px) {
  .col-span-3\@sm {
    grid-column: span 3/span 3;
  }

  .row-span-3\@sm {
    grid-row: span 3/span 3;
  }
}

@media (min-width: 768px) {
  .col-span-3\@md {
    grid-column: span 3/span 3;
  }

  .row-span-3\@md {
    grid-row: span 3/span 3;
  }
}

@media (min-width: 1024px) {
  .col-span-3\@lg {
    grid-column: span 3/span 3;
  }

  .row-span-3\@lg {
    grid-row: span 3/span 3;
  }
}

@media (min-width: 1280px) {
  .col-span-3\@xl {
    grid-column: span 3/span 3;
  }

  .row-span-3\@xl {
    grid-row: span 3/span 3;
  }
}

@media (min-width: 1536px) {
  .col-span-3\@2xl {
    grid-column: span 3/span 3;
  }

  .row-span-3\@2xl {
    grid-row: span 3/span 3;
  }
}

.col-span-4 {
  grid-column: span 4/span 4;
}

.row-span-4 {
  grid-row: span 4/span 4;
}

@media (min-width: 480px) {
  .col-span-4\@xs {
    grid-column: span 4/span 4;
  }

  .row-span-4\@xs {
    grid-row: span 4/span 4;
  }
}

@media (min-width: 640px) {
  .col-span-4\@sm {
    grid-column: span 4/span 4;
  }

  .row-span-4\@sm {
    grid-row: span 4/span 4;
  }
}

@media (min-width: 768px) {
  .col-span-4\@md {
    grid-column: span 4/span 4;
  }

  .row-span-4\@md {
    grid-row: span 4/span 4;
  }
}

@media (min-width: 1024px) {
  .col-span-4\@lg {
    grid-column: span 4/span 4;
  }

  .row-span-4\@lg {
    grid-row: span 4/span 4;
  }
}

@media (min-width: 1280px) {
  .col-span-4\@xl {
    grid-column: span 4/span 4;
  }

  .row-span-4\@xl {
    grid-row: span 4/span 4;
  }
}

@media (min-width: 1536px) {
  .col-span-4\@2xl {
    grid-column: span 4/span 4;
  }

  .row-span-4\@2xl {
    grid-row: span 4/span 4;
  }
}

.col-span-5 {
  grid-column: span 5/span 5;
}

.row-span-5 {
  grid-row: span 5/span 5;
}

@media (min-width: 480px) {
  .col-span-5\@xs {
    grid-column: span 5/span 5;
  }

  .row-span-5\@xs {
    grid-row: span 5/span 5;
  }
}

@media (min-width: 640px) {
  .col-span-5\@sm {
    grid-column: span 5/span 5;
  }

  .row-span-5\@sm {
    grid-row: span 5/span 5;
  }
}

@media (min-width: 768px) {
  .col-span-5\@md {
    grid-column: span 5/span 5;
  }

  .row-span-5\@md {
    grid-row: span 5/span 5;
  }
}

@media (min-width: 1024px) {
  .col-span-5\@lg {
    grid-column: span 5/span 5;
  }

  .row-span-5\@lg {
    grid-row: span 5/span 5;
  }
}

@media (min-width: 1280px) {
  .col-span-5\@xl {
    grid-column: span 5/span 5;
  }

  .row-span-5\@xl {
    grid-row: span 5/span 5;
  }
}

@media (min-width: 1536px) {
  .col-span-5\@2xl {
    grid-column: span 5/span 5;
  }

  .row-span-5\@2xl {
    grid-row: span 5/span 5;
  }
}

.col-span-6 {
  grid-column: span 6/span 6;
}

.row-span-6 {
  grid-row: span 6/span 6;
}

@media (min-width: 480px) {
  .col-span-6\@xs {
    grid-column: span 6/span 6;
  }

  .row-span-6\@xs {
    grid-row: span 6/span 6;
  }
}

@media (min-width: 640px) {
  .col-span-6\@sm {
    grid-column: span 6/span 6;
  }

  .row-span-6\@sm {
    grid-row: span 6/span 6;
  }
}

@media (min-width: 768px) {
  .col-span-6\@md {
    grid-column: span 6/span 6;
  }

  .row-span-6\@md {
    grid-row: span 6/span 6;
  }
}

@media (min-width: 1024px) {
  .col-span-6\@lg {
    grid-column: span 6/span 6;
  }

  .row-span-6\@lg {
    grid-row: span 6/span 6;
  }
}

@media (min-width: 1280px) {
  .col-span-6\@xl {
    grid-column: span 6/span 6;
  }

  .row-span-6\@xl {
    grid-row: span 6/span 6;
  }
}

@media (min-width: 1536px) {
  .col-span-6\@2xl {
    grid-column: span 6/span 6;
  }

  .row-span-6\@2xl {
    grid-row: span 6/span 6;
  }
}

.col-span-7 {
  grid-column: span 7/span 7;
}

.row-span-7 {
  grid-row: span 7/span 7;
}

@media (min-width: 480px) {
  .col-span-7\@xs {
    grid-column: span 7/span 7;
  }

  .row-span-7\@xs {
    grid-row: span 7/span 7;
  }
}

@media (min-width: 640px) {
  .col-span-7\@sm {
    grid-column: span 7/span 7;
  }

  .row-span-7\@sm {
    grid-row: span 7/span 7;
  }
}

@media (min-width: 768px) {
  .col-span-7\@md {
    grid-column: span 7/span 7;
  }

  .row-span-7\@md {
    grid-row: span 7/span 7;
  }
}

@media (min-width: 1024px) {
  .col-span-7\@lg {
    grid-column: span 7/span 7;
  }

  .row-span-7\@lg {
    grid-row: span 7/span 7;
  }
}

@media (min-width: 1280px) {
  .col-span-7\@xl {
    grid-column: span 7/span 7;
  }

  .row-span-7\@xl {
    grid-row: span 7/span 7;
  }
}

@media (min-width: 1536px) {
  .col-span-7\@2xl {
    grid-column: span 7/span 7;
  }

  .row-span-7\@2xl {
    grid-row: span 7/span 7;
  }
}

.col-span-8 {
  grid-column: span 8/span 8;
}

.row-span-8 {
  grid-row: span 8/span 8;
}

@media (min-width: 480px) {
  .col-span-8\@xs {
    grid-column: span 8/span 8;
  }

  .row-span-8\@xs {
    grid-row: span 8/span 8;
  }
}

@media (min-width: 640px) {
  .col-span-8\@sm {
    grid-column: span 8/span 8;
  }

  .row-span-8\@sm {
    grid-row: span 8/span 8;
  }
}

@media (min-width: 768px) {
  .col-span-8\@md {
    grid-column: span 8/span 8;
  }

  .row-span-8\@md {
    grid-row: span 8/span 8;
  }
}

@media (min-width: 1024px) {
  .col-span-8\@lg {
    grid-column: span 8/span 8;
  }

  .row-span-8\@lg {
    grid-row: span 8/span 8;
  }
}

@media (min-width: 1280px) {
  .col-span-8\@xl {
    grid-column: span 8/span 8;
  }

  .row-span-8\@xl {
    grid-row: span 8/span 8;
  }
}

@media (min-width: 1536px) {
  .col-span-8\@2xl {
    grid-column: span 8/span 8;
  }

  .row-span-8\@2xl {
    grid-row: span 8/span 8;
  }
}

.col-span-9 {
  grid-column: span 9/span 9;
}

.row-span-9 {
  grid-row: span 9/span 9;
}

@media (min-width: 480px) {
  .col-span-9\@xs {
    grid-column: span 9/span 9;
  }

  .row-span-9\@xs {
    grid-row: span 9/span 9;
  }
}

@media (min-width: 640px) {
  .col-span-9\@sm {
    grid-column: span 9/span 9;
  }

  .row-span-9\@sm {
    grid-row: span 9/span 9;
  }
}

@media (min-width: 768px) {
  .col-span-9\@md {
    grid-column: span 9/span 9;
  }

  .row-span-9\@md {
    grid-row: span 9/span 9;
  }
}

@media (min-width: 1024px) {
  .col-span-9\@lg {
    grid-column: span 9/span 9;
  }

  .row-span-9\@lg {
    grid-row: span 9/span 9;
  }
}

@media (min-width: 1280px) {
  .col-span-9\@xl {
    grid-column: span 9/span 9;
  }

  .row-span-9\@xl {
    grid-row: span 9/span 9;
  }
}

@media (min-width: 1536px) {
  .col-span-9\@2xl {
    grid-column: span 9/span 9;
  }

  .row-span-9\@2xl {
    grid-row: span 9/span 9;
  }
}

.col-span-10 {
  grid-column: span 10/span 10;
}

.row-span-10 {
  grid-row: span 10/span 10;
}

@media (min-width: 480px) {
  .col-span-10\@xs {
    grid-column: span 10/span 10;
  }

  .row-span-10\@xs {
    grid-row: span 10/span 10;
  }
}

@media (min-width: 640px) {
  .col-span-10\@sm {
    grid-column: span 10/span 10;
  }

  .row-span-10\@sm {
    grid-row: span 10/span 10;
  }
}

@media (min-width: 768px) {
  .col-span-10\@md {
    grid-column: span 10/span 10;
  }

  .row-span-10\@md {
    grid-row: span 10/span 10;
  }
}

@media (min-width: 1024px) {
  .col-span-10\@lg {
    grid-column: span 10/span 10;
  }

  .row-span-10\@lg {
    grid-row: span 10/span 10;
  }
}

@media (min-width: 1280px) {
  .col-span-10\@xl {
    grid-column: span 10/span 10;
  }

  .row-span-10\@xl {
    grid-row: span 10/span 10;
  }
}

@media (min-width: 1536px) {
  .col-span-10\@2xl {
    grid-column: span 10/span 10;
  }

  .row-span-10\@2xl {
    grid-row: span 10/span 10;
  }
}

.col-span-11 {
  grid-column: span 11/span 11;
}

.row-span-11 {
  grid-row: span 11/span 11;
}

@media (min-width: 480px) {
  .col-span-11\@xs {
    grid-column: span 11/span 11;
  }

  .row-span-11\@xs {
    grid-row: span 11/span 11;
  }
}

@media (min-width: 640px) {
  .col-span-11\@sm {
    grid-column: span 11/span 11;
  }

  .row-span-11\@sm {
    grid-row: span 11/span 11;
  }
}

@media (min-width: 768px) {
  .col-span-11\@md {
    grid-column: span 11/span 11;
  }

  .row-span-11\@md {
    grid-row: span 11/span 11;
  }
}

@media (min-width: 1024px) {
  .col-span-11\@lg {
    grid-column: span 11/span 11;
  }

  .row-span-11\@lg {
    grid-row: span 11/span 11;
  }
}

@media (min-width: 1280px) {
  .col-span-11\@xl {
    grid-column: span 11/span 11;
  }

  .row-span-11\@xl {
    grid-row: span 11/span 11;
  }
}

@media (min-width: 1536px) {
  .col-span-11\@2xl {
    grid-column: span 11/span 11;
  }

  .row-span-11\@2xl {
    grid-row: span 11/span 11;
  }
}

.col-span-12 {
  grid-column: span 12/span 12;
}

.row-span-12 {
  grid-row: span 12/span 12;
}

@media (min-width: 480px) {
  .col-span-12\@xs {
    grid-column: span 12/span 12;
  }

  .row-span-12\@xs {
    grid-row: span 12/span 12;
  }
}

@media (min-width: 640px) {
  .col-span-12\@sm {
    grid-column: span 12/span 12;
  }

  .row-span-12\@sm {
    grid-row: span 12/span 12;
  }
}

@media (min-width: 768px) {
  .col-span-12\@md {
    grid-column: span 12/span 12;
  }

  .row-span-12\@md {
    grid-row: span 12/span 12;
  }
}

@media (min-width: 1024px) {
  .col-span-12\@lg {
    grid-column: span 12/span 12;
  }

  .row-span-12\@lg {
    grid-row: span 12/span 12;
  }
}

@media (min-width: 1280px) {
  .col-span-12\@xl {
    grid-column: span 12/span 12;
  }

  .row-span-12\@xl {
    grid-row: span 12/span 12;
  }
}

@media (min-width: 1536px) {
  .col-span-12\@2xl {
    grid-column: span 12/span 12;
  }

  .row-span-12\@2xl {
    grid-row: span 12/span 12;
  }
}

.grid.auto-fit-xs {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid.auto-fill-xs {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.grid.auto-fit-sm {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid.auto-fill-sm {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.grid.auto-fit-md {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid.auto-fill-md {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid.auto-fit-lg {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.grid.auto-fill-lg {
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

.grid.auto-fit-xl {
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.grid.auto-fill-xl {
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.grid.flow-row {
  grid-auto-flow: row;
}

.grid.flow-col {
  grid-auto-flow: column;
}

.grid.flow-dense {
  grid-auto-flow: dense;
}

.justify-start {
  justify-items: start;
}

.align-start {
  align-items: start;
}

.place-start {
  place-items: start;
}

@media (min-width: 480px) {
  .justify-start\@xs {
    justify-items: start;
  }

  .align-start\@xs {
    align-items: start;
  }

  .place-start\@xs {
    place-items: start;
  }
}

@media (min-width: 640px) {
  .justify-start\@sm {
    justify-items: start;
  }

  .align-start\@sm {
    align-items: start;
  }

  .place-start\@sm {
    place-items: start;
  }
}

@media (min-width: 768px) {
  .justify-start\@md {
    justify-items: start;
  }

  .align-start\@md {
    align-items: start;
  }

  .place-start\@md {
    place-items: start;
  }
}

@media (min-width: 1024px) {
  .justify-start\@lg {
    justify-items: start;
  }

  .align-start\@lg {
    align-items: start;
  }

  .place-start\@lg {
    place-items: start;
  }
}

@media (min-width: 1280px) {
  .justify-start\@xl {
    justify-items: start;
  }

  .align-start\@xl {
    align-items: start;
  }

  .place-start\@xl {
    place-items: start;
  }
}

@media (min-width: 1536px) {
  .justify-start\@2xl {
    justify-items: start;
  }

  .align-start\@2xl {
    align-items: start;
  }

  .place-start\@2xl {
    place-items: start;
  }
}

.justify-end {
  justify-items: end;
}

.align-end {
  align-items: end;
}

.place-end {
  place-items: end;
}

@media (min-width: 480px) {
  .justify-end\@xs {
    justify-items: end;
  }

  .align-end\@xs {
    align-items: end;
  }

  .place-end\@xs {
    place-items: end;
  }
}

@media (min-width: 640px) {
  .justify-end\@sm {
    justify-items: end;
  }

  .align-end\@sm {
    align-items: end;
  }

  .place-end\@sm {
    place-items: end;
  }
}

@media (min-width: 768px) {
  .justify-end\@md {
    justify-items: end;
  }

  .align-end\@md {
    align-items: end;
  }

  .place-end\@md {
    place-items: end;
  }
}

@media (min-width: 1024px) {
  .justify-end\@lg {
    justify-items: end;
  }

  .align-end\@lg {
    align-items: end;
  }

  .place-end\@lg {
    place-items: end;
  }
}

@media (min-width: 1280px) {
  .justify-end\@xl {
    justify-items: end;
  }

  .align-end\@xl {
    align-items: end;
  }

  .place-end\@xl {
    place-items: end;
  }
}

@media (min-width: 1536px) {
  .justify-end\@2xl {
    justify-items: end;
  }

  .align-end\@2xl {
    align-items: end;
  }

  .place-end\@2xl {
    place-items: end;
  }
}

.justify-center {
  justify-items: center;
}

.align-center {
  align-items: center;
}

.place-center {
  place-items: center;
}

@media (min-width: 480px) {
  .justify-center\@xs {
    justify-items: center;
  }

  .align-center\@xs {
    align-items: center;
  }

  .place-center\@xs {
    place-items: center;
  }
}

@media (min-width: 640px) {
  .justify-center\@sm {
    justify-items: center;
  }

  .align-center\@sm {
    align-items: center;
  }

  .place-center\@sm {
    place-items: center;
  }
}

@media (min-width: 768px) {
  .justify-center\@md {
    justify-items: center;
  }

  .align-center\@md {
    align-items: center;
  }

  .place-center\@md {
    place-items: center;
  }
}

@media (min-width: 1024px) {
  .justify-center\@lg {
    justify-items: center;
  }

  .align-center\@lg {
    align-items: center;
  }

  .place-center\@lg {
    place-items: center;
  }
}

@media (min-width: 1280px) {
  .justify-center\@xl {
    justify-items: center;
  }

  .align-center\@xl {
    align-items: center;
  }

  .place-center\@xl {
    place-items: center;
  }
}

@media (min-width: 1536px) {
  .justify-center\@2xl {
    justify-items: center;
  }

  .align-center\@2xl {
    align-items: center;
  }

  .place-center\@2xl {
    place-items: center;
  }
}

.justify-stretch {
  justify-items: stretch;
}

.align-stretch {
  align-items: stretch;
}

.place-stretch {
  place-items: stretch;
}

@media (min-width: 480px) {
  .justify-stretch\@xs {
    justify-items: stretch;
  }

  .align-stretch\@xs {
    align-items: stretch;
  }

  .place-stretch\@xs {
    place-items: stretch;
  }
}

@media (min-width: 640px) {
  .justify-stretch\@sm {
    justify-items: stretch;
  }

  .align-stretch\@sm {
    align-items: stretch;
  }

  .place-stretch\@sm {
    place-items: stretch;
  }
}

@media (min-width: 768px) {
  .justify-stretch\@md {
    justify-items: stretch;
  }

  .align-stretch\@md {
    align-items: stretch;
  }

  .place-stretch\@md {
    place-items: stretch;
  }
}

@media (min-width: 1024px) {
  .justify-stretch\@lg {
    justify-items: stretch;
  }

  .align-stretch\@lg {
    align-items: stretch;
  }

  .place-stretch\@lg {
    place-items: stretch;
  }
}

@media (min-width: 1280px) {
  .justify-stretch\@xl {
    justify-items: stretch;
  }

  .align-stretch\@xl {
    align-items: stretch;
  }

  .place-stretch\@xl {
    place-items: stretch;
  }
}

@media (min-width: 1536px) {
  .justify-stretch\@2xl {
    justify-items: stretch;
  }

  .align-stretch\@2xl {
    align-items: stretch;
  }

  .place-stretch\@2xl {
    place-items: stretch;
  }
}

.align-baseline {
  vertical-align: baseline;
}

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.align-bottom {
  vertical-align: bottom;
}

@media (min-width: 480px) {
  .align-baseline\@xs {
    vertical-align: baseline;
  }

  .align-top\@xs {
    vertical-align: top;
  }

  .align-middle\@xs {
    vertical-align: middle;
  }

  .align-bottom\@xs {
    vertical-align: bottom;
  }
}

@media (min-width: 640px) {
  .align-baseline\@sm {
    vertical-align: baseline;
  }

  .align-top\@sm {
    vertical-align: top;
  }

  .align-middle\@sm {
    vertical-align: middle;
  }

  .align-bottom\@sm {
    vertical-align: bottom;
  }
}

@media (min-width: 768px) {
  .align-baseline\@md {
    vertical-align: baseline;
  }

  .align-top\@md {
    vertical-align: top;
  }

  .align-middle\@md {
    vertical-align: middle;
  }

  .align-bottom\@md {
    vertical-align: bottom;
  }
}

@media (min-width: 1024px) {
  .align-baseline\@lg {
    vertical-align: baseline;
  }

  .align-top\@lg {
    vertical-align: top;
  }

  .align-middle\@lg {
    vertical-align: middle;
  }

  .align-bottom\@lg {
    vertical-align: bottom;
  }
}

@media (min-width: 1280px) {
  .align-baseline\@xl {
    vertical-align: baseline;
  }

  .align-top\@xl {
    vertical-align: top;
  }

  .align-middle\@xl {
    vertical-align: middle;
  }

  .align-bottom\@xl {
    vertical-align: bottom;
  }
}

@media (min-width: 1536px) {
  .align-baseline\@2xl {
    vertical-align: baseline;
  }

  .align-top\@2xl {
    vertical-align: top;
  }

  .align-middle\@2xl {
    vertical-align: middle;
  }

  .align-bottom\@2xl {
    vertical-align: bottom;
  }
}

/**
 * @mixin animate-bounce
 * @description Creates a bouncing animation
 * @param {Map} $props - Animation properties
 */
/**
 * @mixin animate-pulse
 * @description Creates a pulsing opacity animation
 * @param {Map} $props - Animation properties
 */
/**
 * @mixin animate-spin
 * @description Creates a spinning animation
 * @param {Map} $props - Animation properties
 */
/**
 * @mixin animate-ping
 * @description Creates a ping animation (scale + fade)
 * @param {Map} $props - Animation properties
 */
/**
 * @mixin animate-fade
 * @description Creates fade in/out animation
 * @param {Map} $props - Animation properties
 */
/**
 * @mixin animate-shake
 * @description Creates a shake animation
 * @param {Map} $props - Animation properties
 */
.animate-pulse {
  animation: anim-pulse-50-100 1s ease-in-out infinite;
}

@keyframes anim-pulse-50-100 {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.animate-spin {
  animation: anim-spin-normal 1s linear infinite;
}

@keyframes anim-spin-normal {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.animate-ping {
  animation: anim-ping-20 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes anim-ping-20 {

  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-fade-in {
  animation: anim-fade-in 0.5s ease-in-out 1 forwards;
}

@keyframes anim-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.animate-fade-out {
  animation: anim-fade-out 0.5s ease-in-out 1 forwards;
}

@keyframes anim-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.animate-fade-in-up {
  animation: anim-fade-in-up 0.5s ease-in-out 1 forwards;
}

@keyframes anim-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-down {
  animation: anim-fade-in-down 0.5s ease-in-out 1 forwards;
}

@keyframes anim-fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-shake {
  animation: anim-shake-5 0.5s ease-in-out 1;
}

@keyframes anim-shake-5 {

  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

@media (min-width: 480px) {
  .animate-pulse\@xs {
    animation: anim-pulse-50-100 1s ease-in-out infinite;
  }

  .animate-spin\@xs {
    animation: anim-spin-normal 1s linear infinite;
  }

  .animate-ping\@xs {
    animation: anim-ping-20 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  .animate-fade-in\@xs {
    animation: anim-fade-in 0.5s ease-in-out 1 forwards;
  }

  .animate-fade-out\@xs {
    animation: anim-fade-out 0.5s ease-in-out 1 forwards;
  }

  .animate-fade-in-up\@xs {
    animation: anim-fade-in-up 0.5s ease-in-out 1 forwards;
  }

  .animate-fade-in-down\@xs {
    animation: anim-fade-in-down 0.5s ease-in-out 1 forwards;
  }

  .animate-shake\@xs {
    animation: anim-shake-5 0.5s ease-in-out 1;
  }
}

@media (min-width: 640px) {
  .animate-pulse\@sm {
    animation: anim-pulse-50-100 1s ease-in-out infinite;
  }

  .animate-spin\@sm {
    animation: anim-spin-normal 1s linear infinite;
  }

  .animate-ping\@sm {
    animation: anim-ping-20 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  .animate-fade-in\@sm {
    animation: anim-fade-in 0.5s ease-in-out 1 forwards;
  }

  .animate-fade-out\@sm {
    animation: anim-fade-out 0.5s ease-in-out 1 forwards;
  }

  .animate-fade-in-up\@sm {
    animation: anim-fade-in-up 0.5s ease-in-out 1 forwards;
  }

  .animate-fade-in-down\@sm {
    animation: anim-fade-in-down 0.5s ease-in-out 1 forwards;
  }

  .animate-shake\@sm {
    animation: anim-shake-5 0.5s ease-in-out 1;
  }
}

@media (min-width: 768px) {
  .animate-pulse\@md {
    animation: anim-pulse-50-100 1s ease-in-out infinite;
  }

  .animate-spin\@md {
    animation: anim-spin-normal 1s linear infinite;
  }

  .animate-ping\@md {
    animation: anim-ping-20 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  .animate-fade-in\@md {
    animation: anim-fade-in 0.5s ease-in-out 1 forwards;
  }

  .animate-fade-out\@md {
    animation: anim-fade-out 0.5s ease-in-out 1 forwards;
  }

  .animate-fade-in-up\@md {
    animation: anim-fade-in-up 0.5s ease-in-out 1 forwards;
  }

  .animate-fade-in-down\@md {
    animation: anim-fade-in-down 0.5s ease-in-out 1 forwards;
  }

  .animate-shake\@md {
    animation: anim-shake-5 0.5s ease-in-out 1;
  }
}

@media (min-width: 1024px) {
  .animate-pulse\@lg {
    animation: anim-pulse-50-100 1s ease-in-out infinite;
  }

  .animate-spin\@lg {
    animation: anim-spin-normal 1s linear infinite;
  }

  .animate-ping\@lg {
    animation: anim-ping-20 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  .animate-fade-in\@lg {
    animation: anim-fade-in 0.5s ease-in-out 1 forwards;
  }

  .animate-fade-out\@lg {
    animation: anim-fade-out 0.5s ease-in-out 1 forwards;
  }

  .animate-fade-in-up\@lg {
    animation: anim-fade-in-up 0.5s ease-in-out 1 forwards;
  }

  .animate-fade-in-down\@lg {
    animation: anim-fade-in-down 0.5s ease-in-out 1 forwards;
  }

  .animate-shake\@lg {
    animation: anim-shake-5 0.5s ease-in-out 1;
  }
}

@media (min-width: 1280px) {
  .animate-pulse\@xl {
    animation: anim-pulse-50-100 1s ease-in-out infinite;
  }

  .animate-spin\@xl {
    animation: anim-spin-normal 1s linear infinite;
  }

  .animate-ping\@xl {
    animation: anim-ping-20 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  .animate-fade-in\@xl {
    animation: anim-fade-in 0.5s ease-in-out 1 forwards;
  }

  .animate-fade-out\@xl {
    animation: anim-fade-out 0.5s ease-in-out 1 forwards;
  }

  .animate-fade-in-up\@xl {
    animation: anim-fade-in-up 0.5s ease-in-out 1 forwards;
  }

  .animate-fade-in-down\@xl {
    animation: anim-fade-in-down 0.5s ease-in-out 1 forwards;
  }

  .animate-shake\@xl {
    animation: anim-shake-5 0.5s ease-in-out 1;
  }
}

@media (min-width: 1536px) {
  .animate-pulse\@2xl {
    animation: anim-pulse-50-100 1s ease-in-out infinite;
  }

  .animate-spin\@2xl {
    animation: anim-spin-normal 1s linear infinite;
  }

  .animate-ping\@2xl {
    animation: anim-ping-20 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  .animate-fade-in\@2xl {
    animation: anim-fade-in 0.5s ease-in-out 1 forwards;
  }

  .animate-fade-out\@2xl {
    animation: anim-fade-out 0.5s ease-in-out 1 forwards;
  }

  .animate-fade-in-up\@2xl {
    animation: anim-fade-in-up 0.5s ease-in-out 1 forwards;
  }

  .animate-fade-in-down\@2xl {
    animation: anim-fade-in-down 0.5s ease-in-out 1 forwards;
  }

  .animate-shake\@2xl {
    animation: anim-shake-5 0.5s ease-in-out 1;
  }
}

.hover-ready {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

/**
 * Backdrop Filter Utilities
 *
 * Provides utility classes and mixins for backdrop-filter effects.
 * All utilities come with responsive variants.
 *
 * Usage:
 * <div class="backdrop-blur-md">Blurred backdrop</div>
 * <div class="backdrop-blur-lg@md">Blurred backdrop on medium screens and up</div>
 */
.backdrop-none {
  backdrop-filter: none;
}

.backdrop-blur-none {
  backdrop-filter: blur(0);
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

.backdrop-blur-md {
  backdrop-filter: blur(8px);
}

.backdrop-blur-lg {
  backdrop-filter: blur(12px);
}

.backdrop-blur-xl {
  backdrop-filter: blur(24px);
}

.backdrop-blur-2xl {
  backdrop-filter: blur(40px);
}

.backdrop-brightness-none {
  backdrop-filter: brightness(100%);
}

.backdrop-brightness-75 {
  backdrop-filter: brightness(75%);
}

.backdrop-brightness-90 {
  backdrop-filter: brightness(90%);
}

.backdrop-brightness-110 {
  backdrop-filter: brightness(110%);
}

.backdrop-brightness-125 {
  backdrop-filter: brightness(125%);
}

.backdrop-brightness-150 {
  backdrop-filter: brightness(150%);
}

.backdrop-contrast-none {
  backdrop-filter: contrast(100%);
}

.backdrop-contrast-75 {
  backdrop-filter: contrast(75%);
}

.backdrop-contrast-90 {
  backdrop-filter: contrast(90%);
}

.backdrop-contrast-110 {
  backdrop-filter: contrast(110%);
}

.backdrop-contrast-125 {
  backdrop-filter: contrast(125%);
}

.backdrop-contrast-150 {
  backdrop-filter: contrast(150%);
}

.backdrop-grayscale-none {
  backdrop-filter: grayscale(0);
}

.backdrop-grayscale-25 {
  backdrop-filter: grayscale(25%);
}

.backdrop-grayscale-50 {
  backdrop-filter: grayscale(50%);
}

.backdrop-grayscale-75 {
  backdrop-filter: grayscale(75%);
}

.backdrop-grayscale-100 {
  backdrop-filter: grayscale(100%);
}

.backdrop-saturate-none {
  backdrop-filter: saturate(100%);
}

.backdrop-saturate-50 {
  backdrop-filter: saturate(50%);
}

.backdrop-saturate-75 {
  backdrop-filter: saturate(75%);
}

.backdrop-saturate-125 {
  backdrop-filter: saturate(125%);
}

.backdrop-saturate-150 {
  backdrop-filter: saturate(150%);
}

.backdrop-saturate-200 {
  backdrop-filter: saturate(200%);
}

.backdrop-sepia-none {
  backdrop-filter: sepia(0);
}

.backdrop-sepia-25 {
  backdrop-filter: sepia(25%);
}

.backdrop-sepia-50 {
  backdrop-filter: sepia(50%);
}

.backdrop-sepia-75 {
  backdrop-filter: sepia(75%);
}

.backdrop-sepia-100 {
  backdrop-filter: sepia(100%);
}

.backdrop-hue-0 {
  backdrop-filter: hue-rotate(0deg);
}

.backdrop-hue-90 {
  backdrop-filter: hue-rotate(90deg);
}

.backdrop-hue-180 {
  backdrop-filter: hue-rotate(180deg);
}

.backdrop-hue-270 {
  backdrop-filter: hue-rotate(270deg);
}

.backdrop-invert-none {
  backdrop-filter: invert(0);
}

.backdrop-invert-25 {
  backdrop-filter: invert(25%);
}

.backdrop-invert-50 {
  backdrop-filter: invert(50%);
}

.backdrop-invert-75 {
  backdrop-filter: invert(75%);
}

.backdrop-invert-100 {
  backdrop-filter: invert(100%);
}

.backdrop-frosted {
  backdrop-filter: blur(8px) saturate(90%) brightness(120%);
}

.backdrop-glass {
  backdrop-filter: blur(8px) saturate(120%) contrast(90%);
}

.backdrop-dark-glass {
  backdrop-filter: blur(8px) saturate(180%) brightness(70%) contrast(90%);
}

.backdrop-crystal {
  backdrop-filter: blur(8px) saturate(150%);
}

.backdrop-matte {
  backdrop-filter: blur(20px) saturate(90%) brightness(90%);
}

@media (min-width: 480px) {
  .backdrop-none\@xs {
    backdrop-filter: none;
  }

  .backdrop-blur-none\@xs {
    backdrop-filter: blur(0);
  }

  .backdrop-blur-sm\@xs {
    backdrop-filter: blur(4px);
  }

  .backdrop-blur-md\@xs {
    backdrop-filter: blur(8px);
  }

  .backdrop-blur-lg\@xs {
    backdrop-filter: blur(12px);
  }

  .backdrop-blur-xl\@xs {
    backdrop-filter: blur(24px);
  }

  .backdrop-blur-2xl\@xs {
    backdrop-filter: blur(40px);
  }

  .backdrop-brightness-none\@xs {
    backdrop-filter: brightness(100%);
  }

  .backdrop-brightness-75\@xs {
    backdrop-filter: brightness(75%);
  }

  .backdrop-brightness-90\@xs {
    backdrop-filter: brightness(90%);
  }

  .backdrop-brightness-110\@xs {
    backdrop-filter: brightness(110%);
  }

  .backdrop-brightness-125\@xs {
    backdrop-filter: brightness(125%);
  }

  .backdrop-brightness-150\@xs {
    backdrop-filter: brightness(150%);
  }

  .backdrop-contrast-none\@xs {
    backdrop-filter: contrast(100%);
  }

  .backdrop-contrast-75\@xs {
    backdrop-filter: contrast(75%);
  }

  .backdrop-contrast-90\@xs {
    backdrop-filter: contrast(90%);
  }

  .backdrop-contrast-110\@xs {
    backdrop-filter: contrast(110%);
  }

  .backdrop-contrast-125\@xs {
    backdrop-filter: contrast(125%);
  }

  .backdrop-contrast-150\@xs {
    backdrop-filter: contrast(150%);
  }

  .backdrop-grayscale-none\@xs {
    backdrop-filter: grayscale(0);
  }

  .backdrop-grayscale-25\@xs {
    backdrop-filter: grayscale(25%);
  }

  .backdrop-grayscale-50\@xs {
    backdrop-filter: grayscale(50%);
  }

  .backdrop-grayscale-75\@xs {
    backdrop-filter: grayscale(75%);
  }

  .backdrop-grayscale-100\@xs {
    backdrop-filter: grayscale(100%);
  }

  .backdrop-saturate-none\@xs {
    backdrop-filter: saturate(100%);
  }

  .backdrop-saturate-50\@xs {
    backdrop-filter: saturate(50%);
  }

  .backdrop-saturate-75\@xs {
    backdrop-filter: saturate(75%);
  }

  .backdrop-saturate-125\@xs {
    backdrop-filter: saturate(125%);
  }

  .backdrop-saturate-150\@xs {
    backdrop-filter: saturate(150%);
  }

  .backdrop-saturate-200\@xs {
    backdrop-filter: saturate(200%);
  }

  .backdrop-sepia-none\@xs {
    backdrop-filter: sepia(0);
  }

  .backdrop-sepia-25\@xs {
    backdrop-filter: sepia(25%);
  }

  .backdrop-sepia-50\@xs {
    backdrop-filter: sepia(50%);
  }

  .backdrop-sepia-75\@xs {
    backdrop-filter: sepia(75%);
  }

  .backdrop-sepia-100\@xs {
    backdrop-filter: sepia(100%);
  }

  .backdrop-hue-0\@xs {
    backdrop-filter: hue-rotate(0deg);
  }

  .backdrop-hue-90\@xs {
    backdrop-filter: hue-rotate(90deg);
  }

  .backdrop-hue-180\@xs {
    backdrop-filter: hue-rotate(180deg);
  }

  .backdrop-hue-270\@xs {
    backdrop-filter: hue-rotate(270deg);
  }

  .backdrop-invert-none\@xs {
    backdrop-filter: invert(0);
  }

  .backdrop-invert-25\@xs {
    backdrop-filter: invert(25%);
  }

  .backdrop-invert-50\@xs {
    backdrop-filter: invert(50%);
  }

  .backdrop-invert-75\@xs {
    backdrop-filter: invert(75%);
  }

  .backdrop-invert-100\@xs {
    backdrop-filter: invert(100%);
  }

  .backdrop-frosted\@xs {
    backdrop-filter: blur(8px) saturate(90%) brightness(120%);
  }

  .backdrop-glass\@xs {
    backdrop-filter: blur(8px) saturate(120%) contrast(90%);
  }

  .backdrop-dark-glass\@xs {
    backdrop-filter: blur(8px) saturate(180%) brightness(70%) contrast(90%);
  }

  .backdrop-crystal\@xs {
    backdrop-filter: blur(8px) saturate(150%);
  }

  .backdrop-matte\@xs {
    backdrop-filter: blur(20px) saturate(90%) brightness(90%);
  }
}

@media (min-width: 640px) {
  .backdrop-none\@sm {
    backdrop-filter: none;
  }

  .backdrop-blur-none\@sm {
    backdrop-filter: blur(0);
  }

  .backdrop-blur-sm\@sm {
    backdrop-filter: blur(4px);
  }

  .backdrop-blur-md\@sm {
    backdrop-filter: blur(8px);
  }

  .backdrop-blur-lg\@sm {
    backdrop-filter: blur(12px);
  }

  .backdrop-blur-xl\@sm {
    backdrop-filter: blur(24px);
  }

  .backdrop-blur-2xl\@sm {
    backdrop-filter: blur(40px);
  }

  .backdrop-brightness-none\@sm {
    backdrop-filter: brightness(100%);
  }

  .backdrop-brightness-75\@sm {
    backdrop-filter: brightness(75%);
  }

  .backdrop-brightness-90\@sm {
    backdrop-filter: brightness(90%);
  }

  .backdrop-brightness-110\@sm {
    backdrop-filter: brightness(110%);
  }

  .backdrop-brightness-125\@sm {
    backdrop-filter: brightness(125%);
  }

  .backdrop-brightness-150\@sm {
    backdrop-filter: brightness(150%);
  }

  .backdrop-contrast-none\@sm {
    backdrop-filter: contrast(100%);
  }

  .backdrop-contrast-75\@sm {
    backdrop-filter: contrast(75%);
  }

  .backdrop-contrast-90\@sm {
    backdrop-filter: contrast(90%);
  }

  .backdrop-contrast-110\@sm {
    backdrop-filter: contrast(110%);
  }

  .backdrop-contrast-125\@sm {
    backdrop-filter: contrast(125%);
  }

  .backdrop-contrast-150\@sm {
    backdrop-filter: contrast(150%);
  }

  .backdrop-grayscale-none\@sm {
    backdrop-filter: grayscale(0);
  }

  .backdrop-grayscale-25\@sm {
    backdrop-filter: grayscale(25%);
  }

  .backdrop-grayscale-50\@sm {
    backdrop-filter: grayscale(50%);
  }

  .backdrop-grayscale-75\@sm {
    backdrop-filter: grayscale(75%);
  }

  .backdrop-grayscale-100\@sm {
    backdrop-filter: grayscale(100%);
  }

  .backdrop-saturate-none\@sm {
    backdrop-filter: saturate(100%);
  }

  .backdrop-saturate-50\@sm {
    backdrop-filter: saturate(50%);
  }

  .backdrop-saturate-75\@sm {
    backdrop-filter: saturate(75%);
  }

  .backdrop-saturate-125\@sm {
    backdrop-filter: saturate(125%);
  }

  .backdrop-saturate-150\@sm {
    backdrop-filter: saturate(150%);
  }

  .backdrop-saturate-200\@sm {
    backdrop-filter: saturate(200%);
  }

  .backdrop-sepia-none\@sm {
    backdrop-filter: sepia(0);
  }

  .backdrop-sepia-25\@sm {
    backdrop-filter: sepia(25%);
  }

  .backdrop-sepia-50\@sm {
    backdrop-filter: sepia(50%);
  }

  .backdrop-sepia-75\@sm {
    backdrop-filter: sepia(75%);
  }

  .backdrop-sepia-100\@sm {
    backdrop-filter: sepia(100%);
  }

  .backdrop-hue-0\@sm {
    backdrop-filter: hue-rotate(0deg);
  }

  .backdrop-hue-90\@sm {
    backdrop-filter: hue-rotate(90deg);
  }

  .backdrop-hue-180\@sm {
    backdrop-filter: hue-rotate(180deg);
  }

  .backdrop-hue-270\@sm {
    backdrop-filter: hue-rotate(270deg);
  }

  .backdrop-invert-none\@sm {
    backdrop-filter: invert(0);
  }

  .backdrop-invert-25\@sm {
    backdrop-filter: invert(25%);
  }

  .backdrop-invert-50\@sm {
    backdrop-filter: invert(50%);
  }

  .backdrop-invert-75\@sm {
    backdrop-filter: invert(75%);
  }

  .backdrop-invert-100\@sm {
    backdrop-filter: invert(100%);
  }

  .backdrop-frosted\@sm {
    backdrop-filter: blur(8px) saturate(90%) brightness(120%);
  }

  .backdrop-glass\@sm {
    backdrop-filter: blur(8px) saturate(120%) contrast(90%);
  }

  .backdrop-dark-glass\@sm {
    backdrop-filter: blur(8px) saturate(180%) brightness(70%) contrast(90%);
  }

  .backdrop-crystal\@sm {
    backdrop-filter: blur(8px) saturate(150%);
  }

  .backdrop-matte\@sm {
    backdrop-filter: blur(20px) saturate(90%) brightness(90%);
  }
}

@media (min-width: 768px) {
  .backdrop-none\@md {
    backdrop-filter: none;
  }

  .backdrop-blur-none\@md {
    backdrop-filter: blur(0);
  }

  .backdrop-blur-sm\@md {
    backdrop-filter: blur(4px);
  }

  .backdrop-blur-md\@md {
    backdrop-filter: blur(8px);
  }

  .backdrop-blur-lg\@md {
    backdrop-filter: blur(12px);
  }

  .backdrop-blur-xl\@md {
    backdrop-filter: blur(24px);
  }

  .backdrop-blur-2xl\@md {
    backdrop-filter: blur(40px);
  }

  .backdrop-brightness-none\@md {
    backdrop-filter: brightness(100%);
  }

  .backdrop-brightness-75\@md {
    backdrop-filter: brightness(75%);
  }

  .backdrop-brightness-90\@md {
    backdrop-filter: brightness(90%);
  }

  .backdrop-brightness-110\@md {
    backdrop-filter: brightness(110%);
  }

  .backdrop-brightness-125\@md {
    backdrop-filter: brightness(125%);
  }

  .backdrop-brightness-150\@md {
    backdrop-filter: brightness(150%);
  }

  .backdrop-contrast-none\@md {
    backdrop-filter: contrast(100%);
  }

  .backdrop-contrast-75\@md {
    backdrop-filter: contrast(75%);
  }

  .backdrop-contrast-90\@md {
    backdrop-filter: contrast(90%);
  }

  .backdrop-contrast-110\@md {
    backdrop-filter: contrast(110%);
  }

  .backdrop-contrast-125\@md {
    backdrop-filter: contrast(125%);
  }

  .backdrop-contrast-150\@md {
    backdrop-filter: contrast(150%);
  }

  .backdrop-grayscale-none\@md {
    backdrop-filter: grayscale(0);
  }

  .backdrop-grayscale-25\@md {
    backdrop-filter: grayscale(25%);
  }

  .backdrop-grayscale-50\@md {
    backdrop-filter: grayscale(50%);
  }

  .backdrop-grayscale-75\@md {
    backdrop-filter: grayscale(75%);
  }

  .backdrop-grayscale-100\@md {
    backdrop-filter: grayscale(100%);
  }

  .backdrop-saturate-none\@md {
    backdrop-filter: saturate(100%);
  }

  .backdrop-saturate-50\@md {
    backdrop-filter: saturate(50%);
  }

  .backdrop-saturate-75\@md {
    backdrop-filter: saturate(75%);
  }

  .backdrop-saturate-125\@md {
    backdrop-filter: saturate(125%);
  }

  .backdrop-saturate-150\@md {
    backdrop-filter: saturate(150%);
  }

  .backdrop-saturate-200\@md {
    backdrop-filter: saturate(200%);
  }

  .backdrop-sepia-none\@md {
    backdrop-filter: sepia(0);
  }

  .backdrop-sepia-25\@md {
    backdrop-filter: sepia(25%);
  }

  .backdrop-sepia-50\@md {
    backdrop-filter: sepia(50%);
  }

  .backdrop-sepia-75\@md {
    backdrop-filter: sepia(75%);
  }

  .backdrop-sepia-100\@md {
    backdrop-filter: sepia(100%);
  }

  .backdrop-hue-0\@md {
    backdrop-filter: hue-rotate(0deg);
  }

  .backdrop-hue-90\@md {
    backdrop-filter: hue-rotate(90deg);
  }

  .backdrop-hue-180\@md {
    backdrop-filter: hue-rotate(180deg);
  }

  .backdrop-hue-270\@md {
    backdrop-filter: hue-rotate(270deg);
  }

  .backdrop-invert-none\@md {
    backdrop-filter: invert(0);
  }

  .backdrop-invert-25\@md {
    backdrop-filter: invert(25%);
  }

  .backdrop-invert-50\@md {
    backdrop-filter: invert(50%);
  }

  .backdrop-invert-75\@md {
    backdrop-filter: invert(75%);
  }

  .backdrop-invert-100\@md {
    backdrop-filter: invert(100%);
  }

  .backdrop-frosted\@md {
    backdrop-filter: blur(8px) saturate(90%) brightness(120%);
  }

  .backdrop-glass\@md {
    backdrop-filter: blur(8px) saturate(120%) contrast(90%);
  }

  .backdrop-dark-glass\@md {
    backdrop-filter: blur(8px) saturate(180%) brightness(70%) contrast(90%);
  }

  .backdrop-crystal\@md {
    backdrop-filter: blur(8px) saturate(150%);
  }

  .backdrop-matte\@md {
    backdrop-filter: blur(20px) saturate(90%) brightness(90%);
  }
}

@media (min-width: 1024px) {
  .backdrop-none\@lg {
    backdrop-filter: none;
  }

  .backdrop-blur-none\@lg {
    backdrop-filter: blur(0);
  }

  .backdrop-blur-sm\@lg {
    backdrop-filter: blur(4px);
  }

  .backdrop-blur-md\@lg {
    backdrop-filter: blur(8px);
  }

  .backdrop-blur-lg\@lg {
    backdrop-filter: blur(12px);
  }

  .backdrop-blur-xl\@lg {
    backdrop-filter: blur(24px);
  }

  .backdrop-blur-2xl\@lg {
    backdrop-filter: blur(40px);
  }

  .backdrop-brightness-none\@lg {
    backdrop-filter: brightness(100%);
  }

  .backdrop-brightness-75\@lg {
    backdrop-filter: brightness(75%);
  }

  .backdrop-brightness-90\@lg {
    backdrop-filter: brightness(90%);
  }

  .backdrop-brightness-110\@lg {
    backdrop-filter: brightness(110%);
  }

  .backdrop-brightness-125\@lg {
    backdrop-filter: brightness(125%);
  }

  .backdrop-brightness-150\@lg {
    backdrop-filter: brightness(150%);
  }

  .backdrop-contrast-none\@lg {
    backdrop-filter: contrast(100%);
  }

  .backdrop-contrast-75\@lg {
    backdrop-filter: contrast(75%);
  }

  .backdrop-contrast-90\@lg {
    backdrop-filter: contrast(90%);
  }

  .backdrop-contrast-110\@lg {
    backdrop-filter: contrast(110%);
  }

  .backdrop-contrast-125\@lg {
    backdrop-filter: contrast(125%);
  }

  .backdrop-contrast-150\@lg {
    backdrop-filter: contrast(150%);
  }

  .backdrop-grayscale-none\@lg {
    backdrop-filter: grayscale(0);
  }

  .backdrop-grayscale-25\@lg {
    backdrop-filter: grayscale(25%);
  }

  .backdrop-grayscale-50\@lg {
    backdrop-filter: grayscale(50%);
  }

  .backdrop-grayscale-75\@lg {
    backdrop-filter: grayscale(75%);
  }

  .backdrop-grayscale-100\@lg {
    backdrop-filter: grayscale(100%);
  }

  .backdrop-saturate-none\@lg {
    backdrop-filter: saturate(100%);
  }

  .backdrop-saturate-50\@lg {
    backdrop-filter: saturate(50%);
  }

  .backdrop-saturate-75\@lg {
    backdrop-filter: saturate(75%);
  }

  .backdrop-saturate-125\@lg {
    backdrop-filter: saturate(125%);
  }

  .backdrop-saturate-150\@lg {
    backdrop-filter: saturate(150%);
  }

  .backdrop-saturate-200\@lg {
    backdrop-filter: saturate(200%);
  }

  .backdrop-sepia-none\@lg {
    backdrop-filter: sepia(0);
  }

  .backdrop-sepia-25\@lg {
    backdrop-filter: sepia(25%);
  }

  .backdrop-sepia-50\@lg {
    backdrop-filter: sepia(50%);
  }

  .backdrop-sepia-75\@lg {
    backdrop-filter: sepia(75%);
  }

  .backdrop-sepia-100\@lg {
    backdrop-filter: sepia(100%);
  }

  .backdrop-hue-0\@lg {
    backdrop-filter: hue-rotate(0deg);
  }

  .backdrop-hue-90\@lg {
    backdrop-filter: hue-rotate(90deg);
  }

  .backdrop-hue-180\@lg {
    backdrop-filter: hue-rotate(180deg);
  }

  .backdrop-hue-270\@lg {
    backdrop-filter: hue-rotate(270deg);
  }

  .backdrop-invert-none\@lg {
    backdrop-filter: invert(0);
  }

  .backdrop-invert-25\@lg {
    backdrop-filter: invert(25%);
  }

  .backdrop-invert-50\@lg {
    backdrop-filter: invert(50%);
  }

  .backdrop-invert-75\@lg {
    backdrop-filter: invert(75%);
  }

  .backdrop-invert-100\@lg {
    backdrop-filter: invert(100%);
  }

  .backdrop-frosted\@lg {
    backdrop-filter: blur(8px) saturate(90%) brightness(120%);
  }

  .backdrop-glass\@lg {
    backdrop-filter: blur(8px) saturate(120%) contrast(90%);
  }

  .backdrop-dark-glass\@lg {
    backdrop-filter: blur(8px) saturate(180%) brightness(70%) contrast(90%);
  }

  .backdrop-crystal\@lg {
    backdrop-filter: blur(8px) saturate(150%);
  }

  .backdrop-matte\@lg {
    backdrop-filter: blur(20px) saturate(90%) brightness(90%);
  }
}

@media (min-width: 1280px) {
  .backdrop-none\@xl {
    backdrop-filter: none;
  }

  .backdrop-blur-none\@xl {
    backdrop-filter: blur(0);
  }

  .backdrop-blur-sm\@xl {
    backdrop-filter: blur(4px);
  }

  .backdrop-blur-md\@xl {
    backdrop-filter: blur(8px);
  }

  .backdrop-blur-lg\@xl {
    backdrop-filter: blur(12px);
  }

  .backdrop-blur-xl\@xl {
    backdrop-filter: blur(24px);
  }

  .backdrop-blur-2xl\@xl {
    backdrop-filter: blur(40px);
  }

  .backdrop-brightness-none\@xl {
    backdrop-filter: brightness(100%);
  }

  .backdrop-brightness-75\@xl {
    backdrop-filter: brightness(75%);
  }

  .backdrop-brightness-90\@xl {
    backdrop-filter: brightness(90%);
  }

  .backdrop-brightness-110\@xl {
    backdrop-filter: brightness(110%);
  }

  .backdrop-brightness-125\@xl {
    backdrop-filter: brightness(125%);
  }

  .backdrop-brightness-150\@xl {
    backdrop-filter: brightness(150%);
  }

  .backdrop-contrast-none\@xl {
    backdrop-filter: contrast(100%);
  }

  .backdrop-contrast-75\@xl {
    backdrop-filter: contrast(75%);
  }

  .backdrop-contrast-90\@xl {
    backdrop-filter: contrast(90%);
  }

  .backdrop-contrast-110\@xl {
    backdrop-filter: contrast(110%);
  }

  .backdrop-contrast-125\@xl {
    backdrop-filter: contrast(125%);
  }

  .backdrop-contrast-150\@xl {
    backdrop-filter: contrast(150%);
  }

  .backdrop-grayscale-none\@xl {
    backdrop-filter: grayscale(0);
  }

  .backdrop-grayscale-25\@xl {
    backdrop-filter: grayscale(25%);
  }

  .backdrop-grayscale-50\@xl {
    backdrop-filter: grayscale(50%);
  }

  .backdrop-grayscale-75\@xl {
    backdrop-filter: grayscale(75%);
  }

  .backdrop-grayscale-100\@xl {
    backdrop-filter: grayscale(100%);
  }

  .backdrop-saturate-none\@xl {
    backdrop-filter: saturate(100%);
  }

  .backdrop-saturate-50\@xl {
    backdrop-filter: saturate(50%);
  }

  .backdrop-saturate-75\@xl {
    backdrop-filter: saturate(75%);
  }

  .backdrop-saturate-125\@xl {
    backdrop-filter: saturate(125%);
  }

  .backdrop-saturate-150\@xl {
    backdrop-filter: saturate(150%);
  }

  .backdrop-saturate-200\@xl {
    backdrop-filter: saturate(200%);
  }

  .backdrop-sepia-none\@xl {
    backdrop-filter: sepia(0);
  }

  .backdrop-sepia-25\@xl {
    backdrop-filter: sepia(25%);
  }

  .backdrop-sepia-50\@xl {
    backdrop-filter: sepia(50%);
  }

  .backdrop-sepia-75\@xl {
    backdrop-filter: sepia(75%);
  }

  .backdrop-sepia-100\@xl {
    backdrop-filter: sepia(100%);
  }

  .backdrop-hue-0\@xl {
    backdrop-filter: hue-rotate(0deg);
  }

  .backdrop-hue-90\@xl {
    backdrop-filter: hue-rotate(90deg);
  }

  .backdrop-hue-180\@xl {
    backdrop-filter: hue-rotate(180deg);
  }

  .backdrop-hue-270\@xl {
    backdrop-filter: hue-rotate(270deg);
  }

  .backdrop-invert-none\@xl {
    backdrop-filter: invert(0);
  }

  .backdrop-invert-25\@xl {
    backdrop-filter: invert(25%);
  }

  .backdrop-invert-50\@xl {
    backdrop-filter: invert(50%);
  }

  .backdrop-invert-75\@xl {
    backdrop-filter: invert(75%);
  }

  .backdrop-invert-100\@xl {
    backdrop-filter: invert(100%);
  }

  .backdrop-frosted\@xl {
    backdrop-filter: blur(8px) saturate(90%) brightness(120%);
  }

  .backdrop-glass\@xl {
    backdrop-filter: blur(8px) saturate(120%) contrast(90%);
  }

  .backdrop-dark-glass\@xl {
    backdrop-filter: blur(8px) saturate(180%) brightness(70%) contrast(90%);
  }

  .backdrop-crystal\@xl {
    backdrop-filter: blur(8px) saturate(150%);
  }

  .backdrop-matte\@xl {
    backdrop-filter: blur(20px) saturate(90%) brightness(90%);
  }
}

@media (min-width: 1536px) {
  .backdrop-none\@2xl {
    backdrop-filter: none;
  }

  .backdrop-blur-none\@2xl {
    backdrop-filter: blur(0);
  }

  .backdrop-blur-sm\@2xl {
    backdrop-filter: blur(4px);
  }

  .backdrop-blur-md\@2xl {
    backdrop-filter: blur(8px);
  }

  .backdrop-blur-lg\@2xl {
    backdrop-filter: blur(12px);
  }

  .backdrop-blur-xl\@2xl {
    backdrop-filter: blur(24px);
  }

  .backdrop-blur-2xl\@2xl {
    backdrop-filter: blur(40px);
  }

  .backdrop-brightness-none\@2xl {
    backdrop-filter: brightness(100%);
  }

  .backdrop-brightness-75\@2xl {
    backdrop-filter: brightness(75%);
  }

  .backdrop-brightness-90\@2xl {
    backdrop-filter: brightness(90%);
  }

  .backdrop-brightness-110\@2xl {
    backdrop-filter: brightness(110%);
  }

  .backdrop-brightness-125\@2xl {
    backdrop-filter: brightness(125%);
  }

  .backdrop-brightness-150\@2xl {
    backdrop-filter: brightness(150%);
  }

  .backdrop-contrast-none\@2xl {
    backdrop-filter: contrast(100%);
  }

  .backdrop-contrast-75\@2xl {
    backdrop-filter: contrast(75%);
  }

  .backdrop-contrast-90\@2xl {
    backdrop-filter: contrast(90%);
  }

  .backdrop-contrast-110\@2xl {
    backdrop-filter: contrast(110%);
  }

  .backdrop-contrast-125\@2xl {
    backdrop-filter: contrast(125%);
  }

  .backdrop-contrast-150\@2xl {
    backdrop-filter: contrast(150%);
  }

  .backdrop-grayscale-none\@2xl {
    backdrop-filter: grayscale(0);
  }

  .backdrop-grayscale-25\@2xl {
    backdrop-filter: grayscale(25%);
  }

  .backdrop-grayscale-50\@2xl {
    backdrop-filter: grayscale(50%);
  }

  .backdrop-grayscale-75\@2xl {
    backdrop-filter: grayscale(75%);
  }

  .backdrop-grayscale-100\@2xl {
    backdrop-filter: grayscale(100%);
  }

  .backdrop-saturate-none\@2xl {
    backdrop-filter: saturate(100%);
  }

  .backdrop-saturate-50\@2xl {
    backdrop-filter: saturate(50%);
  }

  .backdrop-saturate-75\@2xl {
    backdrop-filter: saturate(75%);
  }

  .backdrop-saturate-125\@2xl {
    backdrop-filter: saturate(125%);
  }

  .backdrop-saturate-150\@2xl {
    backdrop-filter: saturate(150%);
  }

  .backdrop-saturate-200\@2xl {
    backdrop-filter: saturate(200%);
  }

  .backdrop-sepia-none\@2xl {
    backdrop-filter: sepia(0);
  }

  .backdrop-sepia-25\@2xl {
    backdrop-filter: sepia(25%);
  }

  .backdrop-sepia-50\@2xl {
    backdrop-filter: sepia(50%);
  }

  .backdrop-sepia-75\@2xl {
    backdrop-filter: sepia(75%);
  }

  .backdrop-sepia-100\@2xl {
    backdrop-filter: sepia(100%);
  }

  .backdrop-hue-0\@2xl {
    backdrop-filter: hue-rotate(0deg);
  }

  .backdrop-hue-90\@2xl {
    backdrop-filter: hue-rotate(90deg);
  }

  .backdrop-hue-180\@2xl {
    backdrop-filter: hue-rotate(180deg);
  }

  .backdrop-hue-270\@2xl {
    backdrop-filter: hue-rotate(270deg);
  }

  .backdrop-invert-none\@2xl {
    backdrop-filter: invert(0);
  }

  .backdrop-invert-25\@2xl {
    backdrop-filter: invert(25%);
  }

  .backdrop-invert-50\@2xl {
    backdrop-filter: invert(50%);
  }

  .backdrop-invert-75\@2xl {
    backdrop-filter: invert(75%);
  }

  .backdrop-invert-100\@2xl {
    backdrop-filter: invert(100%);
  }

  .backdrop-frosted\@2xl {
    backdrop-filter: blur(8px) saturate(90%) brightness(120%);
  }

  .backdrop-glass\@2xl {
    backdrop-filter: blur(8px) saturate(120%) contrast(90%);
  }

  .backdrop-dark-glass\@2xl {
    backdrop-filter: blur(8px) saturate(180%) brightness(70%) contrast(90%);
  }

  .backdrop-crystal\@2xl {
    backdrop-filter: blur(8px) saturate(150%);
  }

  .backdrop-matte\@2xl {
    backdrop-filter: blur(20px) saturate(90%) brightness(90%);
  }
}

/**
* @description Applies border radius to all corners
* @param {String} $val - The border radius value
*/
.border {
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
}

.border-0 {
  border-width: 0px;
  border-style: solid;
  border-color: var(--border);
}

.border-0 {
  border-width: 0px;
  border-style: solid;
  border-color: var(--border);
}

.border-1 {
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
}

.border-2 {
  border-width: 2px;
  border-style: solid;
  border-color: var(--border);
}

.border-4 {
  border-width: 4px;
  border-style: solid;
  border-color: var(--border);
}

.border-8 {
  border-width: 8px;
  border-style: solid;
  border-color: var(--border);
}

.border-t-0 {
  border-top-width: 0px;
  border-top-style: solid;
  border-top-color: var(--border, var(--border));
}

.border-r-0 {
  border-right-width: 0px;
  border-right-style: solid;
  border-right-color: var(--border, var(--border));
}

.border-b-0 {
  border-bottom-width: 0px;
  border-bottom-style: solid;
  border-bottom-color: var(--border, var(--border));
}

.border-l-0 {
  border-left-width: 0px;
  border-left-style: solid;
  border-left-color: var(--border, var(--border));
}

.border-t-1 {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--border, var(--border));
}

.border-r-1 {
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: var(--border, var(--border));
}

.border-b-1 {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--border, var(--border));
}

.border-l-1 {
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: var(--border, var(--border));
}

.border-t-2 {
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: var(--border, var(--border));
}

.border-r-2 {
  border-right-width: 2px;
  border-right-style: solid;
  border-right-color: var(--border, var(--border));
}

.border-b-2 {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: var(--border, var(--border));
}

.border-l-2 {
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: var(--border, var(--border));
}

.border-t-4 {
  border-top-width: 4px;
  border-top-style: solid;
  border-top-color: var(--border, var(--border));
}

.border-r-4 {
  border-right-width: 4px;
  border-right-style: solid;
  border-right-color: var(--border, var(--border));
}

.border-b-4 {
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-bottom-color: var(--border, var(--border));
}

.border-l-4 {
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: var(--border, var(--border));
}

.border-t-8 {
  border-top-width: 8px;
  border-top-style: solid;
  border-top-color: var(--border, var(--border));
}

.border-r-8 {
  border-right-width: 8px;
  border-right-style: solid;
  border-right-color: var(--border, var(--border));
}

.border-b-8 {
  border-bottom-width: 8px;
  border-bottom-style: solid;
  border-bottom-color: var(--border, var(--border));
}

.border-l-8 {
  border-left-width: 8px;
  border-left-style: solid;
  border-left-color: var(--border, var(--border));
}

.border-t {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--border, var(--border));
}

.border-r {
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: var(--border, var(--border));
}

.border-b {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--border, var(--border));
}

.border-l {
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: var(--border, var(--border));
}

.rounded {
  border-radius: 0.5rem;
}

.square {
  border-radius: 0px;
}

.rounded-xs {
  border-radius: 0.25rem;
}

.rounded-sm {
  border-radius: 0.375rem;
}

.rounded-md {
  border-radius: 0.5rem;
}

.rounded-lg {
  border-radius: 0.75rem;
}

.rounded-xl {
  border-radius: 1rem;
}

.rounded-2xl {
  border-radius: 1.25rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-none {
  border-radius: 0px;
}

.rounded-t-xs {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.rounded-r-xs {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.rounded-b-xs {
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.rounded-l-xs {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.rounded-tl-xs {
  border-top-left-radius: 0.25rem;
}

.rounded-tr-xs {
  border-top-right-radius: 0.25rem;
}

.rounded-br-xs {
  border-bottom-right-radius: 0.25rem;
}

.rounded-bl-xs {
  border-bottom-left-radius: 0.25rem;
}

.rounded-t-sm {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.rounded-r-sm {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.rounded-b-sm {
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.rounded-l-sm {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.rounded-tl-sm {
  border-top-left-radius: 0.375rem;
}

.rounded-tr-sm {
  border-top-right-radius: 0.375rem;
}

.rounded-br-sm {
  border-bottom-right-radius: 0.375rem;
}

.rounded-bl-sm {
  border-bottom-left-radius: 0.375rem;
}

.rounded-t-md {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.rounded-r-md {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.rounded-b-md {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.rounded-l-md {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-tl-md {
  border-top-left-radius: 0.5rem;
}

.rounded-tr-md {
  border-top-right-radius: 0.5rem;
}

.rounded-br-md {
  border-bottom-right-radius: 0.5rem;
}

.rounded-bl-md {
  border-bottom-left-radius: 0.5rem;
}

.rounded-t-lg {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

.rounded-r-lg {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

.rounded-b-lg {
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

.rounded-l-lg {
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

.rounded-tl-lg {
  border-top-left-radius: 0.75rem;
}

.rounded-tr-lg {
  border-top-right-radius: 0.75rem;
}

.rounded-br-lg {
  border-bottom-right-radius: 0.75rem;
}

.rounded-bl-lg {
  border-bottom-left-radius: 0.75rem;
}

.rounded-t-xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.rounded-r-xl {
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.rounded-b-xl {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.rounded-l-xl {
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.rounded-tl-xl {
  border-top-left-radius: 1rem;
}

.rounded-tr-xl {
  border-top-right-radius: 1rem;
}

.rounded-br-xl {
  border-bottom-right-radius: 1rem;
}

.rounded-bl-xl {
  border-bottom-left-radius: 1rem;
}

.rounded-t-2xl {
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
}

.rounded-r-2xl {
  border-top-right-radius: 1.25rem;
  border-bottom-right-radius: 1.25rem;
}

.rounded-b-2xl {
  border-bottom-left-radius: 1.25rem;
  border-bottom-right-radius: 1.25rem;
}

.rounded-l-2xl {
  border-top-left-radius: 1.25rem;
  border-bottom-left-radius: 1.25rem;
}

.rounded-tl-2xl {
  border-top-left-radius: 1.25rem;
}

.rounded-tr-2xl {
  border-top-right-radius: 1.25rem;
}

.rounded-br-2xl {
  border-bottom-right-radius: 1.25rem;
}

.rounded-bl-2xl {
  border-bottom-left-radius: 1.25rem;
}

.rounded-t-full {
  border-top-left-radius: 9999px;
  border-top-right-radius: 9999px;
}

.rounded-r-full {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

.rounded-b-full {
  border-bottom-left-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

.rounded-l-full {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}

.rounded-tl-full {
  border-top-left-radius: 9999px;
}

.rounded-tr-full {
  border-top-right-radius: 9999px;
}

.rounded-br-full {
  border-bottom-right-radius: 9999px;
}

.rounded-bl-full {
  border-bottom-left-radius: 9999px;
}

.rounded-t-none {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.rounded-r-none {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.rounded-b-none {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.rounded-l-none {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.rounded-tl-none {
  border-top-left-radius: 0px;
}

.rounded-tr-none {
  border-top-right-radius: 0px;
}

.rounded-br-none {
  border-bottom-right-radius: 0px;
}

.rounded-bl-none {
  border-bottom-left-radius: 0px;
}

.pill {
  border-radius: 9999px;
}

.border-solid {
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.border-dotted {
  border-style: dotted;
}

.border-double {
  border-style: double;
}

.border-none {
  border-style: none;
}

.border-default {
  border-color: var(--border);
}

.border-light {
  border-color: var(--border-light-color);
}

.border-dark {
  border-color: var(--border-dark-color);
}

.border-primary {
  border-color: var(--primary);
}

.border-secondary {
  border-color: var(--secondary);
}

.border-success {
  border-color: var(--success);
}

.border-danger {
  border-color: var(--danger);
}

.border-warning {
  border-color: var(--warning);
}

.border-info {
  border-color: var(--info);
}

.border-primary-solid {
  border-style: solid;
  border-color: var(--primary);
}

.border-danger-dashed {
  border-style: dashed;
  border-color: var(--danger);
}

.hover\:border-0:hover {
  border-width: 0px;
  border-style: solid;
  border-color: var(--border);
}

.hover\:border-1:hover {
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
}

.hover\:border-2:hover {
  border-width: 2px;
  border-style: solid;
  border-color: var(--border);
}

.hover\:border-4:hover {
  border-width: 4px;
  border-style: solid;
  border-color: var(--border);
}

.hover\:border-8:hover {
  border-width: 8px;
  border-style: solid;
  border-color: var(--border);
}

.hover\:border-solid:hover {
  border-style: solid;
}

.hover\:border-dashed:hover {
  border-style: dashed;
}

.hover\:border-dotted:hover {
  border-style: dotted;
}

.hover\:border-double:hover {
  border-style: double;
}

.hover\:border-none:hover {
  border-style: none;
}

.hover\:border-default:hover {
  border-color: var(--border);
}

.hover\:border-light:hover {
  border-color: var(--border-light-color);
}

.hover\:border-dark:hover {
  border-color: var(--border-dark-color);
}

.hover\:border-primary:hover {
  border-color: var(--primary);
}

.hover\:border-secondary:hover {
  border-color: var(--secondary);
}

.hover\:border-success:hover {
  border-color: var(--success);
}

.hover\:border-danger:hover {
  border-color: var(--danger);
}

.hover\:border-warning:hover {
  border-color: var(--warning);
}

.hover\:border-info:hover {
  border-color: var(--info);
}

.active\:border-0:active {
  border-width: 0px;
  border-style: solid;
  border-color: var(--border);
}

.active\:border-1:active {
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
}

.active\:border-2:active {
  border-width: 2px;
  border-style: solid;
  border-color: var(--border);
}

.active\:border-4:active {
  border-width: 4px;
  border-style: solid;
  border-color: var(--border);
}

.active\:border-8:active {
  border-width: 8px;
  border-style: solid;
  border-color: var(--border);
}

.active\:border-solid:active {
  border-style: solid;
}

.active\:border-dashed:active {
  border-style: dashed;
}

.active\:border-dotted:active {
  border-style: dotted;
}

.active\:border-double:active {
  border-style: double;
}

.active\:border-none:active {
  border-style: none;
}

.active\:border-default:active {
  border-color: var(--border);
}

.active\:border-light:active {
  border-color: var(--border-light-color);
}

.active\:border-dark:active {
  border-color: var(--border-dark-color);
}

.active\:border-primary:active {
  border-color: var(--primary);
}

.active\:border-secondary:active {
  border-color: var(--secondary);
}

.active\:border-success:active {
  border-color: var(--success);
}

.active\:border-danger:active {
  border-color: var(--danger);
}

.active\:border-warning:active {
  border-color: var(--warning);
}

.active\:border-info:active {
  border-color: var(--info);
}

.focus\:border-0:focus {
  border-width: 0px;
  border-style: solid;
  border-color: var(--border);
}

.focus\:border-1:focus {
  border-width: 1px;
  border-style: solid;
  border-color: var(--border);
}

.focus\:border-2:focus {
  border-width: 2px;
  border-style: solid;
  border-color: var(--border);
}

.focus\:border-4:focus {
  border-width: 4px;
  border-style: solid;
  border-color: var(--border);
}

.focus\:border-8:focus {
  border-width: 8px;
  border-style: solid;
  border-color: var(--border);
}

.focus\:border-solid:focus {
  border-style: solid;
}

.focus\:border-dashed:focus {
  border-style: dashed;
}

.focus\:border-dotted:focus {
  border-style: dotted;
}

.focus\:border-double:focus {
  border-style: double;
}

.focus\:border-none:focus {
  border-style: none;
}

.focus\:border-default:focus {
  border-color: var(--border);
}

.focus\:border-light:focus {
  border-color: var(--border-light-color);
}

.focus\:border-dark:focus {
  border-color: var(--border-dark-color);
}

.focus\:border-primary:focus {
  border-color: var(--primary);
}

.focus\:border-secondary:focus {
  border-color: var(--secondary);
}

.focus\:border-success:focus {
  border-color: var(--success);
}

.focus\:border-danger:focus {
  border-color: var(--danger);
}

.focus\:border-warning:focus {
  border-color: var(--warning);
}

.focus\:border-info:focus {
  border-color: var(--info);
}

@media (min-width: 480px) {
  .border-0\@xs {
    border-width: 0px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-1\@xs {
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-2\@xs {
    border-width: 2px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-4\@xs {
    border-width: 4px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-8\@xs {
    border-width: 8px;
    border-style: solid;
    border-color: var(--border);
  }

  .border\@xs {
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-0\@xs {
    border-width: 0px;
    border-style: solid;
    border-color: var(--border);
  }

  .rounded-xs\@xs {
    border-radius: 0.25rem;
  }

  .rounded-sm\@xs {
    border-radius: 0.375rem;
  }

  .rounded-md\@xs {
    border-radius: 0.5rem;
  }

  .rounded-lg\@xs {
    border-radius: 0.75rem;
  }

  .rounded-xl\@xs {
    border-radius: 1rem;
  }

  .rounded-2xl\@xs {
    border-radius: 1.25rem;
  }

  .rounded-full\@xs {
    border-radius: 9999px;
  }

  .rounded-none\@xs {
    border-radius: 0px;
  }

  .rounded\@xs {
    border-radius: 0.5rem;
  }

  .square\@xs {
    border-radius: 0px;
  }

  .pill\@xs {
    border-radius: 9999px;
  }
}

@media (min-width: 640px) {
  .border-0\@sm {
    border-width: 0px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-1\@sm {
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-2\@sm {
    border-width: 2px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-4\@sm {
    border-width: 4px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-8\@sm {
    border-width: 8px;
    border-style: solid;
    border-color: var(--border);
  }

  .border\@sm {
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-0\@sm {
    border-width: 0px;
    border-style: solid;
    border-color: var(--border);
  }

  .rounded-xs\@sm {
    border-radius: 0.25rem;
  }

  .rounded-sm\@sm {
    border-radius: 0.375rem;
  }

  .rounded-md\@sm {
    border-radius: 0.5rem;
  }

  .rounded-lg\@sm {
    border-radius: 0.75rem;
  }

  .rounded-xl\@sm {
    border-radius: 1rem;
  }

  .rounded-2xl\@sm {
    border-radius: 1.25rem;
  }

  .rounded-full\@sm {
    border-radius: 9999px;
  }

  .rounded-none\@sm {
    border-radius: 0px;
  }

  .rounded\@sm {
    border-radius: 0.5rem;
  }

  .square\@sm {
    border-radius: 0px;
  }

  .pill\@sm {
    border-radius: 9999px;
  }
}

@media (min-width: 768px) {
  .border-0\@md {
    border-width: 0px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-1\@md {
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-2\@md {
    border-width: 2px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-4\@md {
    border-width: 4px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-8\@md {
    border-width: 8px;
    border-style: solid;
    border-color: var(--border);
  }

  .border\@md {
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-0\@md {
    border-width: 0px;
    border-style: solid;
    border-color: var(--border);
  }

  .rounded-xs\@md {
    border-radius: 0.25rem;
  }

  .rounded-sm\@md {
    border-radius: 0.375rem;
  }

  .rounded-md\@md {
    border-radius: 0.5rem;
  }

  .rounded-lg\@md {
    border-radius: 0.75rem;
  }

  .rounded-xl\@md {
    border-radius: 1rem;
  }

  .rounded-2xl\@md {
    border-radius: 1.25rem;
  }

  .rounded-full\@md {
    border-radius: 9999px;
  }

  .rounded-none\@md {
    border-radius: 0px;
  }

  .rounded\@md {
    border-radius: 0.5rem;
  }

  .square\@md {
    border-radius: 0px;
  }

  .pill\@md {
    border-radius: 9999px;
  }
}

@media (min-width: 1024px) {
  .border-0\@lg {
    border-width: 0px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-1\@lg {
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-2\@lg {
    border-width: 2px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-4\@lg {
    border-width: 4px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-8\@lg {
    border-width: 8px;
    border-style: solid;
    border-color: var(--border);
  }

  .border\@lg {
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-0\@lg {
    border-width: 0px;
    border-style: solid;
    border-color: var(--border);
  }

  .rounded-xs\@lg {
    border-radius: 0.25rem;
  }

  .rounded-sm\@lg {
    border-radius: 0.375rem;
  }

  .rounded-md\@lg {
    border-radius: 0.5rem;
  }

  .rounded-lg\@lg {
    border-radius: 0.75rem;
  }

  .rounded-xl\@lg {
    border-radius: 1rem;
  }

  .rounded-2xl\@lg {
    border-radius: 1.25rem;
  }

  .rounded-full\@lg {
    border-radius: 9999px;
  }

  .rounded-none\@lg {
    border-radius: 0px;
  }

  .rounded\@lg {
    border-radius: 0.5rem;
  }

  .square\@lg {
    border-radius: 0px;
  }

  .pill\@lg {
    border-radius: 9999px;
  }
}

@media (min-width: 1280px) {
  .border-0\@xl {
    border-width: 0px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-1\@xl {
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-2\@xl {
    border-width: 2px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-4\@xl {
    border-width: 4px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-8\@xl {
    border-width: 8px;
    border-style: solid;
    border-color: var(--border);
  }

  .border\@xl {
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-0\@xl {
    border-width: 0px;
    border-style: solid;
    border-color: var(--border);
  }

  .rounded-xs\@xl {
    border-radius: 0.25rem;
  }

  .rounded-sm\@xl {
    border-radius: 0.375rem;
  }

  .rounded-md\@xl {
    border-radius: 0.5rem;
  }

  .rounded-lg\@xl {
    border-radius: 0.75rem;
  }

  .rounded-xl\@xl {
    border-radius: 1rem;
  }

  .rounded-2xl\@xl {
    border-radius: 1.25rem;
  }

  .rounded-full\@xl {
    border-radius: 9999px;
  }

  .rounded-none\@xl {
    border-radius: 0px;
  }

  .rounded\@xl {
    border-radius: 0.5rem;
  }

  .square\@xl {
    border-radius: 0px;
  }

  .pill\@xl {
    border-radius: 9999px;
  }
}

@media (min-width: 1536px) {
  .border-0\@2xl {
    border-width: 0px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-1\@2xl {
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-2\@2xl {
    border-width: 2px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-4\@2xl {
    border-width: 4px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-8\@2xl {
    border-width: 8px;
    border-style: solid;
    border-color: var(--border);
  }

  .border\@2xl {
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
  }

  .border-0\@2xl {
    border-width: 0px;
    border-style: solid;
    border-color: var(--border);
  }

  .rounded-xs\@2xl {
    border-radius: 0.25rem;
  }

  .rounded-sm\@2xl {
    border-radius: 0.375rem;
  }

  .rounded-md\@2xl {
    border-radius: 0.5rem;
  }

  .rounded-lg\@2xl {
    border-radius: 0.75rem;
  }

  .rounded-xl\@2xl {
    border-radius: 1rem;
  }

  .rounded-2xl\@2xl {
    border-radius: 1.25rem;
  }

  .rounded-full\@2xl {
    border-radius: 9999px;
  }

  .rounded-none\@2xl {
    border-radius: 0px;
  }

  .rounded\@2xl {
    border-radius: 0.5rem;
  }

  .square\@2xl {
    border-radius: 0px;
  }

  .pill\@2xl {
    border-radius: 9999px;
  }
}

/**
 * Container Query Mixins
 *
 * Usage:
 * .container {
 *   container-type: inline-size;
 *   container-name: sidebar;
 * }
 * 
 * .item {
 *   @include container-up('md', 'sidebar') {
 *     // Styles for 'md' and up within 'sidebar' container
 *   }
 * }
 */
.container-inline-size {
  container-type: inline-size;
}

.container-size {
  container-type: size;
}

.container-main {
  container-name: "main";
}

.container-sidebar {
  container-name: "sidebar";
}

.container-card {
  container-name: "card";
}

.container-section {
  container-name: "section";
}

.cursor-auto {
  cursor: auto;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.cursor-move {
  cursor: move;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-wait {
  cursor: wait;
}

.cursor-help {
  cursor: help;
}

.cursor-text {
  cursor: text;
}

.cursor-cell {
  cursor: cell;
}

.cursor-crosshair {
  cursor: crosshair;
}

.cursor-grabbing {
  cursor: grabbing;
}

.cursor-grab {
  cursor: grab;
}

.cursor-zoom-in {
  cursor: zoom-in;
}

.cursor-zoom-out {
  cursor: zoom-out;
}

.cursor-none {
  cursor: none;
}

/**
 * Display Utilities
 *
 * Classes:
 * - .hide, .show: Control element visibility
 * - .block, .inline, .inline-block: Basic display modes
 * - .d-tbl, .d-tbl-row, .d-tbl-cell: Table display modes
 * - .overflow-hidden: Control overflow behavior
 *
 * All utilities support responsive variants with @breakpoint suffix:
 * - .hide@md, .block@lg, etc.
 */
/**
 * @description Set display to none.
 */
/**
 * @description Set display to block.
 */
/**
 * @description Set display to inline.
 */
/**
 * @description Set display to inline-block.
 */
/**
 * @description Set display to initial original state.
 */
/**
 * @description Set display to table.
 */
/**
 * @description Set display to table-row.
 */
/**
 * @description Set display to table-cell.
 */
.hide {
  display: none;
}

.show {
  display: revert;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.contents {
  display: contents;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-auto {
  overflow: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.d-tbl {
  display: table;
}

.d-tbl-row {
  display: table-row;
}

.d-tbl-cell {
  display: table-cell;
}

@media (min-width: 480px) {
  .hide\@xs {
    display: none;
  }

  .show\@xs {
    display: revert;
  }

  .block\@xs {
    display: block;
  }

  .inline\@xs {
    display: inline;
  }

  .inline-block\@xs {
    display: inline-block;
  }

  .visible\@xs {
    visibility: visible;
  }

  .invisible\@xs {
    visibility: hidden;
  }

  .collapse\@xs {
    visibility: collapse;
  }

  .contents\@xs {
    display: contents;
  }

  .overflow-hidden\@xs {
    overflow: hidden;
  }

  .overflow-visible\@xs {
    overflow: visible;
  }

  .overflow-scroll\@xs {
    overflow: scroll;
  }

  .overflow-auto\@xs {
    overflow: auto;
  }

  .overflow-x-hidden\@xs {
    overflow-x: hidden;
  }

  .overflow-y-hidden\@xs {
    overflow-y: hidden;
  }

  .overflow-x-scroll\@xs {
    overflow-x: scroll;
  }

  .overflow-y-scroll\@xs {
    overflow-y: scroll;
  }

  .overflow-x-auto\@xs {
    overflow-x: auto;
  }

  .overflow-y-auto\@xs {
    overflow-y: auto;
  }

  .d-tbl\@xs {
    display: table;
  }

  .d-tbl-row\@xs {
    display: table-row;
  }

  .d-tbl-cell\@xs {
    display: table-cell;
  }
}

@media (min-width: 640px) {
  .hide\@sm {
    display: none;
  }

  .show\@sm {
    display: revert;
  }

  .block\@sm {
    display: block;
  }

  .inline\@sm {
    display: inline;
  }

  .inline-block\@sm {
    display: inline-block;
  }

  .visible\@sm {
    visibility: visible;
  }

  .invisible\@sm {
    visibility: hidden;
  }

  .collapse\@sm {
    visibility: collapse;
  }

  .contents\@sm {
    display: contents;
  }

  .overflow-hidden\@sm {
    overflow: hidden;
  }

  .overflow-visible\@sm {
    overflow: visible;
  }

  .overflow-scroll\@sm {
    overflow: scroll;
  }

  .overflow-auto\@sm {
    overflow: auto;
  }

  .overflow-x-hidden\@sm {
    overflow-x: hidden;
  }

  .overflow-y-hidden\@sm {
    overflow-y: hidden;
  }

  .overflow-x-scroll\@sm {
    overflow-x: scroll;
  }

  .overflow-y-scroll\@sm {
    overflow-y: scroll;
  }

  .overflow-x-auto\@sm {
    overflow-x: auto;
  }

  .overflow-y-auto\@sm {
    overflow-y: auto;
  }

  .d-tbl\@sm {
    display: table;
  }

  .d-tbl-row\@sm {
    display: table-row;
  }

  .d-tbl-cell\@sm {
    display: table-cell;
  }
}

@media (min-width: 768px) {
  .hide\@md {
    display: none;
  }

  .show\@md {
    display: revert;
  }

  .block\@md {
    display: block;
  }

  .inline\@md {
    display: inline;
  }

  .inline-block\@md {
    display: inline-block;
  }

  .visible\@md {
    visibility: visible;
  }

  .invisible\@md {
    visibility: hidden;
  }

  .collapse\@md {
    visibility: collapse;
  }

  .contents\@md {
    display: contents;
  }

  .overflow-hidden\@md {
    overflow: hidden;
  }

  .overflow-visible\@md {
    overflow: visible;
  }

  .overflow-scroll\@md {
    overflow: scroll;
  }

  .overflow-auto\@md {
    overflow: auto;
  }

  .overflow-x-hidden\@md {
    overflow-x: hidden;
  }

  .overflow-y-hidden\@md {
    overflow-y: hidden;
  }

  .overflow-x-scroll\@md {
    overflow-x: scroll;
  }

  .overflow-y-scroll\@md {
    overflow-y: scroll;
  }

  .overflow-x-auto\@md {
    overflow-x: auto;
  }

  .overflow-y-auto\@md {
    overflow-y: auto;
  }

  .d-tbl\@md {
    display: table;
  }

  .d-tbl-row\@md {
    display: table-row;
  }

  .d-tbl-cell\@md {
    display: table-cell;
  }
}

@media (min-width: 1024px) {
  .hide\@lg {
    display: none;
  }

  .show\@lg {
    display: revert;
  }

  .block\@lg {
    display: block;
  }

  .inline\@lg {
    display: inline;
  }

  .inline-block\@lg {
    display: inline-block;
  }

  .visible\@lg {
    visibility: visible;
  }

  .invisible\@lg {
    visibility: hidden;
  }

  .collapse\@lg {
    visibility: collapse;
  }

  .contents\@lg {
    display: contents;
  }

  .overflow-hidden\@lg {
    overflow: hidden;
  }

  .overflow-visible\@lg {
    overflow: visible;
  }

  .overflow-scroll\@lg {
    overflow: scroll;
  }

  .overflow-auto\@lg {
    overflow: auto;
  }

  .overflow-x-hidden\@lg {
    overflow-x: hidden;
  }

  .overflow-y-hidden\@lg {
    overflow-y: hidden;
  }

  .overflow-x-scroll\@lg {
    overflow-x: scroll;
  }

  .overflow-y-scroll\@lg {
    overflow-y: scroll;
  }

  .overflow-x-auto\@lg {
    overflow-x: auto;
  }

  .overflow-y-auto\@lg {
    overflow-y: auto;
  }

  .d-tbl\@lg {
    display: table;
  }

  .d-tbl-row\@lg {
    display: table-row;
  }

  .d-tbl-cell\@lg {
    display: table-cell;
  }
}

@media (min-width: 1280px) {
  .hide\@xl {
    display: none;
  }

  .show\@xl {
    display: revert;
  }

  .block\@xl {
    display: block;
  }

  .inline\@xl {
    display: inline;
  }

  .inline-block\@xl {
    display: inline-block;
  }

  .visible\@xl {
    visibility: visible;
  }

  .invisible\@xl {
    visibility: hidden;
  }

  .collapse\@xl {
    visibility: collapse;
  }

  .contents\@xl {
    display: contents;
  }

  .overflow-hidden\@xl {
    overflow: hidden;
  }

  .overflow-visible\@xl {
    overflow: visible;
  }

  .overflow-scroll\@xl {
    overflow: scroll;
  }

  .overflow-auto\@xl {
    overflow: auto;
  }

  .overflow-x-hidden\@xl {
    overflow-x: hidden;
  }

  .overflow-y-hidden\@xl {
    overflow-y: hidden;
  }

  .overflow-x-scroll\@xl {
    overflow-x: scroll;
  }

  .overflow-y-scroll\@xl {
    overflow-y: scroll;
  }

  .overflow-x-auto\@xl {
    overflow-x: auto;
  }

  .overflow-y-auto\@xl {
    overflow-y: auto;
  }

  .d-tbl\@xl {
    display: table;
  }

  .d-tbl-row\@xl {
    display: table-row;
  }

  .d-tbl-cell\@xl {
    display: table-cell;
  }
}

@media (min-width: 1536px) {
  .hide\@2xl {
    display: none;
  }

  .show\@2xl {
    display: revert;
  }

  .block\@2xl {
    display: block;
  }

  .inline\@2xl {
    display: inline;
  }

  .inline-block\@2xl {
    display: inline-block;
  }

  .visible\@2xl {
    visibility: visible;
  }

  .invisible\@2xl {
    visibility: hidden;
  }

  .collapse\@2xl {
    visibility: collapse;
  }

  .contents\@2xl {
    display: contents;
  }

  .overflow-hidden\@2xl {
    overflow: hidden;
  }

  .overflow-visible\@2xl {
    overflow: visible;
  }

  .overflow-scroll\@2xl {
    overflow: scroll;
  }

  .overflow-auto\@2xl {
    overflow: auto;
  }

  .overflow-x-hidden\@2xl {
    overflow-x: hidden;
  }

  .overflow-y-hidden\@2xl {
    overflow-y: hidden;
  }

  .overflow-x-scroll\@2xl {
    overflow-x: scroll;
  }

  .overflow-y-scroll\@2xl {
    overflow-y: scroll;
  }

  .overflow-x-auto\@2xl {
    overflow-x: auto;
  }

  .overflow-y-auto\@2xl {
    overflow-y: auto;
  }

  .d-tbl\@2xl {
    display: table;
  }

  .d-tbl-row\@2xl {
    display: table-row;
  }

  .d-tbl-cell\@2xl {
    display: table-cell;
  }
}

/**
 * @component Opacity
 * @description Controls element transparency with customizable opacity values and interactive states
 *
 * @example
 * <!-- Basic opacity -->
 * <div class="opacity-50">This element has 50% opacity</div>
 * 
 * <!-- Responsive opacity -->
 * <div class="opacity-100 opacity-50@md">
 *   100% opacity by default, 50% on medium screens and up
 * </div>
 * 
 * <!-- Interactive states -->
 * <div class="opacity-50 hover:opacity-100">
 *   50% opacity, becomes fully visible on hover
 * </div>
 * 
 * <button class="opacity-70 focus:opacity-100">
 *   70% opacity, fully visible when focused
 * </button>
 * 
 * <div class="opacity-75 active:opacity-100">
 *   75% opacity, fully visible when clicked/active
 * </div>
 * 
 * <!-- Group hover effect -->
 * <div class="group">
 *   <h3>Parent element with "group" class</h3>
 *   <div class="opacity-0 group-hover:opacity-100">
 *     Hidden by default, visible when parent is hovered
 *   </div>
 * </div>
 * 
 * <!-- With transition -->
 * <div class="opacity-50 hover:opacity-100 transition-opacity">
 *   Smooth opacity transition on hover
 * </div>
 *
 * @classes
 * Base:
 * - opacity-{value}: Sets element opacity (0-100%)
 *   Values: 0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100
 * 
 * Interactive States:
 * - hover:opacity-{value}: Changes opacity on mouse hover
 * - focus:opacity-{value}: Changes opacity when element receives focus
 * - active:opacity-{value}: Changes opacity when element is active/pressed
 * - group-hover:opacity-{value}: Changes opacity when parent with .group class is hovered
 * 
 * Animation:
 * - transition-opacity: Adds smooth transition when opacity changes
 *
 * @responsive
 * All opacity classes support responsive variants using @breakpoint suffix:
 * - opacity-50@sm: 50% opacity on small screens and up
 * - hover:opacity-100@md: Full opacity on hover for medium screens and up
 * 
 * Available breakpoints: xs, sm, md, lg, xl, xxl
 *
 * @customization
 * Opacity values are defined in the $percentages variable
 * Transition timing can be customized via CSS variables
 *
 * @see transitions 
 */
.opacity-0 {
  opacity: calc(0 / 100);
}

.hover\:opacity-0:hover {
  opacity: calc(0 / 100);
}

.focus\:opacity-0:focus {
  opacity: calc(0 / 100);
}

.active\:opacity-0:active {
  opacity: calc(0 / 100);
}

.group:hover .group-hover\:opacity-0 {
  opacity: calc(0 / 100);
}

.opacity-5 {
  opacity: calc(5 / 100);
}

.hover\:opacity-5:hover {
  opacity: calc(5 / 100);
}

.focus\:opacity-5:focus {
  opacity: calc(5 / 100);
}

.active\:opacity-5:active {
  opacity: calc(5 / 100);
}

.group:hover .group-hover\:opacity-5 {
  opacity: calc(5 / 100);
}

.opacity-10 {
  opacity: calc(10 / 100);
}

.hover\:opacity-10:hover {
  opacity: calc(10 / 100);
}

.focus\:opacity-10:focus {
  opacity: calc(10 / 100);
}

.active\:opacity-10:active {
  opacity: calc(10 / 100);
}

.group:hover .group-hover\:opacity-10 {
  opacity: calc(10 / 100);
}

.opacity-20 {
  opacity: calc(20 / 100);
}

.hover\:opacity-20:hover {
  opacity: calc(20 / 100);
}

.focus\:opacity-20:focus {
  opacity: calc(20 / 100);
}

.active\:opacity-20:active {
  opacity: calc(20 / 100);
}

.group:hover .group-hover\:opacity-20 {
  opacity: calc(20 / 100);
}

.opacity-25 {
  opacity: calc(25 / 100);
}

.hover\:opacity-25:hover {
  opacity: calc(25 / 100);
}

.focus\:opacity-25:focus {
  opacity: calc(25 / 100);
}

.active\:opacity-25:active {
  opacity: calc(25 / 100);
}

.group:hover .group-hover\:opacity-25 {
  opacity: calc(25 / 100);
}

.opacity-30 {
  opacity: calc(30 / 100);
}

.hover\:opacity-30:hover {
  opacity: calc(30 / 100);
}

.focus\:opacity-30:focus {
  opacity: calc(30 / 100);
}

.active\:opacity-30:active {
  opacity: calc(30 / 100);
}

.group:hover .group-hover\:opacity-30 {
  opacity: calc(30 / 100);
}

.opacity-40 {
  opacity: calc(40 / 100);
}

.hover\:opacity-40:hover {
  opacity: calc(40 / 100);
}

.focus\:opacity-40:focus {
  opacity: calc(40 / 100);
}

.active\:opacity-40:active {
  opacity: calc(40 / 100);
}

.group:hover .group-hover\:opacity-40 {
  opacity: calc(40 / 100);
}

.opacity-50 {
  opacity: calc(50 / 100);
}

.hover\:opacity-50:hover {
  opacity: calc(50 / 100);
}

.focus\:opacity-50:focus {
  opacity: calc(50 / 100);
}

.active\:opacity-50:active {
  opacity: calc(50 / 100);
}

.group:hover .group-hover\:opacity-50 {
  opacity: calc(50 / 100);
}

.opacity-60 {
  opacity: calc(60 / 100);
}

.hover\:opacity-60:hover {
  opacity: calc(60 / 100);
}

.focus\:opacity-60:focus {
  opacity: calc(60 / 100);
}

.active\:opacity-60:active {
  opacity: calc(60 / 100);
}

.group:hover .group-hover\:opacity-60 {
  opacity: calc(60 / 100);
}

.opacity-70 {
  opacity: calc(70 / 100);
}

.hover\:opacity-70:hover {
  opacity: calc(70 / 100);
}

.focus\:opacity-70:focus {
  opacity: calc(70 / 100);
}

.active\:opacity-70:active {
  opacity: calc(70 / 100);
}

.group:hover .group-hover\:opacity-70 {
  opacity: calc(70 / 100);
}

.opacity-75 {
  opacity: calc(75 / 100);
}

.hover\:opacity-75:hover {
  opacity: calc(75 / 100);
}

.focus\:opacity-75:focus {
  opacity: calc(75 / 100);
}

.active\:opacity-75:active {
  opacity: calc(75 / 100);
}

.group:hover .group-hover\:opacity-75 {
  opacity: calc(75 / 100);
}

.opacity-80 {
  opacity: calc(80 / 100);
}

.hover\:opacity-80:hover {
  opacity: calc(80 / 100);
}

.focus\:opacity-80:focus {
  opacity: calc(80 / 100);
}

.active\:opacity-80:active {
  opacity: calc(80 / 100);
}

.group:hover .group-hover\:opacity-80 {
  opacity: calc(80 / 100);
}

.opacity-90 {
  opacity: calc(90 / 100);
}

.hover\:opacity-90:hover {
  opacity: calc(90 / 100);
}

.focus\:opacity-90:focus {
  opacity: calc(90 / 100);
}

.active\:opacity-90:active {
  opacity: calc(90 / 100);
}

.group:hover .group-hover\:opacity-90 {
  opacity: calc(90 / 100);
}

.opacity-100 {
  opacity: calc(100 / 100);
}

.hover\:opacity-100:hover {
  opacity: calc(100 / 100);
}

.focus\:opacity-100:focus {
  opacity: calc(100 / 100);
}

.active\:opacity-100:active {
  opacity: calc(100 / 100);
}

.group:hover .group-hover\:opacity-100 {
  opacity: calc(100 / 100);
}

@media (min-width: 480px) {
  .opacity-0\@xs {
    opacity: calc(0 / 100);
  }

  .hover\:opacity-0\@xs:hover {
    opacity: calc(0 / 100);
  }

  .focus\:opacity-0\@xs:focus {
    opacity: calc(0 / 100);
  }

  .active\:opacity-0\@xs:active {
    opacity: calc(0 / 100);
  }

  .group:hover .group-hover\:opacity-0\@xs {
    opacity: calc(0 / 100);
  }

  .opacity-5\@xs {
    opacity: calc(5 / 100);
  }

  .hover\:opacity-5\@xs:hover {
    opacity: calc(5 / 100);
  }

  .focus\:opacity-5\@xs:focus {
    opacity: calc(5 / 100);
  }

  .active\:opacity-5\@xs:active {
    opacity: calc(5 / 100);
  }

  .group:hover .group-hover\:opacity-5\@xs {
    opacity: calc(5 / 100);
  }

  .opacity-10\@xs {
    opacity: calc(10 / 100);
  }

  .hover\:opacity-10\@xs:hover {
    opacity: calc(10 / 100);
  }

  .focus\:opacity-10\@xs:focus {
    opacity: calc(10 / 100);
  }

  .active\:opacity-10\@xs:active {
    opacity: calc(10 / 100);
  }

  .group:hover .group-hover\:opacity-10\@xs {
    opacity: calc(10 / 100);
  }

  .opacity-20\@xs {
    opacity: calc(20 / 100);
  }

  .hover\:opacity-20\@xs:hover {
    opacity: calc(20 / 100);
  }

  .focus\:opacity-20\@xs:focus {
    opacity: calc(20 / 100);
  }

  .active\:opacity-20\@xs:active {
    opacity: calc(20 / 100);
  }

  .group:hover .group-hover\:opacity-20\@xs {
    opacity: calc(20 / 100);
  }

  .opacity-25\@xs {
    opacity: calc(25 / 100);
  }

  .hover\:opacity-25\@xs:hover {
    opacity: calc(25 / 100);
  }

  .focus\:opacity-25\@xs:focus {
    opacity: calc(25 / 100);
  }

  .active\:opacity-25\@xs:active {
    opacity: calc(25 / 100);
  }

  .group:hover .group-hover\:opacity-25\@xs {
    opacity: calc(25 / 100);
  }

  .opacity-30\@xs {
    opacity: calc(30 / 100);
  }

  .hover\:opacity-30\@xs:hover {
    opacity: calc(30 / 100);
  }

  .focus\:opacity-30\@xs:focus {
    opacity: calc(30 / 100);
  }

  .active\:opacity-30\@xs:active {
    opacity: calc(30 / 100);
  }

  .group:hover .group-hover\:opacity-30\@xs {
    opacity: calc(30 / 100);
  }

  .opacity-40\@xs {
    opacity: calc(40 / 100);
  }

  .hover\:opacity-40\@xs:hover {
    opacity: calc(40 / 100);
  }

  .focus\:opacity-40\@xs:focus {
    opacity: calc(40 / 100);
  }

  .active\:opacity-40\@xs:active {
    opacity: calc(40 / 100);
  }

  .group:hover .group-hover\:opacity-40\@xs {
    opacity: calc(40 / 100);
  }

  .opacity-50\@xs {
    opacity: calc(50 / 100);
  }

  .hover\:opacity-50\@xs:hover {
    opacity: calc(50 / 100);
  }

  .focus\:opacity-50\@xs:focus {
    opacity: calc(50 / 100);
  }

  .active\:opacity-50\@xs:active {
    opacity: calc(50 / 100);
  }

  .group:hover .group-hover\:opacity-50\@xs {
    opacity: calc(50 / 100);
  }

  .opacity-60\@xs {
    opacity: calc(60 / 100);
  }

  .hover\:opacity-60\@xs:hover {
    opacity: calc(60 / 100);
  }

  .focus\:opacity-60\@xs:focus {
    opacity: calc(60 / 100);
  }

  .active\:opacity-60\@xs:active {
    opacity: calc(60 / 100);
  }

  .group:hover .group-hover\:opacity-60\@xs {
    opacity: calc(60 / 100);
  }

  .opacity-70\@xs {
    opacity: calc(70 / 100);
  }

  .hover\:opacity-70\@xs:hover {
    opacity: calc(70 / 100);
  }

  .focus\:opacity-70\@xs:focus {
    opacity: calc(70 / 100);
  }

  .active\:opacity-70\@xs:active {
    opacity: calc(70 / 100);
  }

  .group:hover .group-hover\:opacity-70\@xs {
    opacity: calc(70 / 100);
  }

  .opacity-75\@xs {
    opacity: calc(75 / 100);
  }

  .hover\:opacity-75\@xs:hover {
    opacity: calc(75 / 100);
  }

  .focus\:opacity-75\@xs:focus {
    opacity: calc(75 / 100);
  }

  .active\:opacity-75\@xs:active {
    opacity: calc(75 / 100);
  }

  .group:hover .group-hover\:opacity-75\@xs {
    opacity: calc(75 / 100);
  }

  .opacity-80\@xs {
    opacity: calc(80 / 100);
  }

  .hover\:opacity-80\@xs:hover {
    opacity: calc(80 / 100);
  }

  .focus\:opacity-80\@xs:focus {
    opacity: calc(80 / 100);
  }

  .active\:opacity-80\@xs:active {
    opacity: calc(80 / 100);
  }

  .group:hover .group-hover\:opacity-80\@xs {
    opacity: calc(80 / 100);
  }

  .opacity-90\@xs {
    opacity: calc(90 / 100);
  }

  .hover\:opacity-90\@xs:hover {
    opacity: calc(90 / 100);
  }

  .focus\:opacity-90\@xs:focus {
    opacity: calc(90 / 100);
  }

  .active\:opacity-90\@xs:active {
    opacity: calc(90 / 100);
  }

  .group:hover .group-hover\:opacity-90\@xs {
    opacity: calc(90 / 100);
  }

  .opacity-100\@xs {
    opacity: calc(100 / 100);
  }

  .hover\:opacity-100\@xs:hover {
    opacity: calc(100 / 100);
  }

  .focus\:opacity-100\@xs:focus {
    opacity: calc(100 / 100);
  }

  .active\:opacity-100\@xs:active {
    opacity: calc(100 / 100);
  }

  .group:hover .group-hover\:opacity-100\@xs {
    opacity: calc(100 / 100);
  }
}

@media (min-width: 640px) {
  .opacity-0\@sm {
    opacity: calc(0 / 100);
  }

  .hover\:opacity-0\@sm:hover {
    opacity: calc(0 / 100);
  }

  .focus\:opacity-0\@sm:focus {
    opacity: calc(0 / 100);
  }

  .active\:opacity-0\@sm:active {
    opacity: calc(0 / 100);
  }

  .group:hover .group-hover\:opacity-0\@sm {
    opacity: calc(0 / 100);
  }

  .opacity-5\@sm {
    opacity: calc(5 / 100);
  }

  .hover\:opacity-5\@sm:hover {
    opacity: calc(5 / 100);
  }

  .focus\:opacity-5\@sm:focus {
    opacity: calc(5 / 100);
  }

  .active\:opacity-5\@sm:active {
    opacity: calc(5 / 100);
  }

  .group:hover .group-hover\:opacity-5\@sm {
    opacity: calc(5 / 100);
  }

  .opacity-10\@sm {
    opacity: calc(10 / 100);
  }

  .hover\:opacity-10\@sm:hover {
    opacity: calc(10 / 100);
  }

  .focus\:opacity-10\@sm:focus {
    opacity: calc(10 / 100);
  }

  .active\:opacity-10\@sm:active {
    opacity: calc(10 / 100);
  }

  .group:hover .group-hover\:opacity-10\@sm {
    opacity: calc(10 / 100);
  }

  .opacity-20\@sm {
    opacity: calc(20 / 100);
  }

  .hover\:opacity-20\@sm:hover {
    opacity: calc(20 / 100);
  }

  .focus\:opacity-20\@sm:focus {
    opacity: calc(20 / 100);
  }

  .active\:opacity-20\@sm:active {
    opacity: calc(20 / 100);
  }

  .group:hover .group-hover\:opacity-20\@sm {
    opacity: calc(20 / 100);
  }

  .opacity-25\@sm {
    opacity: calc(25 / 100);
  }

  .hover\:opacity-25\@sm:hover {
    opacity: calc(25 / 100);
  }

  .focus\:opacity-25\@sm:focus {
    opacity: calc(25 / 100);
  }

  .active\:opacity-25\@sm:active {
    opacity: calc(25 / 100);
  }

  .group:hover .group-hover\:opacity-25\@sm {
    opacity: calc(25 / 100);
  }

  .opacity-30\@sm {
    opacity: calc(30 / 100);
  }

  .hover\:opacity-30\@sm:hover {
    opacity: calc(30 / 100);
  }

  .focus\:opacity-30\@sm:focus {
    opacity: calc(30 / 100);
  }

  .active\:opacity-30\@sm:active {
    opacity: calc(30 / 100);
  }

  .group:hover .group-hover\:opacity-30\@sm {
    opacity: calc(30 / 100);
  }

  .opacity-40\@sm {
    opacity: calc(40 / 100);
  }

  .hover\:opacity-40\@sm:hover {
    opacity: calc(40 / 100);
  }

  .focus\:opacity-40\@sm:focus {
    opacity: calc(40 / 100);
  }

  .active\:opacity-40\@sm:active {
    opacity: calc(40 / 100);
  }

  .group:hover .group-hover\:opacity-40\@sm {
    opacity: calc(40 / 100);
  }

  .opacity-50\@sm {
    opacity: calc(50 / 100);
  }

  .hover\:opacity-50\@sm:hover {
    opacity: calc(50 / 100);
  }

  .focus\:opacity-50\@sm:focus {
    opacity: calc(50 / 100);
  }

  .active\:opacity-50\@sm:active {
    opacity: calc(50 / 100);
  }

  .group:hover .group-hover\:opacity-50\@sm {
    opacity: calc(50 / 100);
  }

  .opacity-60\@sm {
    opacity: calc(60 / 100);
  }

  .hover\:opacity-60\@sm:hover {
    opacity: calc(60 / 100);
  }

  .focus\:opacity-60\@sm:focus {
    opacity: calc(60 / 100);
  }

  .active\:opacity-60\@sm:active {
    opacity: calc(60 / 100);
  }

  .group:hover .group-hover\:opacity-60\@sm {
    opacity: calc(60 / 100);
  }

  .opacity-70\@sm {
    opacity: calc(70 / 100);
  }

  .hover\:opacity-70\@sm:hover {
    opacity: calc(70 / 100);
  }

  .focus\:opacity-70\@sm:focus {
    opacity: calc(70 / 100);
  }

  .active\:opacity-70\@sm:active {
    opacity: calc(70 / 100);
  }

  .group:hover .group-hover\:opacity-70\@sm {
    opacity: calc(70 / 100);
  }

  .opacity-75\@sm {
    opacity: calc(75 / 100);
  }

  .hover\:opacity-75\@sm:hover {
    opacity: calc(75 / 100);
  }

  .focus\:opacity-75\@sm:focus {
    opacity: calc(75 / 100);
  }

  .active\:opacity-75\@sm:active {
    opacity: calc(75 / 100);
  }

  .group:hover .group-hover\:opacity-75\@sm {
    opacity: calc(75 / 100);
  }

  .opacity-80\@sm {
    opacity: calc(80 / 100);
  }

  .hover\:opacity-80\@sm:hover {
    opacity: calc(80 / 100);
  }

  .focus\:opacity-80\@sm:focus {
    opacity: calc(80 / 100);
  }

  .active\:opacity-80\@sm:active {
    opacity: calc(80 / 100);
  }

  .group:hover .group-hover\:opacity-80\@sm {
    opacity: calc(80 / 100);
  }

  .opacity-90\@sm {
    opacity: calc(90 / 100);
  }

  .hover\:opacity-90\@sm:hover {
    opacity: calc(90 / 100);
  }

  .focus\:opacity-90\@sm:focus {
    opacity: calc(90 / 100);
  }

  .active\:opacity-90\@sm:active {
    opacity: calc(90 / 100);
  }

  .group:hover .group-hover\:opacity-90\@sm {
    opacity: calc(90 / 100);
  }

  .opacity-100\@sm {
    opacity: calc(100 / 100);
  }

  .hover\:opacity-100\@sm:hover {
    opacity: calc(100 / 100);
  }

  .focus\:opacity-100\@sm:focus {
    opacity: calc(100 / 100);
  }

  .active\:opacity-100\@sm:active {
    opacity: calc(100 / 100);
  }

  .group:hover .group-hover\:opacity-100\@sm {
    opacity: calc(100 / 100);
  }
}

@media (min-width: 768px) {
  .opacity-0\@md {
    opacity: calc(0 / 100);
  }

  .hover\:opacity-0\@md:hover {
    opacity: calc(0 / 100);
  }

  .focus\:opacity-0\@md:focus {
    opacity: calc(0 / 100);
  }

  .active\:opacity-0\@md:active {
    opacity: calc(0 / 100);
  }

  .group:hover .group-hover\:opacity-0\@md {
    opacity: calc(0 / 100);
  }

  .opacity-5\@md {
    opacity: calc(5 / 100);
  }

  .hover\:opacity-5\@md:hover {
    opacity: calc(5 / 100);
  }

  .focus\:opacity-5\@md:focus {
    opacity: calc(5 / 100);
  }

  .active\:opacity-5\@md:active {
    opacity: calc(5 / 100);
  }

  .group:hover .group-hover\:opacity-5\@md {
    opacity: calc(5 / 100);
  }

  .opacity-10\@md {
    opacity: calc(10 / 100);
  }

  .hover\:opacity-10\@md:hover {
    opacity: calc(10 / 100);
  }

  .focus\:opacity-10\@md:focus {
    opacity: calc(10 / 100);
  }

  .active\:opacity-10\@md:active {
    opacity: calc(10 / 100);
  }

  .group:hover .group-hover\:opacity-10\@md {
    opacity: calc(10 / 100);
  }

  .opacity-20\@md {
    opacity: calc(20 / 100);
  }

  .hover\:opacity-20\@md:hover {
    opacity: calc(20 / 100);
  }

  .focus\:opacity-20\@md:focus {
    opacity: calc(20 / 100);
  }

  .active\:opacity-20\@md:active {
    opacity: calc(20 / 100);
  }

  .group:hover .group-hover\:opacity-20\@md {
    opacity: calc(20 / 100);
  }

  .opacity-25\@md {
    opacity: calc(25 / 100);
  }

  .hover\:opacity-25\@md:hover {
    opacity: calc(25 / 100);
  }

  .focus\:opacity-25\@md:focus {
    opacity: calc(25 / 100);
  }

  .active\:opacity-25\@md:active {
    opacity: calc(25 / 100);
  }

  .group:hover .group-hover\:opacity-25\@md {
    opacity: calc(25 / 100);
  }

  .opacity-30\@md {
    opacity: calc(30 / 100);
  }

  .hover\:opacity-30\@md:hover {
    opacity: calc(30 / 100);
  }

  .focus\:opacity-30\@md:focus {
    opacity: calc(30 / 100);
  }

  .active\:opacity-30\@md:active {
    opacity: calc(30 / 100);
  }

  .group:hover .group-hover\:opacity-30\@md {
    opacity: calc(30 / 100);
  }

  .opacity-40\@md {
    opacity: calc(40 / 100);
  }

  .hover\:opacity-40\@md:hover {
    opacity: calc(40 / 100);
  }

  .focus\:opacity-40\@md:focus {
    opacity: calc(40 / 100);
  }

  .active\:opacity-40\@md:active {
    opacity: calc(40 / 100);
  }

  .group:hover .group-hover\:opacity-40\@md {
    opacity: calc(40 / 100);
  }

  .opacity-50\@md {
    opacity: calc(50 / 100);
  }

  .hover\:opacity-50\@md:hover {
    opacity: calc(50 / 100);
  }

  .focus\:opacity-50\@md:focus {
    opacity: calc(50 / 100);
  }

  .active\:opacity-50\@md:active {
    opacity: calc(50 / 100);
  }

  .group:hover .group-hover\:opacity-50\@md {
    opacity: calc(50 / 100);
  }

  .opacity-60\@md {
    opacity: calc(60 / 100);
  }

  .hover\:opacity-60\@md:hover {
    opacity: calc(60 / 100);
  }

  .focus\:opacity-60\@md:focus {
    opacity: calc(60 / 100);
  }

  .active\:opacity-60\@md:active {
    opacity: calc(60 / 100);
  }

  .group:hover .group-hover\:opacity-60\@md {
    opacity: calc(60 / 100);
  }

  .opacity-70\@md {
    opacity: calc(70 / 100);
  }

  .hover\:opacity-70\@md:hover {
    opacity: calc(70 / 100);
  }

  .focus\:opacity-70\@md:focus {
    opacity: calc(70 / 100);
  }

  .active\:opacity-70\@md:active {
    opacity: calc(70 / 100);
  }

  .group:hover .group-hover\:opacity-70\@md {
    opacity: calc(70 / 100);
  }

  .opacity-75\@md {
    opacity: calc(75 / 100);
  }

  .hover\:opacity-75\@md:hover {
    opacity: calc(75 / 100);
  }

  .focus\:opacity-75\@md:focus {
    opacity: calc(75 / 100);
  }

  .active\:opacity-75\@md:active {
    opacity: calc(75 / 100);
  }

  .group:hover .group-hover\:opacity-75\@md {
    opacity: calc(75 / 100);
  }

  .opacity-80\@md {
    opacity: calc(80 / 100);
  }

  .hover\:opacity-80\@md:hover {
    opacity: calc(80 / 100);
  }

  .focus\:opacity-80\@md:focus {
    opacity: calc(80 / 100);
  }

  .active\:opacity-80\@md:active {
    opacity: calc(80 / 100);
  }

  .group:hover .group-hover\:opacity-80\@md {
    opacity: calc(80 / 100);
  }

  .opacity-90\@md {
    opacity: calc(90 / 100);
  }

  .hover\:opacity-90\@md:hover {
    opacity: calc(90 / 100);
  }

  .focus\:opacity-90\@md:focus {
    opacity: calc(90 / 100);
  }

  .active\:opacity-90\@md:active {
    opacity: calc(90 / 100);
  }

  .group:hover .group-hover\:opacity-90\@md {
    opacity: calc(90 / 100);
  }

  .opacity-100\@md {
    opacity: calc(100 / 100);
  }

  .hover\:opacity-100\@md:hover {
    opacity: calc(100 / 100);
  }

  .focus\:opacity-100\@md:focus {
    opacity: calc(100 / 100);
  }

  .active\:opacity-100\@md:active {
    opacity: calc(100 / 100);
  }

  .group:hover .group-hover\:opacity-100\@md {
    opacity: calc(100 / 100);
  }
}

@media (min-width: 1024px) {
  .opacity-0\@lg {
    opacity: calc(0 / 100);
  }

  .hover\:opacity-0\@lg:hover {
    opacity: calc(0 / 100);
  }

  .focus\:opacity-0\@lg:focus {
    opacity: calc(0 / 100);
  }

  .active\:opacity-0\@lg:active {
    opacity: calc(0 / 100);
  }

  .group:hover .group-hover\:opacity-0\@lg {
    opacity: calc(0 / 100);
  }

  .opacity-5\@lg {
    opacity: calc(5 / 100);
  }

  .hover\:opacity-5\@lg:hover {
    opacity: calc(5 / 100);
  }

  .focus\:opacity-5\@lg:focus {
    opacity: calc(5 / 100);
  }

  .active\:opacity-5\@lg:active {
    opacity: calc(5 / 100);
  }

  .group:hover .group-hover\:opacity-5\@lg {
    opacity: calc(5 / 100);
  }

  .opacity-10\@lg {
    opacity: calc(10 / 100);
  }

  .hover\:opacity-10\@lg:hover {
    opacity: calc(10 / 100);
  }

  .focus\:opacity-10\@lg:focus {
    opacity: calc(10 / 100);
  }

  .active\:opacity-10\@lg:active {
    opacity: calc(10 / 100);
  }

  .group:hover .group-hover\:opacity-10\@lg {
    opacity: calc(10 / 100);
  }

  .opacity-20\@lg {
    opacity: calc(20 / 100);
  }

  .hover\:opacity-20\@lg:hover {
    opacity: calc(20 / 100);
  }

  .focus\:opacity-20\@lg:focus {
    opacity: calc(20 / 100);
  }

  .active\:opacity-20\@lg:active {
    opacity: calc(20 / 100);
  }

  .group:hover .group-hover\:opacity-20\@lg {
    opacity: calc(20 / 100);
  }

  .opacity-25\@lg {
    opacity: calc(25 / 100);
  }

  .hover\:opacity-25\@lg:hover {
    opacity: calc(25 / 100);
  }

  .focus\:opacity-25\@lg:focus {
    opacity: calc(25 / 100);
  }

  .active\:opacity-25\@lg:active {
    opacity: calc(25 / 100);
  }

  .group:hover .group-hover\:opacity-25\@lg {
    opacity: calc(25 / 100);
  }

  .opacity-30\@lg {
    opacity: calc(30 / 100);
  }

  .hover\:opacity-30\@lg:hover {
    opacity: calc(30 / 100);
  }

  .focus\:opacity-30\@lg:focus {
    opacity: calc(30 / 100);
  }

  .active\:opacity-30\@lg:active {
    opacity: calc(30 / 100);
  }

  .group:hover .group-hover\:opacity-30\@lg {
    opacity: calc(30 / 100);
  }

  .opacity-40\@lg {
    opacity: calc(40 / 100);
  }

  .hover\:opacity-40\@lg:hover {
    opacity: calc(40 / 100);
  }

  .focus\:opacity-40\@lg:focus {
    opacity: calc(40 / 100);
  }

  .active\:opacity-40\@lg:active {
    opacity: calc(40 / 100);
  }

  .group:hover .group-hover\:opacity-40\@lg {
    opacity: calc(40 / 100);
  }

  .opacity-50\@lg {
    opacity: calc(50 / 100);
  }

  .hover\:opacity-50\@lg:hover {
    opacity: calc(50 / 100);
  }

  .focus\:opacity-50\@lg:focus {
    opacity: calc(50 / 100);
  }

  .active\:opacity-50\@lg:active {
    opacity: calc(50 / 100);
  }

  .group:hover .group-hover\:opacity-50\@lg {
    opacity: calc(50 / 100);
  }

  .opacity-60\@lg {
    opacity: calc(60 / 100);
  }

  .hover\:opacity-60\@lg:hover {
    opacity: calc(60 / 100);
  }

  .focus\:opacity-60\@lg:focus {
    opacity: calc(60 / 100);
  }

  .active\:opacity-60\@lg:active {
    opacity: calc(60 / 100);
  }

  .group:hover .group-hover\:opacity-60\@lg {
    opacity: calc(60 / 100);
  }

  .opacity-70\@lg {
    opacity: calc(70 / 100);
  }

  .hover\:opacity-70\@lg:hover {
    opacity: calc(70 / 100);
  }

  .focus\:opacity-70\@lg:focus {
    opacity: calc(70 / 100);
  }

  .active\:opacity-70\@lg:active {
    opacity: calc(70 / 100);
  }

  .group:hover .group-hover\:opacity-70\@lg {
    opacity: calc(70 / 100);
  }

  .opacity-75\@lg {
    opacity: calc(75 / 100);
  }

  .hover\:opacity-75\@lg:hover {
    opacity: calc(75 / 100);
  }

  .focus\:opacity-75\@lg:focus {
    opacity: calc(75 / 100);
  }

  .active\:opacity-75\@lg:active {
    opacity: calc(75 / 100);
  }

  .group:hover .group-hover\:opacity-75\@lg {
    opacity: calc(75 / 100);
  }

  .opacity-80\@lg {
    opacity: calc(80 / 100);
  }

  .hover\:opacity-80\@lg:hover {
    opacity: calc(80 / 100);
  }

  .focus\:opacity-80\@lg:focus {
    opacity: calc(80 / 100);
  }

  .active\:opacity-80\@lg:active {
    opacity: calc(80 / 100);
  }

  .group:hover .group-hover\:opacity-80\@lg {
    opacity: calc(80 / 100);
  }

  .opacity-90\@lg {
    opacity: calc(90 / 100);
  }

  .hover\:opacity-90\@lg:hover {
    opacity: calc(90 / 100);
  }

  .focus\:opacity-90\@lg:focus {
    opacity: calc(90 / 100);
  }

  .active\:opacity-90\@lg:active {
    opacity: calc(90 / 100);
  }

  .group:hover .group-hover\:opacity-90\@lg {
    opacity: calc(90 / 100);
  }

  .opacity-100\@lg {
    opacity: calc(100 / 100);
  }

  .hover\:opacity-100\@lg:hover {
    opacity: calc(100 / 100);
  }

  .focus\:opacity-100\@lg:focus {
    opacity: calc(100 / 100);
  }

  .active\:opacity-100\@lg:active {
    opacity: calc(100 / 100);
  }

  .group:hover .group-hover\:opacity-100\@lg {
    opacity: calc(100 / 100);
  }
}

@media (min-width: 1280px) {
  .opacity-0\@xl {
    opacity: calc(0 / 100);
  }

  .hover\:opacity-0\@xl:hover {
    opacity: calc(0 / 100);
  }

  .focus\:opacity-0\@xl:focus {
    opacity: calc(0 / 100);
  }

  .active\:opacity-0\@xl:active {
    opacity: calc(0 / 100);
  }

  .group:hover .group-hover\:opacity-0\@xl {
    opacity: calc(0 / 100);
  }

  .opacity-5\@xl {
    opacity: calc(5 / 100);
  }

  .hover\:opacity-5\@xl:hover {
    opacity: calc(5 / 100);
  }

  .focus\:opacity-5\@xl:focus {
    opacity: calc(5 / 100);
  }

  .active\:opacity-5\@xl:active {
    opacity: calc(5 / 100);
  }

  .group:hover .group-hover\:opacity-5\@xl {
    opacity: calc(5 / 100);
  }

  .opacity-10\@xl {
    opacity: calc(10 / 100);
  }

  .hover\:opacity-10\@xl:hover {
    opacity: calc(10 / 100);
  }

  .focus\:opacity-10\@xl:focus {
    opacity: calc(10 / 100);
  }

  .active\:opacity-10\@xl:active {
    opacity: calc(10 / 100);
  }

  .group:hover .group-hover\:opacity-10\@xl {
    opacity: calc(10 / 100);
  }

  .opacity-20\@xl {
    opacity: calc(20 / 100);
  }

  .hover\:opacity-20\@xl:hover {
    opacity: calc(20 / 100);
  }

  .focus\:opacity-20\@xl:focus {
    opacity: calc(20 / 100);
  }

  .active\:opacity-20\@xl:active {
    opacity: calc(20 / 100);
  }

  .group:hover .group-hover\:opacity-20\@xl {
    opacity: calc(20 / 100);
  }

  .opacity-25\@xl {
    opacity: calc(25 / 100);
  }

  .hover\:opacity-25\@xl:hover {
    opacity: calc(25 / 100);
  }

  .focus\:opacity-25\@xl:focus {
    opacity: calc(25 / 100);
  }

  .active\:opacity-25\@xl:active {
    opacity: calc(25 / 100);
  }

  .group:hover .group-hover\:opacity-25\@xl {
    opacity: calc(25 / 100);
  }

  .opacity-30\@xl {
    opacity: calc(30 / 100);
  }

  .hover\:opacity-30\@xl:hover {
    opacity: calc(30 / 100);
  }

  .focus\:opacity-30\@xl:focus {
    opacity: calc(30 / 100);
  }

  .active\:opacity-30\@xl:active {
    opacity: calc(30 / 100);
  }

  .group:hover .group-hover\:opacity-30\@xl {
    opacity: calc(30 / 100);
  }

  .opacity-40\@xl {
    opacity: calc(40 / 100);
  }

  .hover\:opacity-40\@xl:hover {
    opacity: calc(40 / 100);
  }

  .focus\:opacity-40\@xl:focus {
    opacity: calc(40 / 100);
  }

  .active\:opacity-40\@xl:active {
    opacity: calc(40 / 100);
  }

  .group:hover .group-hover\:opacity-40\@xl {
    opacity: calc(40 / 100);
  }

  .opacity-50\@xl {
    opacity: calc(50 / 100);
  }

  .hover\:opacity-50\@xl:hover {
    opacity: calc(50 / 100);
  }

  .focus\:opacity-50\@xl:focus {
    opacity: calc(50 / 100);
  }

  .active\:opacity-50\@xl:active {
    opacity: calc(50 / 100);
  }

  .group:hover .group-hover\:opacity-50\@xl {
    opacity: calc(50 / 100);
  }

  .opacity-60\@xl {
    opacity: calc(60 / 100);
  }

  .hover\:opacity-60\@xl:hover {
    opacity: calc(60 / 100);
  }

  .focus\:opacity-60\@xl:focus {
    opacity: calc(60 / 100);
  }

  .active\:opacity-60\@xl:active {
    opacity: calc(60 / 100);
  }

  .group:hover .group-hover\:opacity-60\@xl {
    opacity: calc(60 / 100);
  }

  .opacity-70\@xl {
    opacity: calc(70 / 100);
  }

  .hover\:opacity-70\@xl:hover {
    opacity: calc(70 / 100);
  }

  .focus\:opacity-70\@xl:focus {
    opacity: calc(70 / 100);
  }

  .active\:opacity-70\@xl:active {
    opacity: calc(70 / 100);
  }

  .group:hover .group-hover\:opacity-70\@xl {
    opacity: calc(70 / 100);
  }

  .opacity-75\@xl {
    opacity: calc(75 / 100);
  }

  .hover\:opacity-75\@xl:hover {
    opacity: calc(75 / 100);
  }

  .focus\:opacity-75\@xl:focus {
    opacity: calc(75 / 100);
  }

  .active\:opacity-75\@xl:active {
    opacity: calc(75 / 100);
  }

  .group:hover .group-hover\:opacity-75\@xl {
    opacity: calc(75 / 100);
  }

  .opacity-80\@xl {
    opacity: calc(80 / 100);
  }

  .hover\:opacity-80\@xl:hover {
    opacity: calc(80 / 100);
  }

  .focus\:opacity-80\@xl:focus {
    opacity: calc(80 / 100);
  }

  .active\:opacity-80\@xl:active {
    opacity: calc(80 / 100);
  }

  .group:hover .group-hover\:opacity-80\@xl {
    opacity: calc(80 / 100);
  }

  .opacity-90\@xl {
    opacity: calc(90 / 100);
  }

  .hover\:opacity-90\@xl:hover {
    opacity: calc(90 / 100);
  }

  .focus\:opacity-90\@xl:focus {
    opacity: calc(90 / 100);
  }

  .active\:opacity-90\@xl:active {
    opacity: calc(90 / 100);
  }

  .group:hover .group-hover\:opacity-90\@xl {
    opacity: calc(90 / 100);
  }

  .opacity-100\@xl {
    opacity: calc(100 / 100);
  }

  .hover\:opacity-100\@xl:hover {
    opacity: calc(100 / 100);
  }

  .focus\:opacity-100\@xl:focus {
    opacity: calc(100 / 100);
  }

  .active\:opacity-100\@xl:active {
    opacity: calc(100 / 100);
  }

  .group:hover .group-hover\:opacity-100\@xl {
    opacity: calc(100 / 100);
  }
}

@media (min-width: 1536px) {
  .opacity-0\@2xl {
    opacity: calc(0 / 100);
  }

  .hover\:opacity-0\@2xl:hover {
    opacity: calc(0 / 100);
  }

  .focus\:opacity-0\@2xl:focus {
    opacity: calc(0 / 100);
  }

  .active\:opacity-0\@2xl:active {
    opacity: calc(0 / 100);
  }

  .group:hover .group-hover\:opacity-0\@2xl {
    opacity: calc(0 / 100);
  }

  .opacity-5\@2xl {
    opacity: calc(5 / 100);
  }

  .hover\:opacity-5\@2xl:hover {
    opacity: calc(5 / 100);
  }

  .focus\:opacity-5\@2xl:focus {
    opacity: calc(5 / 100);
  }

  .active\:opacity-5\@2xl:active {
    opacity: calc(5 / 100);
  }

  .group:hover .group-hover\:opacity-5\@2xl {
    opacity: calc(5 / 100);
  }

  .opacity-10\@2xl {
    opacity: calc(10 / 100);
  }

  .hover\:opacity-10\@2xl:hover {
    opacity: calc(10 / 100);
  }

  .focus\:opacity-10\@2xl:focus {
    opacity: calc(10 / 100);
  }

  .active\:opacity-10\@2xl:active {
    opacity: calc(10 / 100);
  }

  .group:hover .group-hover\:opacity-10\@2xl {
    opacity: calc(10 / 100);
  }

  .opacity-20\@2xl {
    opacity: calc(20 / 100);
  }

  .hover\:opacity-20\@2xl:hover {
    opacity: calc(20 / 100);
  }

  .focus\:opacity-20\@2xl:focus {
    opacity: calc(20 / 100);
  }

  .active\:opacity-20\@2xl:active {
    opacity: calc(20 / 100);
  }

  .group:hover .group-hover\:opacity-20\@2xl {
    opacity: calc(20 / 100);
  }

  .opacity-25\@2xl {
    opacity: calc(25 / 100);
  }

  .hover\:opacity-25\@2xl:hover {
    opacity: calc(25 / 100);
  }

  .focus\:opacity-25\@2xl:focus {
    opacity: calc(25 / 100);
  }

  .active\:opacity-25\@2xl:active {
    opacity: calc(25 / 100);
  }

  .group:hover .group-hover\:opacity-25\@2xl {
    opacity: calc(25 / 100);
  }

  .opacity-30\@2xl {
    opacity: calc(30 / 100);
  }

  .hover\:opacity-30\@2xl:hover {
    opacity: calc(30 / 100);
  }

  .focus\:opacity-30\@2xl:focus {
    opacity: calc(30 / 100);
  }

  .active\:opacity-30\@2xl:active {
    opacity: calc(30 / 100);
  }

  .group:hover .group-hover\:opacity-30\@2xl {
    opacity: calc(30 / 100);
  }

  .opacity-40\@2xl {
    opacity: calc(40 / 100);
  }

  .hover\:opacity-40\@2xl:hover {
    opacity: calc(40 / 100);
  }

  .focus\:opacity-40\@2xl:focus {
    opacity: calc(40 / 100);
  }

  .active\:opacity-40\@2xl:active {
    opacity: calc(40 / 100);
  }

  .group:hover .group-hover\:opacity-40\@2xl {
    opacity: calc(40 / 100);
  }

  .opacity-50\@2xl {
    opacity: calc(50 / 100);
  }

  .hover\:opacity-50\@2xl:hover {
    opacity: calc(50 / 100);
  }

  .focus\:opacity-50\@2xl:focus {
    opacity: calc(50 / 100);
  }

  .active\:opacity-50\@2xl:active {
    opacity: calc(50 / 100);
  }

  .group:hover .group-hover\:opacity-50\@2xl {
    opacity: calc(50 / 100);
  }

  .opacity-60\@2xl {
    opacity: calc(60 / 100);
  }

  .hover\:opacity-60\@2xl:hover {
    opacity: calc(60 / 100);
  }

  .focus\:opacity-60\@2xl:focus {
    opacity: calc(60 / 100);
  }

  .active\:opacity-60\@2xl:active {
    opacity: calc(60 / 100);
  }

  .group:hover .group-hover\:opacity-60\@2xl {
    opacity: calc(60 / 100);
  }

  .opacity-70\@2xl {
    opacity: calc(70 / 100);
  }

  .hover\:opacity-70\@2xl:hover {
    opacity: calc(70 / 100);
  }

  .focus\:opacity-70\@2xl:focus {
    opacity: calc(70 / 100);
  }

  .active\:opacity-70\@2xl:active {
    opacity: calc(70 / 100);
  }

  .group:hover .group-hover\:opacity-70\@2xl {
    opacity: calc(70 / 100);
  }

  .opacity-75\@2xl {
    opacity: calc(75 / 100);
  }

  .hover\:opacity-75\@2xl:hover {
    opacity: calc(75 / 100);
  }

  .focus\:opacity-75\@2xl:focus {
    opacity: calc(75 / 100);
  }

  .active\:opacity-75\@2xl:active {
    opacity: calc(75 / 100);
  }

  .group:hover .group-hover\:opacity-75\@2xl {
    opacity: calc(75 / 100);
  }

  .opacity-80\@2xl {
    opacity: calc(80 / 100);
  }

  .hover\:opacity-80\@2xl:hover {
    opacity: calc(80 / 100);
  }

  .focus\:opacity-80\@2xl:focus {
    opacity: calc(80 / 100);
  }

  .active\:opacity-80\@2xl:active {
    opacity: calc(80 / 100);
  }

  .group:hover .group-hover\:opacity-80\@2xl {
    opacity: calc(80 / 100);
  }

  .opacity-90\@2xl {
    opacity: calc(90 / 100);
  }

  .hover\:opacity-90\@2xl:hover {
    opacity: calc(90 / 100);
  }

  .focus\:opacity-90\@2xl:focus {
    opacity: calc(90 / 100);
  }

  .active\:opacity-90\@2xl:active {
    opacity: calc(90 / 100);
  }

  .group:hover .group-hover\:opacity-90\@2xl {
    opacity: calc(90 / 100);
  }

  .opacity-100\@2xl {
    opacity: calc(100 / 100);
  }

  .hover\:opacity-100\@2xl:hover {
    opacity: calc(100 / 100);
  }

  .focus\:opacity-100\@2xl:focus {
    opacity: calc(100 / 100);
  }

  .active\:opacity-100\@2xl:active {
    opacity: calc(100 / 100);
  }

  .group:hover .group-hover\:opacity-100\@2xl {
    opacity: calc(100 / 100);
  }
}

/**
 * @component Position
 * @description Controls element positioning and placement within the document flow
 *
 * @example
 * <!-- Basic positioning -->
 * <div class="relative">
 *   <div class="absolute top-0 right-0">
 *     Positioned in top-right corner
 *   </div>
 * </div>
 * 
 * <!-- Sticky header -->
 * <header class="sticky top-0">
 *   This header sticks to the top when scrolling
 * </header>
 * 
 * <!-- Responsive positioning -->
 * <div class="relative@md">
 *   <div class="absolute@md top-2 left-2">
 *     Only positioned on medium screens and up
 *   </div>
 * </div>
 *
 * @classes
 * Position Types:
 * - static: Default position, follows document flow
 * - relative: Positioned relative to normal position
 * - absolute: Positioned relative to nearest positioned ancestor
 * - fixed: Positioned relative to viewport
 * - sticky: Positioned based on scroll position
 * 
 * Placement:
 * - top-{value}: Sets top position
 * - right-{value}: Sets right position
 * - bottom-{value}: Sets bottom position
 * - left-{value}: Sets left position
 * 
 * Common values: 0, 1, 2, 3, 4, 5, 10, etc. (based on spacing scale)
 *
 * @responsive
 * All position classes support responsive variants using @breakpoint suffix:
 * - relative@md: Relative positioning on medium screens and up
 * - top-0@lg: Zero top position on large screens
 *
 * @see z-index, transform
 */
/**
 * @mixin static
 * @description Sets position to static (default document flow)
 * @example
 * .element {
 *   @include static;
 * }
 */
/**
 * @mixin relative
 * @description Sets position to relative, creating a positioning context
 * @example
 * .container {
 *   @include relative;
 * }
 */
/**
 * @mixin absolute
 * @description Sets position to absolute, removing from normal document flow
 * @example
 * .popup {
 *   @include absolute;
 *   top: 0;
 *   left: 0;
 * }
 */
/**
 * @mixin absolute
 * @description Sets position to absolute, removing from normal document flow
 * @example
 * .popup {
 *   @include absolute;
 *   top: 0;
 *   left: 0;
 * }
 */
/**
 * @mixin sticky
 * @description Creates a sticky element that remains in view during scrolling
 * @example
 * .nav {
 *   @include sticky;
 * }
 */
/**
 * @mixin top
 * @description Sets the top position of an element
 * @param {Number|Length} $value - Position value (in px, rem, etc.)
 * @example
 * .toast {
 *   @include absolute;
 *   @include top(1rem);
 * }
 */
/**
 * @mixin right
 * @description Sets the right position of an element
 * @param {Number|Length} $value - Position value (in px, rem, etc.)
 * @example
 * .badge {
 *   @include absolute;
 *   @include right(0);
 * }
 */
/**
 * @mixin bottom
 * @description Sets the bottom position of an element
 * @param {Number|Length} $value - Position value (in px, rem, etc.)
 * @example
 * .footer {
 *   @include fixed;
 *   @include bottom(0);
 * }
 */
/**
 * @mixin left
 * @description Sets the left position of an element
 * @param {Number|Length} $value - Position value (in px, rem, etc.)
 * @example
 * .sidebar {
 *   @include fixed;
 *   @include left(0);
 * }
 */
.static {
  position: static;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
  z-index: 999;
  top: 0;
}

.absolute-center {
  position: absolute;
  left: 50%;
  top: 50%;
  --translate-x: -50%;
  --translate-y: -50%;
  transform: translateX(var(--translate-x)) translateY(var(--translate-y)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
}

.top-25p {
  top: 25%;
}

.right-25p {
  right: 25%;
}

.bottom-25p {
  bottom: 25%;
}

.left-25p {
  left: 25%;
}

.top-33p {
  top: 33.333%;
}

.right-33p {
  right: 33.333%;
}

.bottom-33p {
  bottom: 33.333%;
}

.left-33p {
  left: 33.333%;
}

.top-50p {
  top: 50%;
}

.right-50p {
  right: 50%;
}

.bottom-50p {
  bottom: 50%;
}

.left-50p {
  left: 50%;
}

.top-66p {
  top: 66.667%;
}

.right-66p {
  right: 66.667%;
}

.bottom-66p {
  bottom: 66.667%;
}

.left-66p {
  left: 66.667%;
}

.top-75p {
  top: 75%;
}

.right-75p {
  right: 75%;
}

.bottom-75p {
  bottom: 75%;
}

.left-75p {
  left: 75%;
}

.top-100p {
  top: 100%;
}

.right-100p {
  right: 100%;
}

.bottom-100p {
  bottom: 100%;
}

.left-100p {
  left: 100%;
}

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.top-1 {
  top: 0.25rem;
}

.right-1 {
  right: 0.25rem;
}

.bottom-1 {
  bottom: 0.25rem;
}

.left-1 {
  left: 0.25rem;
}

.top-2 {
  top: 0.5rem;
}

.right-2 {
  right: 0.5rem;
}

.bottom-2 {
  bottom: 0.5rem;
}

.left-2 {
  left: 0.5rem;
}

.top-3 {
  top: 0.75rem;
}

.right-3 {
  right: 0.75rem;
}

.bottom-3 {
  bottom: 0.75rem;
}

.left-3 {
  left: 0.75rem;
}

.top-4 {
  top: 1rem;
}

.right-4 {
  right: 1rem;
}

.bottom-4 {
  bottom: 1rem;
}

.left-4 {
  left: 1rem;
}

.top-5 {
  top: 1.25rem;
}

.right-5 {
  right: 1.25rem;
}

.bottom-5 {
  bottom: 1.25rem;
}

.left-5 {
  left: 1.25rem;
}

.top-6 {
  top: 1.5rem;
}

.right-6 {
  right: 1.5rem;
}

.bottom-6 {
  bottom: 1.5rem;
}

.left-6 {
  left: 1.5rem;
}

.top-8 {
  top: 2rem;
}

.right-8 {
  right: 2rem;
}

.bottom-8 {
  bottom: 2rem;
}

.left-8 {
  left: 2rem;
}

.top-10 {
  top: 2.5rem;
}

.right-10 {
  right: 2.5rem;
}

.bottom-10 {
  bottom: 2.5rem;
}

.left-10 {
  left: 2.5rem;
}

.top-12 {
  top: 3rem;
}

.right-12 {
  right: 3rem;
}

.bottom-12 {
  bottom: 3rem;
}

.left-12 {
  left: 3rem;
}

.top-16 {
  top: 4rem;
}

.right-16 {
  right: 4rem;
}

.bottom-16 {
  bottom: 4rem;
}

.left-16 {
  left: 4rem;
}

.top-20 {
  top: 5rem;
}

.right-20 {
  right: 5rem;
}

.bottom-20 {
  bottom: 5rem;
}

.left-20 {
  left: 5rem;
}

.top-24 {
  top: 6rem;
}

.right-24 {
  right: 6rem;
}

.bottom-24 {
  bottom: 6rem;
}

.left-24 {
  left: 6rem;
}

.top-32 {
  top: 8rem;
}

.right-32 {
  right: 8rem;
}

.bottom-32 {
  bottom: 8rem;
}

.left-32 {
  left: 8rem;
}

.top-40 {
  top: 10rem;
}

.right-40 {
  right: 10rem;
}

.bottom-40 {
  bottom: 10rem;
}

.left-40 {
  left: 10rem;
}

.top-48 {
  top: 12rem;
}

.right-48 {
  right: 12rem;
}

.bottom-48 {
  bottom: 12rem;
}

.left-48 {
  left: 12rem;
}

.top-56 {
  top: 14rem;
}

.right-56 {
  right: 14rem;
}

.bottom-56 {
  bottom: 14rem;
}

.left-56 {
  left: 14rem;
}

.top-64 {
  top: 16rem;
}

.right-64 {
  right: 16rem;
}

.bottom-64 {
  bottom: 16rem;
}

.left-64 {
  left: 16rem;
}

.top-120 {
  top: 30rem;
}

.right-120 {
  right: 30rem;
}

.bottom-120 {
  bottom: 30rem;
}

.left-120 {
  left: 30rem;
}

@media (min-width: 480px) {
  .static\@xs {
    position: static;
  }

  .relative\@xs {
    position: relative;
  }

  .absolute\@xs {
    position: absolute;
  }

  .fixed\@xs {
    position: fixed;
  }

  .sticky\@xs {
    position: sticky;
    z-index: 999;
    top: 0;
  }

  .absolute-center\@xs {
    position: absolute;
    left: 50%;
    top: 50%;
    --translate-x: -50%;
    --translate-y: -50%;
    transform: translateX(var(--translate-x)) translateY(var(--translate-y)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
  }

  .top-25p\@xs {
    top: 25%;
  }

  .right-25p\@xs {
    right: 25%;
  }

  .bottom-25p\@xs {
    bottom: 25%;
  }

  .left-25p\@xs {
    left: 25%;
  }

  .top-33p\@xs {
    top: 33.333%;
  }

  .right-33p\@xs {
    right: 33.333%;
  }

  .bottom-33p\@xs {
    bottom: 33.333%;
  }

  .left-33p\@xs {
    left: 33.333%;
  }

  .top-50p\@xs {
    top: 50%;
  }

  .right-50p\@xs {
    right: 50%;
  }

  .bottom-50p\@xs {
    bottom: 50%;
  }

  .left-50p\@xs {
    left: 50%;
  }

  .top-66p\@xs {
    top: 66.667%;
  }

  .right-66p\@xs {
    right: 66.667%;
  }

  .bottom-66p\@xs {
    bottom: 66.667%;
  }

  .left-66p\@xs {
    left: 66.667%;
  }

  .top-75p\@xs {
    top: 75%;
  }

  .right-75p\@xs {
    right: 75%;
  }

  .bottom-75p\@xs {
    bottom: 75%;
  }

  .left-75p\@xs {
    left: 75%;
  }

  .top-100p\@xs {
    top: 100%;
  }

  .right-100p\@xs {
    right: 100%;
  }

  .bottom-100p\@xs {
    bottom: 100%;
  }

  .left-100p\@xs {
    left: 100%;
  }

  .top-0\@xs {
    top: 0;
  }

  .right-0\@xs {
    right: 0;
  }

  .bottom-0\@xs {
    bottom: 0;
  }

  .left-0\@xs {
    left: 0;
  }

  .top-1\@xs {
    top: 0.25rem;
  }

  .right-1\@xs {
    right: 0.25rem;
  }

  .bottom-1\@xs {
    bottom: 0.25rem;
  }

  .left-1\@xs {
    left: 0.25rem;
  }

  .top-2\@xs {
    top: 0.5rem;
  }

  .right-2\@xs {
    right: 0.5rem;
  }

  .bottom-2\@xs {
    bottom: 0.5rem;
  }

  .left-2\@xs {
    left: 0.5rem;
  }

  .top-3\@xs {
    top: 0.75rem;
  }

  .right-3\@xs {
    right: 0.75rem;
  }

  .bottom-3\@xs {
    bottom: 0.75rem;
  }

  .left-3\@xs {
    left: 0.75rem;
  }

  .top-4\@xs {
    top: 1rem;
  }

  .right-4\@xs {
    right: 1rem;
  }

  .bottom-4\@xs {
    bottom: 1rem;
  }

  .left-4\@xs {
    left: 1rem;
  }

  .top-5\@xs {
    top: 1.25rem;
  }

  .right-5\@xs {
    right: 1.25rem;
  }

  .bottom-5\@xs {
    bottom: 1.25rem;
  }

  .left-5\@xs {
    left: 1.25rem;
  }

  .top-6\@xs {
    top: 1.5rem;
  }

  .right-6\@xs {
    right: 1.5rem;
  }

  .bottom-6\@xs {
    bottom: 1.5rem;
  }

  .left-6\@xs {
    left: 1.5rem;
  }

  .top-8\@xs {
    top: 2rem;
  }

  .right-8\@xs {
    right: 2rem;
  }

  .bottom-8\@xs {
    bottom: 2rem;
  }

  .left-8\@xs {
    left: 2rem;
  }

  .top-10\@xs {
    top: 2.5rem;
  }

  .right-10\@xs {
    right: 2.5rem;
  }

  .bottom-10\@xs {
    bottom: 2.5rem;
  }

  .left-10\@xs {
    left: 2.5rem;
  }

  .top-12\@xs {
    top: 3rem;
  }

  .right-12\@xs {
    right: 3rem;
  }

  .bottom-12\@xs {
    bottom: 3rem;
  }

  .left-12\@xs {
    left: 3rem;
  }

  .top-16\@xs {
    top: 4rem;
  }

  .right-16\@xs {
    right: 4rem;
  }

  .bottom-16\@xs {
    bottom: 4rem;
  }

  .left-16\@xs {
    left: 4rem;
  }

  .top-20\@xs {
    top: 5rem;
  }

  .right-20\@xs {
    right: 5rem;
  }

  .bottom-20\@xs {
    bottom: 5rem;
  }

  .left-20\@xs {
    left: 5rem;
  }

  .top-24\@xs {
    top: 6rem;
  }

  .right-24\@xs {
    right: 6rem;
  }

  .bottom-24\@xs {
    bottom: 6rem;
  }

  .left-24\@xs {
    left: 6rem;
  }

  .top-32\@xs {
    top: 8rem;
  }

  .right-32\@xs {
    right: 8rem;
  }

  .bottom-32\@xs {
    bottom: 8rem;
  }

  .left-32\@xs {
    left: 8rem;
  }

  .top-40\@xs {
    top: 10rem;
  }

  .right-40\@xs {
    right: 10rem;
  }

  .bottom-40\@xs {
    bottom: 10rem;
  }

  .left-40\@xs {
    left: 10rem;
  }

  .top-48\@xs {
    top: 12rem;
  }

  .right-48\@xs {
    right: 12rem;
  }

  .bottom-48\@xs {
    bottom: 12rem;
  }

  .left-48\@xs {
    left: 12rem;
  }

  .top-56\@xs {
    top: 14rem;
  }

  .right-56\@xs {
    right: 14rem;
  }

  .bottom-56\@xs {
    bottom: 14rem;
  }

  .left-56\@xs {
    left: 14rem;
  }

  .top-64\@xs {
    top: 16rem;
  }

  .right-64\@xs {
    right: 16rem;
  }

  .bottom-64\@xs {
    bottom: 16rem;
  }

  .left-64\@xs {
    left: 16rem;
  }

  .top-120\@xs {
    top: 30rem;
  }

  .right-120\@xs {
    right: 30rem;
  }

  .bottom-120\@xs {
    bottom: 30rem;
  }

  .left-120\@xs {
    left: 30rem;
  }
}

@media (min-width: 640px) {
  .static\@sm {
    position: static;
  }

  .relative\@sm {
    position: relative;
  }

  .absolute\@sm {
    position: absolute;
  }

  .fixed\@sm {
    position: fixed;
  }

  .sticky\@sm {
    position: sticky;
    z-index: 999;
    top: 0;
  }

  .absolute-center\@sm {
    position: absolute;
    left: 50%;
    top: 50%;
    --translate-x: -50%;
    --translate-y: -50%;
    transform: translateX(var(--translate-x)) translateY(var(--translate-y)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
  }

  .top-25p\@sm {
    top: 25%;
  }

  .right-25p\@sm {
    right: 25%;
  }

  .bottom-25p\@sm {
    bottom: 25%;
  }

  .left-25p\@sm {
    left: 25%;
  }

  .top-33p\@sm {
    top: 33.333%;
  }

  .right-33p\@sm {
    right: 33.333%;
  }

  .bottom-33p\@sm {
    bottom: 33.333%;
  }

  .left-33p\@sm {
    left: 33.333%;
  }

  .top-50p\@sm {
    top: 50%;
  }

  .right-50p\@sm {
    right: 50%;
  }

  .bottom-50p\@sm {
    bottom: 50%;
  }

  .left-50p\@sm {
    left: 50%;
  }

  .top-66p\@sm {
    top: 66.667%;
  }

  .right-66p\@sm {
    right: 66.667%;
  }

  .bottom-66p\@sm {
    bottom: 66.667%;
  }

  .left-66p\@sm {
    left: 66.667%;
  }

  .top-75p\@sm {
    top: 75%;
  }

  .right-75p\@sm {
    right: 75%;
  }

  .bottom-75p\@sm {
    bottom: 75%;
  }

  .left-75p\@sm {
    left: 75%;
  }

  .top-100p\@sm {
    top: 100%;
  }

  .right-100p\@sm {
    right: 100%;
  }

  .bottom-100p\@sm {
    bottom: 100%;
  }

  .left-100p\@sm {
    left: 100%;
  }

  .top-0\@sm {
    top: 0;
  }

  .right-0\@sm {
    right: 0;
  }

  .bottom-0\@sm {
    bottom: 0;
  }

  .left-0\@sm {
    left: 0;
  }

  .top-1\@sm {
    top: 0.25rem;
  }

  .right-1\@sm {
    right: 0.25rem;
  }

  .bottom-1\@sm {
    bottom: 0.25rem;
  }

  .left-1\@sm {
    left: 0.25rem;
  }

  .top-2\@sm {
    top: 0.5rem;
  }

  .right-2\@sm {
    right: 0.5rem;
  }

  .bottom-2\@sm {
    bottom: 0.5rem;
  }

  .left-2\@sm {
    left: 0.5rem;
  }

  .top-3\@sm {
    top: 0.75rem;
  }

  .right-3\@sm {
    right: 0.75rem;
  }

  .bottom-3\@sm {
    bottom: 0.75rem;
  }

  .left-3\@sm {
    left: 0.75rem;
  }

  .top-4\@sm {
    top: 1rem;
  }

  .right-4\@sm {
    right: 1rem;
  }

  .bottom-4\@sm {
    bottom: 1rem;
  }

  .left-4\@sm {
    left: 1rem;
  }

  .top-5\@sm {
    top: 1.25rem;
  }

  .right-5\@sm {
    right: 1.25rem;
  }

  .bottom-5\@sm {
    bottom: 1.25rem;
  }

  .left-5\@sm {
    left: 1.25rem;
  }

  .top-6\@sm {
    top: 1.5rem;
  }

  .right-6\@sm {
    right: 1.5rem;
  }

  .bottom-6\@sm {
    bottom: 1.5rem;
  }

  .left-6\@sm {
    left: 1.5rem;
  }

  .top-8\@sm {
    top: 2rem;
  }

  .right-8\@sm {
    right: 2rem;
  }

  .bottom-8\@sm {
    bottom: 2rem;
  }

  .left-8\@sm {
    left: 2rem;
  }

  .top-10\@sm {
    top: 2.5rem;
  }

  .right-10\@sm {
    right: 2.5rem;
  }

  .bottom-10\@sm {
    bottom: 2.5rem;
  }

  .left-10\@sm {
    left: 2.5rem;
  }

  .top-12\@sm {
    top: 3rem;
  }

  .right-12\@sm {
    right: 3rem;
  }

  .bottom-12\@sm {
    bottom: 3rem;
  }

  .left-12\@sm {
    left: 3rem;
  }

  .top-16\@sm {
    top: 4rem;
  }

  .right-16\@sm {
    right: 4rem;
  }

  .bottom-16\@sm {
    bottom: 4rem;
  }

  .left-16\@sm {
    left: 4rem;
  }

  .top-20\@sm {
    top: 5rem;
  }

  .right-20\@sm {
    right: 5rem;
  }

  .bottom-20\@sm {
    bottom: 5rem;
  }

  .left-20\@sm {
    left: 5rem;
  }

  .top-24\@sm {
    top: 6rem;
  }

  .right-24\@sm {
    right: 6rem;
  }

  .bottom-24\@sm {
    bottom: 6rem;
  }

  .left-24\@sm {
    left: 6rem;
  }

  .top-32\@sm {
    top: 8rem;
  }

  .right-32\@sm {
    right: 8rem;
  }

  .bottom-32\@sm {
    bottom: 8rem;
  }

  .left-32\@sm {
    left: 8rem;
  }

  .top-40\@sm {
    top: 10rem;
  }

  .right-40\@sm {
    right: 10rem;
  }

  .bottom-40\@sm {
    bottom: 10rem;
  }

  .left-40\@sm {
    left: 10rem;
  }

  .top-48\@sm {
    top: 12rem;
  }

  .right-48\@sm {
    right: 12rem;
  }

  .bottom-48\@sm {
    bottom: 12rem;
  }

  .left-48\@sm {
    left: 12rem;
  }

  .top-56\@sm {
    top: 14rem;
  }

  .right-56\@sm {
    right: 14rem;
  }

  .bottom-56\@sm {
    bottom: 14rem;
  }

  .left-56\@sm {
    left: 14rem;
  }

  .top-64\@sm {
    top: 16rem;
  }

  .right-64\@sm {
    right: 16rem;
  }

  .bottom-64\@sm {
    bottom: 16rem;
  }

  .left-64\@sm {
    left: 16rem;
  }

  .top-120\@sm {
    top: 30rem;
  }

  .right-120\@sm {
    right: 30rem;
  }

  .bottom-120\@sm {
    bottom: 30rem;
  }

  .left-120\@sm {
    left: 30rem;
  }
}

@media (min-width: 768px) {
  .static\@md {
    position: static;
  }

  .relative\@md {
    position: relative;
  }

  .absolute\@md {
    position: absolute;
  }

  .fixed\@md {
    position: fixed;
  }

  .sticky\@md {
    position: sticky;
    z-index: 999;
    top: 0;
  }

  .absolute-center\@md {
    position: absolute;
    left: 50%;
    top: 50%;
    --translate-x: -50%;
    --translate-y: -50%;
    transform: translateX(var(--translate-x)) translateY(var(--translate-y)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
  }

  .top-25p\@md {
    top: 25%;
  }

  .right-25p\@md {
    right: 25%;
  }

  .bottom-25p\@md {
    bottom: 25%;
  }

  .left-25p\@md {
    left: 25%;
  }

  .top-33p\@md {
    top: 33.333%;
  }

  .right-33p\@md {
    right: 33.333%;
  }

  .bottom-33p\@md {
    bottom: 33.333%;
  }

  .left-33p\@md {
    left: 33.333%;
  }

  .top-50p\@md {
    top: 50%;
  }

  .right-50p\@md {
    right: 50%;
  }

  .bottom-50p\@md {
    bottom: 50%;
  }

  .left-50p\@md {
    left: 50%;
  }

  .top-66p\@md {
    top: 66.667%;
  }

  .right-66p\@md {
    right: 66.667%;
  }

  .bottom-66p\@md {
    bottom: 66.667%;
  }

  .left-66p\@md {
    left: 66.667%;
  }

  .top-75p\@md {
    top: 75%;
  }

  .right-75p\@md {
    right: 75%;
  }

  .bottom-75p\@md {
    bottom: 75%;
  }

  .left-75p\@md {
    left: 75%;
  }

  .top-100p\@md {
    top: 100%;
  }

  .right-100p\@md {
    right: 100%;
  }

  .bottom-100p\@md {
    bottom: 100%;
  }

  .left-100p\@md {
    left: 100%;
  }

  .top-0\@md {
    top: 0;
  }

  .right-0\@md {
    right: 0;
  }

  .bottom-0\@md {
    bottom: 0;
  }

  .left-0\@md {
    left: 0;
  }

  .top-1\@md {
    top: 0.25rem;
  }

  .right-1\@md {
    right: 0.25rem;
  }

  .bottom-1\@md {
    bottom: 0.25rem;
  }

  .left-1\@md {
    left: 0.25rem;
  }

  .top-2\@md {
    top: 0.5rem;
  }

  .right-2\@md {
    right: 0.5rem;
  }

  .bottom-2\@md {
    bottom: 0.5rem;
  }

  .left-2\@md {
    left: 0.5rem;
  }

  .top-3\@md {
    top: 0.75rem;
  }

  .right-3\@md {
    right: 0.75rem;
  }

  .bottom-3\@md {
    bottom: 0.75rem;
  }

  .left-3\@md {
    left: 0.75rem;
  }

  .top-4\@md {
    top: 1rem;
  }

  .right-4\@md {
    right: 1rem;
  }

  .bottom-4\@md {
    bottom: 1rem;
  }

  .left-4\@md {
    left: 1rem;
  }

  .top-5\@md {
    top: 1.25rem;
  }

  .right-5\@md {
    right: 1.25rem;
  }

  .bottom-5\@md {
    bottom: 1.25rem;
  }

  .left-5\@md {
    left: 1.25rem;
  }

  .top-6\@md {
    top: 1.5rem;
  }

  .right-6\@md {
    right: 1.5rem;
  }

  .bottom-6\@md {
    bottom: 1.5rem;
  }

  .left-6\@md {
    left: 1.5rem;
  }

  .top-8\@md {
    top: 2rem;
  }

  .right-8\@md {
    right: 2rem;
  }

  .bottom-8\@md {
    bottom: 2rem;
  }

  .left-8\@md {
    left: 2rem;
  }

  .top-10\@md {
    top: 2.5rem;
  }

  .right-10\@md {
    right: 2.5rem;
  }

  .bottom-10\@md {
    bottom: 2.5rem;
  }

  .left-10\@md {
    left: 2.5rem;
  }

  .top-12\@md {
    top: 3rem;
  }

  .right-12\@md {
    right: 3rem;
  }

  .bottom-12\@md {
    bottom: 3rem;
  }

  .left-12\@md {
    left: 3rem;
  }

  .top-16\@md {
    top: 4rem;
  }

  .right-16\@md {
    right: 4rem;
  }

  .bottom-16\@md {
    bottom: 4rem;
  }

  .left-16\@md {
    left: 4rem;
  }

  .top-20\@md {
    top: 5rem;
  }

  .right-20\@md {
    right: 5rem;
  }

  .bottom-20\@md {
    bottom: 5rem;
  }

  .left-20\@md {
    left: 5rem;
  }

  .top-24\@md {
    top: 6rem;
  }

  .right-24\@md {
    right: 6rem;
  }

  .bottom-24\@md {
    bottom: 6rem;
  }

  .left-24\@md {
    left: 6rem;
  }

  .top-32\@md {
    top: 8rem;
  }

  .right-32\@md {
    right: 8rem;
  }

  .bottom-32\@md {
    bottom: 8rem;
  }

  .left-32\@md {
    left: 8rem;
  }

  .top-40\@md {
    top: 10rem;
  }

  .right-40\@md {
    right: 10rem;
  }

  .bottom-40\@md {
    bottom: 10rem;
  }

  .left-40\@md {
    left: 10rem;
  }

  .top-48\@md {
    top: 12rem;
  }

  .right-48\@md {
    right: 12rem;
  }

  .bottom-48\@md {
    bottom: 12rem;
  }

  .left-48\@md {
    left: 12rem;
  }

  .top-56\@md {
    top: 14rem;
  }

  .right-56\@md {
    right: 14rem;
  }

  .bottom-56\@md {
    bottom: 14rem;
  }

  .left-56\@md {
    left: 14rem;
  }

  .top-64\@md {
    top: 16rem;
  }

  .right-64\@md {
    right: 16rem;
  }

  .bottom-64\@md {
    bottom: 16rem;
  }

  .left-64\@md {
    left: 16rem;
  }

  .top-120\@md {
    top: 30rem;
  }

  .right-120\@md {
    right: 30rem;
  }

  .bottom-120\@md {
    bottom: 30rem;
  }

  .left-120\@md {
    left: 30rem;
  }
}

@media (min-width: 1024px) {
  .static\@lg {
    position: static;
  }

  .relative\@lg {
    position: relative;
  }

  .absolute\@lg {
    position: absolute;
  }

  .fixed\@lg {
    position: fixed;
  }

  .sticky\@lg {
    position: sticky;
    z-index: 999;
    top: 0;
  }

  .absolute-center\@lg {
    position: absolute;
    left: 50%;
    top: 50%;
    --translate-x: -50%;
    --translate-y: -50%;
    transform: translateX(var(--translate-x)) translateY(var(--translate-y)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
  }

  .top-25p\@lg {
    top: 25%;
  }

  .right-25p\@lg {
    right: 25%;
  }

  .bottom-25p\@lg {
    bottom: 25%;
  }

  .left-25p\@lg {
    left: 25%;
  }

  .top-33p\@lg {
    top: 33.333%;
  }

  .right-33p\@lg {
    right: 33.333%;
  }

  .bottom-33p\@lg {
    bottom: 33.333%;
  }

  .left-33p\@lg {
    left: 33.333%;
  }

  .top-50p\@lg {
    top: 50%;
  }

  .right-50p\@lg {
    right: 50%;
  }

  .bottom-50p\@lg {
    bottom: 50%;
  }

  .left-50p\@lg {
    left: 50%;
  }

  .top-66p\@lg {
    top: 66.667%;
  }

  .right-66p\@lg {
    right: 66.667%;
  }

  .bottom-66p\@lg {
    bottom: 66.667%;
  }

  .left-66p\@lg {
    left: 66.667%;
  }

  .top-75p\@lg {
    top: 75%;
  }

  .right-75p\@lg {
    right: 75%;
  }

  .bottom-75p\@lg {
    bottom: 75%;
  }

  .left-75p\@lg {
    left: 75%;
  }

  .top-100p\@lg {
    top: 100%;
  }

  .right-100p\@lg {
    right: 100%;
  }

  .bottom-100p\@lg {
    bottom: 100%;
  }

  .left-100p\@lg {
    left: 100%;
  }

  .top-0\@lg {
    top: 0;
  }

  .right-0\@lg {
    right: 0;
  }

  .bottom-0\@lg {
    bottom: 0;
  }

  .left-0\@lg {
    left: 0;
  }

  .top-1\@lg {
    top: 0.25rem;
  }

  .right-1\@lg {
    right: 0.25rem;
  }

  .bottom-1\@lg {
    bottom: 0.25rem;
  }

  .left-1\@lg {
    left: 0.25rem;
  }

  .top-2\@lg {
    top: 0.5rem;
  }

  .right-2\@lg {
    right: 0.5rem;
  }

  .bottom-2\@lg {
    bottom: 0.5rem;
  }

  .left-2\@lg {
    left: 0.5rem;
  }

  .top-3\@lg {
    top: 0.75rem;
  }

  .right-3\@lg {
    right: 0.75rem;
  }

  .bottom-3\@lg {
    bottom: 0.75rem;
  }

  .left-3\@lg {
    left: 0.75rem;
  }

  .top-4\@lg {
    top: 1rem;
  }

  .right-4\@lg {
    right: 1rem;
  }

  .bottom-4\@lg {
    bottom: 1rem;
  }

  .left-4\@lg {
    left: 1rem;
  }

  .top-5\@lg {
    top: 1.25rem;
  }

  .right-5\@lg {
    right: 1.25rem;
  }

  .bottom-5\@lg {
    bottom: 1.25rem;
  }

  .left-5\@lg {
    left: 1.25rem;
  }

  .top-6\@lg {
    top: 1.5rem;
  }

  .right-6\@lg {
    right: 1.5rem;
  }

  .bottom-6\@lg {
    bottom: 1.5rem;
  }

  .left-6\@lg {
    left: 1.5rem;
  }

  .top-8\@lg {
    top: 2rem;
  }

  .right-8\@lg {
    right: 2rem;
  }

  .bottom-8\@lg {
    bottom: 2rem;
  }

  .left-8\@lg {
    left: 2rem;
  }

  .top-10\@lg {
    top: 2.5rem;
  }

  .right-10\@lg {
    right: 2.5rem;
  }

  .bottom-10\@lg {
    bottom: 2.5rem;
  }

  .left-10\@lg {
    left: 2.5rem;
  }

  .top-12\@lg {
    top: 3rem;
  }

  .right-12\@lg {
    right: 3rem;
  }

  .bottom-12\@lg {
    bottom: 3rem;
  }

  .left-12\@lg {
    left: 3rem;
  }

  .top-16\@lg {
    top: 4rem;
  }

  .right-16\@lg {
    right: 4rem;
  }

  .bottom-16\@lg {
    bottom: 4rem;
  }

  .left-16\@lg {
    left: 4rem;
  }

  .top-20\@lg {
    top: 5rem;
  }

  .right-20\@lg {
    right: 5rem;
  }

  .bottom-20\@lg {
    bottom: 5rem;
  }

  .left-20\@lg {
    left: 5rem;
  }

  .top-24\@lg {
    top: 6rem;
  }

  .right-24\@lg {
    right: 6rem;
  }

  .bottom-24\@lg {
    bottom: 6rem;
  }

  .left-24\@lg {
    left: 6rem;
  }

  .top-32\@lg {
    top: 8rem;
  }

  .right-32\@lg {
    right: 8rem;
  }

  .bottom-32\@lg {
    bottom: 8rem;
  }

  .left-32\@lg {
    left: 8rem;
  }

  .top-40\@lg {
    top: 10rem;
  }

  .right-40\@lg {
    right: 10rem;
  }

  .bottom-40\@lg {
    bottom: 10rem;
  }

  .left-40\@lg {
    left: 10rem;
  }

  .top-48\@lg {
    top: 12rem;
  }

  .right-48\@lg {
    right: 12rem;
  }

  .bottom-48\@lg {
    bottom: 12rem;
  }

  .left-48\@lg {
    left: 12rem;
  }

  .top-56\@lg {
    top: 14rem;
  }

  .right-56\@lg {
    right: 14rem;
  }

  .bottom-56\@lg {
    bottom: 14rem;
  }

  .left-56\@lg {
    left: 14rem;
  }

  .top-64\@lg {
    top: 16rem;
  }

  .right-64\@lg {
    right: 16rem;
  }

  .bottom-64\@lg {
    bottom: 16rem;
  }

  .left-64\@lg {
    left: 16rem;
  }

  .top-120\@lg {
    top: 30rem;
  }

  .right-120\@lg {
    right: 30rem;
  }

  .bottom-120\@lg {
    bottom: 30rem;
  }

  .left-120\@lg {
    left: 30rem;
  }
}

@media (min-width: 1280px) {
  .static\@xl {
    position: static;
  }

  .relative\@xl {
    position: relative;
  }

  .absolute\@xl {
    position: absolute;
  }

  .fixed\@xl {
    position: fixed;
  }

  .sticky\@xl {
    position: sticky;
    z-index: 999;
    top: 0;
  }

  .absolute-center\@xl {
    position: absolute;
    left: 50%;
    top: 50%;
    --translate-x: -50%;
    --translate-y: -50%;
    transform: translateX(var(--translate-x)) translateY(var(--translate-y)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
  }

  .top-25p\@xl {
    top: 25%;
  }

  .right-25p\@xl {
    right: 25%;
  }

  .bottom-25p\@xl {
    bottom: 25%;
  }

  .left-25p\@xl {
    left: 25%;
  }

  .top-33p\@xl {
    top: 33.333%;
  }

  .right-33p\@xl {
    right: 33.333%;
  }

  .bottom-33p\@xl {
    bottom: 33.333%;
  }

  .left-33p\@xl {
    left: 33.333%;
  }

  .top-50p\@xl {
    top: 50%;
  }

  .right-50p\@xl {
    right: 50%;
  }

  .bottom-50p\@xl {
    bottom: 50%;
  }

  .left-50p\@xl {
    left: 50%;
  }

  .top-66p\@xl {
    top: 66.667%;
  }

  .right-66p\@xl {
    right: 66.667%;
  }

  .bottom-66p\@xl {
    bottom: 66.667%;
  }

  .left-66p\@xl {
    left: 66.667%;
  }

  .top-75p\@xl {
    top: 75%;
  }

  .right-75p\@xl {
    right: 75%;
  }

  .bottom-75p\@xl {
    bottom: 75%;
  }

  .left-75p\@xl {
    left: 75%;
  }

  .top-100p\@xl {
    top: 100%;
  }

  .right-100p\@xl {
    right: 100%;
  }

  .bottom-100p\@xl {
    bottom: 100%;
  }

  .left-100p\@xl {
    left: 100%;
  }

  .top-0\@xl {
    top: 0;
  }

  .right-0\@xl {
    right: 0;
  }

  .bottom-0\@xl {
    bottom: 0;
  }

  .left-0\@xl {
    left: 0;
  }

  .top-1\@xl {
    top: 0.25rem;
  }

  .right-1\@xl {
    right: 0.25rem;
  }

  .bottom-1\@xl {
    bottom: 0.25rem;
  }

  .left-1\@xl {
    left: 0.25rem;
  }

  .top-2\@xl {
    top: 0.5rem;
  }

  .right-2\@xl {
    right: 0.5rem;
  }

  .bottom-2\@xl {
    bottom: 0.5rem;
  }

  .left-2\@xl {
    left: 0.5rem;
  }

  .top-3\@xl {
    top: 0.75rem;
  }

  .right-3\@xl {
    right: 0.75rem;
  }

  .bottom-3\@xl {
    bottom: 0.75rem;
  }

  .left-3\@xl {
    left: 0.75rem;
  }

  .top-4\@xl {
    top: 1rem;
  }

  .right-4\@xl {
    right: 1rem;
  }

  .bottom-4\@xl {
    bottom: 1rem;
  }

  .left-4\@xl {
    left: 1rem;
  }

  .top-5\@xl {
    top: 1.25rem;
  }

  .right-5\@xl {
    right: 1.25rem;
  }

  .bottom-5\@xl {
    bottom: 1.25rem;
  }

  .left-5\@xl {
    left: 1.25rem;
  }

  .top-6\@xl {
    top: 1.5rem;
  }

  .right-6\@xl {
    right: 1.5rem;
  }

  .bottom-6\@xl {
    bottom: 1.5rem;
  }

  .left-6\@xl {
    left: 1.5rem;
  }

  .top-8\@xl {
    top: 2rem;
  }

  .right-8\@xl {
    right: 2rem;
  }

  .bottom-8\@xl {
    bottom: 2rem;
  }

  .left-8\@xl {
    left: 2rem;
  }

  .top-10\@xl {
    top: 2.5rem;
  }

  .right-10\@xl {
    right: 2.5rem;
  }

  .bottom-10\@xl {
    bottom: 2.5rem;
  }

  .left-10\@xl {
    left: 2.5rem;
  }

  .top-12\@xl {
    top: 3rem;
  }

  .right-12\@xl {
    right: 3rem;
  }

  .bottom-12\@xl {
    bottom: 3rem;
  }

  .left-12\@xl {
    left: 3rem;
  }

  .top-16\@xl {
    top: 4rem;
  }

  .right-16\@xl {
    right: 4rem;
  }

  .bottom-16\@xl {
    bottom: 4rem;
  }

  .left-16\@xl {
    left: 4rem;
  }

  .top-20\@xl {
    top: 5rem;
  }

  .right-20\@xl {
    right: 5rem;
  }

  .bottom-20\@xl {
    bottom: 5rem;
  }

  .left-20\@xl {
    left: 5rem;
  }

  .top-24\@xl {
    top: 6rem;
  }

  .right-24\@xl {
    right: 6rem;
  }

  .bottom-24\@xl {
    bottom: 6rem;
  }

  .left-24\@xl {
    left: 6rem;
  }

  .top-32\@xl {
    top: 8rem;
  }

  .right-32\@xl {
    right: 8rem;
  }

  .bottom-32\@xl {
    bottom: 8rem;
  }

  .left-32\@xl {
    left: 8rem;
  }

  .top-40\@xl {
    top: 10rem;
  }

  .right-40\@xl {
    right: 10rem;
  }

  .bottom-40\@xl {
    bottom: 10rem;
  }

  .left-40\@xl {
    left: 10rem;
  }

  .top-48\@xl {
    top: 12rem;
  }

  .right-48\@xl {
    right: 12rem;
  }

  .bottom-48\@xl {
    bottom: 12rem;
  }

  .left-48\@xl {
    left: 12rem;
  }

  .top-56\@xl {
    top: 14rem;
  }

  .right-56\@xl {
    right: 14rem;
  }

  .bottom-56\@xl {
    bottom: 14rem;
  }

  .left-56\@xl {
    left: 14rem;
  }

  .top-64\@xl {
    top: 16rem;
  }

  .right-64\@xl {
    right: 16rem;
  }

  .bottom-64\@xl {
    bottom: 16rem;
  }

  .left-64\@xl {
    left: 16rem;
  }

  .top-120\@xl {
    top: 30rem;
  }

  .right-120\@xl {
    right: 30rem;
  }

  .bottom-120\@xl {
    bottom: 30rem;
  }

  .left-120\@xl {
    left: 30rem;
  }
}

@media (min-width: 1536px) {
  .static\@2xl {
    position: static;
  }

  .relative\@2xl {
    position: relative;
  }

  .absolute\@2xl {
    position: absolute;
  }

  .fixed\@2xl {
    position: fixed;
  }

  .sticky\@2xl {
    position: sticky;
    z-index: 999;
    top: 0;
  }

  .absolute-center\@2xl {
    position: absolute;
    left: 50%;
    top: 50%;
    --translate-x: -50%;
    --translate-y: -50%;
    transform: translateX(var(--translate-x)) translateY(var(--translate-y)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
  }

  .top-25p\@2xl {
    top: 25%;
  }

  .right-25p\@2xl {
    right: 25%;
  }

  .bottom-25p\@2xl {
    bottom: 25%;
  }

  .left-25p\@2xl {
    left: 25%;
  }

  .top-33p\@2xl {
    top: 33.333%;
  }

  .right-33p\@2xl {
    right: 33.333%;
  }

  .bottom-33p\@2xl {
    bottom: 33.333%;
  }

  .left-33p\@2xl {
    left: 33.333%;
  }

  .top-50p\@2xl {
    top: 50%;
  }

  .right-50p\@2xl {
    right: 50%;
  }

  .bottom-50p\@2xl {
    bottom: 50%;
  }

  .left-50p\@2xl {
    left: 50%;
  }

  .top-66p\@2xl {
    top: 66.667%;
  }

  .right-66p\@2xl {
    right: 66.667%;
  }

  .bottom-66p\@2xl {
    bottom: 66.667%;
  }

  .left-66p\@2xl {
    left: 66.667%;
  }

  .top-75p\@2xl {
    top: 75%;
  }

  .right-75p\@2xl {
    right: 75%;
  }

  .bottom-75p\@2xl {
    bottom: 75%;
  }

  .left-75p\@2xl {
    left: 75%;
  }

  .top-100p\@2xl {
    top: 100%;
  }

  .right-100p\@2xl {
    right: 100%;
  }

  .bottom-100p\@2xl {
    bottom: 100%;
  }

  .left-100p\@2xl {
    left: 100%;
  }

  .top-0\@2xl {
    top: 0;
  }

  .right-0\@2xl {
    right: 0;
  }

  .bottom-0\@2xl {
    bottom: 0;
  }

  .left-0\@2xl {
    left: 0;
  }

  .top-1\@2xl {
    top: 0.25rem;
  }

  .right-1\@2xl {
    right: 0.25rem;
  }

  .bottom-1\@2xl {
    bottom: 0.25rem;
  }

  .left-1\@2xl {
    left: 0.25rem;
  }

  .top-2\@2xl {
    top: 0.5rem;
  }

  .right-2\@2xl {
    right: 0.5rem;
  }

  .bottom-2\@2xl {
    bottom: 0.5rem;
  }

  .left-2\@2xl {
    left: 0.5rem;
  }

  .top-3\@2xl {
    top: 0.75rem;
  }

  .right-3\@2xl {
    right: 0.75rem;
  }

  .bottom-3\@2xl {
    bottom: 0.75rem;
  }

  .left-3\@2xl {
    left: 0.75rem;
  }

  .top-4\@2xl {
    top: 1rem;
  }

  .right-4\@2xl {
    right: 1rem;
  }

  .bottom-4\@2xl {
    bottom: 1rem;
  }

  .left-4\@2xl {
    left: 1rem;
  }

  .top-5\@2xl {
    top: 1.25rem;
  }

  .right-5\@2xl {
    right: 1.25rem;
  }

  .bottom-5\@2xl {
    bottom: 1.25rem;
  }

  .left-5\@2xl {
    left: 1.25rem;
  }

  .top-6\@2xl {
    top: 1.5rem;
  }

  .right-6\@2xl {
    right: 1.5rem;
  }

  .bottom-6\@2xl {
    bottom: 1.5rem;
  }

  .left-6\@2xl {
    left: 1.5rem;
  }

  .top-8\@2xl {
    top: 2rem;
  }

  .right-8\@2xl {
    right: 2rem;
  }

  .bottom-8\@2xl {
    bottom: 2rem;
  }

  .left-8\@2xl {
    left: 2rem;
  }

  .top-10\@2xl {
    top: 2.5rem;
  }

  .right-10\@2xl {
    right: 2.5rem;
  }

  .bottom-10\@2xl {
    bottom: 2.5rem;
  }

  .left-10\@2xl {
    left: 2.5rem;
  }

  .top-12\@2xl {
    top: 3rem;
  }

  .right-12\@2xl {
    right: 3rem;
  }

  .bottom-12\@2xl {
    bottom: 3rem;
  }

  .left-12\@2xl {
    left: 3rem;
  }

  .top-16\@2xl {
    top: 4rem;
  }

  .right-16\@2xl {
    right: 4rem;
  }

  .bottom-16\@2xl {
    bottom: 4rem;
  }

  .left-16\@2xl {
    left: 4rem;
  }

  .top-20\@2xl {
    top: 5rem;
  }

  .right-20\@2xl {
    right: 5rem;
  }

  .bottom-20\@2xl {
    bottom: 5rem;
  }

  .left-20\@2xl {
    left: 5rem;
  }

  .top-24\@2xl {
    top: 6rem;
  }

  .right-24\@2xl {
    right: 6rem;
  }

  .bottom-24\@2xl {
    bottom: 6rem;
  }

  .left-24\@2xl {
    left: 6rem;
  }

  .top-32\@2xl {
    top: 8rem;
  }

  .right-32\@2xl {
    right: 8rem;
  }

  .bottom-32\@2xl {
    bottom: 8rem;
  }

  .left-32\@2xl {
    left: 8rem;
  }

  .top-40\@2xl {
    top: 10rem;
  }

  .right-40\@2xl {
    right: 10rem;
  }

  .bottom-40\@2xl {
    bottom: 10rem;
  }

  .left-40\@2xl {
    left: 10rem;
  }

  .top-48\@2xl {
    top: 12rem;
  }

  .right-48\@2xl {
    right: 12rem;
  }

  .bottom-48\@2xl {
    bottom: 12rem;
  }

  .left-48\@2xl {
    left: 12rem;
  }

  .top-56\@2xl {
    top: 14rem;
  }

  .right-56\@2xl {
    right: 14rem;
  }

  .bottom-56\@2xl {
    bottom: 14rem;
  }

  .left-56\@2xl {
    left: 14rem;
  }

  .top-64\@2xl {
    top: 16rem;
  }

  .right-64\@2xl {
    right: 16rem;
  }

  .bottom-64\@2xl {
    bottom: 16rem;
  }

  .left-64\@2xl {
    left: 16rem;
  }

  .top-120\@2xl {
    top: 30rem;
  }

  .right-120\@2xl {
    right: 30rem;
  }

  .bottom-120\@2xl {
    bottom: 30rem;
  }

  .left-120\@2xl {
    left: 30rem;
  }
}

/**
* Generates a CSS shadow string from a given size.
*
* @param {String} $size - The shadow size.
* @param {String} $color - The shadow color.
* @return {String} - The CSS shadow string.
*/
/**
* Generates a CSS shadow string from a given size.
*
* @param {String} $size - The shadow size.
* @param {String} $color - The shadow color.
*/
.shadow-none {
  box-shadow: none !important;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.shadow-sm-dark {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

.shadow-sm-darker {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
}

.shadow-sm-darkest {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
}

.shadow-inset-sm {
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.shadow-inset-sm-dark {
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

.shadow-inset-sm-darker {
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.35);
}

.shadow-inset-sm-darkest {
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.5);
}

.hover\:shadow-sm:hover {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.hover\:shadow-sm-dark:hover {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

.hover\:shadow-sm-darker:hover {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
}

.hover\:shadow-sm-darkest:hover {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
}

.focus\:shadow-sm:focus {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.focus\:shadow-sm-dark:focus {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

.focus\:shadow-sm-darker:focus {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
}

.focus\:shadow-sm-darkest:focus {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
}

.active\:shadow-sm:active {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.active\:shadow-sm-dark:active {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

.active\:shadow-sm-darker:active {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
}

.active\:shadow-sm-darkest:active {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.shadow-md-dark {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

.shadow-md-darker {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
}

.shadow-md-darkest {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

.shadow-inset-md {
  box-shadow: inset 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.shadow-inset-md-dark {
  box-shadow: inset 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

.shadow-inset-md-darker {
  box-shadow: inset 0 4px 6px -1px rgba(0, 0, 0, 0.35);
}

.shadow-inset-md-darkest {
  box-shadow: inset 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

.hover\:shadow-md:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.hover\:shadow-md-dark:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

.hover\:shadow-md-darker:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
}

.hover\:shadow-md-darkest:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

.focus\:shadow-md:focus {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.focus\:shadow-md-dark:focus {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

.focus\:shadow-md-darker:focus {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
}

.focus\:shadow-md-darkest:focus {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

.active\:shadow-md:active {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.active\:shadow-md-dark:active {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

.active\:shadow-md-darker:active {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
}

.active\:shadow-md-darkest:active {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.shadow-lg-dark {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.shadow-lg-darker {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
}

.shadow-lg-darkest {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

.shadow-inset-lg {
  box-shadow: inset 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.shadow-inset-lg-dark {
  box-shadow: inset 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.shadow-inset-lg-darker {
  box-shadow: inset 0 10px 15px -3px rgba(0, 0, 0, 0.35);
}

.shadow-inset-lg-darkest {
  box-shadow: inset 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

.hover\:shadow-lg:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.hover\:shadow-lg-dark:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.hover\:shadow-lg-darker:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
}

.hover\:shadow-lg-darkest:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

.focus\:shadow-lg:focus {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.focus\:shadow-lg-dark:focus {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.focus\:shadow-lg-darker:focus {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
}

.focus\:shadow-lg-darkest:focus {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

.active\:shadow-lg:active {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.active\:shadow-lg-dark:active {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.active\:shadow-lg-darker:active {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
}

.active\:shadow-lg-darkest:active {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.shadow-xl-dark {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

.shadow-xl-darker {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
}

.shadow-xl-darkest {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

.shadow-inset-xl {
  box-shadow: inset 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.shadow-inset-xl-dark {
  box-shadow: inset 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

.shadow-inset-xl-darker {
  box-shadow: inset 0 20px 25px -5px rgba(0, 0, 0, 0.35);
}

.shadow-inset-xl-darkest {
  box-shadow: inset 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

.hover\:shadow-xl:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.hover\:shadow-xl-dark:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

.hover\:shadow-xl-darker:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
}

.hover\:shadow-xl-darkest:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

.focus\:shadow-xl:focus {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.focus\:shadow-xl-dark:focus {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

.focus\:shadow-xl-darker:focus {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
}

.focus\:shadow-xl-darkest:focus {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

.active\:shadow-xl:active {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.active\:shadow-xl-dark:active {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

.active\:shadow-xl-darker:active {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
}

.active\:shadow-xl-darkest:active {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

.shadow-hero {
  box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
}

.shadow-hero-dark {
  box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
}

.shadow-hero-darker {
  box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
}

.shadow-hero-darkest {
  box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
}

.shadow-inset-hero {
  box-shadow: inset 0 20px 25px 5px rgba(0, 0, 0, 0.1);
}

.shadow-inset-hero-dark {
  box-shadow: inset 0 20px 25px 5px rgba(0, 0, 0, 0.2);
}

.shadow-inset-hero-darker {
  box-shadow: inset 0 20px 25px 5px rgba(0, 0, 0, 0.35);
}

.shadow-inset-hero-darkest {
  box-shadow: inset 0 20px 25px 5px rgba(0, 0, 0, 0.5);
}

.hover\:shadow-hero:hover {
  box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
}

.hover\:shadow-hero-dark:hover {
  box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
}

.hover\:shadow-hero-darker:hover {
  box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
}

.hover\:shadow-hero-darkest:hover {
  box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
}

.focus\:shadow-hero:focus {
  box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
}

.focus\:shadow-hero-dark:focus {
  box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
}

.focus\:shadow-hero-darker:focus {
  box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
}

.focus\:shadow-hero-darkest:focus {
  box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
}

.active\:shadow-hero:active {
  box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
}

.active\:shadow-hero-dark:active {
  box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
}

.active\:shadow-hero-darker:active {
  box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
}

.active\:shadow-hero-darkest:active {
  box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
}

.shadow-monster {
  box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
}

.shadow-monster-dark {
  box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
}

.shadow-monster-darker {
  box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
}

.shadow-monster-darkest {
  box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
}

.shadow-inset-monster {
  box-shadow: inset 0 20px 55px 20px rgba(0, 0, 0, 0.1);
}

.shadow-inset-monster-dark {
  box-shadow: inset 0 20px 55px 20px rgba(0, 0, 0, 0.2);
}

.shadow-inset-monster-darker {
  box-shadow: inset 0 20px 55px 20px rgba(0, 0, 0, 0.35);
}

.shadow-inset-monster-darkest {
  box-shadow: inset 0 20px 55px 20px rgba(0, 0, 0, 0.5);
}

.hover\:shadow-monster:hover {
  box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
}

.hover\:shadow-monster-dark:hover {
  box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
}

.hover\:shadow-monster-darker:hover {
  box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
}

.hover\:shadow-monster-darkest:hover {
  box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
}

.focus\:shadow-monster:focus {
  box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
}

.focus\:shadow-monster-dark:focus {
  box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
}

.focus\:shadow-monster-darker:focus {
  box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
}

.focus\:shadow-monster-darkest:focus {
  box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
}

.active\:shadow-monster:active {
  box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
}

.active\:shadow-monster-dark:active {
  box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
}

.active\:shadow-monster-darker:active {
  box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
}

.active\:shadow-monster-darkest:active {
  box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
}

@media (min-width: 480px) {
  .shadow-sm\@xs {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }

  .shadow-sm-dark\@xs {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }

  .shadow-sm-darker\@xs {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  }

  .shadow-sm-darkest\@xs {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-sm\@xs:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-sm-dark\@xs:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-sm-darker\@xs:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-sm-darkest\@xs:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-sm\@xs:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-sm-dark\@xs:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-sm-darker\@xs:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-sm-darkest\@xs:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .shadow-md\@xs {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .shadow-md-dark\@xs {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  }

  .shadow-md-darker\@xs {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  }

  .shadow-md-darkest\@xs {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-md\@xs:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-md-dark\@xs:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-md-darker\@xs:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-md-darkest\@xs:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-md\@xs:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-md-dark\@xs:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-md-darker\@xs:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-md-darkest\@xs:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  }

  .shadow-lg\@xs {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .shadow-lg-dark\@xs {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  }

  .shadow-lg-darker\@xs {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  }

  .shadow-lg-darkest\@xs {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-lg\@xs:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-lg-dark\@xs:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-lg-darker\@xs:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-lg-darkest\@xs:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-lg\@xs:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-lg-dark\@xs:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-lg-darker\@xs:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-lg-darkest\@xs:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  }

  .shadow-xl\@xs {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .shadow-xl-dark\@xs {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  }

  .shadow-xl-darker\@xs {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
  }

  .shadow-xl-darkest\@xs {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-xl\@xs:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-xl-dark\@xs:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-xl-darker\@xs:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-xl-darkest\@xs:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-xl\@xs:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-xl-dark\@xs:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-xl-darker\@xs:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-xl-darkest\@xs:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  }

  .shadow-hero\@xs {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
  }

  .shadow-hero-dark\@xs {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
  }

  .shadow-hero-darker\@xs {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
  }

  .shadow-hero-darkest\@xs {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-hero\@xs:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-hero-dark\@xs:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-hero-darker\@xs:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-hero-darkest\@xs:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-hero\@xs:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-hero-dark\@xs:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-hero-darker\@xs:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-hero-darkest\@xs:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
  }

  .shadow-monster\@xs {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
  }

  .shadow-monster-dark\@xs {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
  }

  .shadow-monster-darker\@xs {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
  }

  .shadow-monster-darkest\@xs {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-monster\@xs:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-monster-dark\@xs:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-monster-darker\@xs:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-monster-darkest\@xs:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-monster\@xs:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-monster-dark\@xs:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-monster-darker\@xs:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-monster-darkest\@xs:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
  }
}

@media (min-width: 640px) {
  .shadow-sm\@sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }

  .shadow-sm-dark\@sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }

  .shadow-sm-darker\@sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  }

  .shadow-sm-darkest\@sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-sm\@sm:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-sm-dark\@sm:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-sm-darker\@sm:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-sm-darkest\@sm:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-sm\@sm:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-sm-dark\@sm:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-sm-darker\@sm:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-sm-darkest\@sm:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .shadow-md\@sm {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .shadow-md-dark\@sm {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  }

  .shadow-md-darker\@sm {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  }

  .shadow-md-darkest\@sm {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-md\@sm:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-md-dark\@sm:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-md-darker\@sm:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-md-darkest\@sm:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-md\@sm:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-md-dark\@sm:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-md-darker\@sm:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-md-darkest\@sm:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  }

  .shadow-lg\@sm {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .shadow-lg-dark\@sm {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  }

  .shadow-lg-darker\@sm {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  }

  .shadow-lg-darkest\@sm {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-lg\@sm:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-lg-dark\@sm:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-lg-darker\@sm:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-lg-darkest\@sm:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-lg\@sm:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-lg-dark\@sm:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-lg-darker\@sm:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-lg-darkest\@sm:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  }

  .shadow-xl\@sm {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .shadow-xl-dark\@sm {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  }

  .shadow-xl-darker\@sm {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
  }

  .shadow-xl-darkest\@sm {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-xl\@sm:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-xl-dark\@sm:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-xl-darker\@sm:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-xl-darkest\@sm:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-xl\@sm:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-xl-dark\@sm:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-xl-darker\@sm:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-xl-darkest\@sm:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  }

  .shadow-hero\@sm {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
  }

  .shadow-hero-dark\@sm {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
  }

  .shadow-hero-darker\@sm {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
  }

  .shadow-hero-darkest\@sm {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-hero\@sm:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-hero-dark\@sm:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-hero-darker\@sm:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-hero-darkest\@sm:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-hero\@sm:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-hero-dark\@sm:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-hero-darker\@sm:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-hero-darkest\@sm:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
  }

  .shadow-monster\@sm {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
  }

  .shadow-monster-dark\@sm {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
  }

  .shadow-monster-darker\@sm {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
  }

  .shadow-monster-darkest\@sm {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-monster\@sm:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-monster-dark\@sm:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-monster-darker\@sm:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-monster-darkest\@sm:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-monster\@sm:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-monster-dark\@sm:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-monster-darker\@sm:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-monster-darkest\@sm:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
  }
}

@media (min-width: 768px) {
  .shadow-sm\@md {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }

  .shadow-sm-dark\@md {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }

  .shadow-sm-darker\@md {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  }

  .shadow-sm-darkest\@md {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-sm\@md:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-sm-dark\@md:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-sm-darker\@md:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-sm-darkest\@md:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-sm\@md:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-sm-dark\@md:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-sm-darker\@md:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-sm-darkest\@md:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .shadow-md\@md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .shadow-md-dark\@md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  }

  .shadow-md-darker\@md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  }

  .shadow-md-darkest\@md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-md\@md:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-md-dark\@md:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-md-darker\@md:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-md-darkest\@md:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-md\@md:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-md-dark\@md:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-md-darker\@md:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-md-darkest\@md:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  }

  .shadow-lg\@md {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .shadow-lg-dark\@md {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  }

  .shadow-lg-darker\@md {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  }

  .shadow-lg-darkest\@md {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-lg\@md:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-lg-dark\@md:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-lg-darker\@md:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-lg-darkest\@md:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-lg\@md:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-lg-dark\@md:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-lg-darker\@md:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-lg-darkest\@md:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  }

  .shadow-xl\@md {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .shadow-xl-dark\@md {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  }

  .shadow-xl-darker\@md {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
  }

  .shadow-xl-darkest\@md {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-xl\@md:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-xl-dark\@md:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-xl-darker\@md:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-xl-darkest\@md:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-xl\@md:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-xl-dark\@md:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-xl-darker\@md:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-xl-darkest\@md:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  }

  .shadow-hero\@md {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
  }

  .shadow-hero-dark\@md {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
  }

  .shadow-hero-darker\@md {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
  }

  .shadow-hero-darkest\@md {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-hero\@md:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-hero-dark\@md:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-hero-darker\@md:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-hero-darkest\@md:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-hero\@md:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-hero-dark\@md:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-hero-darker\@md:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-hero-darkest\@md:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
  }

  .shadow-monster\@md {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
  }

  .shadow-monster-dark\@md {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
  }

  .shadow-monster-darker\@md {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
  }

  .shadow-monster-darkest\@md {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-monster\@md:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-monster-dark\@md:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-monster-darker\@md:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-monster-darkest\@md:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-monster\@md:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-monster-dark\@md:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-monster-darker\@md:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-monster-darkest\@md:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
  }
}

@media (min-width: 1024px) {
  .shadow-sm\@lg {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }

  .shadow-sm-dark\@lg {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }

  .shadow-sm-darker\@lg {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  }

  .shadow-sm-darkest\@lg {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-sm\@lg:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-sm-dark\@lg:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-sm-darker\@lg:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-sm-darkest\@lg:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-sm\@lg:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-sm-dark\@lg:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-sm-darker\@lg:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-sm-darkest\@lg:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .shadow-md\@lg {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .shadow-md-dark\@lg {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  }

  .shadow-md-darker\@lg {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  }

  .shadow-md-darkest\@lg {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-md\@lg:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-md-dark\@lg:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-md-darker\@lg:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-md-darkest\@lg:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-md\@lg:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-md-dark\@lg:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-md-darker\@lg:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-md-darkest\@lg:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  }

  .shadow-lg\@lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .shadow-lg-dark\@lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  }

  .shadow-lg-darker\@lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  }

  .shadow-lg-darkest\@lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-lg\@lg:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-lg-dark\@lg:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-lg-darker\@lg:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-lg-darkest\@lg:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-lg\@lg:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-lg-dark\@lg:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-lg-darker\@lg:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-lg-darkest\@lg:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  }

  .shadow-xl\@lg {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .shadow-xl-dark\@lg {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  }

  .shadow-xl-darker\@lg {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
  }

  .shadow-xl-darkest\@lg {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-xl\@lg:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-xl-dark\@lg:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-xl-darker\@lg:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-xl-darkest\@lg:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-xl\@lg:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-xl-dark\@lg:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-xl-darker\@lg:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-xl-darkest\@lg:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  }

  .shadow-hero\@lg {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
  }

  .shadow-hero-dark\@lg {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
  }

  .shadow-hero-darker\@lg {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
  }

  .shadow-hero-darkest\@lg {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-hero\@lg:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-hero-dark\@lg:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-hero-darker\@lg:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-hero-darkest\@lg:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-hero\@lg:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-hero-dark\@lg:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-hero-darker\@lg:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-hero-darkest\@lg:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
  }

  .shadow-monster\@lg {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
  }

  .shadow-monster-dark\@lg {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
  }

  .shadow-monster-darker\@lg {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
  }

  .shadow-monster-darkest\@lg {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-monster\@lg:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-monster-dark\@lg:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-monster-darker\@lg:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-monster-darkest\@lg:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-monster\@lg:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-monster-dark\@lg:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-monster-darker\@lg:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-monster-darkest\@lg:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
  }
}

@media (min-width: 1280px) {
  .shadow-sm\@xl {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }

  .shadow-sm-dark\@xl {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }

  .shadow-sm-darker\@xl {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  }

  .shadow-sm-darkest\@xl {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-sm\@xl:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-sm-dark\@xl:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-sm-darker\@xl:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-sm-darkest\@xl:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-sm\@xl:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-sm-dark\@xl:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-sm-darker\@xl:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-sm-darkest\@xl:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .shadow-md\@xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .shadow-md-dark\@xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  }

  .shadow-md-darker\@xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  }

  .shadow-md-darkest\@xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-md\@xl:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-md-dark\@xl:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-md-darker\@xl:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-md-darkest\@xl:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-md\@xl:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-md-dark\@xl:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-md-darker\@xl:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-md-darkest\@xl:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  }

  .shadow-lg\@xl {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .shadow-lg-dark\@xl {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  }

  .shadow-lg-darker\@xl {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  }

  .shadow-lg-darkest\@xl {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-lg\@xl:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-lg-dark\@xl:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-lg-darker\@xl:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-lg-darkest\@xl:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-lg\@xl:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-lg-dark\@xl:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-lg-darker\@xl:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-lg-darkest\@xl:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  }

  .shadow-xl\@xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .shadow-xl-dark\@xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  }

  .shadow-xl-darker\@xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
  }

  .shadow-xl-darkest\@xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-xl\@xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-xl-dark\@xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-xl-darker\@xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-xl-darkest\@xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-xl\@xl:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-xl-dark\@xl:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-xl-darker\@xl:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-xl-darkest\@xl:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  }

  .shadow-hero\@xl {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
  }

  .shadow-hero-dark\@xl {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
  }

  .shadow-hero-darker\@xl {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
  }

  .shadow-hero-darkest\@xl {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-hero\@xl:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-hero-dark\@xl:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-hero-darker\@xl:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-hero-darkest\@xl:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-hero\@xl:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-hero-dark\@xl:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-hero-darker\@xl:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-hero-darkest\@xl:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
  }

  .shadow-monster\@xl {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
  }

  .shadow-monster-dark\@xl {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
  }

  .shadow-monster-darker\@xl {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
  }

  .shadow-monster-darkest\@xl {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-monster\@xl:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-monster-dark\@xl:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-monster-darker\@xl:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-monster-darkest\@xl:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-monster\@xl:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-monster-dark\@xl:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-monster-darker\@xl:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-monster-darkest\@xl:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
  }
}

@media (min-width: 1536px) {
  .shadow-sm\@2xl {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }

  .shadow-sm-dark\@2xl {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }

  .shadow-sm-darker\@2xl {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  }

  .shadow-sm-darkest\@2xl {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-sm\@2xl:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-sm-dark\@2xl:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-sm-darker\@2xl:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-sm-darkest\@2xl:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-sm\@2xl:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-sm-dark\@2xl:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-sm-darker\@2xl:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-sm-darkest\@2xl:focus {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .shadow-md\@2xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .shadow-md-dark\@2xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  }

  .shadow-md-darker\@2xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  }

  .shadow-md-darkest\@2xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-md\@2xl:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-md-dark\@2xl:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-md-darker\@2xl:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-md-darkest\@2xl:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-md\@2xl:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-md-dark\@2xl:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-md-darker\@2xl:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-md-darkest\@2xl:focus {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  }

  .shadow-lg\@2xl {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .shadow-lg-dark\@2xl {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  }

  .shadow-lg-darker\@2xl {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  }

  .shadow-lg-darkest\@2xl {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-lg\@2xl:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-lg-dark\@2xl:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-lg-darker\@2xl:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-lg-darkest\@2xl:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-lg\@2xl:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-lg-dark\@2xl:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-lg-darker\@2xl:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-lg-darkest\@2xl:focus {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  }

  .shadow-xl\@2xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .shadow-xl-dark\@2xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  }

  .shadow-xl-darker\@2xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
  }

  .shadow-xl-darkest\@2xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-xl\@2xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-xl-dark\@2xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-xl-darker\@2xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-xl-darkest\@2xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-xl\@2xl:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-xl-dark\@2xl:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-xl-darker\@2xl:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-xl-darkest\@2xl:focus {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  }

  .shadow-hero\@2xl {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
  }

  .shadow-hero-dark\@2xl {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
  }

  .shadow-hero-darker\@2xl {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
  }

  .shadow-hero-darkest\@2xl {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-hero\@2xl:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-hero-dark\@2xl:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-hero-darker\@2xl:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-hero-darkest\@2xl:hover {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-hero\@2xl:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-hero-dark\@2xl:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-hero-darker\@2xl:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-hero-darkest\@2xl:focus {
    box-shadow: 0 20px 25px 5px rgba(0, 0, 0, 0.5);
  }

  .shadow-monster\@2xl {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
  }

  .shadow-monster-dark\@2xl {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
  }

  .shadow-monster-darker\@2xl {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
  }

  .shadow-monster-darkest\@2xl {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
  }

  .hover\:shadow-monster\@2xl:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
  }

  .hover\:shadow-monster-dark\@2xl:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
  }

  .hover\:shadow-monster-darker\@2xl:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
  }

  .hover\:shadow-monster-darkest\@2xl:hover {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
  }

  .focus\:shadow-monster\@2xl:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
  }

  .focus\:shadow-monster-dark\@2xl:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
  }

  .focus\:shadow-monster-darker\@2xl:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.35);
  }

  .focus\:shadow-monster-darkest\@2xl:focus {
    box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.5);
  }
}

.elevation-1 {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.elevation-2 {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.elevation-3 {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 3;
}

.elevation-4 {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  z-index: 4;
}

.elevation-5 {
  box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.1);
  z-index: 5;
}

.widthx {
  width: 100%;
}

.w-screen {
  width: 100vw;
}

.h-screen {
  height: 100dvh;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.w-min {
  width: min-content;
}

.h-min {
  height: min-content;
}

.w-fit {
  width: fit-content;
}

.h-fit {
  height: fit-content;
}

.min-w-full {
  min-width: 100%;
}

.max-w-full {
  max-width: 100%;
}

.min-h-full {
  min-height: 100%;
}

.max-h-full {
  max-height: 100%;
}

.w-0p {
  width: 0%;
}

.h-0p {
  height: 0%;
}

.min-w-0p {
  min-width: 0%;
}

.min-h-0p {
  min-height: 0%;
}

.max-w-0p {
  max-width: 0%;
}

.max-h-0p {
  max-height: 0%;
}

.w-5p {
  width: 5%;
}

.h-5p {
  height: 5%;
}

.min-w-5p {
  min-width: 5%;
}

.min-h-5p {
  min-height: 5%;
}

.max-w-5p {
  max-width: 5%;
}

.max-h-5p {
  max-height: 5%;
}

.w-10p {
  width: 10%;
}

.h-10p {
  height: 10%;
}

.min-w-10p {
  min-width: 10%;
}

.min-h-10p {
  min-height: 10%;
}

.max-w-10p {
  max-width: 10%;
}

.max-h-10p {
  max-height: 10%;
}

.w-20p {
  width: 20%;
}

.h-20p {
  height: 20%;
}

.min-w-20p {
  min-width: 20%;
}

.min-h-20p {
  min-height: 20%;
}

.max-w-20p {
  max-width: 20%;
}

.max-h-20p {
  max-height: 20%;
}

.w-25p {
  width: 25%;
}

.h-25p {
  height: 25%;
}

.min-w-25p {
  min-width: 25%;
}

.min-h-25p {
  min-height: 25%;
}

.max-w-25p {
  max-width: 25%;
}

.max-h-25p {
  max-height: 25%;
}

.w-30p {
  width: 30%;
}

.h-30p {
  height: 30%;
}

.min-w-30p {
  min-width: 30%;
}

.min-h-30p {
  min-height: 30%;
}

.max-w-30p {
  max-width: 30%;
}

.max-h-30p {
  max-height: 30%;
}

.w-40p {
  width: 40%;
}

.h-40p {
  height: 40%;
}

.min-w-40p {
  min-width: 40%;
}

.min-h-40p {
  min-height: 40%;
}

.max-w-40p {
  max-width: 40%;
}

.max-h-40p {
  max-height: 40%;
}

.w-50p {
  width: 50%;
}

.h-50p {
  height: 50%;
}

.min-w-50p {
  min-width: 50%;
}

.min-h-50p {
  min-height: 50%;
}

.max-w-50p {
  max-width: 50%;
}

.max-h-50p {
  max-height: 50%;
}

.w-60p {
  width: 60%;
}

.h-60p {
  height: 60%;
}

.min-w-60p {
  min-width: 60%;
}

.min-h-60p {
  min-height: 60%;
}

.max-w-60p {
  max-width: 60%;
}

.max-h-60p {
  max-height: 60%;
}

.w-70p {
  width: 70%;
}

.h-70p {
  height: 70%;
}

.min-w-70p {
  min-width: 70%;
}

.min-h-70p {
  min-height: 70%;
}

.max-w-70p {
  max-width: 70%;
}

.max-h-70p {
  max-height: 70%;
}

.w-75p {
  width: 75%;
}

.h-75p {
  height: 75%;
}

.min-w-75p {
  min-width: 75%;
}

.min-h-75p {
  min-height: 75%;
}

.max-w-75p {
  max-width: 75%;
}

.max-h-75p {
  max-height: 75%;
}

.w-80p {
  width: 80%;
}

.h-80p {
  height: 80%;
}

.min-w-80p {
  min-width: 80%;
}

.min-h-80p {
  min-height: 80%;
}

.max-w-80p {
  max-width: 80%;
}

.max-h-80p {
  max-height: 80%;
}

.w-90p {
  width: 90%;
}

.h-90p {
  height: 90%;
}

.min-w-90p {
  min-width: 90%;
}

.min-h-90p {
  min-height: 90%;
}

.max-w-90p {
  max-width: 90%;
}

.max-h-90p {
  max-height: 90%;
}

.w-100p {
  width: 100%;
}

.h-100p {
  height: 100%;
}

.min-w-100p {
  min-width: 100%;
}

.min-h-100p {
  min-height: 100%;
}

.max-w-100p {
  max-width: 100%;
}

.max-h-100p {
  max-height: 100%;
}

.w-0,
.hover\:w-0:hover,
.group:hover .group-hover\:w-0 {
  width: 0px;
}

.h-0,
.hover\:h-0:hover,
.group:hover .group-hover\:h-0 {
  height: 0px;
}

.min-w-0 {
  min-width: 0px;
}

.min-h-0 {
  min-height: 0px;
}

.max-w-0 {
  max-width: 0px;
}

.max-h-0 {
  max-height: 0px;
}

.w-1,
.hover\:w-1:hover,
.group:hover .group-hover\:w-1 {
  width: 0.25rem;
}

.h-1,
.hover\:h-1:hover,
.group:hover .group-hover\:h-1 {
  height: 0.25rem;
}

.min-w-1 {
  min-width: 0.25rem;
}

.min-h-1 {
  min-height: 0.25rem;
}

.max-w-1 {
  max-width: 0.25rem;
}

.max-h-1 {
  max-height: 0.25rem;
}

.w-2,
.hover\:w-2:hover,
.group:hover .group-hover\:w-2 {
  width: 0.5rem;
}

.h-2,
.hover\:h-2:hover,
.group:hover .group-hover\:h-2 {
  height: 0.5rem;
}

.min-w-2 {
  min-width: 0.5rem;
}

.min-h-2 {
  min-height: 0.5rem;
}

.max-w-2 {
  max-width: 0.5rem;
}

.max-h-2 {
  max-height: 0.5rem;
}

.w-3,
.hover\:w-3:hover,
.group:hover .group-hover\:w-3 {
  width: 0.75rem;
}

.h-3,
.hover\:h-3:hover,
.group:hover .group-hover\:h-3 {
  height: 0.75rem;
}

.min-w-3 {
  min-width: 0.75rem;
}

.min-h-3 {
  min-height: 0.75rem;
}

.max-w-3 {
  max-width: 0.75rem;
}

.max-h-3 {
  max-height: 0.75rem;
}

.w-4,
.hover\:w-4:hover,
.group:hover .group-hover\:w-4 {
  width: 1rem;
}

.h-4,
.hover\:h-4:hover,
.group:hover .group-hover\:h-4 {
  height: 1rem;
}

.min-w-4 {
  min-width: 1rem;
}

.min-h-4 {
  min-height: 1rem;
}

.max-w-4 {
  max-width: 1rem;
}

.max-h-4 {
  max-height: 1rem;
}

.w-5,
.hover\:w-5:hover,
.group:hover .group-hover\:w-5 {
  width: 1.25rem;
}

.h-5,
.hover\:h-5:hover,
.group:hover .group-hover\:h-5 {
  height: 1.25rem;
}

.min-w-5 {
  min-width: 1.25rem;
}

.min-h-5 {
  min-height: 1.25rem;
}

.max-w-5 {
  max-width: 1.25rem;
}

.max-h-5 {
  max-height: 1.25rem;
}

.w-6,
.hover\:w-6:hover,
.group:hover .group-hover\:w-6 {
  width: 1.5rem;
}

.h-6,
.hover\:h-6:hover,
.group:hover .group-hover\:h-6 {
  height: 1.5rem;
}

.min-w-6 {
  min-width: 1.5rem;
}

.min-h-6 {
  min-height: 1.5rem;
}

.max-w-6 {
  max-width: 1.5rem;
}

.max-h-6 {
  max-height: 1.5rem;
}

.w-8,
.hover\:w-8:hover,
.group:hover .group-hover\:w-8 {
  width: 2rem;
}

.h-8,
.hover\:h-8:hover,
.group:hover .group-hover\:h-8 {
  height: 2rem;
}

.min-w-8 {
  min-width: 2rem;
}

.min-h-8 {
  min-height: 2rem;
}

.max-w-8 {
  max-width: 2rem;
}

.max-h-8 {
  max-height: 2rem;
}

.w-10,
.hover\:w-10:hover,
.group:hover .group-hover\:w-10 {
  width: 2.5rem;
}

.h-10,
.hover\:h-10:hover,
.group:hover .group-hover\:h-10 {
  height: 2.5rem;
}

.min-w-10 {
  min-width: 2.5rem;
}

.min-h-10 {
  min-height: 2.5rem;
}

.max-w-10 {
  max-width: 2.5rem;
}

.max-h-10 {
  max-height: 2.5rem;
}

.w-12,
.hover\:w-12:hover,
.group:hover .group-hover\:w-12 {
  width: 3rem;
}

.h-12,
.hover\:h-12:hover,
.group:hover .group-hover\:h-12 {
  height: 3rem;
}

.min-w-12 {
  min-width: 3rem;
}

.min-h-12 {
  min-height: 3rem;
}

.max-w-12 {
  max-width: 3rem;
}

.max-h-12 {
  max-height: 3rem;
}

.w-16,
.hover\:w-16:hover,
.group:hover .group-hover\:w-16 {
  width: 4rem;
}

.h-16,
.hover\:h-16:hover,
.group:hover .group-hover\:h-16 {
  height: 4rem;
}

.min-w-16 {
  min-width: 4rem;
}

.min-h-16 {
  min-height: 4rem;
}

.max-w-16 {
  max-width: 4rem;
}

.max-h-16 {
  max-height: 4rem;
}

.w-20,
.hover\:w-20:hover,
.group:hover .group-hover\:w-20 {
  width: 5rem;
}

.h-20,
.hover\:h-20:hover,
.group:hover .group-hover\:h-20 {
  height: 5rem;
}

.min-w-20 {
  min-width: 5rem;
}

.min-h-20 {
  min-height: 5rem;
}

.max-w-20 {
  max-width: 5rem;
}

.max-h-20 {
  max-height: 5rem;
}

.w-24,
.hover\:w-24:hover,
.group:hover .group-hover\:w-24 {
  width: 6rem;
}

.h-24,
.hover\:h-24:hover,
.group:hover .group-hover\:h-24 {
  height: 6rem;
}

.min-w-24 {
  min-width: 6rem;
}

.min-h-24 {
  min-height: 6rem;
}

.max-w-24 {
  max-width: 6rem;
}

.max-h-24 {
  max-height: 6rem;
}

.w-32,
.hover\:w-32:hover,
.group:hover .group-hover\:w-32 {
  width: 8rem;
}

.h-32,
.hover\:h-32:hover,
.group:hover .group-hover\:h-32 {
  height: 8rem;
}

.min-w-32 {
  min-width: 8rem;
}

.min-h-32 {
  min-height: 8rem;
}

.max-w-32 {
  max-width: 8rem;
}

.max-h-32 {
  max-height: 8rem;
}

.w-40,
.hover\:w-40:hover,
.group:hover .group-hover\:w-40 {
  width: 10rem;
}

.h-40,
.hover\:h-40:hover,
.group:hover .group-hover\:h-40 {
  height: 10rem;
}

.min-w-40 {
  min-width: 10rem;
}

.min-h-40 {
  min-height: 10rem;
}

.max-w-40 {
  max-width: 10rem;
}

.max-h-40 {
  max-height: 10rem;
}

.w-48,
.hover\:w-48:hover,
.group:hover .group-hover\:w-48 {
  width: 12rem;
}

.h-48,
.hover\:h-48:hover,
.group:hover .group-hover\:h-48 {
  height: 12rem;
}

.min-w-48 {
  min-width: 12rem;
}

.min-h-48 {
  min-height: 12rem;
}

.max-w-48 {
  max-width: 12rem;
}

.max-h-48 {
  max-height: 12rem;
}

.w-56,
.hover\:w-56:hover,
.group:hover .group-hover\:w-56 {
  width: 14rem;
}

.h-56,
.hover\:h-56:hover,
.group:hover .group-hover\:h-56 {
  height: 14rem;
}

.min-w-56 {
  min-width: 14rem;
}

.min-h-56 {
  min-height: 14rem;
}

.max-w-56 {
  max-width: 14rem;
}

.max-h-56 {
  max-height: 14rem;
}

.w-64,
.hover\:w-64:hover,
.group:hover .group-hover\:w-64 {
  width: 16rem;
}

.h-64,
.hover\:h-64:hover,
.group:hover .group-hover\:h-64 {
  height: 16rem;
}

.min-w-64 {
  min-width: 16rem;
}

.min-h-64 {
  min-height: 16rem;
}

.max-w-64 {
  max-width: 16rem;
}

.max-h-64 {
  max-height: 16rem;
}

.w-120,
.hover\:w-120:hover,
.group:hover .group-hover\:w-120 {
  width: 30rem;
}

.h-120,
.hover\:h-120:hover,
.group:hover .group-hover\:h-120 {
  height: 30rem;
}

.min-w-120 {
  min-width: 30rem;
}

.min-h-120 {
  min-height: 30rem;
}

.max-w-120 {
  max-width: 30rem;
}

.max-h-120 {
  max-height: 30rem;
}

.w-xs {
  width: 480px;
}

.min-w-xs {
  min-width: 480px;
}

.max-w-xs {
  max-width: 480px;
}

.w-auto\@xs {
  width: auto;
}

.w-full\@xs {
  width: 100%;
}

.h-auto\@xs {
  height: auto;
}

.h-full\@xs {
  height: 100%;
}

.w-min\@xs {
  width: min-content;
}

.h-min\@xs {
  height: min-content;
}

.w-fit\@xs {
  width: fit-content;
}

.h-fit\@xs {
  height: fit-content;
}

@media screen and (min-width: 480px) {

  .w-0p\@xs,
  .hover\:w-0p\@xs:hover,
  .group:hover .group-hover\:w-0p\@xs {
    width: 0%;
  }

  .h-0p\@xs,
  .hover\:h-0p\@xs:hover,
  .group:hover .group-hover\:h-0p\@xs {
    height: 0%;
  }

  .min-w-0p\@xs {
    min-width: 0%;
  }

  .min-h-0p\@xs {
    min-height: 0%;
  }

  .max-w-0p\@xs {
    max-width: 0%;
  }

  .max-h-0p\@xs {
    max-height: 0%;
  }

  .w-5p\@xs,
  .hover\:w-5p\@xs:hover,
  .group:hover .group-hover\:w-5p\@xs {
    width: 5%;
  }

  .h-5p\@xs,
  .hover\:h-5p\@xs:hover,
  .group:hover .group-hover\:h-5p\@xs {
    height: 5%;
  }

  .min-w-5p\@xs {
    min-width: 5%;
  }

  .min-h-5p\@xs {
    min-height: 5%;
  }

  .max-w-5p\@xs {
    max-width: 5%;
  }

  .max-h-5p\@xs {
    max-height: 5%;
  }

  .w-10p\@xs,
  .hover\:w-10p\@xs:hover,
  .group:hover .group-hover\:w-10p\@xs {
    width: 10%;
  }

  .h-10p\@xs,
  .hover\:h-10p\@xs:hover,
  .group:hover .group-hover\:h-10p\@xs {
    height: 10%;
  }

  .min-w-10p\@xs {
    min-width: 10%;
  }

  .min-h-10p\@xs {
    min-height: 10%;
  }

  .max-w-10p\@xs {
    max-width: 10%;
  }

  .max-h-10p\@xs {
    max-height: 10%;
  }

  .w-20p\@xs,
  .hover\:w-20p\@xs:hover,
  .group:hover .group-hover\:w-20p\@xs {
    width: 20%;
  }

  .h-20p\@xs,
  .hover\:h-20p\@xs:hover,
  .group:hover .group-hover\:h-20p\@xs {
    height: 20%;
  }

  .min-w-20p\@xs {
    min-width: 20%;
  }

  .min-h-20p\@xs {
    min-height: 20%;
  }

  .max-w-20p\@xs {
    max-width: 20%;
  }

  .max-h-20p\@xs {
    max-height: 20%;
  }

  .w-25p\@xs,
  .hover\:w-25p\@xs:hover,
  .group:hover .group-hover\:w-25p\@xs {
    width: 25%;
  }

  .h-25p\@xs,
  .hover\:h-25p\@xs:hover,
  .group:hover .group-hover\:h-25p\@xs {
    height: 25%;
  }

  .min-w-25p\@xs {
    min-width: 25%;
  }

  .min-h-25p\@xs {
    min-height: 25%;
  }

  .max-w-25p\@xs {
    max-width: 25%;
  }

  .max-h-25p\@xs {
    max-height: 25%;
  }

  .w-30p\@xs,
  .hover\:w-30p\@xs:hover,
  .group:hover .group-hover\:w-30p\@xs {
    width: 30%;
  }

  .h-30p\@xs,
  .hover\:h-30p\@xs:hover,
  .group:hover .group-hover\:h-30p\@xs {
    height: 30%;
  }

  .min-w-30p\@xs {
    min-width: 30%;
  }

  .min-h-30p\@xs {
    min-height: 30%;
  }

  .max-w-30p\@xs {
    max-width: 30%;
  }

  .max-h-30p\@xs {
    max-height: 30%;
  }

  .w-40p\@xs,
  .hover\:w-40p\@xs:hover,
  .group:hover .group-hover\:w-40p\@xs {
    width: 40%;
  }

  .h-40p\@xs,
  .hover\:h-40p\@xs:hover,
  .group:hover .group-hover\:h-40p\@xs {
    height: 40%;
  }

  .min-w-40p\@xs {
    min-width: 40%;
  }

  .min-h-40p\@xs {
    min-height: 40%;
  }

  .max-w-40p\@xs {
    max-width: 40%;
  }

  .max-h-40p\@xs {
    max-height: 40%;
  }

  .w-50p\@xs,
  .hover\:w-50p\@xs:hover,
  .group:hover .group-hover\:w-50p\@xs {
    width: 50%;
  }

  .h-50p\@xs,
  .hover\:h-50p\@xs:hover,
  .group:hover .group-hover\:h-50p\@xs {
    height: 50%;
  }

  .min-w-50p\@xs {
    min-width: 50%;
  }

  .min-h-50p\@xs {
    min-height: 50%;
  }

  .max-w-50p\@xs {
    max-width: 50%;
  }

  .max-h-50p\@xs {
    max-height: 50%;
  }

  .w-60p\@xs,
  .hover\:w-60p\@xs:hover,
  .group:hover .group-hover\:w-60p\@xs {
    width: 60%;
  }

  .h-60p\@xs,
  .hover\:h-60p\@xs:hover,
  .group:hover .group-hover\:h-60p\@xs {
    height: 60%;
  }

  .min-w-60p\@xs {
    min-width: 60%;
  }

  .min-h-60p\@xs {
    min-height: 60%;
  }

  .max-w-60p\@xs {
    max-width: 60%;
  }

  .max-h-60p\@xs {
    max-height: 60%;
  }

  .w-70p\@xs,
  .hover\:w-70p\@xs:hover,
  .group:hover .group-hover\:w-70p\@xs {
    width: 70%;
  }

  .h-70p\@xs,
  .hover\:h-70p\@xs:hover,
  .group:hover .group-hover\:h-70p\@xs {
    height: 70%;
  }

  .min-w-70p\@xs {
    min-width: 70%;
  }

  .min-h-70p\@xs {
    min-height: 70%;
  }

  .max-w-70p\@xs {
    max-width: 70%;
  }

  .max-h-70p\@xs {
    max-height: 70%;
  }

  .w-75p\@xs,
  .hover\:w-75p\@xs:hover,
  .group:hover .group-hover\:w-75p\@xs {
    width: 75%;
  }

  .h-75p\@xs,
  .hover\:h-75p\@xs:hover,
  .group:hover .group-hover\:h-75p\@xs {
    height: 75%;
  }

  .min-w-75p\@xs {
    min-width: 75%;
  }

  .min-h-75p\@xs {
    min-height: 75%;
  }

  .max-w-75p\@xs {
    max-width: 75%;
  }

  .max-h-75p\@xs {
    max-height: 75%;
  }

  .w-80p\@xs,
  .hover\:w-80p\@xs:hover,
  .group:hover .group-hover\:w-80p\@xs {
    width: 80%;
  }

  .h-80p\@xs,
  .hover\:h-80p\@xs:hover,
  .group:hover .group-hover\:h-80p\@xs {
    height: 80%;
  }

  .min-w-80p\@xs {
    min-width: 80%;
  }

  .min-h-80p\@xs {
    min-height: 80%;
  }

  .max-w-80p\@xs {
    max-width: 80%;
  }

  .max-h-80p\@xs {
    max-height: 80%;
  }

  .w-90p\@xs,
  .hover\:w-90p\@xs:hover,
  .group:hover .group-hover\:w-90p\@xs {
    width: 90%;
  }

  .h-90p\@xs,
  .hover\:h-90p\@xs:hover,
  .group:hover .group-hover\:h-90p\@xs {
    height: 90%;
  }

  .min-w-90p\@xs {
    min-width: 90%;
  }

  .min-h-90p\@xs {
    min-height: 90%;
  }

  .max-w-90p\@xs {
    max-width: 90%;
  }

  .max-h-90p\@xs {
    max-height: 90%;
  }

  .w-100p\@xs,
  .hover\:w-100p\@xs:hover,
  .group:hover .group-hover\:w-100p\@xs {
    width: 100%;
  }

  .h-100p\@xs,
  .hover\:h-100p\@xs:hover,
  .group:hover .group-hover\:h-100p\@xs {
    height: 100%;
  }

  .min-w-100p\@xs {
    min-width: 100%;
  }

  .min-h-100p\@xs {
    min-height: 100%;
  }

  .max-w-100p\@xs {
    max-width: 100%;
  }

  .max-h-100p\@xs {
    max-height: 100%;
  }

  .w-0\@xs,
  .hover\:w-0\@xs:hover,
  .group:hover .group-hover\:w-0\@xs {
    width: 0px;
  }

  .h-0\@xs,
  .hover\:h-0\@xs:hover,
  .group:hover .group-hover\:h-0\@xs {
    height: 0px;
  }

  .min-w-0\@xs {
    min-width: 0px;
  }

  .min-h-0\@xs {
    min-height: 0px;
  }

  .max-w-0\@xs {
    max-width: 0px;
  }

  .max-h-0\@xs {
    max-height: 0px;
  }

  .w-1\@xs,
  .hover\:w-1\@xs:hover,
  .group:hover .group-hover\:w-1\@xs {
    width: 0.25rem;
  }

  .h-1\@xs,
  .hover\:h-1\@xs:hover,
  .group:hover .group-hover\:h-1\@xs {
    height: 0.25rem;
  }

  .min-w-1\@xs {
    min-width: 0.25rem;
  }

  .min-h-1\@xs {
    min-height: 0.25rem;
  }

  .max-w-1\@xs {
    max-width: 0.25rem;
  }

  .max-h-1\@xs {
    max-height: 0.25rem;
  }

  .w-2\@xs,
  .hover\:w-2\@xs:hover,
  .group:hover .group-hover\:w-2\@xs {
    width: 0.5rem;
  }

  .h-2\@xs,
  .hover\:h-2\@xs:hover,
  .group:hover .group-hover\:h-2\@xs {
    height: 0.5rem;
  }

  .min-w-2\@xs {
    min-width: 0.5rem;
  }

  .min-h-2\@xs {
    min-height: 0.5rem;
  }

  .max-w-2\@xs {
    max-width: 0.5rem;
  }

  .max-h-2\@xs {
    max-height: 0.5rem;
  }

  .w-3\@xs,
  .hover\:w-3\@xs:hover,
  .group:hover .group-hover\:w-3\@xs {
    width: 0.75rem;
  }

  .h-3\@xs,
  .hover\:h-3\@xs:hover,
  .group:hover .group-hover\:h-3\@xs {
    height: 0.75rem;
  }

  .min-w-3\@xs {
    min-width: 0.75rem;
  }

  .min-h-3\@xs {
    min-height: 0.75rem;
  }

  .max-w-3\@xs {
    max-width: 0.75rem;
  }

  .max-h-3\@xs {
    max-height: 0.75rem;
  }

  .w-4\@xs,
  .hover\:w-4\@xs:hover,
  .group:hover .group-hover\:w-4\@xs {
    width: 1rem;
  }

  .h-4\@xs,
  .hover\:h-4\@xs:hover,
  .group:hover .group-hover\:h-4\@xs {
    height: 1rem;
  }

  .min-w-4\@xs {
    min-width: 1rem;
  }

  .min-h-4\@xs {
    min-height: 1rem;
  }

  .max-w-4\@xs {
    max-width: 1rem;
  }

  .max-h-4\@xs {
    max-height: 1rem;
  }

  .w-5\@xs,
  .hover\:w-5\@xs:hover,
  .group:hover .group-hover\:w-5\@xs {
    width: 1.25rem;
  }

  .h-5\@xs,
  .hover\:h-5\@xs:hover,
  .group:hover .group-hover\:h-5\@xs {
    height: 1.25rem;
  }

  .min-w-5\@xs {
    min-width: 1.25rem;
  }

  .min-h-5\@xs {
    min-height: 1.25rem;
  }

  .max-w-5\@xs {
    max-width: 1.25rem;
  }

  .max-h-5\@xs {
    max-height: 1.25rem;
  }

  .w-6\@xs,
  .hover\:w-6\@xs:hover,
  .group:hover .group-hover\:w-6\@xs {
    width: 1.5rem;
  }

  .h-6\@xs,
  .hover\:h-6\@xs:hover,
  .group:hover .group-hover\:h-6\@xs {
    height: 1.5rem;
  }

  .min-w-6\@xs {
    min-width: 1.5rem;
  }

  .min-h-6\@xs {
    min-height: 1.5rem;
  }

  .max-w-6\@xs {
    max-width: 1.5rem;
  }

  .max-h-6\@xs {
    max-height: 1.5rem;
  }

  .w-8\@xs,
  .hover\:w-8\@xs:hover,
  .group:hover .group-hover\:w-8\@xs {
    width: 2rem;
  }

  .h-8\@xs,
  .hover\:h-8\@xs:hover,
  .group:hover .group-hover\:h-8\@xs {
    height: 2rem;
  }

  .min-w-8\@xs {
    min-width: 2rem;
  }

  .min-h-8\@xs {
    min-height: 2rem;
  }

  .max-w-8\@xs {
    max-width: 2rem;
  }

  .max-h-8\@xs {
    max-height: 2rem;
  }

  .w-10\@xs,
  .hover\:w-10\@xs:hover,
  .group:hover .group-hover\:w-10\@xs {
    width: 2.5rem;
  }

  .h-10\@xs,
  .hover\:h-10\@xs:hover,
  .group:hover .group-hover\:h-10\@xs {
    height: 2.5rem;
  }

  .min-w-10\@xs {
    min-width: 2.5rem;
  }

  .min-h-10\@xs {
    min-height: 2.5rem;
  }

  .max-w-10\@xs {
    max-width: 2.5rem;
  }

  .max-h-10\@xs {
    max-height: 2.5rem;
  }

  .w-12\@xs,
  .hover\:w-12\@xs:hover,
  .group:hover .group-hover\:w-12\@xs {
    width: 3rem;
  }

  .h-12\@xs,
  .hover\:h-12\@xs:hover,
  .group:hover .group-hover\:h-12\@xs {
    height: 3rem;
  }

  .min-w-12\@xs {
    min-width: 3rem;
  }

  .min-h-12\@xs {
    min-height: 3rem;
  }

  .max-w-12\@xs {
    max-width: 3rem;
  }

  .max-h-12\@xs {
    max-height: 3rem;
  }

  .w-16\@xs,
  .hover\:w-16\@xs:hover,
  .group:hover .group-hover\:w-16\@xs {
    width: 4rem;
  }

  .h-16\@xs,
  .hover\:h-16\@xs:hover,
  .group:hover .group-hover\:h-16\@xs {
    height: 4rem;
  }

  .min-w-16\@xs {
    min-width: 4rem;
  }

  .min-h-16\@xs {
    min-height: 4rem;
  }

  .max-w-16\@xs {
    max-width: 4rem;
  }

  .max-h-16\@xs {
    max-height: 4rem;
  }

  .w-20\@xs,
  .hover\:w-20\@xs:hover,
  .group:hover .group-hover\:w-20\@xs {
    width: 5rem;
  }

  .h-20\@xs,
  .hover\:h-20\@xs:hover,
  .group:hover .group-hover\:h-20\@xs {
    height: 5rem;
  }

  .min-w-20\@xs {
    min-width: 5rem;
  }

  .min-h-20\@xs {
    min-height: 5rem;
  }

  .max-w-20\@xs {
    max-width: 5rem;
  }

  .max-h-20\@xs {
    max-height: 5rem;
  }

  .w-24\@xs,
  .hover\:w-24\@xs:hover,
  .group:hover .group-hover\:w-24\@xs {
    width: 6rem;
  }

  .h-24\@xs,
  .hover\:h-24\@xs:hover,
  .group:hover .group-hover\:h-24\@xs {
    height: 6rem;
  }

  .min-w-24\@xs {
    min-width: 6rem;
  }

  .min-h-24\@xs {
    min-height: 6rem;
  }

  .max-w-24\@xs {
    max-width: 6rem;
  }

  .max-h-24\@xs {
    max-height: 6rem;
  }

  .w-32\@xs,
  .hover\:w-32\@xs:hover,
  .group:hover .group-hover\:w-32\@xs {
    width: 8rem;
  }

  .h-32\@xs,
  .hover\:h-32\@xs:hover,
  .group:hover .group-hover\:h-32\@xs {
    height: 8rem;
  }

  .min-w-32\@xs {
    min-width: 8rem;
  }

  .min-h-32\@xs {
    min-height: 8rem;
  }

  .max-w-32\@xs {
    max-width: 8rem;
  }

  .max-h-32\@xs {
    max-height: 8rem;
  }

  .w-40\@xs,
  .hover\:w-40\@xs:hover,
  .group:hover .group-hover\:w-40\@xs {
    width: 10rem;
  }

  .h-40\@xs,
  .hover\:h-40\@xs:hover,
  .group:hover .group-hover\:h-40\@xs {
    height: 10rem;
  }

  .min-w-40\@xs {
    min-width: 10rem;
  }

  .min-h-40\@xs {
    min-height: 10rem;
  }

  .max-w-40\@xs {
    max-width: 10rem;
  }

  .max-h-40\@xs {
    max-height: 10rem;
  }

  .w-48\@xs,
  .hover\:w-48\@xs:hover,
  .group:hover .group-hover\:w-48\@xs {
    width: 12rem;
  }

  .h-48\@xs,
  .hover\:h-48\@xs:hover,
  .group:hover .group-hover\:h-48\@xs {
    height: 12rem;
  }

  .min-w-48\@xs {
    min-width: 12rem;
  }

  .min-h-48\@xs {
    min-height: 12rem;
  }

  .max-w-48\@xs {
    max-width: 12rem;
  }

  .max-h-48\@xs {
    max-height: 12rem;
  }

  .w-56\@xs,
  .hover\:w-56\@xs:hover,
  .group:hover .group-hover\:w-56\@xs {
    width: 14rem;
  }

  .h-56\@xs,
  .hover\:h-56\@xs:hover,
  .group:hover .group-hover\:h-56\@xs {
    height: 14rem;
  }

  .min-w-56\@xs {
    min-width: 14rem;
  }

  .min-h-56\@xs {
    min-height: 14rem;
  }

  .max-w-56\@xs {
    max-width: 14rem;
  }

  .max-h-56\@xs {
    max-height: 14rem;
  }

  .w-64\@xs,
  .hover\:w-64\@xs:hover,
  .group:hover .group-hover\:w-64\@xs {
    width: 16rem;
  }

  .h-64\@xs,
  .hover\:h-64\@xs:hover,
  .group:hover .group-hover\:h-64\@xs {
    height: 16rem;
  }

  .min-w-64\@xs {
    min-width: 16rem;
  }

  .min-h-64\@xs {
    min-height: 16rem;
  }

  .max-w-64\@xs {
    max-width: 16rem;
  }

  .max-h-64\@xs {
    max-height: 16rem;
  }

  .w-120\@xs,
  .hover\:w-120\@xs:hover,
  .group:hover .group-hover\:w-120\@xs {
    width: 30rem;
  }

  .h-120\@xs,
  .hover\:h-120\@xs:hover,
  .group:hover .group-hover\:h-120\@xs {
    height: 30rem;
  }

  .min-w-120\@xs {
    min-width: 30rem;
  }

  .min-h-120\@xs {
    min-height: 30rem;
  }

  .max-w-120\@xs {
    max-width: 30rem;
  }

  .max-h-120\@xs {
    max-height: 30rem;
  }
}

.w-sm {
  width: 640px;
}

.min-w-sm {
  min-width: 640px;
}

.max-w-sm {
  max-width: 640px;
}

.w-auto\@sm {
  width: auto;
}

.w-full\@sm {
  width: 100%;
}

.h-auto\@sm {
  height: auto;
}

.h-full\@sm {
  height: 100%;
}

.w-min\@sm {
  width: min-content;
}

.h-min\@sm {
  height: min-content;
}

.w-fit\@sm {
  width: fit-content;
}

.h-fit\@sm {
  height: fit-content;
}

@media screen and (min-width: 640px) {

  .w-0p\@sm,
  .hover\:w-0p\@sm:hover,
  .group:hover .group-hover\:w-0p\@sm {
    width: 0%;
  }

  .h-0p\@sm,
  .hover\:h-0p\@sm:hover,
  .group:hover .group-hover\:h-0p\@sm {
    height: 0%;
  }

  .min-w-0p\@sm {
    min-width: 0%;
  }

  .min-h-0p\@sm {
    min-height: 0%;
  }

  .max-w-0p\@sm {
    max-width: 0%;
  }

  .max-h-0p\@sm {
    max-height: 0%;
  }

  .w-5p\@sm,
  .hover\:w-5p\@sm:hover,
  .group:hover .group-hover\:w-5p\@sm {
    width: 5%;
  }

  .h-5p\@sm,
  .hover\:h-5p\@sm:hover,
  .group:hover .group-hover\:h-5p\@sm {
    height: 5%;
  }

  .min-w-5p\@sm {
    min-width: 5%;
  }

  .min-h-5p\@sm {
    min-height: 5%;
  }

  .max-w-5p\@sm {
    max-width: 5%;
  }

  .max-h-5p\@sm {
    max-height: 5%;
  }

  .w-10p\@sm,
  .hover\:w-10p\@sm:hover,
  .group:hover .group-hover\:w-10p\@sm {
    width: 10%;
  }

  .h-10p\@sm,
  .hover\:h-10p\@sm:hover,
  .group:hover .group-hover\:h-10p\@sm {
    height: 10%;
  }

  .min-w-10p\@sm {
    min-width: 10%;
  }

  .min-h-10p\@sm {
    min-height: 10%;
  }

  .max-w-10p\@sm {
    max-width: 10%;
  }

  .max-h-10p\@sm {
    max-height: 10%;
  }

  .w-20p\@sm,
  .hover\:w-20p\@sm:hover,
  .group:hover .group-hover\:w-20p\@sm {
    width: 20%;
  }

  .h-20p\@sm,
  .hover\:h-20p\@sm:hover,
  .group:hover .group-hover\:h-20p\@sm {
    height: 20%;
  }

  .min-w-20p\@sm {
    min-width: 20%;
  }

  .min-h-20p\@sm {
    min-height: 20%;
  }

  .max-w-20p\@sm {
    max-width: 20%;
  }

  .max-h-20p\@sm {
    max-height: 20%;
  }

  .w-25p\@sm,
  .hover\:w-25p\@sm:hover,
  .group:hover .group-hover\:w-25p\@sm {
    width: 25%;
  }

  .h-25p\@sm,
  .hover\:h-25p\@sm:hover,
  .group:hover .group-hover\:h-25p\@sm {
    height: 25%;
  }

  .min-w-25p\@sm {
    min-width: 25%;
  }

  .min-h-25p\@sm {
    min-height: 25%;
  }

  .max-w-25p\@sm {
    max-width: 25%;
  }

  .max-h-25p\@sm {
    max-height: 25%;
  }

  .w-30p\@sm,
  .hover\:w-30p\@sm:hover,
  .group:hover .group-hover\:w-30p\@sm {
    width: 30%;
  }

  .h-30p\@sm,
  .hover\:h-30p\@sm:hover,
  .group:hover .group-hover\:h-30p\@sm {
    height: 30%;
  }

  .min-w-30p\@sm {
    min-width: 30%;
  }

  .min-h-30p\@sm {
    min-height: 30%;
  }

  .max-w-30p\@sm {
    max-width: 30%;
  }

  .max-h-30p\@sm {
    max-height: 30%;
  }

  .w-40p\@sm,
  .hover\:w-40p\@sm:hover,
  .group:hover .group-hover\:w-40p\@sm {
    width: 40%;
  }

  .h-40p\@sm,
  .hover\:h-40p\@sm:hover,
  .group:hover .group-hover\:h-40p\@sm {
    height: 40%;
  }

  .min-w-40p\@sm {
    min-width: 40%;
  }

  .min-h-40p\@sm {
    min-height: 40%;
  }

  .max-w-40p\@sm {
    max-width: 40%;
  }

  .max-h-40p\@sm {
    max-height: 40%;
  }

  .w-50p\@sm,
  .hover\:w-50p\@sm:hover,
  .group:hover .group-hover\:w-50p\@sm {
    width: 50%;
  }

  .h-50p\@sm,
  .hover\:h-50p\@sm:hover,
  .group:hover .group-hover\:h-50p\@sm {
    height: 50%;
  }

  .min-w-50p\@sm {
    min-width: 50%;
  }

  .min-h-50p\@sm {
    min-height: 50%;
  }

  .max-w-50p\@sm {
    max-width: 50%;
  }

  .max-h-50p\@sm {
    max-height: 50%;
  }

  .w-60p\@sm,
  .hover\:w-60p\@sm:hover,
  .group:hover .group-hover\:w-60p\@sm {
    width: 60%;
  }

  .h-60p\@sm,
  .hover\:h-60p\@sm:hover,
  .group:hover .group-hover\:h-60p\@sm {
    height: 60%;
  }

  .min-w-60p\@sm {
    min-width: 60%;
  }

  .min-h-60p\@sm {
    min-height: 60%;
  }

  .max-w-60p\@sm {
    max-width: 60%;
  }

  .max-h-60p\@sm {
    max-height: 60%;
  }

  .w-70p\@sm,
  .hover\:w-70p\@sm:hover,
  .group:hover .group-hover\:w-70p\@sm {
    width: 70%;
  }

  .h-70p\@sm,
  .hover\:h-70p\@sm:hover,
  .group:hover .group-hover\:h-70p\@sm {
    height: 70%;
  }

  .min-w-70p\@sm {
    min-width: 70%;
  }

  .min-h-70p\@sm {
    min-height: 70%;
  }

  .max-w-70p\@sm {
    max-width: 70%;
  }

  .max-h-70p\@sm {
    max-height: 70%;
  }

  .w-75p\@sm,
  .hover\:w-75p\@sm:hover,
  .group:hover .group-hover\:w-75p\@sm {
    width: 75%;
  }

  .h-75p\@sm,
  .hover\:h-75p\@sm:hover,
  .group:hover .group-hover\:h-75p\@sm {
    height: 75%;
  }

  .min-w-75p\@sm {
    min-width: 75%;
  }

  .min-h-75p\@sm {
    min-height: 75%;
  }

  .max-w-75p\@sm {
    max-width: 75%;
  }

  .max-h-75p\@sm {
    max-height: 75%;
  }

  .w-80p\@sm,
  .hover\:w-80p\@sm:hover,
  .group:hover .group-hover\:w-80p\@sm {
    width: 80%;
  }

  .h-80p\@sm,
  .hover\:h-80p\@sm:hover,
  .group:hover .group-hover\:h-80p\@sm {
    height: 80%;
  }

  .min-w-80p\@sm {
    min-width: 80%;
  }

  .min-h-80p\@sm {
    min-height: 80%;
  }

  .max-w-80p\@sm {
    max-width: 80%;
  }

  .max-h-80p\@sm {
    max-height: 80%;
  }

  .w-90p\@sm,
  .hover\:w-90p\@sm:hover,
  .group:hover .group-hover\:w-90p\@sm {
    width: 90%;
  }

  .h-90p\@sm,
  .hover\:h-90p\@sm:hover,
  .group:hover .group-hover\:h-90p\@sm {
    height: 90%;
  }

  .min-w-90p\@sm {
    min-width: 90%;
  }

  .min-h-90p\@sm {
    min-height: 90%;
  }

  .max-w-90p\@sm {
    max-width: 90%;
  }

  .max-h-90p\@sm {
    max-height: 90%;
  }

  .w-100p\@sm,
  .hover\:w-100p\@sm:hover,
  .group:hover .group-hover\:w-100p\@sm {
    width: 100%;
  }

  .h-100p\@sm,
  .hover\:h-100p\@sm:hover,
  .group:hover .group-hover\:h-100p\@sm {
    height: 100%;
  }

  .min-w-100p\@sm {
    min-width: 100%;
  }

  .min-h-100p\@sm {
    min-height: 100%;
  }

  .max-w-100p\@sm {
    max-width: 100%;
  }

  .max-h-100p\@sm {
    max-height: 100%;
  }

  .w-0\@sm,
  .hover\:w-0\@sm:hover,
  .group:hover .group-hover\:w-0\@sm {
    width: 0px;
  }

  .h-0\@sm,
  .hover\:h-0\@sm:hover,
  .group:hover .group-hover\:h-0\@sm {
    height: 0px;
  }

  .min-w-0\@sm {
    min-width: 0px;
  }

  .min-h-0\@sm {
    min-height: 0px;
  }

  .max-w-0\@sm {
    max-width: 0px;
  }

  .max-h-0\@sm {
    max-height: 0px;
  }

  .w-1\@sm,
  .hover\:w-1\@sm:hover,
  .group:hover .group-hover\:w-1\@sm {
    width: 0.25rem;
  }

  .h-1\@sm,
  .hover\:h-1\@sm:hover,
  .group:hover .group-hover\:h-1\@sm {
    height: 0.25rem;
  }

  .min-w-1\@sm {
    min-width: 0.25rem;
  }

  .min-h-1\@sm {
    min-height: 0.25rem;
  }

  .max-w-1\@sm {
    max-width: 0.25rem;
  }

  .max-h-1\@sm {
    max-height: 0.25rem;
  }

  .w-2\@sm,
  .hover\:w-2\@sm:hover,
  .group:hover .group-hover\:w-2\@sm {
    width: 0.5rem;
  }

  .h-2\@sm,
  .hover\:h-2\@sm:hover,
  .group:hover .group-hover\:h-2\@sm {
    height: 0.5rem;
  }

  .min-w-2\@sm {
    min-width: 0.5rem;
  }

  .min-h-2\@sm {
    min-height: 0.5rem;
  }

  .max-w-2\@sm {
    max-width: 0.5rem;
  }

  .max-h-2\@sm {
    max-height: 0.5rem;
  }

  .w-3\@sm,
  .hover\:w-3\@sm:hover,
  .group:hover .group-hover\:w-3\@sm {
    width: 0.75rem;
  }

  .h-3\@sm,
  .hover\:h-3\@sm:hover,
  .group:hover .group-hover\:h-3\@sm {
    height: 0.75rem;
  }

  .min-w-3\@sm {
    min-width: 0.75rem;
  }

  .min-h-3\@sm {
    min-height: 0.75rem;
  }

  .max-w-3\@sm {
    max-width: 0.75rem;
  }

  .max-h-3\@sm {
    max-height: 0.75rem;
  }

  .w-4\@sm,
  .hover\:w-4\@sm:hover,
  .group:hover .group-hover\:w-4\@sm {
    width: 1rem;
  }

  .h-4\@sm,
  .hover\:h-4\@sm:hover,
  .group:hover .group-hover\:h-4\@sm {
    height: 1rem;
  }

  .min-w-4\@sm {
    min-width: 1rem;
  }

  .min-h-4\@sm {
    min-height: 1rem;
  }

  .max-w-4\@sm {
    max-width: 1rem;
  }

  .max-h-4\@sm {
    max-height: 1rem;
  }

  .w-5\@sm,
  .hover\:w-5\@sm:hover,
  .group:hover .group-hover\:w-5\@sm {
    width: 1.25rem;
  }

  .h-5\@sm,
  .hover\:h-5\@sm:hover,
  .group:hover .group-hover\:h-5\@sm {
    height: 1.25rem;
  }

  .min-w-5\@sm {
    min-width: 1.25rem;
  }

  .min-h-5\@sm {
    min-height: 1.25rem;
  }

  .max-w-5\@sm {
    max-width: 1.25rem;
  }

  .max-h-5\@sm {
    max-height: 1.25rem;
  }

  .w-6\@sm,
  .hover\:w-6\@sm:hover,
  .group:hover .group-hover\:w-6\@sm {
    width: 1.5rem;
  }

  .h-6\@sm,
  .hover\:h-6\@sm:hover,
  .group:hover .group-hover\:h-6\@sm {
    height: 1.5rem;
  }

  .min-w-6\@sm {
    min-width: 1.5rem;
  }

  .min-h-6\@sm {
    min-height: 1.5rem;
  }

  .max-w-6\@sm {
    max-width: 1.5rem;
  }

  .max-h-6\@sm {
    max-height: 1.5rem;
  }

  .w-8\@sm,
  .hover\:w-8\@sm:hover,
  .group:hover .group-hover\:w-8\@sm {
    width: 2rem;
  }

  .h-8\@sm,
  .hover\:h-8\@sm:hover,
  .group:hover .group-hover\:h-8\@sm {
    height: 2rem;
  }

  .min-w-8\@sm {
    min-width: 2rem;
  }

  .min-h-8\@sm {
    min-height: 2rem;
  }

  .max-w-8\@sm {
    max-width: 2rem;
  }

  .max-h-8\@sm {
    max-height: 2rem;
  }

  .w-10\@sm,
  .hover\:w-10\@sm:hover,
  .group:hover .group-hover\:w-10\@sm {
    width: 2.5rem;
  }

  .h-10\@sm,
  .hover\:h-10\@sm:hover,
  .group:hover .group-hover\:h-10\@sm {
    height: 2.5rem;
  }

  .min-w-10\@sm {
    min-width: 2.5rem;
  }

  .min-h-10\@sm {
    min-height: 2.5rem;
  }

  .max-w-10\@sm {
    max-width: 2.5rem;
  }

  .max-h-10\@sm {
    max-height: 2.5rem;
  }

  .w-12\@sm,
  .hover\:w-12\@sm:hover,
  .group:hover .group-hover\:w-12\@sm {
    width: 3rem;
  }

  .h-12\@sm,
  .hover\:h-12\@sm:hover,
  .group:hover .group-hover\:h-12\@sm {
    height: 3rem;
  }

  .min-w-12\@sm {
    min-width: 3rem;
  }

  .min-h-12\@sm {
    min-height: 3rem;
  }

  .max-w-12\@sm {
    max-width: 3rem;
  }

  .max-h-12\@sm {
    max-height: 3rem;
  }

  .w-16\@sm,
  .hover\:w-16\@sm:hover,
  .group:hover .group-hover\:w-16\@sm {
    width: 4rem;
  }

  .h-16\@sm,
  .hover\:h-16\@sm:hover,
  .group:hover .group-hover\:h-16\@sm {
    height: 4rem;
  }

  .min-w-16\@sm {
    min-width: 4rem;
  }

  .min-h-16\@sm {
    min-height: 4rem;
  }

  .max-w-16\@sm {
    max-width: 4rem;
  }

  .max-h-16\@sm {
    max-height: 4rem;
  }

  .w-20\@sm,
  .hover\:w-20\@sm:hover,
  .group:hover .group-hover\:w-20\@sm {
    width: 5rem;
  }

  .h-20\@sm,
  .hover\:h-20\@sm:hover,
  .group:hover .group-hover\:h-20\@sm {
    height: 5rem;
  }

  .min-w-20\@sm {
    min-width: 5rem;
  }

  .min-h-20\@sm {
    min-height: 5rem;
  }

  .max-w-20\@sm {
    max-width: 5rem;
  }

  .max-h-20\@sm {
    max-height: 5rem;
  }

  .w-24\@sm,
  .hover\:w-24\@sm:hover,
  .group:hover .group-hover\:w-24\@sm {
    width: 6rem;
  }

  .h-24\@sm,
  .hover\:h-24\@sm:hover,
  .group:hover .group-hover\:h-24\@sm {
    height: 6rem;
  }

  .min-w-24\@sm {
    min-width: 6rem;
  }

  .min-h-24\@sm {
    min-height: 6rem;
  }

  .max-w-24\@sm {
    max-width: 6rem;
  }

  .max-h-24\@sm {
    max-height: 6rem;
  }

  .w-32\@sm,
  .hover\:w-32\@sm:hover,
  .group:hover .group-hover\:w-32\@sm {
    width: 8rem;
  }

  .h-32\@sm,
  .hover\:h-32\@sm:hover,
  .group:hover .group-hover\:h-32\@sm {
    height: 8rem;
  }

  .min-w-32\@sm {
    min-width: 8rem;
  }

  .min-h-32\@sm {
    min-height: 8rem;
  }

  .max-w-32\@sm {
    max-width: 8rem;
  }

  .max-h-32\@sm {
    max-height: 8rem;
  }

  .w-40\@sm,
  .hover\:w-40\@sm:hover,
  .group:hover .group-hover\:w-40\@sm {
    width: 10rem;
  }

  .h-40\@sm,
  .hover\:h-40\@sm:hover,
  .group:hover .group-hover\:h-40\@sm {
    height: 10rem;
  }

  .min-w-40\@sm {
    min-width: 10rem;
  }

  .min-h-40\@sm {
    min-height: 10rem;
  }

  .max-w-40\@sm {
    max-width: 10rem;
  }

  .max-h-40\@sm {
    max-height: 10rem;
  }

  .w-48\@sm,
  .hover\:w-48\@sm:hover,
  .group:hover .group-hover\:w-48\@sm {
    width: 12rem;
  }

  .h-48\@sm,
  .hover\:h-48\@sm:hover,
  .group:hover .group-hover\:h-48\@sm {
    height: 12rem;
  }

  .min-w-48\@sm {
    min-width: 12rem;
  }

  .min-h-48\@sm {
    min-height: 12rem;
  }

  .max-w-48\@sm {
    max-width: 12rem;
  }

  .max-h-48\@sm {
    max-height: 12rem;
  }

  .w-56\@sm,
  .hover\:w-56\@sm:hover,
  .group:hover .group-hover\:w-56\@sm {
    width: 14rem;
  }

  .h-56\@sm,
  .hover\:h-56\@sm:hover,
  .group:hover .group-hover\:h-56\@sm {
    height: 14rem;
  }

  .min-w-56\@sm {
    min-width: 14rem;
  }

  .min-h-56\@sm {
    min-height: 14rem;
  }

  .max-w-56\@sm {
    max-width: 14rem;
  }

  .max-h-56\@sm {
    max-height: 14rem;
  }

  .w-64\@sm,
  .hover\:w-64\@sm:hover,
  .group:hover .group-hover\:w-64\@sm {
    width: 16rem;
  }

  .h-64\@sm,
  .hover\:h-64\@sm:hover,
  .group:hover .group-hover\:h-64\@sm {
    height: 16rem;
  }

  .min-w-64\@sm {
    min-width: 16rem;
  }

  .min-h-64\@sm {
    min-height: 16rem;
  }

  .max-w-64\@sm {
    max-width: 16rem;
  }

  .max-h-64\@sm {
    max-height: 16rem;
  }

  .w-120\@sm,
  .hover\:w-120\@sm:hover,
  .group:hover .group-hover\:w-120\@sm {
    width: 30rem;
  }

  .h-120\@sm,
  .hover\:h-120\@sm:hover,
  .group:hover .group-hover\:h-120\@sm {
    height: 30rem;
  }

  .min-w-120\@sm {
    min-width: 30rem;
  }

  .min-h-120\@sm {
    min-height: 30rem;
  }

  .max-w-120\@sm {
    max-width: 30rem;
  }

  .max-h-120\@sm {
    max-height: 30rem;
  }
}

.w-md {
  width: 768px;
}

.min-w-md {
  min-width: 768px;
}

.max-w-md {
  max-width: 768px;
}

.w-auto\@md {
  width: auto;
}

.w-full\@md {
  width: 100%;
}

.h-auto\@md {
  height: auto;
}

.h-full\@md {
  height: 100%;
}

.w-min\@md {
  width: min-content;
}

.h-min\@md {
  height: min-content;
}

.w-fit\@md {
  width: fit-content;
}

.h-fit\@md {
  height: fit-content;
}

@media screen and (min-width: 768px) {

  .w-0p\@md,
  .hover\:w-0p\@md:hover,
  .group:hover .group-hover\:w-0p\@md {
    width: 0%;
  }

  .h-0p\@md,
  .hover\:h-0p\@md:hover,
  .group:hover .group-hover\:h-0p\@md {
    height: 0%;
  }

  .min-w-0p\@md {
    min-width: 0%;
  }

  .min-h-0p\@md {
    min-height: 0%;
  }

  .max-w-0p\@md {
    max-width: 0%;
  }

  .max-h-0p\@md {
    max-height: 0%;
  }

  .w-5p\@md,
  .hover\:w-5p\@md:hover,
  .group:hover .group-hover\:w-5p\@md {
    width: 5%;
  }

  .h-5p\@md,
  .hover\:h-5p\@md:hover,
  .group:hover .group-hover\:h-5p\@md {
    height: 5%;
  }

  .min-w-5p\@md {
    min-width: 5%;
  }

  .min-h-5p\@md {
    min-height: 5%;
  }

  .max-w-5p\@md {
    max-width: 5%;
  }

  .max-h-5p\@md {
    max-height: 5%;
  }

  .w-10p\@md,
  .hover\:w-10p\@md:hover,
  .group:hover .group-hover\:w-10p\@md {
    width: 10%;
  }

  .h-10p\@md,
  .hover\:h-10p\@md:hover,
  .group:hover .group-hover\:h-10p\@md {
    height: 10%;
  }

  .min-w-10p\@md {
    min-width: 10%;
  }

  .min-h-10p\@md {
    min-height: 10%;
  }

  .max-w-10p\@md {
    max-width: 10%;
  }

  .max-h-10p\@md {
    max-height: 10%;
  }

  .w-20p\@md,
  .hover\:w-20p\@md:hover,
  .group:hover .group-hover\:w-20p\@md {
    width: 20%;
  }

  .h-20p\@md,
  .hover\:h-20p\@md:hover,
  .group:hover .group-hover\:h-20p\@md {
    height: 20%;
  }

  .min-w-20p\@md {
    min-width: 20%;
  }

  .min-h-20p\@md {
    min-height: 20%;
  }

  .max-w-20p\@md {
    max-width: 20%;
  }

  .max-h-20p\@md {
    max-height: 20%;
  }

  .w-25p\@md,
  .hover\:w-25p\@md:hover,
  .group:hover .group-hover\:w-25p\@md {
    width: 25%;
  }

  .h-25p\@md,
  .hover\:h-25p\@md:hover,
  .group:hover .group-hover\:h-25p\@md {
    height: 25%;
  }

  .min-w-25p\@md {
    min-width: 25%;
  }

  .min-h-25p\@md {
    min-height: 25%;
  }

  .max-w-25p\@md {
    max-width: 25%;
  }

  .max-h-25p\@md {
    max-height: 25%;
  }

  .w-30p\@md,
  .hover\:w-30p\@md:hover,
  .group:hover .group-hover\:w-30p\@md {
    width: 30%;
  }

  .h-30p\@md,
  .hover\:h-30p\@md:hover,
  .group:hover .group-hover\:h-30p\@md {
    height: 30%;
  }

  .min-w-30p\@md {
    min-width: 30%;
  }

  .min-h-30p\@md {
    min-height: 30%;
  }

  .max-w-30p\@md {
    max-width: 30%;
  }

  .max-h-30p\@md {
    max-height: 30%;
  }

  .w-40p\@md,
  .hover\:w-40p\@md:hover,
  .group:hover .group-hover\:w-40p\@md {
    width: 40%;
  }

  .h-40p\@md,
  .hover\:h-40p\@md:hover,
  .group:hover .group-hover\:h-40p\@md {
    height: 40%;
  }

  .min-w-40p\@md {
    min-width: 40%;
  }

  .min-h-40p\@md {
    min-height: 40%;
  }

  .max-w-40p\@md {
    max-width: 40%;
  }

  .max-h-40p\@md {
    max-height: 40%;
  }

  .w-50p\@md,
  .hover\:w-50p\@md:hover,
  .group:hover .group-hover\:w-50p\@md {
    width: 50%;
  }

  .h-50p\@md,
  .hover\:h-50p\@md:hover,
  .group:hover .group-hover\:h-50p\@md {
    height: 50%;
  }

  .min-w-50p\@md {
    min-width: 50%;
  }

  .min-h-50p\@md {
    min-height: 50%;
  }

  .max-w-50p\@md {
    max-width: 50%;
  }

  .max-h-50p\@md {
    max-height: 50%;
  }

  .w-60p\@md,
  .hover\:w-60p\@md:hover,
  .group:hover .group-hover\:w-60p\@md {
    width: 60%;
  }

  .h-60p\@md,
  .hover\:h-60p\@md:hover,
  .group:hover .group-hover\:h-60p\@md {
    height: 60%;
  }

  .min-w-60p\@md {
    min-width: 60%;
  }

  .min-h-60p\@md {
    min-height: 60%;
  }

  .max-w-60p\@md {
    max-width: 60%;
  }

  .max-h-60p\@md {
    max-height: 60%;
  }

  .w-70p\@md,
  .hover\:w-70p\@md:hover,
  .group:hover .group-hover\:w-70p\@md {
    width: 70%;
  }

  .h-70p\@md,
  .hover\:h-70p\@md:hover,
  .group:hover .group-hover\:h-70p\@md {
    height: 70%;
  }

  .min-w-70p\@md {
    min-width: 70%;
  }

  .min-h-70p\@md {
    min-height: 70%;
  }

  .max-w-70p\@md {
    max-width: 70%;
  }

  .max-h-70p\@md {
    max-height: 70%;
  }

  .w-75p\@md,
  .hover\:w-75p\@md:hover,
  .group:hover .group-hover\:w-75p\@md {
    width: 75%;
  }

  .h-75p\@md,
  .hover\:h-75p\@md:hover,
  .group:hover .group-hover\:h-75p\@md {
    height: 75%;
  }

  .min-w-75p\@md {
    min-width: 75%;
  }

  .min-h-75p\@md {
    min-height: 75%;
  }

  .max-w-75p\@md {
    max-width: 75%;
  }

  .max-h-75p\@md {
    max-height: 75%;
  }

  .w-80p\@md,
  .hover\:w-80p\@md:hover,
  .group:hover .group-hover\:w-80p\@md {
    width: 80%;
  }

  .h-80p\@md,
  .hover\:h-80p\@md:hover,
  .group:hover .group-hover\:h-80p\@md {
    height: 80%;
  }

  .min-w-80p\@md {
    min-width: 80%;
  }

  .min-h-80p\@md {
    min-height: 80%;
  }

  .max-w-80p\@md {
    max-width: 80%;
  }

  .max-h-80p\@md {
    max-height: 80%;
  }

  .w-90p\@md,
  .hover\:w-90p\@md:hover,
  .group:hover .group-hover\:w-90p\@md {
    width: 90%;
  }

  .h-90p\@md,
  .hover\:h-90p\@md:hover,
  .group:hover .group-hover\:h-90p\@md {
    height: 90%;
  }

  .min-w-90p\@md {
    min-width: 90%;
  }

  .min-h-90p\@md {
    min-height: 90%;
  }

  .max-w-90p\@md {
    max-width: 90%;
  }

  .max-h-90p\@md {
    max-height: 90%;
  }

  .w-100p\@md,
  .hover\:w-100p\@md:hover,
  .group:hover .group-hover\:w-100p\@md {
    width: 100%;
  }

  .h-100p\@md,
  .hover\:h-100p\@md:hover,
  .group:hover .group-hover\:h-100p\@md {
    height: 100%;
  }

  .min-w-100p\@md {
    min-width: 100%;
  }

  .min-h-100p\@md {
    min-height: 100%;
  }

  .max-w-100p\@md {
    max-width: 100%;
  }

  .max-h-100p\@md {
    max-height: 100%;
  }

  .w-0\@md,
  .hover\:w-0\@md:hover,
  .group:hover .group-hover\:w-0\@md {
    width: 0px;
  }

  .h-0\@md,
  .hover\:h-0\@md:hover,
  .group:hover .group-hover\:h-0\@md {
    height: 0px;
  }

  .min-w-0\@md {
    min-width: 0px;
  }

  .min-h-0\@md {
    min-height: 0px;
  }

  .max-w-0\@md {
    max-width: 0px;
  }

  .max-h-0\@md {
    max-height: 0px;
  }

  .w-1\@md,
  .hover\:w-1\@md:hover,
  .group:hover .group-hover\:w-1\@md {
    width: 0.25rem;
  }

  .h-1\@md,
  .hover\:h-1\@md:hover,
  .group:hover .group-hover\:h-1\@md {
    height: 0.25rem;
  }

  .min-w-1\@md {
    min-width: 0.25rem;
  }

  .min-h-1\@md {
    min-height: 0.25rem;
  }

  .max-w-1\@md {
    max-width: 0.25rem;
  }

  .max-h-1\@md {
    max-height: 0.25rem;
  }

  .w-2\@md,
  .hover\:w-2\@md:hover,
  .group:hover .group-hover\:w-2\@md {
    width: 0.5rem;
  }

  .h-2\@md,
  .hover\:h-2\@md:hover,
  .group:hover .group-hover\:h-2\@md {
    height: 0.5rem;
  }

  .min-w-2\@md {
    min-width: 0.5rem;
  }

  .min-h-2\@md {
    min-height: 0.5rem;
  }

  .max-w-2\@md {
    max-width: 0.5rem;
  }

  .max-h-2\@md {
    max-height: 0.5rem;
  }

  .w-3\@md,
  .hover\:w-3\@md:hover,
  .group:hover .group-hover\:w-3\@md {
    width: 0.75rem;
  }

  .h-3\@md,
  .hover\:h-3\@md:hover,
  .group:hover .group-hover\:h-3\@md {
    height: 0.75rem;
  }

  .min-w-3\@md {
    min-width: 0.75rem;
  }

  .min-h-3\@md {
    min-height: 0.75rem;
  }

  .max-w-3\@md {
    max-width: 0.75rem;
  }

  .max-h-3\@md {
    max-height: 0.75rem;
  }

  .w-4\@md,
  .hover\:w-4\@md:hover,
  .group:hover .group-hover\:w-4\@md {
    width: 1rem;
  }

  .h-4\@md,
  .hover\:h-4\@md:hover,
  .group:hover .group-hover\:h-4\@md {
    height: 1rem;
  }

  .min-w-4\@md {
    min-width: 1rem;
  }

  .min-h-4\@md {
    min-height: 1rem;
  }

  .max-w-4\@md {
    max-width: 1rem;
  }

  .max-h-4\@md {
    max-height: 1rem;
  }

  .w-5\@md,
  .hover\:w-5\@md:hover,
  .group:hover .group-hover\:w-5\@md {
    width: 1.25rem;
  }

  .h-5\@md,
  .hover\:h-5\@md:hover,
  .group:hover .group-hover\:h-5\@md {
    height: 1.25rem;
  }

  .min-w-5\@md {
    min-width: 1.25rem;
  }

  .min-h-5\@md {
    min-height: 1.25rem;
  }

  .max-w-5\@md {
    max-width: 1.25rem;
  }

  .max-h-5\@md {
    max-height: 1.25rem;
  }

  .w-6\@md,
  .hover\:w-6\@md:hover,
  .group:hover .group-hover\:w-6\@md {
    width: 1.5rem;
  }

  .h-6\@md,
  .hover\:h-6\@md:hover,
  .group:hover .group-hover\:h-6\@md {
    height: 1.5rem;
  }

  .min-w-6\@md {
    min-width: 1.5rem;
  }

  .min-h-6\@md {
    min-height: 1.5rem;
  }

  .max-w-6\@md {
    max-width: 1.5rem;
  }

  .max-h-6\@md {
    max-height: 1.5rem;
  }

  .w-8\@md,
  .hover\:w-8\@md:hover,
  .group:hover .group-hover\:w-8\@md {
    width: 2rem;
  }

  .h-8\@md,
  .hover\:h-8\@md:hover,
  .group:hover .group-hover\:h-8\@md {
    height: 2rem;
  }

  .min-w-8\@md {
    min-width: 2rem;
  }

  .min-h-8\@md {
    min-height: 2rem;
  }

  .max-w-8\@md {
    max-width: 2rem;
  }

  .max-h-8\@md {
    max-height: 2rem;
  }

  .w-10\@md,
  .hover\:w-10\@md:hover,
  .group:hover .group-hover\:w-10\@md {
    width: 2.5rem;
  }

  .h-10\@md,
  .hover\:h-10\@md:hover,
  .group:hover .group-hover\:h-10\@md {
    height: 2.5rem;
  }

  .min-w-10\@md {
    min-width: 2.5rem;
  }

  .min-h-10\@md {
    min-height: 2.5rem;
  }

  .max-w-10\@md {
    max-width: 2.5rem;
  }

  .max-h-10\@md {
    max-height: 2.5rem;
  }

  .w-12\@md,
  .hover\:w-12\@md:hover,
  .group:hover .group-hover\:w-12\@md {
    width: 3rem;
  }

  .h-12\@md,
  .hover\:h-12\@md:hover,
  .group:hover .group-hover\:h-12\@md {
    height: 3rem;
  }

  .min-w-12\@md {
    min-width: 3rem;
  }

  .min-h-12\@md {
    min-height: 3rem;
  }

  .max-w-12\@md {
    max-width: 3rem;
  }

  .max-h-12\@md {
    max-height: 3rem;
  }

  .w-16\@md,
  .hover\:w-16\@md:hover,
  .group:hover .group-hover\:w-16\@md {
    width: 4rem;
  }

  .h-16\@md,
  .hover\:h-16\@md:hover,
  .group:hover .group-hover\:h-16\@md {
    height: 4rem;
  }

  .min-w-16\@md {
    min-width: 4rem;
  }

  .min-h-16\@md {
    min-height: 4rem;
  }

  .max-w-16\@md {
    max-width: 4rem;
  }

  .max-h-16\@md {
    max-height: 4rem;
  }

  .w-20\@md,
  .hover\:w-20\@md:hover,
  .group:hover .group-hover\:w-20\@md {
    width: 5rem;
  }

  .h-20\@md,
  .hover\:h-20\@md:hover,
  .group:hover .group-hover\:h-20\@md {
    height: 5rem;
  }

  .min-w-20\@md {
    min-width: 5rem;
  }

  .min-h-20\@md {
    min-height: 5rem;
  }

  .max-w-20\@md {
    max-width: 5rem;
  }

  .max-h-20\@md {
    max-height: 5rem;
  }

  .w-24\@md,
  .hover\:w-24\@md:hover,
  .group:hover .group-hover\:w-24\@md {
    width: 6rem;
  }

  .h-24\@md,
  .hover\:h-24\@md:hover,
  .group:hover .group-hover\:h-24\@md {
    height: 6rem;
  }

  .min-w-24\@md {
    min-width: 6rem;
  }

  .min-h-24\@md {
    min-height: 6rem;
  }

  .max-w-24\@md {
    max-width: 6rem;
  }

  .max-h-24\@md {
    max-height: 6rem;
  }

  .w-32\@md,
  .hover\:w-32\@md:hover,
  .group:hover .group-hover\:w-32\@md {
    width: 8rem;
  }

  .h-32\@md,
  .hover\:h-32\@md:hover,
  .group:hover .group-hover\:h-32\@md {
    height: 8rem;
  }

  .min-w-32\@md {
    min-width: 8rem;
  }

  .min-h-32\@md {
    min-height: 8rem;
  }

  .max-w-32\@md {
    max-width: 8rem;
  }

  .max-h-32\@md {
    max-height: 8rem;
  }

  .w-40\@md,
  .hover\:w-40\@md:hover,
  .group:hover .group-hover\:w-40\@md {
    width: 10rem;
  }

  .h-40\@md,
  .hover\:h-40\@md:hover,
  .group:hover .group-hover\:h-40\@md {
    height: 10rem;
  }

  .min-w-40\@md {
    min-width: 10rem;
  }

  .min-h-40\@md {
    min-height: 10rem;
  }

  .max-w-40\@md {
    max-width: 10rem;
  }

  .max-h-40\@md {
    max-height: 10rem;
  }

  .w-48\@md,
  .hover\:w-48\@md:hover,
  .group:hover .group-hover\:w-48\@md {
    width: 12rem;
  }

  .h-48\@md,
  .hover\:h-48\@md:hover,
  .group:hover .group-hover\:h-48\@md {
    height: 12rem;
  }

  .min-w-48\@md {
    min-width: 12rem;
  }

  .min-h-48\@md {
    min-height: 12rem;
  }

  .max-w-48\@md {
    max-width: 12rem;
  }

  .max-h-48\@md {
    max-height: 12rem;
  }

  .w-56\@md,
  .hover\:w-56\@md:hover,
  .group:hover .group-hover\:w-56\@md {
    width: 14rem;
  }

  .h-56\@md,
  .hover\:h-56\@md:hover,
  .group:hover .group-hover\:h-56\@md {
    height: 14rem;
  }

  .min-w-56\@md {
    min-width: 14rem;
  }

  .min-h-56\@md {
    min-height: 14rem;
  }

  .max-w-56\@md {
    max-width: 14rem;
  }

  .max-h-56\@md {
    max-height: 14rem;
  }

  .w-64\@md,
  .hover\:w-64\@md:hover,
  .group:hover .group-hover\:w-64\@md {
    width: 16rem;
  }

  .h-64\@md,
  .hover\:h-64\@md:hover,
  .group:hover .group-hover\:h-64\@md {
    height: 16rem;
  }

  .min-w-64\@md {
    min-width: 16rem;
  }

  .min-h-64\@md {
    min-height: 16rem;
  }

  .max-w-64\@md {
    max-width: 16rem;
  }

  .max-h-64\@md {
    max-height: 16rem;
  }

  .w-120\@md,
  .hover\:w-120\@md:hover,
  .group:hover .group-hover\:w-120\@md {
    width: 30rem;
  }

  .h-120\@md,
  .hover\:h-120\@md:hover,
  .group:hover .group-hover\:h-120\@md {
    height: 30rem;
  }

  .min-w-120\@md {
    min-width: 30rem;
  }

  .min-h-120\@md {
    min-height: 30rem;
  }

  .max-w-120\@md {
    max-width: 30rem;
  }

  .max-h-120\@md {
    max-height: 30rem;
  }
}

.w-lg {
  width: 1024px;
}

.min-w-lg {
  min-width: 1024px;
}

.max-w-lg {
  max-width: 1024px;
}

.w-auto\@lg {
  width: auto;
}

.w-full\@lg {
  width: 100%;
}

.h-auto\@lg {
  height: auto;
}

.h-full\@lg {
  height: 100%;
}

.w-min\@lg {
  width: min-content;
}

.h-min\@lg {
  height: min-content;
}

.w-fit\@lg {
  width: fit-content;
}

.h-fit\@lg {
  height: fit-content;
}

@media screen and (min-width: 1024px) {

  .w-0p\@lg,
  .hover\:w-0p\@lg:hover,
  .group:hover .group-hover\:w-0p\@lg {
    width: 0%;
  }

  .h-0p\@lg,
  .hover\:h-0p\@lg:hover,
  .group:hover .group-hover\:h-0p\@lg {
    height: 0%;
  }

  .min-w-0p\@lg {
    min-width: 0%;
  }

  .min-h-0p\@lg {
    min-height: 0%;
  }

  .max-w-0p\@lg {
    max-width: 0%;
  }

  .max-h-0p\@lg {
    max-height: 0%;
  }

  .w-5p\@lg,
  .hover\:w-5p\@lg:hover,
  .group:hover .group-hover\:w-5p\@lg {
    width: 5%;
  }

  .h-5p\@lg,
  .hover\:h-5p\@lg:hover,
  .group:hover .group-hover\:h-5p\@lg {
    height: 5%;
  }

  .min-w-5p\@lg {
    min-width: 5%;
  }

  .min-h-5p\@lg {
    min-height: 5%;
  }

  .max-w-5p\@lg {
    max-width: 5%;
  }

  .max-h-5p\@lg {
    max-height: 5%;
  }

  .w-10p\@lg,
  .hover\:w-10p\@lg:hover,
  .group:hover .group-hover\:w-10p\@lg {
    width: 10%;
  }

  .h-10p\@lg,
  .hover\:h-10p\@lg:hover,
  .group:hover .group-hover\:h-10p\@lg {
    height: 10%;
  }

  .min-w-10p\@lg {
    min-width: 10%;
  }

  .min-h-10p\@lg {
    min-height: 10%;
  }

  .max-w-10p\@lg {
    max-width: 10%;
  }

  .max-h-10p\@lg {
    max-height: 10%;
  }

  .w-20p\@lg,
  .hover\:w-20p\@lg:hover,
  .group:hover .group-hover\:w-20p\@lg {
    width: 20%;
  }

  .h-20p\@lg,
  .hover\:h-20p\@lg:hover,
  .group:hover .group-hover\:h-20p\@lg {
    height: 20%;
  }

  .min-w-20p\@lg {
    min-width: 20%;
  }

  .min-h-20p\@lg {
    min-height: 20%;
  }

  .max-w-20p\@lg {
    max-width: 20%;
  }

  .max-h-20p\@lg {
    max-height: 20%;
  }

  .w-25p\@lg,
  .hover\:w-25p\@lg:hover,
  .group:hover .group-hover\:w-25p\@lg {
    width: 25%;
  }

  .h-25p\@lg,
  .hover\:h-25p\@lg:hover,
  .group:hover .group-hover\:h-25p\@lg {
    height: 25%;
  }

  .min-w-25p\@lg {
    min-width: 25%;
  }

  .min-h-25p\@lg {
    min-height: 25%;
  }

  .max-w-25p\@lg {
    max-width: 25%;
  }

  .max-h-25p\@lg {
    max-height: 25%;
  }

  .w-30p\@lg,
  .hover\:w-30p\@lg:hover,
  .group:hover .group-hover\:w-30p\@lg {
    width: 30%;
  }

  .h-30p\@lg,
  .hover\:h-30p\@lg:hover,
  .group:hover .group-hover\:h-30p\@lg {
    height: 30%;
  }

  .min-w-30p\@lg {
    min-width: 30%;
  }

  .min-h-30p\@lg {
    min-height: 30%;
  }

  .max-w-30p\@lg {
    max-width: 30%;
  }

  .max-h-30p\@lg {
    max-height: 30%;
  }

  .w-40p\@lg,
  .hover\:w-40p\@lg:hover,
  .group:hover .group-hover\:w-40p\@lg {
    width: 40%;
  }

  .h-40p\@lg,
  .hover\:h-40p\@lg:hover,
  .group:hover .group-hover\:h-40p\@lg {
    height: 40%;
  }

  .min-w-40p\@lg {
    min-width: 40%;
  }

  .min-h-40p\@lg {
    min-height: 40%;
  }

  .max-w-40p\@lg {
    max-width: 40%;
  }

  .max-h-40p\@lg {
    max-height: 40%;
  }

  .w-50p\@lg,
  .hover\:w-50p\@lg:hover,
  .group:hover .group-hover\:w-50p\@lg {
    width: 50%;
  }

  .h-50p\@lg,
  .hover\:h-50p\@lg:hover,
  .group:hover .group-hover\:h-50p\@lg {
    height: 50%;
  }

  .min-w-50p\@lg {
    min-width: 50%;
  }

  .min-h-50p\@lg {
    min-height: 50%;
  }

  .max-w-50p\@lg {
    max-width: 50%;
  }

  .max-h-50p\@lg {
    max-height: 50%;
  }

  .w-60p\@lg,
  .hover\:w-60p\@lg:hover,
  .group:hover .group-hover\:w-60p\@lg {
    width: 60%;
  }

  .h-60p\@lg,
  .hover\:h-60p\@lg:hover,
  .group:hover .group-hover\:h-60p\@lg {
    height: 60%;
  }

  .min-w-60p\@lg {
    min-width: 60%;
  }

  .min-h-60p\@lg {
    min-height: 60%;
  }

  .max-w-60p\@lg {
    max-width: 60%;
  }

  .max-h-60p\@lg {
    max-height: 60%;
  }

  .w-70p\@lg,
  .hover\:w-70p\@lg:hover,
  .group:hover .group-hover\:w-70p\@lg {
    width: 70%;
  }

  .h-70p\@lg,
  .hover\:h-70p\@lg:hover,
  .group:hover .group-hover\:h-70p\@lg {
    height: 70%;
  }

  .min-w-70p\@lg {
    min-width: 70%;
  }

  .min-h-70p\@lg {
    min-height: 70%;
  }

  .max-w-70p\@lg {
    max-width: 70%;
  }

  .max-h-70p\@lg {
    max-height: 70%;
  }

  .w-75p\@lg,
  .hover\:w-75p\@lg:hover,
  .group:hover .group-hover\:w-75p\@lg {
    width: 75%;
  }

  .h-75p\@lg,
  .hover\:h-75p\@lg:hover,
  .group:hover .group-hover\:h-75p\@lg {
    height: 75%;
  }

  .min-w-75p\@lg {
    min-width: 75%;
  }

  .min-h-75p\@lg {
    min-height: 75%;
  }

  .max-w-75p\@lg {
    max-width: 75%;
  }

  .max-h-75p\@lg {
    max-height: 75%;
  }

  .w-80p\@lg,
  .hover\:w-80p\@lg:hover,
  .group:hover .group-hover\:w-80p\@lg {
    width: 80%;
  }

  .h-80p\@lg,
  .hover\:h-80p\@lg:hover,
  .group:hover .group-hover\:h-80p\@lg {
    height: 80%;
  }

  .min-w-80p\@lg {
    min-width: 80%;
  }

  .min-h-80p\@lg {
    min-height: 80%;
  }

  .max-w-80p\@lg {
    max-width: 80%;
  }

  .max-h-80p\@lg {
    max-height: 80%;
  }

  .w-90p\@lg,
  .hover\:w-90p\@lg:hover,
  .group:hover .group-hover\:w-90p\@lg {
    width: 90%;
  }

  .h-90p\@lg,
  .hover\:h-90p\@lg:hover,
  .group:hover .group-hover\:h-90p\@lg {
    height: 90%;
  }

  .min-w-90p\@lg {
    min-width: 90%;
  }

  .min-h-90p\@lg {
    min-height: 90%;
  }

  .max-w-90p\@lg {
    max-width: 90%;
  }

  .max-h-90p\@lg {
    max-height: 90%;
  }

  .w-100p\@lg,
  .hover\:w-100p\@lg:hover,
  .group:hover .group-hover\:w-100p\@lg {
    width: 100%;
  }

  .h-100p\@lg,
  .hover\:h-100p\@lg:hover,
  .group:hover .group-hover\:h-100p\@lg {
    height: 100%;
  }

  .min-w-100p\@lg {
    min-width: 100%;
  }

  .min-h-100p\@lg {
    min-height: 100%;
  }

  .max-w-100p\@lg {
    max-width: 100%;
  }

  .max-h-100p\@lg {
    max-height: 100%;
  }

  .w-0\@lg,
  .hover\:w-0\@lg:hover,
  .group:hover .group-hover\:w-0\@lg {
    width: 0px;
  }

  .h-0\@lg,
  .hover\:h-0\@lg:hover,
  .group:hover .group-hover\:h-0\@lg {
    height: 0px;
  }

  .min-w-0\@lg {
    min-width: 0px;
  }

  .min-h-0\@lg {
    min-height: 0px;
  }

  .max-w-0\@lg {
    max-width: 0px;
  }

  .max-h-0\@lg {
    max-height: 0px;
  }

  .w-1\@lg,
  .hover\:w-1\@lg:hover,
  .group:hover .group-hover\:w-1\@lg {
    width: 0.25rem;
  }

  .h-1\@lg,
  .hover\:h-1\@lg:hover,
  .group:hover .group-hover\:h-1\@lg {
    height: 0.25rem;
  }

  .min-w-1\@lg {
    min-width: 0.25rem;
  }

  .min-h-1\@lg {
    min-height: 0.25rem;
  }

  .max-w-1\@lg {
    max-width: 0.25rem;
  }

  .max-h-1\@lg {
    max-height: 0.25rem;
  }

  .w-2\@lg,
  .hover\:w-2\@lg:hover,
  .group:hover .group-hover\:w-2\@lg {
    width: 0.5rem;
  }

  .h-2\@lg,
  .hover\:h-2\@lg:hover,
  .group:hover .group-hover\:h-2\@lg {
    height: 0.5rem;
  }

  .min-w-2\@lg {
    min-width: 0.5rem;
  }

  .min-h-2\@lg {
    min-height: 0.5rem;
  }

  .max-w-2\@lg {
    max-width: 0.5rem;
  }

  .max-h-2\@lg {
    max-height: 0.5rem;
  }

  .w-3\@lg,
  .hover\:w-3\@lg:hover,
  .group:hover .group-hover\:w-3\@lg {
    width: 0.75rem;
  }

  .h-3\@lg,
  .hover\:h-3\@lg:hover,
  .group:hover .group-hover\:h-3\@lg {
    height: 0.75rem;
  }

  .min-w-3\@lg {
    min-width: 0.75rem;
  }

  .min-h-3\@lg {
    min-height: 0.75rem;
  }

  .max-w-3\@lg {
    max-width: 0.75rem;
  }

  .max-h-3\@lg {
    max-height: 0.75rem;
  }

  .w-4\@lg,
  .hover\:w-4\@lg:hover,
  .group:hover .group-hover\:w-4\@lg {
    width: 1rem;
  }

  .h-4\@lg,
  .hover\:h-4\@lg:hover,
  .group:hover .group-hover\:h-4\@lg {
    height: 1rem;
  }

  .min-w-4\@lg {
    min-width: 1rem;
  }

  .min-h-4\@lg {
    min-height: 1rem;
  }

  .max-w-4\@lg {
    max-width: 1rem;
  }

  .max-h-4\@lg {
    max-height: 1rem;
  }

  .w-5\@lg,
  .hover\:w-5\@lg:hover,
  .group:hover .group-hover\:w-5\@lg {
    width: 1.25rem;
  }

  .h-5\@lg,
  .hover\:h-5\@lg:hover,
  .group:hover .group-hover\:h-5\@lg {
    height: 1.25rem;
  }

  .min-w-5\@lg {
    min-width: 1.25rem;
  }

  .min-h-5\@lg {
    min-height: 1.25rem;
  }

  .max-w-5\@lg {
    max-width: 1.25rem;
  }

  .max-h-5\@lg {
    max-height: 1.25rem;
  }

  .w-6\@lg,
  .hover\:w-6\@lg:hover,
  .group:hover .group-hover\:w-6\@lg {
    width: 1.5rem;
  }

  .h-6\@lg,
  .hover\:h-6\@lg:hover,
  .group:hover .group-hover\:h-6\@lg {
    height: 1.5rem;
  }

  .min-w-6\@lg {
    min-width: 1.5rem;
  }

  .min-h-6\@lg {
    min-height: 1.5rem;
  }

  .max-w-6\@lg {
    max-width: 1.5rem;
  }

  .max-h-6\@lg {
    max-height: 1.5rem;
  }

  .w-8\@lg,
  .hover\:w-8\@lg:hover,
  .group:hover .group-hover\:w-8\@lg {
    width: 2rem;
  }

  .h-8\@lg,
  .hover\:h-8\@lg:hover,
  .group:hover .group-hover\:h-8\@lg {
    height: 2rem;
  }

  .min-w-8\@lg {
    min-width: 2rem;
  }

  .min-h-8\@lg {
    min-height: 2rem;
  }

  .max-w-8\@lg {
    max-width: 2rem;
  }

  .max-h-8\@lg {
    max-height: 2rem;
  }

  .w-10\@lg,
  .hover\:w-10\@lg:hover,
  .group:hover .group-hover\:w-10\@lg {
    width: 2.5rem;
  }

  .h-10\@lg,
  .hover\:h-10\@lg:hover,
  .group:hover .group-hover\:h-10\@lg {
    height: 2.5rem;
  }

  .min-w-10\@lg {
    min-width: 2.5rem;
  }

  .min-h-10\@lg {
    min-height: 2.5rem;
  }

  .max-w-10\@lg {
    max-width: 2.5rem;
  }

  .max-h-10\@lg {
    max-height: 2.5rem;
  }

  .w-12\@lg,
  .hover\:w-12\@lg:hover,
  .group:hover .group-hover\:w-12\@lg {
    width: 3rem;
  }

  .h-12\@lg,
  .hover\:h-12\@lg:hover,
  .group:hover .group-hover\:h-12\@lg {
    height: 3rem;
  }

  .min-w-12\@lg {
    min-width: 3rem;
  }

  .min-h-12\@lg {
    min-height: 3rem;
  }

  .max-w-12\@lg {
    max-width: 3rem;
  }

  .max-h-12\@lg {
    max-height: 3rem;
  }

  .w-16\@lg,
  .hover\:w-16\@lg:hover,
  .group:hover .group-hover\:w-16\@lg {
    width: 4rem;
  }

  .h-16\@lg,
  .hover\:h-16\@lg:hover,
  .group:hover .group-hover\:h-16\@lg {
    height: 4rem;
  }

  .min-w-16\@lg {
    min-width: 4rem;
  }

  .min-h-16\@lg {
    min-height: 4rem;
  }

  .max-w-16\@lg {
    max-width: 4rem;
  }

  .max-h-16\@lg {
    max-height: 4rem;
  }

  .w-20\@lg,
  .hover\:w-20\@lg:hover,
  .group:hover .group-hover\:w-20\@lg {
    width: 5rem;
  }

  .h-20\@lg,
  .hover\:h-20\@lg:hover,
  .group:hover .group-hover\:h-20\@lg {
    height: 5rem;
  }

  .min-w-20\@lg {
    min-width: 5rem;
  }

  .min-h-20\@lg {
    min-height: 5rem;
  }

  .max-w-20\@lg {
    max-width: 5rem;
  }

  .max-h-20\@lg {
    max-height: 5rem;
  }

  .w-24\@lg,
  .hover\:w-24\@lg:hover,
  .group:hover .group-hover\:w-24\@lg {
    width: 6rem;
  }

  .h-24\@lg,
  .hover\:h-24\@lg:hover,
  .group:hover .group-hover\:h-24\@lg {
    height: 6rem;
  }

  .min-w-24\@lg {
    min-width: 6rem;
  }

  .min-h-24\@lg {
    min-height: 6rem;
  }

  .max-w-24\@lg {
    max-width: 6rem;
  }

  .max-h-24\@lg {
    max-height: 6rem;
  }

  .w-32\@lg,
  .hover\:w-32\@lg:hover,
  .group:hover .group-hover\:w-32\@lg {
    width: 8rem;
  }

  .h-32\@lg,
  .hover\:h-32\@lg:hover,
  .group:hover .group-hover\:h-32\@lg {
    height: 8rem;
  }

  .min-w-32\@lg {
    min-width: 8rem;
  }

  .min-h-32\@lg {
    min-height: 8rem;
  }

  .max-w-32\@lg {
    max-width: 8rem;
  }

  .max-h-32\@lg {
    max-height: 8rem;
  }

  .w-40\@lg,
  .hover\:w-40\@lg:hover,
  .group:hover .group-hover\:w-40\@lg {
    width: 10rem;
  }

  .h-40\@lg,
  .hover\:h-40\@lg:hover,
  .group:hover .group-hover\:h-40\@lg {
    height: 10rem;
  }

  .min-w-40\@lg {
    min-width: 10rem;
  }

  .min-h-40\@lg {
    min-height: 10rem;
  }

  .max-w-40\@lg {
    max-width: 10rem;
  }

  .max-h-40\@lg {
    max-height: 10rem;
  }

  .w-48\@lg,
  .hover\:w-48\@lg:hover,
  .group:hover .group-hover\:w-48\@lg {
    width: 12rem;
  }

  .h-48\@lg,
  .hover\:h-48\@lg:hover,
  .group:hover .group-hover\:h-48\@lg {
    height: 12rem;
  }

  .min-w-48\@lg {
    min-width: 12rem;
  }

  .min-h-48\@lg {
    min-height: 12rem;
  }

  .max-w-48\@lg {
    max-width: 12rem;
  }

  .max-h-48\@lg {
    max-height: 12rem;
  }

  .w-56\@lg,
  .hover\:w-56\@lg:hover,
  .group:hover .group-hover\:w-56\@lg {
    width: 14rem;
  }

  .h-56\@lg,
  .hover\:h-56\@lg:hover,
  .group:hover .group-hover\:h-56\@lg {
    height: 14rem;
  }

  .min-w-56\@lg {
    min-width: 14rem;
  }

  .min-h-56\@lg {
    min-height: 14rem;
  }

  .max-w-56\@lg {
    max-width: 14rem;
  }

  .max-h-56\@lg {
    max-height: 14rem;
  }

  .w-64\@lg,
  .hover\:w-64\@lg:hover,
  .group:hover .group-hover\:w-64\@lg {
    width: 16rem;
  }

  .h-64\@lg,
  .hover\:h-64\@lg:hover,
  .group:hover .group-hover\:h-64\@lg {
    height: 16rem;
  }

  .min-w-64\@lg {
    min-width: 16rem;
  }

  .min-h-64\@lg {
    min-height: 16rem;
  }

  .max-w-64\@lg {
    max-width: 16rem;
  }

  .max-h-64\@lg {
    max-height: 16rem;
  }

  .w-120\@lg,
  .hover\:w-120\@lg:hover,
  .group:hover .group-hover\:w-120\@lg {
    width: 30rem;
  }

  .h-120\@lg,
  .hover\:h-120\@lg:hover,
  .group:hover .group-hover\:h-120\@lg {
    height: 30rem;
  }

  .min-w-120\@lg {
    min-width: 30rem;
  }

  .min-h-120\@lg {
    min-height: 30rem;
  }

  .max-w-120\@lg {
    max-width: 30rem;
  }

  .max-h-120\@lg {
    max-height: 30rem;
  }
}

.w-xl {
  width: 1280px;
}

.min-w-xl {
  min-width: 1280px;
}

.max-w-xl {
  max-width: 1280px;
}

.w-auto\@xl {
  width: auto;
}

.w-full\@xl {
  width: 100%;
}

.h-auto\@xl {
  height: auto;
}

.h-full\@xl {
  height: 100%;
}

.w-min\@xl {
  width: min-content;
}

.h-min\@xl {
  height: min-content;
}

.w-fit\@xl {
  width: fit-content;
}

.h-fit\@xl {
  height: fit-content;
}

@media screen and (min-width: 1280px) {

  .w-0p\@xl,
  .hover\:w-0p\@xl:hover,
  .group:hover .group-hover\:w-0p\@xl {
    width: 0%;
  }

  .h-0p\@xl,
  .hover\:h-0p\@xl:hover,
  .group:hover .group-hover\:h-0p\@xl {
    height: 0%;
  }

  .min-w-0p\@xl {
    min-width: 0%;
  }

  .min-h-0p\@xl {
    min-height: 0%;
  }

  .max-w-0p\@xl {
    max-width: 0%;
  }

  .max-h-0p\@xl {
    max-height: 0%;
  }

  .w-5p\@xl,
  .hover\:w-5p\@xl:hover,
  .group:hover .group-hover\:w-5p\@xl {
    width: 5%;
  }

  .h-5p\@xl,
  .hover\:h-5p\@xl:hover,
  .group:hover .group-hover\:h-5p\@xl {
    height: 5%;
  }

  .min-w-5p\@xl {
    min-width: 5%;
  }

  .min-h-5p\@xl {
    min-height: 5%;
  }

  .max-w-5p\@xl {
    max-width: 5%;
  }

  .max-h-5p\@xl {
    max-height: 5%;
  }

  .w-10p\@xl,
  .hover\:w-10p\@xl:hover,
  .group:hover .group-hover\:w-10p\@xl {
    width: 10%;
  }

  .h-10p\@xl,
  .hover\:h-10p\@xl:hover,
  .group:hover .group-hover\:h-10p\@xl {
    height: 10%;
  }

  .min-w-10p\@xl {
    min-width: 10%;
  }

  .min-h-10p\@xl {
    min-height: 10%;
  }

  .max-w-10p\@xl {
    max-width: 10%;
  }

  .max-h-10p\@xl {
    max-height: 10%;
  }

  .w-20p\@xl,
  .hover\:w-20p\@xl:hover,
  .group:hover .group-hover\:w-20p\@xl {
    width: 20%;
  }

  .h-20p\@xl,
  .hover\:h-20p\@xl:hover,
  .group:hover .group-hover\:h-20p\@xl {
    height: 20%;
  }

  .min-w-20p\@xl {
    min-width: 20%;
  }

  .min-h-20p\@xl {
    min-height: 20%;
  }

  .max-w-20p\@xl {
    max-width: 20%;
  }

  .max-h-20p\@xl {
    max-height: 20%;
  }

  .w-25p\@xl,
  .hover\:w-25p\@xl:hover,
  .group:hover .group-hover\:w-25p\@xl {
    width: 25%;
  }

  .h-25p\@xl,
  .hover\:h-25p\@xl:hover,
  .group:hover .group-hover\:h-25p\@xl {
    height: 25%;
  }

  .min-w-25p\@xl {
    min-width: 25%;
  }

  .min-h-25p\@xl {
    min-height: 25%;
  }

  .max-w-25p\@xl {
    max-width: 25%;
  }

  .max-h-25p\@xl {
    max-height: 25%;
  }

  .w-30p\@xl,
  .hover\:w-30p\@xl:hover,
  .group:hover .group-hover\:w-30p\@xl {
    width: 30%;
  }

  .h-30p\@xl,
  .hover\:h-30p\@xl:hover,
  .group:hover .group-hover\:h-30p\@xl {
    height: 30%;
  }

  .min-w-30p\@xl {
    min-width: 30%;
  }

  .min-h-30p\@xl {
    min-height: 30%;
  }

  .max-w-30p\@xl {
    max-width: 30%;
  }

  .max-h-30p\@xl {
    max-height: 30%;
  }

  .w-40p\@xl,
  .hover\:w-40p\@xl:hover,
  .group:hover .group-hover\:w-40p\@xl {
    width: 40%;
  }

  .h-40p\@xl,
  .hover\:h-40p\@xl:hover,
  .group:hover .group-hover\:h-40p\@xl {
    height: 40%;
  }

  .min-w-40p\@xl {
    min-width: 40%;
  }

  .min-h-40p\@xl {
    min-height: 40%;
  }

  .max-w-40p\@xl {
    max-width: 40%;
  }

  .max-h-40p\@xl {
    max-height: 40%;
  }

  .w-50p\@xl,
  .hover\:w-50p\@xl:hover,
  .group:hover .group-hover\:w-50p\@xl {
    width: 50%;
  }

  .h-50p\@xl,
  .hover\:h-50p\@xl:hover,
  .group:hover .group-hover\:h-50p\@xl {
    height: 50%;
  }

  .min-w-50p\@xl {
    min-width: 50%;
  }

  .min-h-50p\@xl {
    min-height: 50%;
  }

  .max-w-50p\@xl {
    max-width: 50%;
  }

  .max-h-50p\@xl {
    max-height: 50%;
  }

  .w-60p\@xl,
  .hover\:w-60p\@xl:hover,
  .group:hover .group-hover\:w-60p\@xl {
    width: 60%;
  }

  .h-60p\@xl,
  .hover\:h-60p\@xl:hover,
  .group:hover .group-hover\:h-60p\@xl {
    height: 60%;
  }

  .min-w-60p\@xl {
    min-width: 60%;
  }

  .min-h-60p\@xl {
    min-height: 60%;
  }

  .max-w-60p\@xl {
    max-width: 60%;
  }

  .max-h-60p\@xl {
    max-height: 60%;
  }

  .w-70p\@xl,
  .hover\:w-70p\@xl:hover,
  .group:hover .group-hover\:w-70p\@xl {
    width: 70%;
  }

  .h-70p\@xl,
  .hover\:h-70p\@xl:hover,
  .group:hover .group-hover\:h-70p\@xl {
    height: 70%;
  }

  .min-w-70p\@xl {
    min-width: 70%;
  }

  .min-h-70p\@xl {
    min-height: 70%;
  }

  .max-w-70p\@xl {
    max-width: 70%;
  }

  .max-h-70p\@xl {
    max-height: 70%;
  }

  .w-75p\@xl,
  .hover\:w-75p\@xl:hover,
  .group:hover .group-hover\:w-75p\@xl {
    width: 75%;
  }

  .h-75p\@xl,
  .hover\:h-75p\@xl:hover,
  .group:hover .group-hover\:h-75p\@xl {
    height: 75%;
  }

  .min-w-75p\@xl {
    min-width: 75%;
  }

  .min-h-75p\@xl {
    min-height: 75%;
  }

  .max-w-75p\@xl {
    max-width: 75%;
  }

  .max-h-75p\@xl {
    max-height: 75%;
  }

  .w-80p\@xl,
  .hover\:w-80p\@xl:hover,
  .group:hover .group-hover\:w-80p\@xl {
    width: 80%;
  }

  .h-80p\@xl,
  .hover\:h-80p\@xl:hover,
  .group:hover .group-hover\:h-80p\@xl {
    height: 80%;
  }

  .min-w-80p\@xl {
    min-width: 80%;
  }

  .min-h-80p\@xl {
    min-height: 80%;
  }

  .max-w-80p\@xl {
    max-width: 80%;
  }

  .max-h-80p\@xl {
    max-height: 80%;
  }

  .w-90p\@xl,
  .hover\:w-90p\@xl:hover,
  .group:hover .group-hover\:w-90p\@xl {
    width: 90%;
  }

  .h-90p\@xl,
  .hover\:h-90p\@xl:hover,
  .group:hover .group-hover\:h-90p\@xl {
    height: 90%;
  }

  .min-w-90p\@xl {
    min-width: 90%;
  }

  .min-h-90p\@xl {
    min-height: 90%;
  }

  .max-w-90p\@xl {
    max-width: 90%;
  }

  .max-h-90p\@xl {
    max-height: 90%;
  }

  .w-100p\@xl,
  .hover\:w-100p\@xl:hover,
  .group:hover .group-hover\:w-100p\@xl {
    width: 100%;
  }

  .h-100p\@xl,
  .hover\:h-100p\@xl:hover,
  .group:hover .group-hover\:h-100p\@xl {
    height: 100%;
  }

  .min-w-100p\@xl {
    min-width: 100%;
  }

  .min-h-100p\@xl {
    min-height: 100%;
  }

  .max-w-100p\@xl {
    max-width: 100%;
  }

  .max-h-100p\@xl {
    max-height: 100%;
  }

  .w-0\@xl,
  .hover\:w-0\@xl:hover,
  .group:hover .group-hover\:w-0\@xl {
    width: 0px;
  }

  .h-0\@xl,
  .hover\:h-0\@xl:hover,
  .group:hover .group-hover\:h-0\@xl {
    height: 0px;
  }

  .min-w-0\@xl {
    min-width: 0px;
  }

  .min-h-0\@xl {
    min-height: 0px;
  }

  .max-w-0\@xl {
    max-width: 0px;
  }

  .max-h-0\@xl {
    max-height: 0px;
  }

  .w-1\@xl,
  .hover\:w-1\@xl:hover,
  .group:hover .group-hover\:w-1\@xl {
    width: 0.25rem;
  }

  .h-1\@xl,
  .hover\:h-1\@xl:hover,
  .group:hover .group-hover\:h-1\@xl {
    height: 0.25rem;
  }

  .min-w-1\@xl {
    min-width: 0.25rem;
  }

  .min-h-1\@xl {
    min-height: 0.25rem;
  }

  .max-w-1\@xl {
    max-width: 0.25rem;
  }

  .max-h-1\@xl {
    max-height: 0.25rem;
  }

  .w-2\@xl,
  .hover\:w-2\@xl:hover,
  .group:hover .group-hover\:w-2\@xl {
    width: 0.5rem;
  }

  .h-2\@xl,
  .hover\:h-2\@xl:hover,
  .group:hover .group-hover\:h-2\@xl {
    height: 0.5rem;
  }

  .min-w-2\@xl {
    min-width: 0.5rem;
  }

  .min-h-2\@xl {
    min-height: 0.5rem;
  }

  .max-w-2\@xl {
    max-width: 0.5rem;
  }

  .max-h-2\@xl {
    max-height: 0.5rem;
  }

  .w-3\@xl,
  .hover\:w-3\@xl:hover,
  .group:hover .group-hover\:w-3\@xl {
    width: 0.75rem;
  }

  .h-3\@xl,
  .hover\:h-3\@xl:hover,
  .group:hover .group-hover\:h-3\@xl {
    height: 0.75rem;
  }

  .min-w-3\@xl {
    min-width: 0.75rem;
  }

  .min-h-3\@xl {
    min-height: 0.75rem;
  }

  .max-w-3\@xl {
    max-width: 0.75rem;
  }

  .max-h-3\@xl {
    max-height: 0.75rem;
  }

  .w-4\@xl,
  .hover\:w-4\@xl:hover,
  .group:hover .group-hover\:w-4\@xl {
    width: 1rem;
  }

  .h-4\@xl,
  .hover\:h-4\@xl:hover,
  .group:hover .group-hover\:h-4\@xl {
    height: 1rem;
  }

  .min-w-4\@xl {
    min-width: 1rem;
  }

  .min-h-4\@xl {
    min-height: 1rem;
  }

  .max-w-4\@xl {
    max-width: 1rem;
  }

  .max-h-4\@xl {
    max-height: 1rem;
  }

  .w-5\@xl,
  .hover\:w-5\@xl:hover,
  .group:hover .group-hover\:w-5\@xl {
    width: 1.25rem;
  }

  .h-5\@xl,
  .hover\:h-5\@xl:hover,
  .group:hover .group-hover\:h-5\@xl {
    height: 1.25rem;
  }

  .min-w-5\@xl {
    min-width: 1.25rem;
  }

  .min-h-5\@xl {
    min-height: 1.25rem;
  }

  .max-w-5\@xl {
    max-width: 1.25rem;
  }

  .max-h-5\@xl {
    max-height: 1.25rem;
  }

  .w-6\@xl,
  .hover\:w-6\@xl:hover,
  .group:hover .group-hover\:w-6\@xl {
    width: 1.5rem;
  }

  .h-6\@xl,
  .hover\:h-6\@xl:hover,
  .group:hover .group-hover\:h-6\@xl {
    height: 1.5rem;
  }

  .min-w-6\@xl {
    min-width: 1.5rem;
  }

  .min-h-6\@xl {
    min-height: 1.5rem;
  }

  .max-w-6\@xl {
    max-width: 1.5rem;
  }

  .max-h-6\@xl {
    max-height: 1.5rem;
  }

  .w-8\@xl,
  .hover\:w-8\@xl:hover,
  .group:hover .group-hover\:w-8\@xl {
    width: 2rem;
  }

  .h-8\@xl,
  .hover\:h-8\@xl:hover,
  .group:hover .group-hover\:h-8\@xl {
    height: 2rem;
  }

  .min-w-8\@xl {
    min-width: 2rem;
  }

  .min-h-8\@xl {
    min-height: 2rem;
  }

  .max-w-8\@xl {
    max-width: 2rem;
  }

  .max-h-8\@xl {
    max-height: 2rem;
  }

  .w-10\@xl,
  .hover\:w-10\@xl:hover,
  .group:hover .group-hover\:w-10\@xl {
    width: 2.5rem;
  }

  .h-10\@xl,
  .hover\:h-10\@xl:hover,
  .group:hover .group-hover\:h-10\@xl {
    height: 2.5rem;
  }

  .min-w-10\@xl {
    min-width: 2.5rem;
  }

  .min-h-10\@xl {
    min-height: 2.5rem;
  }

  .max-w-10\@xl {
    max-width: 2.5rem;
  }

  .max-h-10\@xl {
    max-height: 2.5rem;
  }

  .w-12\@xl,
  .hover\:w-12\@xl:hover,
  .group:hover .group-hover\:w-12\@xl {
    width: 3rem;
  }

  .h-12\@xl,
  .hover\:h-12\@xl:hover,
  .group:hover .group-hover\:h-12\@xl {
    height: 3rem;
  }

  .min-w-12\@xl {
    min-width: 3rem;
  }

  .min-h-12\@xl {
    min-height: 3rem;
  }

  .max-w-12\@xl {
    max-width: 3rem;
  }

  .max-h-12\@xl {
    max-height: 3rem;
  }

  .w-16\@xl,
  .hover\:w-16\@xl:hover,
  .group:hover .group-hover\:w-16\@xl {
    width: 4rem;
  }

  .h-16\@xl,
  .hover\:h-16\@xl:hover,
  .group:hover .group-hover\:h-16\@xl {
    height: 4rem;
  }

  .min-w-16\@xl {
    min-width: 4rem;
  }

  .min-h-16\@xl {
    min-height: 4rem;
  }

  .max-w-16\@xl {
    max-width: 4rem;
  }

  .max-h-16\@xl {
    max-height: 4rem;
  }

  .w-20\@xl,
  .hover\:w-20\@xl:hover,
  .group:hover .group-hover\:w-20\@xl {
    width: 5rem;
  }

  .h-20\@xl,
  .hover\:h-20\@xl:hover,
  .group:hover .group-hover\:h-20\@xl {
    height: 5rem;
  }

  .min-w-20\@xl {
    min-width: 5rem;
  }

  .min-h-20\@xl {
    min-height: 5rem;
  }

  .max-w-20\@xl {
    max-width: 5rem;
  }

  .max-h-20\@xl {
    max-height: 5rem;
  }

  .w-24\@xl,
  .hover\:w-24\@xl:hover,
  .group:hover .group-hover\:w-24\@xl {
    width: 6rem;
  }

  .h-24\@xl,
  .hover\:h-24\@xl:hover,
  .group:hover .group-hover\:h-24\@xl {
    height: 6rem;
  }

  .min-w-24\@xl {
    min-width: 6rem;
  }

  .min-h-24\@xl {
    min-height: 6rem;
  }

  .max-w-24\@xl {
    max-width: 6rem;
  }

  .max-h-24\@xl {
    max-height: 6rem;
  }

  .w-32\@xl,
  .hover\:w-32\@xl:hover,
  .group:hover .group-hover\:w-32\@xl {
    width: 8rem;
  }

  .h-32\@xl,
  .hover\:h-32\@xl:hover,
  .group:hover .group-hover\:h-32\@xl {
    height: 8rem;
  }

  .min-w-32\@xl {
    min-width: 8rem;
  }

  .min-h-32\@xl {
    min-height: 8rem;
  }

  .max-w-32\@xl {
    max-width: 8rem;
  }

  .max-h-32\@xl {
    max-height: 8rem;
  }

  .w-40\@xl,
  .hover\:w-40\@xl:hover,
  .group:hover .group-hover\:w-40\@xl {
    width: 10rem;
  }

  .h-40\@xl,
  .hover\:h-40\@xl:hover,
  .group:hover .group-hover\:h-40\@xl {
    height: 10rem;
  }

  .min-w-40\@xl {
    min-width: 10rem;
  }

  .min-h-40\@xl {
    min-height: 10rem;
  }

  .max-w-40\@xl {
    max-width: 10rem;
  }

  .max-h-40\@xl {
    max-height: 10rem;
  }

  .w-48\@xl,
  .hover\:w-48\@xl:hover,
  .group:hover .group-hover\:w-48\@xl {
    width: 12rem;
  }

  .h-48\@xl,
  .hover\:h-48\@xl:hover,
  .group:hover .group-hover\:h-48\@xl {
    height: 12rem;
  }

  .min-w-48\@xl {
    min-width: 12rem;
  }

  .min-h-48\@xl {
    min-height: 12rem;
  }

  .max-w-48\@xl {
    max-width: 12rem;
  }

  .max-h-48\@xl {
    max-height: 12rem;
  }

  .w-56\@xl,
  .hover\:w-56\@xl:hover,
  .group:hover .group-hover\:w-56\@xl {
    width: 14rem;
  }

  .h-56\@xl,
  .hover\:h-56\@xl:hover,
  .group:hover .group-hover\:h-56\@xl {
    height: 14rem;
  }

  .min-w-56\@xl {
    min-width: 14rem;
  }

  .min-h-56\@xl {
    min-height: 14rem;
  }

  .max-w-56\@xl {
    max-width: 14rem;
  }

  .max-h-56\@xl {
    max-height: 14rem;
  }

  .w-64\@xl,
  .hover\:w-64\@xl:hover,
  .group:hover .group-hover\:w-64\@xl {
    width: 16rem;
  }

  .h-64\@xl,
  .hover\:h-64\@xl:hover,
  .group:hover .group-hover\:h-64\@xl {
    height: 16rem;
  }

  .min-w-64\@xl {
    min-width: 16rem;
  }

  .min-h-64\@xl {
    min-height: 16rem;
  }

  .max-w-64\@xl {
    max-width: 16rem;
  }

  .max-h-64\@xl {
    max-height: 16rem;
  }

  .w-120\@xl,
  .hover\:w-120\@xl:hover,
  .group:hover .group-hover\:w-120\@xl {
    width: 30rem;
  }

  .h-120\@xl,
  .hover\:h-120\@xl:hover,
  .group:hover .group-hover\:h-120\@xl {
    height: 30rem;
  }

  .min-w-120\@xl {
    min-width: 30rem;
  }

  .min-h-120\@xl {
    min-height: 30rem;
  }

  .max-w-120\@xl {
    max-width: 30rem;
  }

  .max-h-120\@xl {
    max-height: 30rem;
  }
}

.w-2xl {
  width: 1536px;
}

.min-w-2xl {
  min-width: 1536px;
}

.max-w-2xl {
  max-width: 1536px;
}

.w-auto\@2xl {
  width: auto;
}

.w-full\@2xl {
  width: 100%;
}

.h-auto\@2xl {
  height: auto;
}

.h-full\@2xl {
  height: 100%;
}

.w-min\@2xl {
  width: min-content;
}

.h-min\@2xl {
  height: min-content;
}

.w-fit\@2xl {
  width: fit-content;
}

.h-fit\@2xl {
  height: fit-content;
}

@media screen and (min-width: 1536px) {

  .w-0p\@2xl,
  .hover\:w-0p\@2xl:hover,
  .group:hover .group-hover\:w-0p\@2xl {
    width: 0%;
  }

  .h-0p\@2xl,
  .hover\:h-0p\@2xl:hover,
  .group:hover .group-hover\:h-0p\@2xl {
    height: 0%;
  }

  .min-w-0p\@2xl {
    min-width: 0%;
  }

  .min-h-0p\@2xl {
    min-height: 0%;
  }

  .max-w-0p\@2xl {
    max-width: 0%;
  }

  .max-h-0p\@2xl {
    max-height: 0%;
  }

  .w-5p\@2xl,
  .hover\:w-5p\@2xl:hover,
  .group:hover .group-hover\:w-5p\@2xl {
    width: 5%;
  }

  .h-5p\@2xl,
  .hover\:h-5p\@2xl:hover,
  .group:hover .group-hover\:h-5p\@2xl {
    height: 5%;
  }

  .min-w-5p\@2xl {
    min-width: 5%;
  }

  .min-h-5p\@2xl {
    min-height: 5%;
  }

  .max-w-5p\@2xl {
    max-width: 5%;
  }

  .max-h-5p\@2xl {
    max-height: 5%;
  }

  .w-10p\@2xl,
  .hover\:w-10p\@2xl:hover,
  .group:hover .group-hover\:w-10p\@2xl {
    width: 10%;
  }

  .h-10p\@2xl,
  .hover\:h-10p\@2xl:hover,
  .group:hover .group-hover\:h-10p\@2xl {
    height: 10%;
  }

  .min-w-10p\@2xl {
    min-width: 10%;
  }

  .min-h-10p\@2xl {
    min-height: 10%;
  }

  .max-w-10p\@2xl {
    max-width: 10%;
  }

  .max-h-10p\@2xl {
    max-height: 10%;
  }

  .w-20p\@2xl,
  .hover\:w-20p\@2xl:hover,
  .group:hover .group-hover\:w-20p\@2xl {
    width: 20%;
  }

  .h-20p\@2xl,
  .hover\:h-20p\@2xl:hover,
  .group:hover .group-hover\:h-20p\@2xl {
    height: 20%;
  }

  .min-w-20p\@2xl {
    min-width: 20%;
  }

  .min-h-20p\@2xl {
    min-height: 20%;
  }

  .max-w-20p\@2xl {
    max-width: 20%;
  }

  .max-h-20p\@2xl {
    max-height: 20%;
  }

  .w-25p\@2xl,
  .hover\:w-25p\@2xl:hover,
  .group:hover .group-hover\:w-25p\@2xl {
    width: 25%;
  }

  .h-25p\@2xl,
  .hover\:h-25p\@2xl:hover,
  .group:hover .group-hover\:h-25p\@2xl {
    height: 25%;
  }

  .min-w-25p\@2xl {
    min-width: 25%;
  }

  .min-h-25p\@2xl {
    min-height: 25%;
  }

  .max-w-25p\@2xl {
    max-width: 25%;
  }

  .max-h-25p\@2xl {
    max-height: 25%;
  }

  .w-30p\@2xl,
  .hover\:w-30p\@2xl:hover,
  .group:hover .group-hover\:w-30p\@2xl {
    width: 30%;
  }

  .h-30p\@2xl,
  .hover\:h-30p\@2xl:hover,
  .group:hover .group-hover\:h-30p\@2xl {
    height: 30%;
  }

  .min-w-30p\@2xl {
    min-width: 30%;
  }

  .min-h-30p\@2xl {
    min-height: 30%;
  }

  .max-w-30p\@2xl {
    max-width: 30%;
  }

  .max-h-30p\@2xl {
    max-height: 30%;
  }

  .w-40p\@2xl,
  .hover\:w-40p\@2xl:hover,
  .group:hover .group-hover\:w-40p\@2xl {
    width: 40%;
  }

  .h-40p\@2xl,
  .hover\:h-40p\@2xl:hover,
  .group:hover .group-hover\:h-40p\@2xl {
    height: 40%;
  }

  .min-w-40p\@2xl {
    min-width: 40%;
  }

  .min-h-40p\@2xl {
    min-height: 40%;
  }

  .max-w-40p\@2xl {
    max-width: 40%;
  }

  .max-h-40p\@2xl {
    max-height: 40%;
  }

  .w-50p\@2xl,
  .hover\:w-50p\@2xl:hover,
  .group:hover .group-hover\:w-50p\@2xl {
    width: 50%;
  }

  .h-50p\@2xl,
  .hover\:h-50p\@2xl:hover,
  .group:hover .group-hover\:h-50p\@2xl {
    height: 50%;
  }

  .min-w-50p\@2xl {
    min-width: 50%;
  }

  .min-h-50p\@2xl {
    min-height: 50%;
  }

  .max-w-50p\@2xl {
    max-width: 50%;
  }

  .max-h-50p\@2xl {
    max-height: 50%;
  }

  .w-60p\@2xl,
  .hover\:w-60p\@2xl:hover,
  .group:hover .group-hover\:w-60p\@2xl {
    width: 60%;
  }

  .h-60p\@2xl,
  .hover\:h-60p\@2xl:hover,
  .group:hover .group-hover\:h-60p\@2xl {
    height: 60%;
  }

  .min-w-60p\@2xl {
    min-width: 60%;
  }

  .min-h-60p\@2xl {
    min-height: 60%;
  }

  .max-w-60p\@2xl {
    max-width: 60%;
  }

  .max-h-60p\@2xl {
    max-height: 60%;
  }

  .w-70p\@2xl,
  .hover\:w-70p\@2xl:hover,
  .group:hover .group-hover\:w-70p\@2xl {
    width: 70%;
  }

  .h-70p\@2xl,
  .hover\:h-70p\@2xl:hover,
  .group:hover .group-hover\:h-70p\@2xl {
    height: 70%;
  }

  .min-w-70p\@2xl {
    min-width: 70%;
  }

  .min-h-70p\@2xl {
    min-height: 70%;
  }

  .max-w-70p\@2xl {
    max-width: 70%;
  }

  .max-h-70p\@2xl {
    max-height: 70%;
  }

  .w-75p\@2xl,
  .hover\:w-75p\@2xl:hover,
  .group:hover .group-hover\:w-75p\@2xl {
    width: 75%;
  }

  .h-75p\@2xl,
  .hover\:h-75p\@2xl:hover,
  .group:hover .group-hover\:h-75p\@2xl {
    height: 75%;
  }

  .min-w-75p\@2xl {
    min-width: 75%;
  }

  .min-h-75p\@2xl {
    min-height: 75%;
  }

  .max-w-75p\@2xl {
    max-width: 75%;
  }

  .max-h-75p\@2xl {
    max-height: 75%;
  }

  .w-80p\@2xl,
  .hover\:w-80p\@2xl:hover,
  .group:hover .group-hover\:w-80p\@2xl {
    width: 80%;
  }

  .h-80p\@2xl,
  .hover\:h-80p\@2xl:hover,
  .group:hover .group-hover\:h-80p\@2xl {
    height: 80%;
  }

  .min-w-80p\@2xl {
    min-width: 80%;
  }

  .min-h-80p\@2xl {
    min-height: 80%;
  }

  .max-w-80p\@2xl {
    max-width: 80%;
  }

  .max-h-80p\@2xl {
    max-height: 80%;
  }

  .w-90p\@2xl,
  .hover\:w-90p\@2xl:hover,
  .group:hover .group-hover\:w-90p\@2xl {
    width: 90%;
  }

  .h-90p\@2xl,
  .hover\:h-90p\@2xl:hover,
  .group:hover .group-hover\:h-90p\@2xl {
    height: 90%;
  }

  .min-w-90p\@2xl {
    min-width: 90%;
  }

  .min-h-90p\@2xl {
    min-height: 90%;
  }

  .max-w-90p\@2xl {
    max-width: 90%;
  }

  .max-h-90p\@2xl {
    max-height: 90%;
  }

  .w-100p\@2xl,
  .hover\:w-100p\@2xl:hover,
  .group:hover .group-hover\:w-100p\@2xl {
    width: 100%;
  }

  .h-100p\@2xl,
  .hover\:h-100p\@2xl:hover,
  .group:hover .group-hover\:h-100p\@2xl {
    height: 100%;
  }

  .min-w-100p\@2xl {
    min-width: 100%;
  }

  .min-h-100p\@2xl {
    min-height: 100%;
  }

  .max-w-100p\@2xl {
    max-width: 100%;
  }

  .max-h-100p\@2xl {
    max-height: 100%;
  }

  .w-0\@2xl,
  .hover\:w-0\@2xl:hover,
  .group:hover .group-hover\:w-0\@2xl {
    width: 0px;
  }

  .h-0\@2xl,
  .hover\:h-0\@2xl:hover,
  .group:hover .group-hover\:h-0\@2xl {
    height: 0px;
  }

  .min-w-0\@2xl {
    min-width: 0px;
  }

  .min-h-0\@2xl {
    min-height: 0px;
  }

  .max-w-0\@2xl {
    max-width: 0px;
  }

  .max-h-0\@2xl {
    max-height: 0px;
  }

  .w-1\@2xl,
  .hover\:w-1\@2xl:hover,
  .group:hover .group-hover\:w-1\@2xl {
    width: 0.25rem;
  }

  .h-1\@2xl,
  .hover\:h-1\@2xl:hover,
  .group:hover .group-hover\:h-1\@2xl {
    height: 0.25rem;
  }

  .min-w-1\@2xl {
    min-width: 0.25rem;
  }

  .min-h-1\@2xl {
    min-height: 0.25rem;
  }

  .max-w-1\@2xl {
    max-width: 0.25rem;
  }

  .max-h-1\@2xl {
    max-height: 0.25rem;
  }

  .w-2\@2xl,
  .hover\:w-2\@2xl:hover,
  .group:hover .group-hover\:w-2\@2xl {
    width: 0.5rem;
  }

  .h-2\@2xl,
  .hover\:h-2\@2xl:hover,
  .group:hover .group-hover\:h-2\@2xl {
    height: 0.5rem;
  }

  .min-w-2\@2xl {
    min-width: 0.5rem;
  }

  .min-h-2\@2xl {
    min-height: 0.5rem;
  }

  .max-w-2\@2xl {
    max-width: 0.5rem;
  }

  .max-h-2\@2xl {
    max-height: 0.5rem;
  }

  .w-3\@2xl,
  .hover\:w-3\@2xl:hover,
  .group:hover .group-hover\:w-3\@2xl {
    width: 0.75rem;
  }

  .h-3\@2xl,
  .hover\:h-3\@2xl:hover,
  .group:hover .group-hover\:h-3\@2xl {
    height: 0.75rem;
  }

  .min-w-3\@2xl {
    min-width: 0.75rem;
  }

  .min-h-3\@2xl {
    min-height: 0.75rem;
  }

  .max-w-3\@2xl {
    max-width: 0.75rem;
  }

  .max-h-3\@2xl {
    max-height: 0.75rem;
  }

  .w-4\@2xl,
  .hover\:w-4\@2xl:hover,
  .group:hover .group-hover\:w-4\@2xl {
    width: 1rem;
  }

  .h-4\@2xl,
  .hover\:h-4\@2xl:hover,
  .group:hover .group-hover\:h-4\@2xl {
    height: 1rem;
  }

  .min-w-4\@2xl {
    min-width: 1rem;
  }

  .min-h-4\@2xl {
    min-height: 1rem;
  }

  .max-w-4\@2xl {
    max-width: 1rem;
  }

  .max-h-4\@2xl {
    max-height: 1rem;
  }

  .w-5\@2xl,
  .hover\:w-5\@2xl:hover,
  .group:hover .group-hover\:w-5\@2xl {
    width: 1.25rem;
  }

  .h-5\@2xl,
  .hover\:h-5\@2xl:hover,
  .group:hover .group-hover\:h-5\@2xl {
    height: 1.25rem;
  }

  .min-w-5\@2xl {
    min-width: 1.25rem;
  }

  .min-h-5\@2xl {
    min-height: 1.25rem;
  }

  .max-w-5\@2xl {
    max-width: 1.25rem;
  }

  .max-h-5\@2xl {
    max-height: 1.25rem;
  }

  .w-6\@2xl,
  .hover\:w-6\@2xl:hover,
  .group:hover .group-hover\:w-6\@2xl {
    width: 1.5rem;
  }

  .h-6\@2xl,
  .hover\:h-6\@2xl:hover,
  .group:hover .group-hover\:h-6\@2xl {
    height: 1.5rem;
  }

  .min-w-6\@2xl {
    min-width: 1.5rem;
  }

  .min-h-6\@2xl {
    min-height: 1.5rem;
  }

  .max-w-6\@2xl {
    max-width: 1.5rem;
  }

  .max-h-6\@2xl {
    max-height: 1.5rem;
  }

  .w-8\@2xl,
  .hover\:w-8\@2xl:hover,
  .group:hover .group-hover\:w-8\@2xl {
    width: 2rem;
  }

  .h-8\@2xl,
  .hover\:h-8\@2xl:hover,
  .group:hover .group-hover\:h-8\@2xl {
    height: 2rem;
  }

  .min-w-8\@2xl {
    min-width: 2rem;
  }

  .min-h-8\@2xl {
    min-height: 2rem;
  }

  .max-w-8\@2xl {
    max-width: 2rem;
  }

  .max-h-8\@2xl {
    max-height: 2rem;
  }

  .w-10\@2xl,
  .hover\:w-10\@2xl:hover,
  .group:hover .group-hover\:w-10\@2xl {
    width: 2.5rem;
  }

  .h-10\@2xl,
  .hover\:h-10\@2xl:hover,
  .group:hover .group-hover\:h-10\@2xl {
    height: 2.5rem;
  }

  .min-w-10\@2xl {
    min-width: 2.5rem;
  }

  .min-h-10\@2xl {
    min-height: 2.5rem;
  }

  .max-w-10\@2xl {
    max-width: 2.5rem;
  }

  .max-h-10\@2xl {
    max-height: 2.5rem;
  }

  .w-12\@2xl,
  .hover\:w-12\@2xl:hover,
  .group:hover .group-hover\:w-12\@2xl {
    width: 3rem;
  }

  .h-12\@2xl,
  .hover\:h-12\@2xl:hover,
  .group:hover .group-hover\:h-12\@2xl {
    height: 3rem;
  }

  .min-w-12\@2xl {
    min-width: 3rem;
  }

  .min-h-12\@2xl {
    min-height: 3rem;
  }

  .max-w-12\@2xl {
    max-width: 3rem;
  }

  .max-h-12\@2xl {
    max-height: 3rem;
  }

  .w-16\@2xl,
  .hover\:w-16\@2xl:hover,
  .group:hover .group-hover\:w-16\@2xl {
    width: 4rem;
  }

  .h-16\@2xl,
  .hover\:h-16\@2xl:hover,
  .group:hover .group-hover\:h-16\@2xl {
    height: 4rem;
  }

  .min-w-16\@2xl {
    min-width: 4rem;
  }

  .min-h-16\@2xl {
    min-height: 4rem;
  }

  .max-w-16\@2xl {
    max-width: 4rem;
  }

  .max-h-16\@2xl {
    max-height: 4rem;
  }

  .w-20\@2xl,
  .hover\:w-20\@2xl:hover,
  .group:hover .group-hover\:w-20\@2xl {
    width: 5rem;
  }

  .h-20\@2xl,
  .hover\:h-20\@2xl:hover,
  .group:hover .group-hover\:h-20\@2xl {
    height: 5rem;
  }

  .min-w-20\@2xl {
    min-width: 5rem;
  }

  .min-h-20\@2xl {
    min-height: 5rem;
  }

  .max-w-20\@2xl {
    max-width: 5rem;
  }

  .max-h-20\@2xl {
    max-height: 5rem;
  }

  .w-24\@2xl,
  .hover\:w-24\@2xl:hover,
  .group:hover .group-hover\:w-24\@2xl {
    width: 6rem;
  }

  .h-24\@2xl,
  .hover\:h-24\@2xl:hover,
  .group:hover .group-hover\:h-24\@2xl {
    height: 6rem;
  }

  .min-w-24\@2xl {
    min-width: 6rem;
  }

  .min-h-24\@2xl {
    min-height: 6rem;
  }

  .max-w-24\@2xl {
    max-width: 6rem;
  }

  .max-h-24\@2xl {
    max-height: 6rem;
  }

  .w-32\@2xl,
  .hover\:w-32\@2xl:hover,
  .group:hover .group-hover\:w-32\@2xl {
    width: 8rem;
  }

  .h-32\@2xl,
  .hover\:h-32\@2xl:hover,
  .group:hover .group-hover\:h-32\@2xl {
    height: 8rem;
  }

  .min-w-32\@2xl {
    min-width: 8rem;
  }

  .min-h-32\@2xl {
    min-height: 8rem;
  }

  .max-w-32\@2xl {
    max-width: 8rem;
  }

  .max-h-32\@2xl {
    max-height: 8rem;
  }

  .w-40\@2xl,
  .hover\:w-40\@2xl:hover,
  .group:hover .group-hover\:w-40\@2xl {
    width: 10rem;
  }

  .h-40\@2xl,
  .hover\:h-40\@2xl:hover,
  .group:hover .group-hover\:h-40\@2xl {
    height: 10rem;
  }

  .min-w-40\@2xl {
    min-width: 10rem;
  }

  .min-h-40\@2xl {
    min-height: 10rem;
  }

  .max-w-40\@2xl {
    max-width: 10rem;
  }

  .max-h-40\@2xl {
    max-height: 10rem;
  }

  .w-48\@2xl,
  .hover\:w-48\@2xl:hover,
  .group:hover .group-hover\:w-48\@2xl {
    width: 12rem;
  }

  .h-48\@2xl,
  .hover\:h-48\@2xl:hover,
  .group:hover .group-hover\:h-48\@2xl {
    height: 12rem;
  }

  .min-w-48\@2xl {
    min-width: 12rem;
  }

  .min-h-48\@2xl {
    min-height: 12rem;
  }

  .max-w-48\@2xl {
    max-width: 12rem;
  }

  .max-h-48\@2xl {
    max-height: 12rem;
  }

  .w-56\@2xl,
  .hover\:w-56\@2xl:hover,
  .group:hover .group-hover\:w-56\@2xl {
    width: 14rem;
  }

  .h-56\@2xl,
  .hover\:h-56\@2xl:hover,
  .group:hover .group-hover\:h-56\@2xl {
    height: 14rem;
  }

  .min-w-56\@2xl {
    min-width: 14rem;
  }

  .min-h-56\@2xl {
    min-height: 14rem;
  }

  .max-w-56\@2xl {
    max-width: 14rem;
  }

  .max-h-56\@2xl {
    max-height: 14rem;
  }

  .w-64\@2xl,
  .hover\:w-64\@2xl:hover,
  .group:hover .group-hover\:w-64\@2xl {
    width: 16rem;
  }

  .h-64\@2xl,
  .hover\:h-64\@2xl:hover,
  .group:hover .group-hover\:h-64\@2xl {
    height: 16rem;
  }

  .min-w-64\@2xl {
    min-width: 16rem;
  }

  .min-h-64\@2xl {
    min-height: 16rem;
  }

  .max-w-64\@2xl {
    max-width: 16rem;
  }

  .max-h-64\@2xl {
    max-height: 16rem;
  }

  .w-120\@2xl,
  .hover\:w-120\@2xl:hover,
  .group:hover .group-hover\:w-120\@2xl {
    width: 30rem;
  }

  .h-120\@2xl,
  .hover\:h-120\@2xl:hover,
  .group:hover .group-hover\:h-120\@2xl {
    height: 30rem;
  }

  .min-w-120\@2xl {
    min-width: 30rem;
  }

  .min-h-120\@2xl {
    min-height: 30rem;
  }

  .max-w-120\@2xl {
    max-width: 30rem;
  }

  .max-h-120\@2xl {
    max-height: 30rem;
  }
}

/**
 * @component Spacing
 * @description Controls element margins, padding, gaps, and spacing between children
 *
 * @example
 * <!-- Padding -->
 * <div class="p-4">All sides padding</div>
 * <div class="px-4 py-2">Horizontal and vertical padding</div>
 * <div class="pt-2 pb-4">Top and bottom padding</div>
 * 
 * <!-- Margins -->
 * <div class="m-4">All sides margin</div>
 * <div class="mt-4">Top margin only</div>
 * <div class="mx-auto">Horizontally centered</div>
 * 
 * <!-- Gap (for flex/grid containers) -->
 * <div class="flex gap-4">
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 * </div>
 * 
 * <!-- Responsive spacing -->
 * <div class="p-2 p-4@md p-6@lg">
 *   Padding increases at each breakpoint
 * </div>
 * 
 * <!-- Child spacing -->
 * <div class="space-y-4">
 *   <div>First child</div>
 *   <div>Second child (margin-top: 1rem)</div>
 *   <div>Third child (margin-top: 1rem)</div>
 * </div>
 *
 * @classes
 * Padding:
 * - p-{size}: Padding on all sides
 * - px-{size}: Horizontal padding (left and right)
 * - py-{size}: Vertical padding (top and bottom)
 * - pt-{size}, pr-{size}, pb-{size}, pl-{size}: Individual side padding
 * 
 * Margin:
 * - m-{size}: Margin on all sides
 * - mx-{size}: Horizontal margin (left and right)
 * - my-{size}: Vertical margin (top and bottom)
 * - mt-{size}, mr-{size}, mb-{size}, ml-{size}: Individual side margin
 * - mx-auto, ml-auto, mr-auto: Auto margin for alignment
 * 
 * Gap:
 * - gap-{size}: Gap between flex/grid children (all directions)
 * - gap-x-{size}: Horizontal gap between children (column-gap)
 * - gap-y-{size}: Vertical gap between children (row-gap)
 * 
 * Child Spacing:
 * - space-x-{size}: Horizontal space between children
 * - space-y-{size}: Vertical space between children
 *
 * @responsive
 * All spacing classes support responsive variants using @breakpoint suffix:
 * - p-4@md: 1rem padding on medium screens and up
 * - mt-8@lg: 2rem top margin on large screens
 * - gap-2@xl: 0.5rem gap on extra large screens
 *
 * @customization
 * Spacing values are defined in the $spacings map in variables.scss
 * Typically follows a scale where higher numbers mean more spacing
 *
 * @see flex, grid, display
 */
/**
 * @mixin p
 * @description Sets padding on all sides
 * @param {Number|String} $val - Padding value
 */
/**
* @mixin px
* @description Sets horizontal padding (left and right)
* @param {Number|String} $val - Padding value
*/
/**
* @mixin py
* @description Sets vertical padding (top and bottom)
* @param {Number|String} $val - Padding value
*/
/**
* @mixin pt
* @description Sets padding-top
* @param {Number|String} $val - Padding value
*/
/**
* @mixin pr
* @description Sets padding-right
* @param {Number|String} $val - Padding value
*/
/**
* @mixin pb
* @description Sets padding-bottom
* @param {Number|String} $val - Padding value
*/
/**
* @mixin pl
* @description Sets padding-left
* @param {Number|String} $val - Padding value
*/
/**
* @mixin m
* @description Sets margin on all sides
* @param {Number|String} $val - Margin value
*/
/**
* @mixin mx
* @description Sets horizontal margin (left and right)
* @param {Number|String} $val - Margin value
*/
/**
* @mixin my
* @description Sets vertical margin (top and bottom)
* @param {Number|String} $val - Margin value
*/
/**
* @mixin mt
* @description Sets margin-top
* @param {Number|String} $val - Margin value
*/
/**
* @mixin mr
* @description Sets margin-right
* @param {Number|String} $val - Margin value
*/
/**
* @mixin mb
* @description Sets margin-bottom
* @param {Number|String} $val - Margin value
*/
/**
* @mixin ml
* @description Sets margin-left
* @param {Number|String} $val - Margin value
*/
/**
* @mixin ml-auto
* @description Sets margin-left to auto
*/
/**
* @mixin mr-auto
* @description Sets margin-right to auto
*/
/**
* @mixin mx-auto
* @description Centers element horizontally using auto margins
*/
/**
 * @mixin inset
 * @description Sets all inset properties (top, right, bottom, left)
 * @param {Number|String} $val - Inset value
 */
/**
 * @mixin inset-x
 * @description Sets horizontal inset properties (left and right)
 * @param {Number|String} $val - Inset value
 */
/**
 * @mixin inset-y
 * @description Sets vertical inset properties (top and bottom)
 * @param {Number|String} $val - Inset value
 */
/**
 * @mixin inset-auto
 * @description Sets all inset properties to auto
 */
/**
 * @mixin inset-x-auto
 * @description Sets horizontal inset properties to auto
 */
/**
 * @mixin inset-y-auto
 * @description Sets vertical inset properties to auto
 */
/**
 * @mixin space-y
 * @description Adds vertical spacing between direct children
 * @param {Number|String} $i - Space amount
 */
/**
 * @mixin space-x
 * @description Adds horizontal spacing between direct children
 * @param {Number|String} $i - Space amount
 */
/**
 * @mixin gap
 * @description Sets gap between grid/flex children
 * @param {Number|String} $val - Gap value
 */
/**
 * @mixin gap-x
 * @description Sets horizontal gap between grid/flex children
 * @param {Number|String} $val - Gap value
 */
/**
 * @mixin gap-y
 * @description Sets vertical gap between grid/flex children
 * @param {Number|String} $val - Gap value
 */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

.gap-auto {
  gap: auto;
}

.inset-auto {
  inset: auto;
}

.inset-x-auto {
  left: auto;
  right: auto;
}

.inset-y-auto {
  top: auto;
  bottom: auto;
}

.p-0 {
  padding: 0px;
}

.px-0 {
  padding-inline: 0px;
}

.py-0 {
  padding-block: 0px;
}

.pt-0 {
  padding-top: 0px;
}

.pr-0 {
  padding-right: 0px;
}

.pb-0 {
  padding-bottom: 0px;
}

.pl-0 {
  padding-left: 0px;
}

.m-0 {
  margin: 0px;
}

.mx-0 {
  margin-inline: 0px;
}

.my-0 {
  margin-block: 0px;
}

.mt-0 {
  margin-top: 0px;
}

.mr-0 {
  margin-right: 0px;
}

.mb-0 {
  margin-bottom: 0px;
}

.ml-0 {
  margin-left: 0px;
}

.gap-0 {
  gap: 0px;
}

.gap-x-0 {
  column-gap: 0px;
}

.gap-y-0 {
  row-gap: 0px;
}

.space-x-0>*+* {
  margin-left: 0px;
}

.space-y-0>*+* {
  margin-top: 0px;
}

.inset-0 {
  inset: 0px;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.inset-y-0 {
  top: 0px;
  bottom: 0px;
}

.p-1 {
  padding: 0.25rem;
}

.px-1 {
  padding-inline: 0.25rem;
}

.py-1 {
  padding-block: 0.25rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pl-1 {
  padding-left: 0.25rem;
}

.m-1 {
  margin: 0.25rem;
}

.mx-1 {
  margin-inline: 0.25rem;
}

.my-1 {
  margin-block: 0.25rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-x-1 {
  column-gap: 0.25rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.space-x-1>*+* {
  margin-left: 0.25rem;
}

.space-y-1>*+* {
  margin-top: 0.25rem;
}

.inset-1 {
  inset: 0.25rem;
}

.inset-x-1 {
  left: 0.25rem;
  right: 0.25rem;
}

.inset-y-1 {
  top: 0.25rem;
  bottom: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.px-2 {
  padding-inline: 0.5rem;
}

.py-2 {
  padding-block: 0.5rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.m-2 {
  margin: 0.5rem;
}

.mx-2 {
  margin-inline: 0.5rem;
}

.my-2 {
  margin-block: 0.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-x-2 {
  column-gap: 0.5rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.space-x-2>*+* {
  margin-left: 0.5rem;
}

.space-y-2>*+* {
  margin-top: 0.5rem;
}

.inset-2 {
  inset: 0.5rem;
}

.inset-x-2 {
  left: 0.5rem;
  right: 0.5rem;
}

.inset-y-2 {
  top: 0.5rem;
  bottom: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.px-3 {
  padding-inline: 0.75rem;
}

.py-3 {
  padding-block: 0.75rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.m-3 {
  margin: 0.75rem;
}

.mx-3 {
  margin-inline: 0.75rem;
}

.my-3 {
  margin-block: 0.75rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-x-3 {
  column-gap: 0.75rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.space-x-3>*+* {
  margin-left: 0.75rem;
}

.space-y-3>*+* {
  margin-top: 0.75rem;
}

.inset-3 {
  inset: 0.75rem;
}

.inset-x-3 {
  left: 0.75rem;
  right: 0.75rem;
}

.inset-y-3 {
  top: 0.75rem;
  bottom: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.px-4 {
  padding-inline: 1rem;
}

.py-4 {
  padding-block: 1rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pl-4 {
  padding-left: 1rem;
}

.m-4 {
  margin: 1rem;
}

.mx-4 {
  margin-inline: 1rem;
}

.my-4 {
  margin-block: 1rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.ml-4 {
  margin-left: 1rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-x-4 {
  column-gap: 1rem;
}

.gap-y-4 {
  row-gap: 1rem;
}

.space-x-4>*+* {
  margin-left: 1rem;
}

.space-y-4>*+* {
  margin-top: 1rem;
}

.inset-4 {
  inset: 1rem;
}

.inset-x-4 {
  left: 1rem;
  right: 1rem;
}

.inset-y-4 {
  top: 1rem;
  bottom: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.px-5 {
  padding-inline: 1.25rem;
}

.py-5 {
  padding-block: 1.25rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pr-5 {
  padding-right: 1.25rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.m-5 {
  margin: 1.25rem;
}

.mx-5 {
  margin-inline: 1.25rem;
}

.my-5 {
  margin-block: 1.25rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mr-5 {
  margin-right: 1.25rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.ml-5 {
  margin-left: 1.25rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-x-5 {
  column-gap: 1.25rem;
}

.gap-y-5 {
  row-gap: 1.25rem;
}

.space-x-5>*+* {
  margin-left: 1.25rem;
}

.space-y-5>*+* {
  margin-top: 1.25rem;
}

.inset-5 {
  inset: 1.25rem;
}

.inset-x-5 {
  left: 1.25rem;
  right: 1.25rem;
}

.inset-y-5 {
  top: 1.25rem;
  bottom: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.px-6 {
  padding-inline: 1.5rem;
}

.py-6 {
  padding-block: 1.5rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pr-6 {
  padding-right: 1.5rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.m-6 {
  margin: 1.5rem;
}

.mx-6 {
  margin-inline: 1.5rem;
}

.my-6 {
  margin-block: 1.5rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mr-6 {
  margin-right: 1.5rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-x-6 {
  column-gap: 1.5rem;
}

.gap-y-6 {
  row-gap: 1.5rem;
}

.space-x-6>*+* {
  margin-left: 1.5rem;
}

.space-y-6>*+* {
  margin-top: 1.5rem;
}

.inset-6 {
  inset: 1.5rem;
}

.inset-x-6 {
  left: 1.5rem;
  right: 1.5rem;
}

.inset-y-6 {
  top: 1.5rem;
  bottom: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-8 {
  padding-inline: 2rem;
}

.py-8 {
  padding-block: 2rem;
}

.pt-8 {
  padding-top: 2rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pl-8 {
  padding-left: 2rem;
}

.m-8 {
  margin: 2rem;
}

.mx-8 {
  margin-inline: 2rem;
}

.my-8 {
  margin-block: 2rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mr-8 {
  margin-right: 2rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-8 {
  margin-left: 2rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-x-8 {
  column-gap: 2rem;
}

.gap-y-8 {
  row-gap: 2rem;
}

.space-x-8>*+* {
  margin-left: 2rem;
}

.space-y-8>*+* {
  margin-top: 2rem;
}

.inset-8 {
  inset: 2rem;
}

.inset-x-8 {
  left: 2rem;
  right: 2rem;
}

.inset-y-8 {
  top: 2rem;
  bottom: 2rem;
}

.p-10 {
  padding: 2.5rem;
}

.px-10 {
  padding-inline: 2.5rem;
}

.py-10 {
  padding-block: 2.5rem;
}

.pt-10 {
  padding-top: 2.5rem;
}

.pr-10 {
  padding-right: 2.5rem;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

.pl-10 {
  padding-left: 2.5rem;
}

.m-10 {
  margin: 2.5rem;
}

.mx-10 {
  margin-inline: 2.5rem;
}

.my-10 {
  margin-block: 2.5rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mr-10 {
  margin-right: 2.5rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.ml-10 {
  margin-left: 2.5rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-x-10 {
  column-gap: 2.5rem;
}

.gap-y-10 {
  row-gap: 2.5rem;
}

.space-x-10>*+* {
  margin-left: 2.5rem;
}

.space-y-10>*+* {
  margin-top: 2.5rem;
}

.inset-10 {
  inset: 2.5rem;
}

.inset-x-10 {
  left: 2.5rem;
  right: 2.5rem;
}

.inset-y-10 {
  top: 2.5rem;
  bottom: 2.5rem;
}

.p-12 {
  padding: 3rem;
}

.px-12 {
  padding-inline: 3rem;
}

.py-12 {
  padding-block: 3rem;
}

.pt-12 {
  padding-top: 3rem;
}

.pr-12 {
  padding-right: 3rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pl-12 {
  padding-left: 3rem;
}

.m-12 {
  margin: 3rem;
}

.mx-12 {
  margin-inline: 3rem;
}

.my-12 {
  margin-block: 3rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mr-12 {
  margin-right: 3rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.ml-12 {
  margin-left: 3rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-x-12 {
  column-gap: 3rem;
}

.gap-y-12 {
  row-gap: 3rem;
}

.space-x-12>*+* {
  margin-left: 3rem;
}

.space-y-12>*+* {
  margin-top: 3rem;
}

.inset-12 {
  inset: 3rem;
}

.inset-x-12 {
  left: 3rem;
  right: 3rem;
}

.inset-y-12 {
  top: 3rem;
  bottom: 3rem;
}

.p-16 {
  padding: 4rem;
}

.px-16 {
  padding-inline: 4rem;
}

.py-16 {
  padding-block: 4rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pr-16 {
  padding-right: 4rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pl-16 {
  padding-left: 4rem;
}

.m-16 {
  margin: 4rem;
}

.mx-16 {
  margin-inline: 4rem;
}

.my-16 {
  margin-block: 4rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mr-16 {
  margin-right: 4rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.ml-16 {
  margin-left: 4rem;
}

.gap-16 {
  gap: 4rem;
}

.gap-x-16 {
  column-gap: 4rem;
}

.gap-y-16 {
  row-gap: 4rem;
}

.space-x-16>*+* {
  margin-left: 4rem;
}

.space-y-16>*+* {
  margin-top: 4rem;
}

.inset-16 {
  inset: 4rem;
}

.inset-x-16 {
  left: 4rem;
  right: 4rem;
}

.inset-y-16 {
  top: 4rem;
  bottom: 4rem;
}

.p-20 {
  padding: 5rem;
}

.px-20 {
  padding-inline: 5rem;
}

.py-20 {
  padding-block: 5rem;
}

.pt-20 {
  padding-top: 5rem;
}

.pr-20 {
  padding-right: 5rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.pl-20 {
  padding-left: 5rem;
}

.m-20 {
  margin: 5rem;
}

.mx-20 {
  margin-inline: 5rem;
}

.my-20 {
  margin-block: 5rem;
}

.mt-20 {
  margin-top: 5rem;
}

.mr-20 {
  margin-right: 5rem;
}

.mb-20 {
  margin-bottom: 5rem;
}

.ml-20 {
  margin-left: 5rem;
}

.gap-20 {
  gap: 5rem;
}

.gap-x-20 {
  column-gap: 5rem;
}

.gap-y-20 {
  row-gap: 5rem;
}

.space-x-20>*+* {
  margin-left: 5rem;
}

.space-y-20>*+* {
  margin-top: 5rem;
}

.inset-20 {
  inset: 5rem;
}

.inset-x-20 {
  left: 5rem;
  right: 5rem;
}

.inset-y-20 {
  top: 5rem;
  bottom: 5rem;
}

.p-24 {
  padding: 6rem;
}

.px-24 {
  padding-inline: 6rem;
}

.py-24 {
  padding-block: 6rem;
}

.pt-24 {
  padding-top: 6rem;
}

.pr-24 {
  padding-right: 6rem;
}

.pb-24 {
  padding-bottom: 6rem;
}

.pl-24 {
  padding-left: 6rem;
}

.m-24 {
  margin: 6rem;
}

.mx-24 {
  margin-inline: 6rem;
}

.my-24 {
  margin-block: 6rem;
}

.mt-24 {
  margin-top: 6rem;
}

.mr-24 {
  margin-right: 6rem;
}

.mb-24 {
  margin-bottom: 6rem;
}

.ml-24 {
  margin-left: 6rem;
}

.gap-24 {
  gap: 6rem;
}

.gap-x-24 {
  column-gap: 6rem;
}

.gap-y-24 {
  row-gap: 6rem;
}

.space-x-24>*+* {
  margin-left: 6rem;
}

.space-y-24>*+* {
  margin-top: 6rem;
}

.inset-24 {
  inset: 6rem;
}

.inset-x-24 {
  left: 6rem;
  right: 6rem;
}

.inset-y-24 {
  top: 6rem;
  bottom: 6rem;
}

.p-32 {
  padding: 8rem;
}

.px-32 {
  padding-inline: 8rem;
}

.py-32 {
  padding-block: 8rem;
}

.pt-32 {
  padding-top: 8rem;
}

.pr-32 {
  padding-right: 8rem;
}

.pb-32 {
  padding-bottom: 8rem;
}

.pl-32 {
  padding-left: 8rem;
}

.m-32 {
  margin: 8rem;
}

.mx-32 {
  margin-inline: 8rem;
}

.my-32 {
  margin-block: 8rem;
}

.mt-32 {
  margin-top: 8rem;
}

.mr-32 {
  margin-right: 8rem;
}

.mb-32 {
  margin-bottom: 8rem;
}

.ml-32 {
  margin-left: 8rem;
}

.gap-32 {
  gap: 8rem;
}

.gap-x-32 {
  column-gap: 8rem;
}

.gap-y-32 {
  row-gap: 8rem;
}

.space-x-32>*+* {
  margin-left: 8rem;
}

.space-y-32>*+* {
  margin-top: 8rem;
}

.inset-32 {
  inset: 8rem;
}

.inset-x-32 {
  left: 8rem;
  right: 8rem;
}

.inset-y-32 {
  top: 8rem;
  bottom: 8rem;
}

.p-40 {
  padding: 10rem;
}

.px-40 {
  padding-inline: 10rem;
}

.py-40 {
  padding-block: 10rem;
}

.pt-40 {
  padding-top: 10rem;
}

.pr-40 {
  padding-right: 10rem;
}

.pb-40 {
  padding-bottom: 10rem;
}

.pl-40 {
  padding-left: 10rem;
}

.m-40 {
  margin: 10rem;
}

.mx-40 {
  margin-inline: 10rem;
}

.my-40 {
  margin-block: 10rem;
}

.mt-40 {
  margin-top: 10rem;
}

.mr-40 {
  margin-right: 10rem;
}

.mb-40 {
  margin-bottom: 10rem;
}

.ml-40 {
  margin-left: 10rem;
}

.gap-40 {
  gap: 10rem;
}

.gap-x-40 {
  column-gap: 10rem;
}

.gap-y-40 {
  row-gap: 10rem;
}

.space-x-40>*+* {
  margin-left: 10rem;
}

.space-y-40>*+* {
  margin-top: 10rem;
}

.inset-40 {
  inset: 10rem;
}

.inset-x-40 {
  left: 10rem;
  right: 10rem;
}

.inset-y-40 {
  top: 10rem;
  bottom: 10rem;
}

.p-48 {
  padding: 12rem;
}

.px-48 {
  padding-inline: 12rem;
}

.py-48 {
  padding-block: 12rem;
}

.pt-48 {
  padding-top: 12rem;
}

.pr-48 {
  padding-right: 12rem;
}

.pb-48 {
  padding-bottom: 12rem;
}

.pl-48 {
  padding-left: 12rem;
}

.m-48 {
  margin: 12rem;
}

.mx-48 {
  margin-inline: 12rem;
}

.my-48 {
  margin-block: 12rem;
}

.mt-48 {
  margin-top: 12rem;
}

.mr-48 {
  margin-right: 12rem;
}

.mb-48 {
  margin-bottom: 12rem;
}

.ml-48 {
  margin-left: 12rem;
}

.gap-48 {
  gap: 12rem;
}

.gap-x-48 {
  column-gap: 12rem;
}

.gap-y-48 {
  row-gap: 12rem;
}

.space-x-48>*+* {
  margin-left: 12rem;
}

.space-y-48>*+* {
  margin-top: 12rem;
}

.inset-48 {
  inset: 12rem;
}

.inset-x-48 {
  left: 12rem;
  right: 12rem;
}

.inset-y-48 {
  top: 12rem;
  bottom: 12rem;
}

.p-56 {
  padding: 14rem;
}

.px-56 {
  padding-inline: 14rem;
}

.py-56 {
  padding-block: 14rem;
}

.pt-56 {
  padding-top: 14rem;
}

.pr-56 {
  padding-right: 14rem;
}

.pb-56 {
  padding-bottom: 14rem;
}

.pl-56 {
  padding-left: 14rem;
}

.m-56 {
  margin: 14rem;
}

.mx-56 {
  margin-inline: 14rem;
}

.my-56 {
  margin-block: 14rem;
}

.mt-56 {
  margin-top: 14rem;
}

.mr-56 {
  margin-right: 14rem;
}

.mb-56 {
  margin-bottom: 14rem;
}

.ml-56 {
  margin-left: 14rem;
}

.gap-56 {
  gap: 14rem;
}

.gap-x-56 {
  column-gap: 14rem;
}

.gap-y-56 {
  row-gap: 14rem;
}

.space-x-56>*+* {
  margin-left: 14rem;
}

.space-y-56>*+* {
  margin-top: 14rem;
}

.inset-56 {
  inset: 14rem;
}

.inset-x-56 {
  left: 14rem;
  right: 14rem;
}

.inset-y-56 {
  top: 14rem;
  bottom: 14rem;
}

.p-64 {
  padding: 16rem;
}

.px-64 {
  padding-inline: 16rem;
}

.py-64 {
  padding-block: 16rem;
}

.pt-64 {
  padding-top: 16rem;
}

.pr-64 {
  padding-right: 16rem;
}

.pb-64 {
  padding-bottom: 16rem;
}

.pl-64 {
  padding-left: 16rem;
}

.m-64 {
  margin: 16rem;
}

.mx-64 {
  margin-inline: 16rem;
}

.my-64 {
  margin-block: 16rem;
}

.mt-64 {
  margin-top: 16rem;
}

.mr-64 {
  margin-right: 16rem;
}

.mb-64 {
  margin-bottom: 16rem;
}

.ml-64 {
  margin-left: 16rem;
}

.gap-64 {
  gap: 16rem;
}

.gap-x-64 {
  column-gap: 16rem;
}

.gap-y-64 {
  row-gap: 16rem;
}

.space-x-64>*+* {
  margin-left: 16rem;
}

.space-y-64>*+* {
  margin-top: 16rem;
}

.inset-64 {
  inset: 16rem;
}

.inset-x-64 {
  left: 16rem;
  right: 16rem;
}

.inset-y-64 {
  top: 16rem;
  bottom: 16rem;
}

.p-120 {
  padding: 30rem;
}

.px-120 {
  padding-inline: 30rem;
}

.py-120 {
  padding-block: 30rem;
}

.pt-120 {
  padding-top: 30rem;
}

.pr-120 {
  padding-right: 30rem;
}

.pb-120 {
  padding-bottom: 30rem;
}

.pl-120 {
  padding-left: 30rem;
}

.m-120 {
  margin: 30rem;
}

.mx-120 {
  margin-inline: 30rem;
}

.my-120 {
  margin-block: 30rem;
}

.mt-120 {
  margin-top: 30rem;
}

.mr-120 {
  margin-right: 30rem;
}

.mb-120 {
  margin-bottom: 30rem;
}

.ml-120 {
  margin-left: 30rem;
}

.gap-120 {
  gap: 30rem;
}

.gap-x-120 {
  column-gap: 30rem;
}

.gap-y-120 {
  row-gap: 30rem;
}

.space-x-120>*+* {
  margin-left: 30rem;
}

.space-y-120>*+* {
  margin-top: 30rem;
}

.inset-120 {
  inset: 30rem;
}

.inset-x-120 {
  left: 30rem;
  right: 30rem;
}

.inset-y-120 {
  top: 30rem;
  bottom: 30rem;
}

@media (min-width: 480px) {
  .mx-auto\@xs {
    margin-left: auto;
    margin-right: auto;
  }

  .ml-auto\@xs {
    margin-left: auto;
  }

  .mr-auto\@xs {
    margin-right: auto;
  }

  .inset-auto\@xs {
    inset: auto;
  }

  .inset-x-auto\@xs {
    left: auto;
    right: auto;
  }

  .inset-y-auto\@xs {
    top: auto;
    bottom: auto;
  }

  .p-0\@xs {
    padding: 0px;
  }

  .px-0\@xs {
    padding-inline: 0px;
  }

  .py-0\@xs {
    padding-block: 0px;
  }

  .pt-0\@xs {
    padding-top: 0px;
  }

  .pr-0\@xs {
    padding-right: 0px;
  }

  .pb-0\@xs {
    padding-bottom: 0px;
  }

  .pl-0\@xs {
    padding-left: 0px;
  }

  .m-0\@xs {
    margin: 0px;
  }

  .mx-0\@xs {
    margin-inline: 0px;
  }

  .my-0\@xs {
    margin-block: 0px;
  }

  .mt-0\@xs {
    margin-top: 0px;
  }

  .mr-0\@xs {
    margin-right: 0px;
  }

  .mb-0\@xs {
    margin-bottom: 0px;
  }

  .ml-0\@xs {
    margin-left: 0px;
  }

  .gap-0\@xs {
    gap: 0;
  }

  .gap-x-0\@xs {
    column-gap: 0;
  }

  .gap-y-0\@xs {
    row-gap: 0;
  }

  .space-x-0\@xs>*+* {
    margin-left: 0px;
  }

  .space-y-0\@xs>*+* {
    margin-top: 0px;
  }

  .inset-0\@xs {
    inset: 0px;
  }

  .inset-x-0\@xs {
    left: 0px;
    right: 0px;
  }

  .inset-y-0\@xs {
    top: 0px;
    bottom: 0px;
  }

  .p-1\@xs {
    padding: 0.25rem;
  }

  .px-1\@xs {
    padding-inline: 0.25rem;
  }

  .py-1\@xs {
    padding-block: 0.25rem;
  }

  .pt-1\@xs {
    padding-top: 0.25rem;
  }

  .pr-1\@xs {
    padding-right: 0.25rem;
  }

  .pb-1\@xs {
    padding-bottom: 0.25rem;
  }

  .pl-1\@xs {
    padding-left: 0.25rem;
  }

  .m-1\@xs {
    margin: 0.25rem;
  }

  .mx-1\@xs {
    margin-inline: 0.25rem;
  }

  .my-1\@xs {
    margin-block: 0.25rem;
  }

  .mt-1\@xs {
    margin-top: 0.25rem;
  }

  .mr-1\@xs {
    margin-right: 0.25rem;
  }

  .mb-1\@xs {
    margin-bottom: 0.25rem;
  }

  .ml-1\@xs {
    margin-left: 0.25rem;
  }

  .gap-1\@xs {
    gap: 0.25rem;
  }

  .gap-x-1\@xs {
    column-gap: 0.25rem;
  }

  .gap-y-1\@xs {
    row-gap: 0.25rem;
  }

  .space-x-1\@xs>*+* {
    margin-left: 0.25rem;
  }

  .space-y-1\@xs>*+* {
    margin-top: 0.25rem;
  }

  .inset-1\@xs {
    inset: 0.25rem;
  }

  .inset-x-1\@xs {
    left: 0.25rem;
    right: 0.25rem;
  }

  .inset-y-1\@xs {
    top: 0.25rem;
    bottom: 0.25rem;
  }

  .p-2\@xs {
    padding: 0.5rem;
  }

  .px-2\@xs {
    padding-inline: 0.5rem;
  }

  .py-2\@xs {
    padding-block: 0.5rem;
  }

  .pt-2\@xs {
    padding-top: 0.5rem;
  }

  .pr-2\@xs {
    padding-right: 0.5rem;
  }

  .pb-2\@xs {
    padding-bottom: 0.5rem;
  }

  .pl-2\@xs {
    padding-left: 0.5rem;
  }

  .m-2\@xs {
    margin: 0.5rem;
  }

  .mx-2\@xs {
    margin-inline: 0.5rem;
  }

  .my-2\@xs {
    margin-block: 0.5rem;
  }

  .mt-2\@xs {
    margin-top: 0.5rem;
  }

  .mr-2\@xs {
    margin-right: 0.5rem;
  }

  .mb-2\@xs {
    margin-bottom: 0.5rem;
  }

  .ml-2\@xs {
    margin-left: 0.5rem;
  }

  .gap-2\@xs {
    gap: 0.5rem;
  }

  .gap-x-2\@xs {
    column-gap: 0.5rem;
  }

  .gap-y-2\@xs {
    row-gap: 0.5rem;
  }

  .space-x-2\@xs>*+* {
    margin-left: 0.5rem;
  }

  .space-y-2\@xs>*+* {
    margin-top: 0.5rem;
  }

  .inset-2\@xs {
    inset: 0.5rem;
  }

  .inset-x-2\@xs {
    left: 0.5rem;
    right: 0.5rem;
  }

  .inset-y-2\@xs {
    top: 0.5rem;
    bottom: 0.5rem;
  }

  .p-3\@xs {
    padding: 0.75rem;
  }

  .px-3\@xs {
    padding-inline: 0.75rem;
  }

  .py-3\@xs {
    padding-block: 0.75rem;
  }

  .pt-3\@xs {
    padding-top: 0.75rem;
  }

  .pr-3\@xs {
    padding-right: 0.75rem;
  }

  .pb-3\@xs {
    padding-bottom: 0.75rem;
  }

  .pl-3\@xs {
    padding-left: 0.75rem;
  }

  .m-3\@xs {
    margin: 0.75rem;
  }

  .mx-3\@xs {
    margin-inline: 0.75rem;
  }

  .my-3\@xs {
    margin-block: 0.75rem;
  }

  .mt-3\@xs {
    margin-top: 0.75rem;
  }

  .mr-3\@xs {
    margin-right: 0.75rem;
  }

  .mb-3\@xs {
    margin-bottom: 0.75rem;
  }

  .ml-3\@xs {
    margin-left: 0.75rem;
  }

  .gap-3\@xs {
    gap: 0.75rem;
  }

  .gap-x-3\@xs {
    column-gap: 0.75rem;
  }

  .gap-y-3\@xs {
    row-gap: 0.75rem;
  }

  .space-x-3\@xs>*+* {
    margin-left: 0.75rem;
  }

  .space-y-3\@xs>*+* {
    margin-top: 0.75rem;
  }

  .inset-3\@xs {
    inset: 0.75rem;
  }

  .inset-x-3\@xs {
    left: 0.75rem;
    right: 0.75rem;
  }

  .inset-y-3\@xs {
    top: 0.75rem;
    bottom: 0.75rem;
  }

  .p-4\@xs {
    padding: 1rem;
  }

  .px-4\@xs {
    padding-inline: 1rem;
  }

  .py-4\@xs {
    padding-block: 1rem;
  }

  .pt-4\@xs {
    padding-top: 1rem;
  }

  .pr-4\@xs {
    padding-right: 1rem;
  }

  .pb-4\@xs {
    padding-bottom: 1rem;
  }

  .pl-4\@xs {
    padding-left: 1rem;
  }

  .m-4\@xs {
    margin: 1rem;
  }

  .mx-4\@xs {
    margin-inline: 1rem;
  }

  .my-4\@xs {
    margin-block: 1rem;
  }

  .mt-4\@xs {
    margin-top: 1rem;
  }

  .mr-4\@xs {
    margin-right: 1rem;
  }

  .mb-4\@xs {
    margin-bottom: 1rem;
  }

  .ml-4\@xs {
    margin-left: 1rem;
  }

  .gap-4\@xs {
    gap: 1rem;
  }

  .gap-x-4\@xs {
    column-gap: 1rem;
  }

  .gap-y-4\@xs {
    row-gap: 1rem;
  }

  .space-x-4\@xs>*+* {
    margin-left: 1rem;
  }

  .space-y-4\@xs>*+* {
    margin-top: 1rem;
  }

  .inset-4\@xs {
    inset: 1rem;
  }

  .inset-x-4\@xs {
    left: 1rem;
    right: 1rem;
  }

  .inset-y-4\@xs {
    top: 1rem;
    bottom: 1rem;
  }

  .p-5\@xs {
    padding: 1.25rem;
  }

  .px-5\@xs {
    padding-inline: 1.25rem;
  }

  .py-5\@xs {
    padding-block: 1.25rem;
  }

  .pt-5\@xs {
    padding-top: 1.25rem;
  }

  .pr-5\@xs {
    padding-right: 1.25rem;
  }

  .pb-5\@xs {
    padding-bottom: 1.25rem;
  }

  .pl-5\@xs {
    padding-left: 1.25rem;
  }

  .m-5\@xs {
    margin: 1.25rem;
  }

  .mx-5\@xs {
    margin-inline: 1.25rem;
  }

  .my-5\@xs {
    margin-block: 1.25rem;
  }

  .mt-5\@xs {
    margin-top: 1.25rem;
  }

  .mr-5\@xs {
    margin-right: 1.25rem;
  }

  .mb-5\@xs {
    margin-bottom: 1.25rem;
  }

  .ml-5\@xs {
    margin-left: 1.25rem;
  }

  .gap-5\@xs {
    gap: 1.25rem;
  }

  .gap-x-5\@xs {
    column-gap: 1.25rem;
  }

  .gap-y-5\@xs {
    row-gap: 1.25rem;
  }

  .space-x-5\@xs>*+* {
    margin-left: 1.25rem;
  }

  .space-y-5\@xs>*+* {
    margin-top: 1.25rem;
  }

  .inset-5\@xs {
    inset: 1.25rem;
  }

  .inset-x-5\@xs {
    left: 1.25rem;
    right: 1.25rem;
  }

  .inset-y-5\@xs {
    top: 1.25rem;
    bottom: 1.25rem;
  }

  .p-6\@xs {
    padding: 1.5rem;
  }

  .px-6\@xs {
    padding-inline: 1.5rem;
  }

  .py-6\@xs {
    padding-block: 1.5rem;
  }

  .pt-6\@xs {
    padding-top: 1.5rem;
  }

  .pr-6\@xs {
    padding-right: 1.5rem;
  }

  .pb-6\@xs {
    padding-bottom: 1.5rem;
  }

  .pl-6\@xs {
    padding-left: 1.5rem;
  }

  .m-6\@xs {
    margin: 1.5rem;
  }

  .mx-6\@xs {
    margin-inline: 1.5rem;
  }

  .my-6\@xs {
    margin-block: 1.5rem;
  }

  .mt-6\@xs {
    margin-top: 1.5rem;
  }

  .mr-6\@xs {
    margin-right: 1.5rem;
  }

  .mb-6\@xs {
    margin-bottom: 1.5rem;
  }

  .ml-6\@xs {
    margin-left: 1.5rem;
  }

  .gap-6\@xs {
    gap: 1.5rem;
  }

  .gap-x-6\@xs {
    column-gap: 1.5rem;
  }

  .gap-y-6\@xs {
    row-gap: 1.5rem;
  }

  .space-x-6\@xs>*+* {
    margin-left: 1.5rem;
  }

  .space-y-6\@xs>*+* {
    margin-top: 1.5rem;
  }

  .inset-6\@xs {
    inset: 1.5rem;
  }

  .inset-x-6\@xs {
    left: 1.5rem;
    right: 1.5rem;
  }

  .inset-y-6\@xs {
    top: 1.5rem;
    bottom: 1.5rem;
  }

  .p-8\@xs {
    padding: 2rem;
  }

  .px-8\@xs {
    padding-inline: 2rem;
  }

  .py-8\@xs {
    padding-block: 2rem;
  }

  .pt-8\@xs {
    padding-top: 2rem;
  }

  .pr-8\@xs {
    padding-right: 2rem;
  }

  .pb-8\@xs {
    padding-bottom: 2rem;
  }

  .pl-8\@xs {
    padding-left: 2rem;
  }

  .m-8\@xs {
    margin: 2rem;
  }

  .mx-8\@xs {
    margin-inline: 2rem;
  }

  .my-8\@xs {
    margin-block: 2rem;
  }

  .mt-8\@xs {
    margin-top: 2rem;
  }

  .mr-8\@xs {
    margin-right: 2rem;
  }

  .mb-8\@xs {
    margin-bottom: 2rem;
  }

  .ml-8\@xs {
    margin-left: 2rem;
  }

  .gap-8\@xs {
    gap: 2rem;
  }

  .gap-x-8\@xs {
    column-gap: 2rem;
  }

  .gap-y-8\@xs {
    row-gap: 2rem;
  }

  .space-x-8\@xs>*+* {
    margin-left: 2rem;
  }

  .space-y-8\@xs>*+* {
    margin-top: 2rem;
  }

  .inset-8\@xs {
    inset: 2rem;
  }

  .inset-x-8\@xs {
    left: 2rem;
    right: 2rem;
  }

  .inset-y-8\@xs {
    top: 2rem;
    bottom: 2rem;
  }

  .p-10\@xs {
    padding: 2.5rem;
  }

  .px-10\@xs {
    padding-inline: 2.5rem;
  }

  .py-10\@xs {
    padding-block: 2.5rem;
  }

  .pt-10\@xs {
    padding-top: 2.5rem;
  }

  .pr-10\@xs {
    padding-right: 2.5rem;
  }

  .pb-10\@xs {
    padding-bottom: 2.5rem;
  }

  .pl-10\@xs {
    padding-left: 2.5rem;
  }

  .m-10\@xs {
    margin: 2.5rem;
  }

  .mx-10\@xs {
    margin-inline: 2.5rem;
  }

  .my-10\@xs {
    margin-block: 2.5rem;
  }

  .mt-10\@xs {
    margin-top: 2.5rem;
  }

  .mr-10\@xs {
    margin-right: 2.5rem;
  }

  .mb-10\@xs {
    margin-bottom: 2.5rem;
  }

  .ml-10\@xs {
    margin-left: 2.5rem;
  }

  .gap-10\@xs {
    gap: 2.5rem;
  }

  .gap-x-10\@xs {
    column-gap: 2.5rem;
  }

  .gap-y-10\@xs {
    row-gap: 2.5rem;
  }

  .space-x-10\@xs>*+* {
    margin-left: 2.5rem;
  }

  .space-y-10\@xs>*+* {
    margin-top: 2.5rem;
  }

  .inset-10\@xs {
    inset: 2.5rem;
  }

  .inset-x-10\@xs {
    left: 2.5rem;
    right: 2.5rem;
  }

  .inset-y-10\@xs {
    top: 2.5rem;
    bottom: 2.5rem;
  }

  .p-12\@xs {
    padding: 3rem;
  }

  .px-12\@xs {
    padding-inline: 3rem;
  }

  .py-12\@xs {
    padding-block: 3rem;
  }

  .pt-12\@xs {
    padding-top: 3rem;
  }

  .pr-12\@xs {
    padding-right: 3rem;
  }

  .pb-12\@xs {
    padding-bottom: 3rem;
  }

  .pl-12\@xs {
    padding-left: 3rem;
  }

  .m-12\@xs {
    margin: 3rem;
  }

  .mx-12\@xs {
    margin-inline: 3rem;
  }

  .my-12\@xs {
    margin-block: 3rem;
  }

  .mt-12\@xs {
    margin-top: 3rem;
  }

  .mr-12\@xs {
    margin-right: 3rem;
  }

  .mb-12\@xs {
    margin-bottom: 3rem;
  }

  .ml-12\@xs {
    margin-left: 3rem;
  }

  .gap-12\@xs {
    gap: 3rem;
  }

  .gap-x-12\@xs {
    column-gap: 3rem;
  }

  .gap-y-12\@xs {
    row-gap: 3rem;
  }

  .space-x-12\@xs>*+* {
    margin-left: 3rem;
  }

  .space-y-12\@xs>*+* {
    margin-top: 3rem;
  }

  .inset-12\@xs {
    inset: 3rem;
  }

  .inset-x-12\@xs {
    left: 3rem;
    right: 3rem;
  }

  .inset-y-12\@xs {
    top: 3rem;
    bottom: 3rem;
  }

  .p-16\@xs {
    padding: 4rem;
  }

  .px-16\@xs {
    padding-inline: 4rem;
  }

  .py-16\@xs {
    padding-block: 4rem;
  }

  .pt-16\@xs {
    padding-top: 4rem;
  }

  .pr-16\@xs {
    padding-right: 4rem;
  }

  .pb-16\@xs {
    padding-bottom: 4rem;
  }

  .pl-16\@xs {
    padding-left: 4rem;
  }

  .m-16\@xs {
    margin: 4rem;
  }

  .mx-16\@xs {
    margin-inline: 4rem;
  }

  .my-16\@xs {
    margin-block: 4rem;
  }

  .mt-16\@xs {
    margin-top: 4rem;
  }

  .mr-16\@xs {
    margin-right: 4rem;
  }

  .mb-16\@xs {
    margin-bottom: 4rem;
  }

  .ml-16\@xs {
    margin-left: 4rem;
  }

  .gap-16\@xs {
    gap: 4rem;
  }

  .gap-x-16\@xs {
    column-gap: 4rem;
  }

  .gap-y-16\@xs {
    row-gap: 4rem;
  }

  .space-x-16\@xs>*+* {
    margin-left: 4rem;
  }

  .space-y-16\@xs>*+* {
    margin-top: 4rem;
  }

  .inset-16\@xs {
    inset: 4rem;
  }

  .inset-x-16\@xs {
    left: 4rem;
    right: 4rem;
  }

  .inset-y-16\@xs {
    top: 4rem;
    bottom: 4rem;
  }

  .p-20\@xs {
    padding: 5rem;
  }

  .px-20\@xs {
    padding-inline: 5rem;
  }

  .py-20\@xs {
    padding-block: 5rem;
  }

  .pt-20\@xs {
    padding-top: 5rem;
  }

  .pr-20\@xs {
    padding-right: 5rem;
  }

  .pb-20\@xs {
    padding-bottom: 5rem;
  }

  .pl-20\@xs {
    padding-left: 5rem;
  }

  .m-20\@xs {
    margin: 5rem;
  }

  .mx-20\@xs {
    margin-inline: 5rem;
  }

  .my-20\@xs {
    margin-block: 5rem;
  }

  .mt-20\@xs {
    margin-top: 5rem;
  }

  .mr-20\@xs {
    margin-right: 5rem;
  }

  .mb-20\@xs {
    margin-bottom: 5rem;
  }

  .ml-20\@xs {
    margin-left: 5rem;
  }

  .gap-20\@xs {
    gap: 5rem;
  }

  .gap-x-20\@xs {
    column-gap: 5rem;
  }

  .gap-y-20\@xs {
    row-gap: 5rem;
  }

  .space-x-20\@xs>*+* {
    margin-left: 5rem;
  }

  .space-y-20\@xs>*+* {
    margin-top: 5rem;
  }

  .inset-20\@xs {
    inset: 5rem;
  }

  .inset-x-20\@xs {
    left: 5rem;
    right: 5rem;
  }

  .inset-y-20\@xs {
    top: 5rem;
    bottom: 5rem;
  }

  .p-24\@xs {
    padding: 6rem;
  }

  .px-24\@xs {
    padding-inline: 6rem;
  }

  .py-24\@xs {
    padding-block: 6rem;
  }

  .pt-24\@xs {
    padding-top: 6rem;
  }

  .pr-24\@xs {
    padding-right: 6rem;
  }

  .pb-24\@xs {
    padding-bottom: 6rem;
  }

  .pl-24\@xs {
    padding-left: 6rem;
  }

  .m-24\@xs {
    margin: 6rem;
  }

  .mx-24\@xs {
    margin-inline: 6rem;
  }

  .my-24\@xs {
    margin-block: 6rem;
  }

  .mt-24\@xs {
    margin-top: 6rem;
  }

  .mr-24\@xs {
    margin-right: 6rem;
  }

  .mb-24\@xs {
    margin-bottom: 6rem;
  }

  .ml-24\@xs {
    margin-left: 6rem;
  }

  .gap-24\@xs {
    gap: 6rem;
  }

  .gap-x-24\@xs {
    column-gap: 6rem;
  }

  .gap-y-24\@xs {
    row-gap: 6rem;
  }

  .space-x-24\@xs>*+* {
    margin-left: 6rem;
  }

  .space-y-24\@xs>*+* {
    margin-top: 6rem;
  }

  .inset-24\@xs {
    inset: 6rem;
  }

  .inset-x-24\@xs {
    left: 6rem;
    right: 6rem;
  }

  .inset-y-24\@xs {
    top: 6rem;
    bottom: 6rem;
  }

  .p-32\@xs {
    padding: 8rem;
  }

  .px-32\@xs {
    padding-inline: 8rem;
  }

  .py-32\@xs {
    padding-block: 8rem;
  }

  .pt-32\@xs {
    padding-top: 8rem;
  }

  .pr-32\@xs {
    padding-right: 8rem;
  }

  .pb-32\@xs {
    padding-bottom: 8rem;
  }

  .pl-32\@xs {
    padding-left: 8rem;
  }

  .m-32\@xs {
    margin: 8rem;
  }

  .mx-32\@xs {
    margin-inline: 8rem;
  }

  .my-32\@xs {
    margin-block: 8rem;
  }

  .mt-32\@xs {
    margin-top: 8rem;
  }

  .mr-32\@xs {
    margin-right: 8rem;
  }

  .mb-32\@xs {
    margin-bottom: 8rem;
  }

  .ml-32\@xs {
    margin-left: 8rem;
  }

  .gap-32\@xs {
    gap: 8rem;
  }

  .gap-x-32\@xs {
    column-gap: 8rem;
  }

  .gap-y-32\@xs {
    row-gap: 8rem;
  }

  .space-x-32\@xs>*+* {
    margin-left: 8rem;
  }

  .space-y-32\@xs>*+* {
    margin-top: 8rem;
  }

  .inset-32\@xs {
    inset: 8rem;
  }

  .inset-x-32\@xs {
    left: 8rem;
    right: 8rem;
  }

  .inset-y-32\@xs {
    top: 8rem;
    bottom: 8rem;
  }

  .p-40\@xs {
    padding: 10rem;
  }

  .px-40\@xs {
    padding-inline: 10rem;
  }

  .py-40\@xs {
    padding-block: 10rem;
  }

  .pt-40\@xs {
    padding-top: 10rem;
  }

  .pr-40\@xs {
    padding-right: 10rem;
  }

  .pb-40\@xs {
    padding-bottom: 10rem;
  }

  .pl-40\@xs {
    padding-left: 10rem;
  }

  .m-40\@xs {
    margin: 10rem;
  }

  .mx-40\@xs {
    margin-inline: 10rem;
  }

  .my-40\@xs {
    margin-block: 10rem;
  }

  .mt-40\@xs {
    margin-top: 10rem;
  }

  .mr-40\@xs {
    margin-right: 10rem;
  }

  .mb-40\@xs {
    margin-bottom: 10rem;
  }

  .ml-40\@xs {
    margin-left: 10rem;
  }

  .gap-40\@xs {
    gap: 10rem;
  }

  .gap-x-40\@xs {
    column-gap: 10rem;
  }

  .gap-y-40\@xs {
    row-gap: 10rem;
  }

  .space-x-40\@xs>*+* {
    margin-left: 10rem;
  }

  .space-y-40\@xs>*+* {
    margin-top: 10rem;
  }

  .inset-40\@xs {
    inset: 10rem;
  }

  .inset-x-40\@xs {
    left: 10rem;
    right: 10rem;
  }

  .inset-y-40\@xs {
    top: 10rem;
    bottom: 10rem;
  }

  .p-48\@xs {
    padding: 12rem;
  }

  .px-48\@xs {
    padding-inline: 12rem;
  }

  .py-48\@xs {
    padding-block: 12rem;
  }

  .pt-48\@xs {
    padding-top: 12rem;
  }

  .pr-48\@xs {
    padding-right: 12rem;
  }

  .pb-48\@xs {
    padding-bottom: 12rem;
  }

  .pl-48\@xs {
    padding-left: 12rem;
  }

  .m-48\@xs {
    margin: 12rem;
  }

  .mx-48\@xs {
    margin-inline: 12rem;
  }

  .my-48\@xs {
    margin-block: 12rem;
  }

  .mt-48\@xs {
    margin-top: 12rem;
  }

  .mr-48\@xs {
    margin-right: 12rem;
  }

  .mb-48\@xs {
    margin-bottom: 12rem;
  }

  .ml-48\@xs {
    margin-left: 12rem;
  }

  .gap-48\@xs {
    gap: 12rem;
  }

  .gap-x-48\@xs {
    column-gap: 12rem;
  }

  .gap-y-48\@xs {
    row-gap: 12rem;
  }

  .space-x-48\@xs>*+* {
    margin-left: 12rem;
  }

  .space-y-48\@xs>*+* {
    margin-top: 12rem;
  }

  .inset-48\@xs {
    inset: 12rem;
  }

  .inset-x-48\@xs {
    left: 12rem;
    right: 12rem;
  }

  .inset-y-48\@xs {
    top: 12rem;
    bottom: 12rem;
  }

  .p-56\@xs {
    padding: 14rem;
  }

  .px-56\@xs {
    padding-inline: 14rem;
  }

  .py-56\@xs {
    padding-block: 14rem;
  }

  .pt-56\@xs {
    padding-top: 14rem;
  }

  .pr-56\@xs {
    padding-right: 14rem;
  }

  .pb-56\@xs {
    padding-bottom: 14rem;
  }

  .pl-56\@xs {
    padding-left: 14rem;
  }

  .m-56\@xs {
    margin: 14rem;
  }

  .mx-56\@xs {
    margin-inline: 14rem;
  }

  .my-56\@xs {
    margin-block: 14rem;
  }

  .mt-56\@xs {
    margin-top: 14rem;
  }

  .mr-56\@xs {
    margin-right: 14rem;
  }

  .mb-56\@xs {
    margin-bottom: 14rem;
  }

  .ml-56\@xs {
    margin-left: 14rem;
  }

  .gap-56\@xs {
    gap: 14rem;
  }

  .gap-x-56\@xs {
    column-gap: 14rem;
  }

  .gap-y-56\@xs {
    row-gap: 14rem;
  }

  .space-x-56\@xs>*+* {
    margin-left: 14rem;
  }

  .space-y-56\@xs>*+* {
    margin-top: 14rem;
  }

  .inset-56\@xs {
    inset: 14rem;
  }

  .inset-x-56\@xs {
    left: 14rem;
    right: 14rem;
  }

  .inset-y-56\@xs {
    top: 14rem;
    bottom: 14rem;
  }

  .p-64\@xs {
    padding: 16rem;
  }

  .px-64\@xs {
    padding-inline: 16rem;
  }

  .py-64\@xs {
    padding-block: 16rem;
  }

  .pt-64\@xs {
    padding-top: 16rem;
  }

  .pr-64\@xs {
    padding-right: 16rem;
  }

  .pb-64\@xs {
    padding-bottom: 16rem;
  }

  .pl-64\@xs {
    padding-left: 16rem;
  }

  .m-64\@xs {
    margin: 16rem;
  }

  .mx-64\@xs {
    margin-inline: 16rem;
  }

  .my-64\@xs {
    margin-block: 16rem;
  }

  .mt-64\@xs {
    margin-top: 16rem;
  }

  .mr-64\@xs {
    margin-right: 16rem;
  }

  .mb-64\@xs {
    margin-bottom: 16rem;
  }

  .ml-64\@xs {
    margin-left: 16rem;
  }

  .gap-64\@xs {
    gap: 16rem;
  }

  .gap-x-64\@xs {
    column-gap: 16rem;
  }

  .gap-y-64\@xs {
    row-gap: 16rem;
  }

  .space-x-64\@xs>*+* {
    margin-left: 16rem;
  }

  .space-y-64\@xs>*+* {
    margin-top: 16rem;
  }

  .inset-64\@xs {
    inset: 16rem;
  }

  .inset-x-64\@xs {
    left: 16rem;
    right: 16rem;
  }

  .inset-y-64\@xs {
    top: 16rem;
    bottom: 16rem;
  }

  .p-120\@xs {
    padding: 30rem;
  }

  .px-120\@xs {
    padding-inline: 30rem;
  }

  .py-120\@xs {
    padding-block: 30rem;
  }

  .pt-120\@xs {
    padding-top: 30rem;
  }

  .pr-120\@xs {
    padding-right: 30rem;
  }

  .pb-120\@xs {
    padding-bottom: 30rem;
  }

  .pl-120\@xs {
    padding-left: 30rem;
  }

  .m-120\@xs {
    margin: 30rem;
  }

  .mx-120\@xs {
    margin-inline: 30rem;
  }

  .my-120\@xs {
    margin-block: 30rem;
  }

  .mt-120\@xs {
    margin-top: 30rem;
  }

  .mr-120\@xs {
    margin-right: 30rem;
  }

  .mb-120\@xs {
    margin-bottom: 30rem;
  }

  .ml-120\@xs {
    margin-left: 30rem;
  }

  .gap-120\@xs {
    gap: 30rem;
  }

  .gap-x-120\@xs {
    column-gap: 30rem;
  }

  .gap-y-120\@xs {
    row-gap: 30rem;
  }

  .space-x-120\@xs>*+* {
    margin-left: 30rem;
  }

  .space-y-120\@xs>*+* {
    margin-top: 30rem;
  }

  .inset-120\@xs {
    inset: 30rem;
  }

  .inset-x-120\@xs {
    left: 30rem;
    right: 30rem;
  }

  .inset-y-120\@xs {
    top: 30rem;
    bottom: 30rem;
  }
}

@media (min-width: 640px) {
  .mx-auto\@sm {
    margin-left: auto;
    margin-right: auto;
  }

  .ml-auto\@sm {
    margin-left: auto;
  }

  .mr-auto\@sm {
    margin-right: auto;
  }

  .inset-auto\@sm {
    inset: auto;
  }

  .inset-x-auto\@sm {
    left: auto;
    right: auto;
  }

  .inset-y-auto\@sm {
    top: auto;
    bottom: auto;
  }

  .p-0\@sm {
    padding: 0px;
  }

  .px-0\@sm {
    padding-inline: 0px;
  }

  .py-0\@sm {
    padding-block: 0px;
  }

  .pt-0\@sm {
    padding-top: 0px;
  }

  .pr-0\@sm {
    padding-right: 0px;
  }

  .pb-0\@sm {
    padding-bottom: 0px;
  }

  .pl-0\@sm {
    padding-left: 0px;
  }

  .m-0\@sm {
    margin: 0px;
  }

  .mx-0\@sm {
    margin-inline: 0px;
  }

  .my-0\@sm {
    margin-block: 0px;
  }

  .mt-0\@sm {
    margin-top: 0px;
  }

  .mr-0\@sm {
    margin-right: 0px;
  }

  .mb-0\@sm {
    margin-bottom: 0px;
  }

  .ml-0\@sm {
    margin-left: 0px;
  }

  .gap-0\@sm {
    gap: 0;
  }

  .gap-x-0\@sm {
    column-gap: 0;
  }

  .gap-y-0\@sm {
    row-gap: 0;
  }

  .space-x-0\@sm>*+* {
    margin-left: 0px;
  }

  .space-y-0\@sm>*+* {
    margin-top: 0px;
  }

  .inset-0\@sm {
    inset: 0px;
  }

  .inset-x-0\@sm {
    left: 0px;
    right: 0px;
  }

  .inset-y-0\@sm {
    top: 0px;
    bottom: 0px;
  }

  .p-1\@sm {
    padding: 0.25rem;
  }

  .px-1\@sm {
    padding-inline: 0.25rem;
  }

  .py-1\@sm {
    padding-block: 0.25rem;
  }

  .pt-1\@sm {
    padding-top: 0.25rem;
  }

  .pr-1\@sm {
    padding-right: 0.25rem;
  }

  .pb-1\@sm {
    padding-bottom: 0.25rem;
  }

  .pl-1\@sm {
    padding-left: 0.25rem;
  }

  .m-1\@sm {
    margin: 0.25rem;
  }

  .mx-1\@sm {
    margin-inline: 0.25rem;
  }

  .my-1\@sm {
    margin-block: 0.25rem;
  }

  .mt-1\@sm {
    margin-top: 0.25rem;
  }

  .mr-1\@sm {
    margin-right: 0.25rem;
  }

  .mb-1\@sm {
    margin-bottom: 0.25rem;
  }

  .ml-1\@sm {
    margin-left: 0.25rem;
  }

  .gap-1\@sm {
    gap: 0.25rem;
  }

  .gap-x-1\@sm {
    column-gap: 0.25rem;
  }

  .gap-y-1\@sm {
    row-gap: 0.25rem;
  }

  .space-x-1\@sm>*+* {
    margin-left: 0.25rem;
  }

  .space-y-1\@sm>*+* {
    margin-top: 0.25rem;
  }

  .inset-1\@sm {
    inset: 0.25rem;
  }

  .inset-x-1\@sm {
    left: 0.25rem;
    right: 0.25rem;
  }

  .inset-y-1\@sm {
    top: 0.25rem;
    bottom: 0.25rem;
  }

  .p-2\@sm {
    padding: 0.5rem;
  }

  .px-2\@sm {
    padding-inline: 0.5rem;
  }

  .py-2\@sm {
    padding-block: 0.5rem;
  }

  .pt-2\@sm {
    padding-top: 0.5rem;
  }

  .pr-2\@sm {
    padding-right: 0.5rem;
  }

  .pb-2\@sm {
    padding-bottom: 0.5rem;
  }

  .pl-2\@sm {
    padding-left: 0.5rem;
  }

  .m-2\@sm {
    margin: 0.5rem;
  }

  .mx-2\@sm {
    margin-inline: 0.5rem;
  }

  .my-2\@sm {
    margin-block: 0.5rem;
  }

  .mt-2\@sm {
    margin-top: 0.5rem;
  }

  .mr-2\@sm {
    margin-right: 0.5rem;
  }

  .mb-2\@sm {
    margin-bottom: 0.5rem;
  }

  .ml-2\@sm {
    margin-left: 0.5rem;
  }

  .gap-2\@sm {
    gap: 0.5rem;
  }

  .gap-x-2\@sm {
    column-gap: 0.5rem;
  }

  .gap-y-2\@sm {
    row-gap: 0.5rem;
  }

  .space-x-2\@sm>*+* {
    margin-left: 0.5rem;
  }

  .space-y-2\@sm>*+* {
    margin-top: 0.5rem;
  }

  .inset-2\@sm {
    inset: 0.5rem;
  }

  .inset-x-2\@sm {
    left: 0.5rem;
    right: 0.5rem;
  }

  .inset-y-2\@sm {
    top: 0.5rem;
    bottom: 0.5rem;
  }

  .p-3\@sm {
    padding: 0.75rem;
  }

  .px-3\@sm {
    padding-inline: 0.75rem;
  }

  .py-3\@sm {
    padding-block: 0.75rem;
  }

  .pt-3\@sm {
    padding-top: 0.75rem;
  }

  .pr-3\@sm {
    padding-right: 0.75rem;
  }

  .pb-3\@sm {
    padding-bottom: 0.75rem;
  }

  .pl-3\@sm {
    padding-left: 0.75rem;
  }

  .m-3\@sm {
    margin: 0.75rem;
  }

  .mx-3\@sm {
    margin-inline: 0.75rem;
  }

  .my-3\@sm {
    margin-block: 0.75rem;
  }

  .mt-3\@sm {
    margin-top: 0.75rem;
  }

  .mr-3\@sm {
    margin-right: 0.75rem;
  }

  .mb-3\@sm {
    margin-bottom: 0.75rem;
  }

  .ml-3\@sm {
    margin-left: 0.75rem;
  }

  .gap-3\@sm {
    gap: 0.75rem;
  }

  .gap-x-3\@sm {
    column-gap: 0.75rem;
  }

  .gap-y-3\@sm {
    row-gap: 0.75rem;
  }

  .space-x-3\@sm>*+* {
    margin-left: 0.75rem;
  }

  .space-y-3\@sm>*+* {
    margin-top: 0.75rem;
  }

  .inset-3\@sm {
    inset: 0.75rem;
  }

  .inset-x-3\@sm {
    left: 0.75rem;
    right: 0.75rem;
  }

  .inset-y-3\@sm {
    top: 0.75rem;
    bottom: 0.75rem;
  }

  .p-4\@sm {
    padding: 1rem;
  }

  .px-4\@sm {
    padding-inline: 1rem;
  }

  .py-4\@sm {
    padding-block: 1rem;
  }

  .pt-4\@sm {
    padding-top: 1rem;
  }

  .pr-4\@sm {
    padding-right: 1rem;
  }

  .pb-4\@sm {
    padding-bottom: 1rem;
  }

  .pl-4\@sm {
    padding-left: 1rem;
  }

  .m-4\@sm {
    margin: 1rem;
  }

  .mx-4\@sm {
    margin-inline: 1rem;
  }

  .my-4\@sm {
    margin-block: 1rem;
  }

  .mt-4\@sm {
    margin-top: 1rem;
  }

  .mr-4\@sm {
    margin-right: 1rem;
  }

  .mb-4\@sm {
    margin-bottom: 1rem;
  }

  .ml-4\@sm {
    margin-left: 1rem;
  }

  .gap-4\@sm {
    gap: 1rem;
  }

  .gap-x-4\@sm {
    column-gap: 1rem;
  }

  .gap-y-4\@sm {
    row-gap: 1rem;
  }

  .space-x-4\@sm>*+* {
    margin-left: 1rem;
  }

  .space-y-4\@sm>*+* {
    margin-top: 1rem;
  }

  .inset-4\@sm {
    inset: 1rem;
  }

  .inset-x-4\@sm {
    left: 1rem;
    right: 1rem;
  }

  .inset-y-4\@sm {
    top: 1rem;
    bottom: 1rem;
  }

  .p-5\@sm {
    padding: 1.25rem;
  }

  .px-5\@sm {
    padding-inline: 1.25rem;
  }

  .py-5\@sm {
    padding-block: 1.25rem;
  }

  .pt-5\@sm {
    padding-top: 1.25rem;
  }

  .pr-5\@sm {
    padding-right: 1.25rem;
  }

  .pb-5\@sm {
    padding-bottom: 1.25rem;
  }

  .pl-5\@sm {
    padding-left: 1.25rem;
  }

  .m-5\@sm {
    margin: 1.25rem;
  }

  .mx-5\@sm {
    margin-inline: 1.25rem;
  }

  .my-5\@sm {
    margin-block: 1.25rem;
  }

  .mt-5\@sm {
    margin-top: 1.25rem;
  }

  .mr-5\@sm {
    margin-right: 1.25rem;
  }

  .mb-5\@sm {
    margin-bottom: 1.25rem;
  }

  .ml-5\@sm {
    margin-left: 1.25rem;
  }

  .gap-5\@sm {
    gap: 1.25rem;
  }

  .gap-x-5\@sm {
    column-gap: 1.25rem;
  }

  .gap-y-5\@sm {
    row-gap: 1.25rem;
  }

  .space-x-5\@sm>*+* {
    margin-left: 1.25rem;
  }

  .space-y-5\@sm>*+* {
    margin-top: 1.25rem;
  }

  .inset-5\@sm {
    inset: 1.25rem;
  }

  .inset-x-5\@sm {
    left: 1.25rem;
    right: 1.25rem;
  }

  .inset-y-5\@sm {
    top: 1.25rem;
    bottom: 1.25rem;
  }

  .p-6\@sm {
    padding: 1.5rem;
  }

  .px-6\@sm {
    padding-inline: 1.5rem;
  }

  .py-6\@sm {
    padding-block: 1.5rem;
  }

  .pt-6\@sm {
    padding-top: 1.5rem;
  }

  .pr-6\@sm {
    padding-right: 1.5rem;
  }

  .pb-6\@sm {
    padding-bottom: 1.5rem;
  }

  .pl-6\@sm {
    padding-left: 1.5rem;
  }

  .m-6\@sm {
    margin: 1.5rem;
  }

  .mx-6\@sm {
    margin-inline: 1.5rem;
  }

  .my-6\@sm {
    margin-block: 1.5rem;
  }

  .mt-6\@sm {
    margin-top: 1.5rem;
  }

  .mr-6\@sm {
    margin-right: 1.5rem;
  }

  .mb-6\@sm {
    margin-bottom: 1.5rem;
  }

  .ml-6\@sm {
    margin-left: 1.5rem;
  }

  .gap-6\@sm {
    gap: 1.5rem;
  }

  .gap-x-6\@sm {
    column-gap: 1.5rem;
  }

  .gap-y-6\@sm {
    row-gap: 1.5rem;
  }

  .space-x-6\@sm>*+* {
    margin-left: 1.5rem;
  }

  .space-y-6\@sm>*+* {
    margin-top: 1.5rem;
  }

  .inset-6\@sm {
    inset: 1.5rem;
  }

  .inset-x-6\@sm {
    left: 1.5rem;
    right: 1.5rem;
  }

  .inset-y-6\@sm {
    top: 1.5rem;
    bottom: 1.5rem;
  }

  .p-8\@sm {
    padding: 2rem;
  }

  .px-8\@sm {
    padding-inline: 2rem;
  }

  .py-8\@sm {
    padding-block: 2rem;
  }

  .pt-8\@sm {
    padding-top: 2rem;
  }

  .pr-8\@sm {
    padding-right: 2rem;
  }

  .pb-8\@sm {
    padding-bottom: 2rem;
  }

  .pl-8\@sm {
    padding-left: 2rem;
  }

  .m-8\@sm {
    margin: 2rem;
  }

  .mx-8\@sm {
    margin-inline: 2rem;
  }

  .my-8\@sm {
    margin-block: 2rem;
  }

  .mt-8\@sm {
    margin-top: 2rem;
  }

  .mr-8\@sm {
    margin-right: 2rem;
  }

  .mb-8\@sm {
    margin-bottom: 2rem;
  }

  .ml-8\@sm {
    margin-left: 2rem;
  }

  .gap-8\@sm {
    gap: 2rem;
  }

  .gap-x-8\@sm {
    column-gap: 2rem;
  }

  .gap-y-8\@sm {
    row-gap: 2rem;
  }

  .space-x-8\@sm>*+* {
    margin-left: 2rem;
  }

  .space-y-8\@sm>*+* {
    margin-top: 2rem;
  }

  .inset-8\@sm {
    inset: 2rem;
  }

  .inset-x-8\@sm {
    left: 2rem;
    right: 2rem;
  }

  .inset-y-8\@sm {
    top: 2rem;
    bottom: 2rem;
  }

  .p-10\@sm {
    padding: 2.5rem;
  }

  .px-10\@sm {
    padding-inline: 2.5rem;
  }

  .py-10\@sm {
    padding-block: 2.5rem;
  }

  .pt-10\@sm {
    padding-top: 2.5rem;
  }

  .pr-10\@sm {
    padding-right: 2.5rem;
  }

  .pb-10\@sm {
    padding-bottom: 2.5rem;
  }

  .pl-10\@sm {
    padding-left: 2.5rem;
  }

  .m-10\@sm {
    margin: 2.5rem;
  }

  .mx-10\@sm {
    margin-inline: 2.5rem;
  }

  .my-10\@sm {
    margin-block: 2.5rem;
  }

  .mt-10\@sm {
    margin-top: 2.5rem;
  }

  .mr-10\@sm {
    margin-right: 2.5rem;
  }

  .mb-10\@sm {
    margin-bottom: 2.5rem;
  }

  .ml-10\@sm {
    margin-left: 2.5rem;
  }

  .gap-10\@sm {
    gap: 2.5rem;
  }

  .gap-x-10\@sm {
    column-gap: 2.5rem;
  }

  .gap-y-10\@sm {
    row-gap: 2.5rem;
  }

  .space-x-10\@sm>*+* {
    margin-left: 2.5rem;
  }

  .space-y-10\@sm>*+* {
    margin-top: 2.5rem;
  }

  .inset-10\@sm {
    inset: 2.5rem;
  }

  .inset-x-10\@sm {
    left: 2.5rem;
    right: 2.5rem;
  }

  .inset-y-10\@sm {
    top: 2.5rem;
    bottom: 2.5rem;
  }

  .p-12\@sm {
    padding: 3rem;
  }

  .px-12\@sm {
    padding-inline: 3rem;
  }

  .py-12\@sm {
    padding-block: 3rem;
  }

  .pt-12\@sm {
    padding-top: 3rem;
  }

  .pr-12\@sm {
    padding-right: 3rem;
  }

  .pb-12\@sm {
    padding-bottom: 3rem;
  }

  .pl-12\@sm {
    padding-left: 3rem;
  }

  .m-12\@sm {
    margin: 3rem;
  }

  .mx-12\@sm {
    margin-inline: 3rem;
  }

  .my-12\@sm {
    margin-block: 3rem;
  }

  .mt-12\@sm {
    margin-top: 3rem;
  }

  .mr-12\@sm {
    margin-right: 3rem;
  }

  .mb-12\@sm {
    margin-bottom: 3rem;
  }

  .ml-12\@sm {
    margin-left: 3rem;
  }

  .gap-12\@sm {
    gap: 3rem;
  }

  .gap-x-12\@sm {
    column-gap: 3rem;
  }

  .gap-y-12\@sm {
    row-gap: 3rem;
  }

  .space-x-12\@sm>*+* {
    margin-left: 3rem;
  }

  .space-y-12\@sm>*+* {
    margin-top: 3rem;
  }

  .inset-12\@sm {
    inset: 3rem;
  }

  .inset-x-12\@sm {
    left: 3rem;
    right: 3rem;
  }

  .inset-y-12\@sm {
    top: 3rem;
    bottom: 3rem;
  }

  .p-16\@sm {
    padding: 4rem;
  }

  .px-16\@sm {
    padding-inline: 4rem;
  }

  .py-16\@sm {
    padding-block: 4rem;
  }

  .pt-16\@sm {
    padding-top: 4rem;
  }

  .pr-16\@sm {
    padding-right: 4rem;
  }

  .pb-16\@sm {
    padding-bottom: 4rem;
  }

  .pl-16\@sm {
    padding-left: 4rem;
  }

  .m-16\@sm {
    margin: 4rem;
  }

  .mx-16\@sm {
    margin-inline: 4rem;
  }

  .my-16\@sm {
    margin-block: 4rem;
  }

  .mt-16\@sm {
    margin-top: 4rem;
  }

  .mr-16\@sm {
    margin-right: 4rem;
  }

  .mb-16\@sm {
    margin-bottom: 4rem;
  }

  .ml-16\@sm {
    margin-left: 4rem;
  }

  .gap-16\@sm {
    gap: 4rem;
  }

  .gap-x-16\@sm {
    column-gap: 4rem;
  }

  .gap-y-16\@sm {
    row-gap: 4rem;
  }

  .space-x-16\@sm>*+* {
    margin-left: 4rem;
  }

  .space-y-16\@sm>*+* {
    margin-top: 4rem;
  }

  .inset-16\@sm {
    inset: 4rem;
  }

  .inset-x-16\@sm {
    left: 4rem;
    right: 4rem;
  }

  .inset-y-16\@sm {
    top: 4rem;
    bottom: 4rem;
  }

  .p-20\@sm {
    padding: 5rem;
  }

  .px-20\@sm {
    padding-inline: 5rem;
  }

  .py-20\@sm {
    padding-block: 5rem;
  }

  .pt-20\@sm {
    padding-top: 5rem;
  }

  .pr-20\@sm {
    padding-right: 5rem;
  }

  .pb-20\@sm {
    padding-bottom: 5rem;
  }

  .pl-20\@sm {
    padding-left: 5rem;
  }

  .m-20\@sm {
    margin: 5rem;
  }

  .mx-20\@sm {
    margin-inline: 5rem;
  }

  .my-20\@sm {
    margin-block: 5rem;
  }

  .mt-20\@sm {
    margin-top: 5rem;
  }

  .mr-20\@sm {
    margin-right: 5rem;
  }

  .mb-20\@sm {
    margin-bottom: 5rem;
  }

  .ml-20\@sm {
    margin-left: 5rem;
  }

  .gap-20\@sm {
    gap: 5rem;
  }

  .gap-x-20\@sm {
    column-gap: 5rem;
  }

  .gap-y-20\@sm {
    row-gap: 5rem;
  }

  .space-x-20\@sm>*+* {
    margin-left: 5rem;
  }

  .space-y-20\@sm>*+* {
    margin-top: 5rem;
  }

  .inset-20\@sm {
    inset: 5rem;
  }

  .inset-x-20\@sm {
    left: 5rem;
    right: 5rem;
  }

  .inset-y-20\@sm {
    top: 5rem;
    bottom: 5rem;
  }

  .p-24\@sm {
    padding: 6rem;
  }

  .px-24\@sm {
    padding-inline: 6rem;
  }

  .py-24\@sm {
    padding-block: 6rem;
  }

  .pt-24\@sm {
    padding-top: 6rem;
  }

  .pr-24\@sm {
    padding-right: 6rem;
  }

  .pb-24\@sm {
    padding-bottom: 6rem;
  }

  .pl-24\@sm {
    padding-left: 6rem;
  }

  .m-24\@sm {
    margin: 6rem;
  }

  .mx-24\@sm {
    margin-inline: 6rem;
  }

  .my-24\@sm {
    margin-block: 6rem;
  }

  .mt-24\@sm {
    margin-top: 6rem;
  }

  .mr-24\@sm {
    margin-right: 6rem;
  }

  .mb-24\@sm {
    margin-bottom: 6rem;
  }

  .ml-24\@sm {
    margin-left: 6rem;
  }

  .gap-24\@sm {
    gap: 6rem;
  }

  .gap-x-24\@sm {
    column-gap: 6rem;
  }

  .gap-y-24\@sm {
    row-gap: 6rem;
  }

  .space-x-24\@sm>*+* {
    margin-left: 6rem;
  }

  .space-y-24\@sm>*+* {
    margin-top: 6rem;
  }

  .inset-24\@sm {
    inset: 6rem;
  }

  .inset-x-24\@sm {
    left: 6rem;
    right: 6rem;
  }

  .inset-y-24\@sm {
    top: 6rem;
    bottom: 6rem;
  }

  .p-32\@sm {
    padding: 8rem;
  }

  .px-32\@sm {
    padding-inline: 8rem;
  }

  .py-32\@sm {
    padding-block: 8rem;
  }

  .pt-32\@sm {
    padding-top: 8rem;
  }

  .pr-32\@sm {
    padding-right: 8rem;
  }

  .pb-32\@sm {
    padding-bottom: 8rem;
  }

  .pl-32\@sm {
    padding-left: 8rem;
  }

  .m-32\@sm {
    margin: 8rem;
  }

  .mx-32\@sm {
    margin-inline: 8rem;
  }

  .my-32\@sm {
    margin-block: 8rem;
  }

  .mt-32\@sm {
    margin-top: 8rem;
  }

  .mr-32\@sm {
    margin-right: 8rem;
  }

  .mb-32\@sm {
    margin-bottom: 8rem;
  }

  .ml-32\@sm {
    margin-left: 8rem;
  }

  .gap-32\@sm {
    gap: 8rem;
  }

  .gap-x-32\@sm {
    column-gap: 8rem;
  }

  .gap-y-32\@sm {
    row-gap: 8rem;
  }

  .space-x-32\@sm>*+* {
    margin-left: 8rem;
  }

  .space-y-32\@sm>*+* {
    margin-top: 8rem;
  }

  .inset-32\@sm {
    inset: 8rem;
  }

  .inset-x-32\@sm {
    left: 8rem;
    right: 8rem;
  }

  .inset-y-32\@sm {
    top: 8rem;
    bottom: 8rem;
  }

  .p-40\@sm {
    padding: 10rem;
  }

  .px-40\@sm {
    padding-inline: 10rem;
  }

  .py-40\@sm {
    padding-block: 10rem;
  }

  .pt-40\@sm {
    padding-top: 10rem;
  }

  .pr-40\@sm {
    padding-right: 10rem;
  }

  .pb-40\@sm {
    padding-bottom: 10rem;
  }

  .pl-40\@sm {
    padding-left: 10rem;
  }

  .m-40\@sm {
    margin: 10rem;
  }

  .mx-40\@sm {
    margin-inline: 10rem;
  }

  .my-40\@sm {
    margin-block: 10rem;
  }

  .mt-40\@sm {
    margin-top: 10rem;
  }

  .mr-40\@sm {
    margin-right: 10rem;
  }

  .mb-40\@sm {
    margin-bottom: 10rem;
  }

  .ml-40\@sm {
    margin-left: 10rem;
  }

  .gap-40\@sm {
    gap: 10rem;
  }

  .gap-x-40\@sm {
    column-gap: 10rem;
  }

  .gap-y-40\@sm {
    row-gap: 10rem;
  }

  .space-x-40\@sm>*+* {
    margin-left: 10rem;
  }

  .space-y-40\@sm>*+* {
    margin-top: 10rem;
  }

  .inset-40\@sm {
    inset: 10rem;
  }

  .inset-x-40\@sm {
    left: 10rem;
    right: 10rem;
  }

  .inset-y-40\@sm {
    top: 10rem;
    bottom: 10rem;
  }

  .p-48\@sm {
    padding: 12rem;
  }

  .px-48\@sm {
    padding-inline: 12rem;
  }

  .py-48\@sm {
    padding-block: 12rem;
  }

  .pt-48\@sm {
    padding-top: 12rem;
  }

  .pr-48\@sm {
    padding-right: 12rem;
  }

  .pb-48\@sm {
    padding-bottom: 12rem;
  }

  .pl-48\@sm {
    padding-left: 12rem;
  }

  .m-48\@sm {
    margin: 12rem;
  }

  .mx-48\@sm {
    margin-inline: 12rem;
  }

  .my-48\@sm {
    margin-block: 12rem;
  }

  .mt-48\@sm {
    margin-top: 12rem;
  }

  .mr-48\@sm {
    margin-right: 12rem;
  }

  .mb-48\@sm {
    margin-bottom: 12rem;
  }

  .ml-48\@sm {
    margin-left: 12rem;
  }

  .gap-48\@sm {
    gap: 12rem;
  }

  .gap-x-48\@sm {
    column-gap: 12rem;
  }

  .gap-y-48\@sm {
    row-gap: 12rem;
  }

  .space-x-48\@sm>*+* {
    margin-left: 12rem;
  }

  .space-y-48\@sm>*+* {
    margin-top: 12rem;
  }

  .inset-48\@sm {
    inset: 12rem;
  }

  .inset-x-48\@sm {
    left: 12rem;
    right: 12rem;
  }

  .inset-y-48\@sm {
    top: 12rem;
    bottom: 12rem;
  }

  .p-56\@sm {
    padding: 14rem;
  }

  .px-56\@sm {
    padding-inline: 14rem;
  }

  .py-56\@sm {
    padding-block: 14rem;
  }

  .pt-56\@sm {
    padding-top: 14rem;
  }

  .pr-56\@sm {
    padding-right: 14rem;
  }

  .pb-56\@sm {
    padding-bottom: 14rem;
  }

  .pl-56\@sm {
    padding-left: 14rem;
  }

  .m-56\@sm {
    margin: 14rem;
  }

  .mx-56\@sm {
    margin-inline: 14rem;
  }

  .my-56\@sm {
    margin-block: 14rem;
  }

  .mt-56\@sm {
    margin-top: 14rem;
  }

  .mr-56\@sm {
    margin-right: 14rem;
  }

  .mb-56\@sm {
    margin-bottom: 14rem;
  }

  .ml-56\@sm {
    margin-left: 14rem;
  }

  .gap-56\@sm {
    gap: 14rem;
  }

  .gap-x-56\@sm {
    column-gap: 14rem;
  }

  .gap-y-56\@sm {
    row-gap: 14rem;
  }

  .space-x-56\@sm>*+* {
    margin-left: 14rem;
  }

  .space-y-56\@sm>*+* {
    margin-top: 14rem;
  }

  .inset-56\@sm {
    inset: 14rem;
  }

  .inset-x-56\@sm {
    left: 14rem;
    right: 14rem;
  }

  .inset-y-56\@sm {
    top: 14rem;
    bottom: 14rem;
  }

  .p-64\@sm {
    padding: 16rem;
  }

  .px-64\@sm {
    padding-inline: 16rem;
  }

  .py-64\@sm {
    padding-block: 16rem;
  }

  .pt-64\@sm {
    padding-top: 16rem;
  }

  .pr-64\@sm {
    padding-right: 16rem;
  }

  .pb-64\@sm {
    padding-bottom: 16rem;
  }

  .pl-64\@sm {
    padding-left: 16rem;
  }

  .m-64\@sm {
    margin: 16rem;
  }

  .mx-64\@sm {
    margin-inline: 16rem;
  }

  .my-64\@sm {
    margin-block: 16rem;
  }

  .mt-64\@sm {
    margin-top: 16rem;
  }

  .mr-64\@sm {
    margin-right: 16rem;
  }

  .mb-64\@sm {
    margin-bottom: 16rem;
  }

  .ml-64\@sm {
    margin-left: 16rem;
  }

  .gap-64\@sm {
    gap: 16rem;
  }

  .gap-x-64\@sm {
    column-gap: 16rem;
  }

  .gap-y-64\@sm {
    row-gap: 16rem;
  }

  .space-x-64\@sm>*+* {
    margin-left: 16rem;
  }

  .space-y-64\@sm>*+* {
    margin-top: 16rem;
  }

  .inset-64\@sm {
    inset: 16rem;
  }

  .inset-x-64\@sm {
    left: 16rem;
    right: 16rem;
  }

  .inset-y-64\@sm {
    top: 16rem;
    bottom: 16rem;
  }

  .p-120\@sm {
    padding: 30rem;
  }

  .px-120\@sm {
    padding-inline: 30rem;
  }

  .py-120\@sm {
    padding-block: 30rem;
  }

  .pt-120\@sm {
    padding-top: 30rem;
  }

  .pr-120\@sm {
    padding-right: 30rem;
  }

  .pb-120\@sm {
    padding-bottom: 30rem;
  }

  .pl-120\@sm {
    padding-left: 30rem;
  }

  .m-120\@sm {
    margin: 30rem;
  }

  .mx-120\@sm {
    margin-inline: 30rem;
  }

  .my-120\@sm {
    margin-block: 30rem;
  }

  .mt-120\@sm {
    margin-top: 30rem;
  }

  .mr-120\@sm {
    margin-right: 30rem;
  }

  .mb-120\@sm {
    margin-bottom: 30rem;
  }

  .ml-120\@sm {
    margin-left: 30rem;
  }

  .gap-120\@sm {
    gap: 30rem;
  }

  .gap-x-120\@sm {
    column-gap: 30rem;
  }

  .gap-y-120\@sm {
    row-gap: 30rem;
  }

  .space-x-120\@sm>*+* {
    margin-left: 30rem;
  }

  .space-y-120\@sm>*+* {
    margin-top: 30rem;
  }

  .inset-120\@sm {
    inset: 30rem;
  }

  .inset-x-120\@sm {
    left: 30rem;
    right: 30rem;
  }

  .inset-y-120\@sm {
    top: 30rem;
    bottom: 30rem;
  }
}

@media (min-width: 768px) {
  .mx-auto\@md {
    margin-left: auto;
    margin-right: auto;
  }

  .ml-auto\@md {
    margin-left: auto;
  }

  .mr-auto\@md {
    margin-right: auto;
  }

  .inset-auto\@md {
    inset: auto;
  }

  .inset-x-auto\@md {
    left: auto;
    right: auto;
  }

  .inset-y-auto\@md {
    top: auto;
    bottom: auto;
  }

  .p-0\@md {
    padding: 0px;
  }

  .px-0\@md {
    padding-inline: 0px;
  }

  .py-0\@md {
    padding-block: 0px;
  }

  .pt-0\@md {
    padding-top: 0px;
  }

  .pr-0\@md {
    padding-right: 0px;
  }

  .pb-0\@md {
    padding-bottom: 0px;
  }

  .pl-0\@md {
    padding-left: 0px;
  }

  .m-0\@md {
    margin: 0px;
  }

  .mx-0\@md {
    margin-inline: 0px;
  }

  .my-0\@md {
    margin-block: 0px;
  }

  .mt-0\@md {
    margin-top: 0px;
  }

  .mr-0\@md {
    margin-right: 0px;
  }

  .mb-0\@md {
    margin-bottom: 0px;
  }

  .ml-0\@md {
    margin-left: 0px;
  }

  .gap-0\@md {
    gap: 0;
  }

  .gap-x-0\@md {
    column-gap: 0;
  }

  .gap-y-0\@md {
    row-gap: 0;
  }

  .space-x-0\@md>*+* {
    margin-left: 0px;
  }

  .space-y-0\@md>*+* {
    margin-top: 0px;
  }

  .inset-0\@md {
    inset: 0px;
  }

  .inset-x-0\@md {
    left: 0px;
    right: 0px;
  }

  .inset-y-0\@md {
    top: 0px;
    bottom: 0px;
  }

  .p-1\@md {
    padding: 0.25rem;
  }

  .px-1\@md {
    padding-inline: 0.25rem;
  }

  .py-1\@md {
    padding-block: 0.25rem;
  }

  .pt-1\@md {
    padding-top: 0.25rem;
  }

  .pr-1\@md {
    padding-right: 0.25rem;
  }

  .pb-1\@md {
    padding-bottom: 0.25rem;
  }

  .pl-1\@md {
    padding-left: 0.25rem;
  }

  .m-1\@md {
    margin: 0.25rem;
  }

  .mx-1\@md {
    margin-inline: 0.25rem;
  }

  .my-1\@md {
    margin-block: 0.25rem;
  }

  .mt-1\@md {
    margin-top: 0.25rem;
  }

  .mr-1\@md {
    margin-right: 0.25rem;
  }

  .mb-1\@md {
    margin-bottom: 0.25rem;
  }

  .ml-1\@md {
    margin-left: 0.25rem;
  }

  .gap-1\@md {
    gap: 0.25rem;
  }

  .gap-x-1\@md {
    column-gap: 0.25rem;
  }

  .gap-y-1\@md {
    row-gap: 0.25rem;
  }

  .space-x-1\@md>*+* {
    margin-left: 0.25rem;
  }

  .space-y-1\@md>*+* {
    margin-top: 0.25rem;
  }

  .inset-1\@md {
    inset: 0.25rem;
  }

  .inset-x-1\@md {
    left: 0.25rem;
    right: 0.25rem;
  }

  .inset-y-1\@md {
    top: 0.25rem;
    bottom: 0.25rem;
  }

  .p-2\@md {
    padding: 0.5rem;
  }

  .px-2\@md {
    padding-inline: 0.5rem;
  }

  .py-2\@md {
    padding-block: 0.5rem;
  }

  .pt-2\@md {
    padding-top: 0.5rem;
  }

  .pr-2\@md {
    padding-right: 0.5rem;
  }

  .pb-2\@md {
    padding-bottom: 0.5rem;
  }

  .pl-2\@md {
    padding-left: 0.5rem;
  }

  .m-2\@md {
    margin: 0.5rem;
  }

  .mx-2\@md {
    margin-inline: 0.5rem;
  }

  .my-2\@md {
    margin-block: 0.5rem;
  }

  .mt-2\@md {
    margin-top: 0.5rem;
  }

  .mr-2\@md {
    margin-right: 0.5rem;
  }

  .mb-2\@md {
    margin-bottom: 0.5rem;
  }

  .ml-2\@md {
    margin-left: 0.5rem;
  }

  .gap-2\@md {
    gap: 0.5rem;
  }

  .gap-x-2\@md {
    column-gap: 0.5rem;
  }

  .gap-y-2\@md {
    row-gap: 0.5rem;
  }

  .space-x-2\@md>*+* {
    margin-left: 0.5rem;
  }

  .space-y-2\@md>*+* {
    margin-top: 0.5rem;
  }

  .inset-2\@md {
    inset: 0.5rem;
  }

  .inset-x-2\@md {
    left: 0.5rem;
    right: 0.5rem;
  }

  .inset-y-2\@md {
    top: 0.5rem;
    bottom: 0.5rem;
  }

  .p-3\@md {
    padding: 0.75rem;
  }

  .px-3\@md {
    padding-inline: 0.75rem;
  }

  .py-3\@md {
    padding-block: 0.75rem;
  }

  .pt-3\@md {
    padding-top: 0.75rem;
  }

  .pr-3\@md {
    padding-right: 0.75rem;
  }

  .pb-3\@md {
    padding-bottom: 0.75rem;
  }

  .pl-3\@md {
    padding-left: 0.75rem;
  }

  .m-3\@md {
    margin: 0.75rem;
  }

  .mx-3\@md {
    margin-inline: 0.75rem;
  }

  .my-3\@md {
    margin-block: 0.75rem;
  }

  .mt-3\@md {
    margin-top: 0.75rem;
  }

  .mr-3\@md {
    margin-right: 0.75rem;
  }

  .mb-3\@md {
    margin-bottom: 0.75rem;
  }

  .ml-3\@md {
    margin-left: 0.75rem;
  }

  .gap-3\@md {
    gap: 0.75rem;
  }

  .gap-x-3\@md {
    column-gap: 0.75rem;
  }

  .gap-y-3\@md {
    row-gap: 0.75rem;
  }

  .space-x-3\@md>*+* {
    margin-left: 0.75rem;
  }

  .space-y-3\@md>*+* {
    margin-top: 0.75rem;
  }

  .inset-3\@md {
    inset: 0.75rem;
  }

  .inset-x-3\@md {
    left: 0.75rem;
    right: 0.75rem;
  }

  .inset-y-3\@md {
    top: 0.75rem;
    bottom: 0.75rem;
  }

  .p-4\@md {
    padding: 1rem;
  }

  .px-4\@md {
    padding-inline: 1rem;
  }

  .py-4\@md {
    padding-block: 1rem;
  }

  .pt-4\@md {
    padding-top: 1rem;
  }

  .pr-4\@md {
    padding-right: 1rem;
  }

  .pb-4\@md {
    padding-bottom: 1rem;
  }

  .pl-4\@md {
    padding-left: 1rem;
  }

  .m-4\@md {
    margin: 1rem;
  }

  .mx-4\@md {
    margin-inline: 1rem;
  }

  .my-4\@md {
    margin-block: 1rem;
  }

  .mt-4\@md {
    margin-top: 1rem;
  }

  .mr-4\@md {
    margin-right: 1rem;
  }

  .mb-4\@md {
    margin-bottom: 1rem;
  }

  .ml-4\@md {
    margin-left: 1rem;
  }

  .gap-4\@md {
    gap: 1rem;
  }

  .gap-x-4\@md {
    column-gap: 1rem;
  }

  .gap-y-4\@md {
    row-gap: 1rem;
  }

  .space-x-4\@md>*+* {
    margin-left: 1rem;
  }

  .space-y-4\@md>*+* {
    margin-top: 1rem;
  }

  .inset-4\@md {
    inset: 1rem;
  }

  .inset-x-4\@md {
    left: 1rem;
    right: 1rem;
  }

  .inset-y-4\@md {
    top: 1rem;
    bottom: 1rem;
  }

  .p-5\@md {
    padding: 1.25rem;
  }

  .px-5\@md {
    padding-inline: 1.25rem;
  }

  .py-5\@md {
    padding-block: 1.25rem;
  }

  .pt-5\@md {
    padding-top: 1.25rem;
  }

  .pr-5\@md {
    padding-right: 1.25rem;
  }

  .pb-5\@md {
    padding-bottom: 1.25rem;
  }

  .pl-5\@md {
    padding-left: 1.25rem;
  }

  .m-5\@md {
    margin: 1.25rem;
  }

  .mx-5\@md {
    margin-inline: 1.25rem;
  }

  .my-5\@md {
    margin-block: 1.25rem;
  }

  .mt-5\@md {
    margin-top: 1.25rem;
  }

  .mr-5\@md {
    margin-right: 1.25rem;
  }

  .mb-5\@md {
    margin-bottom: 1.25rem;
  }

  .ml-5\@md {
    margin-left: 1.25rem;
  }

  .gap-5\@md {
    gap: 1.25rem;
  }

  .gap-x-5\@md {
    column-gap: 1.25rem;
  }

  .gap-y-5\@md {
    row-gap: 1.25rem;
  }

  .space-x-5\@md>*+* {
    margin-left: 1.25rem;
  }

  .space-y-5\@md>*+* {
    margin-top: 1.25rem;
  }

  .inset-5\@md {
    inset: 1.25rem;
  }

  .inset-x-5\@md {
    left: 1.25rem;
    right: 1.25rem;
  }

  .inset-y-5\@md {
    top: 1.25rem;
    bottom: 1.25rem;
  }

  .p-6\@md {
    padding: 1.5rem;
  }

  .px-6\@md {
    padding-inline: 1.5rem;
  }

  .py-6\@md {
    padding-block: 1.5rem;
  }

  .pt-6\@md {
    padding-top: 1.5rem;
  }

  .pr-6\@md {
    padding-right: 1.5rem;
  }

  .pb-6\@md {
    padding-bottom: 1.5rem;
  }

  .pl-6\@md {
    padding-left: 1.5rem;
  }

  .m-6\@md {
    margin: 1.5rem;
  }

  .mx-6\@md {
    margin-inline: 1.5rem;
  }

  .my-6\@md {
    margin-block: 1.5rem;
  }

  .mt-6\@md {
    margin-top: 1.5rem;
  }

  .mr-6\@md {
    margin-right: 1.5rem;
  }

  .mb-6\@md {
    margin-bottom: 1.5rem;
  }

  .ml-6\@md {
    margin-left: 1.5rem;
  }

  .gap-6\@md {
    gap: 1.5rem;
  }

  .gap-x-6\@md {
    column-gap: 1.5rem;
  }

  .gap-y-6\@md {
    row-gap: 1.5rem;
  }

  .space-x-6\@md>*+* {
    margin-left: 1.5rem;
  }

  .space-y-6\@md>*+* {
    margin-top: 1.5rem;
  }

  .inset-6\@md {
    inset: 1.5rem;
  }

  .inset-x-6\@md {
    left: 1.5rem;
    right: 1.5rem;
  }

  .inset-y-6\@md {
    top: 1.5rem;
    bottom: 1.5rem;
  }

  .p-8\@md {
    padding: 2rem;
  }

  .px-8\@md {
    padding-inline: 2rem;
  }

  .py-8\@md {
    padding-block: 2rem;
  }

  .pt-8\@md {
    padding-top: 2rem;
  }

  .pr-8\@md {
    padding-right: 2rem;
  }

  .pb-8\@md {
    padding-bottom: 2rem;
  }

  .pl-8\@md {
    padding-left: 2rem;
  }

  .m-8\@md {
    margin: 2rem;
  }

  .mx-8\@md {
    margin-inline: 2rem;
  }

  .my-8\@md {
    margin-block: 2rem;
  }

  .mt-8\@md {
    margin-top: 2rem;
  }

  .mr-8\@md {
    margin-right: 2rem;
  }

  .mb-8\@md {
    margin-bottom: 2rem;
  }

  .ml-8\@md {
    margin-left: 2rem;
  }

  .gap-8\@md {
    gap: 2rem;
  }

  .gap-x-8\@md {
    column-gap: 2rem;
  }

  .gap-y-8\@md {
    row-gap: 2rem;
  }

  .space-x-8\@md>*+* {
    margin-left: 2rem;
  }

  .space-y-8\@md>*+* {
    margin-top: 2rem;
  }

  .inset-8\@md {
    inset: 2rem;
  }

  .inset-x-8\@md {
    left: 2rem;
    right: 2rem;
  }

  .inset-y-8\@md {
    top: 2rem;
    bottom: 2rem;
  }

  .p-10\@md {
    padding: 2.5rem;
  }

  .px-10\@md {
    padding-inline: 2.5rem;
  }

  .py-10\@md {
    padding-block: 2.5rem;
  }

  .pt-10\@md {
    padding-top: 2.5rem;
  }

  .pr-10\@md {
    padding-right: 2.5rem;
  }

  .pb-10\@md {
    padding-bottom: 2.5rem;
  }

  .pl-10\@md {
    padding-left: 2.5rem;
  }

  .m-10\@md {
    margin: 2.5rem;
  }

  .mx-10\@md {
    margin-inline: 2.5rem;
  }

  .my-10\@md {
    margin-block: 2.5rem;
  }

  .mt-10\@md {
    margin-top: 2.5rem;
  }

  .mr-10\@md {
    margin-right: 2.5rem;
  }

  .mb-10\@md {
    margin-bottom: 2.5rem;
  }

  .ml-10\@md {
    margin-left: 2.5rem;
  }

  .gap-10\@md {
    gap: 2.5rem;
  }

  .gap-x-10\@md {
    column-gap: 2.5rem;
  }

  .gap-y-10\@md {
    row-gap: 2.5rem;
  }

  .space-x-10\@md>*+* {
    margin-left: 2.5rem;
  }

  .space-y-10\@md>*+* {
    margin-top: 2.5rem;
  }

  .inset-10\@md {
    inset: 2.5rem;
  }

  .inset-x-10\@md {
    left: 2.5rem;
    right: 2.5rem;
  }

  .inset-y-10\@md {
    top: 2.5rem;
    bottom: 2.5rem;
  }

  .p-12\@md {
    padding: 3rem;
  }

  .px-12\@md {
    padding-inline: 3rem;
  }

  .py-12\@md {
    padding-block: 3rem;
  }

  .pt-12\@md {
    padding-top: 3rem;
  }

  .pr-12\@md {
    padding-right: 3rem;
  }

  .pb-12\@md {
    padding-bottom: 3rem;
  }

  .pl-12\@md {
    padding-left: 3rem;
  }

  .m-12\@md {
    margin: 3rem;
  }

  .mx-12\@md {
    margin-inline: 3rem;
  }

  .my-12\@md {
    margin-block: 3rem;
  }

  .mt-12\@md {
    margin-top: 3rem;
  }

  .mr-12\@md {
    margin-right: 3rem;
  }

  .mb-12\@md {
    margin-bottom: 3rem;
  }

  .ml-12\@md {
    margin-left: 3rem;
  }

  .gap-12\@md {
    gap: 3rem;
  }

  .gap-x-12\@md {
    column-gap: 3rem;
  }

  .gap-y-12\@md {
    row-gap: 3rem;
  }

  .space-x-12\@md>*+* {
    margin-left: 3rem;
  }

  .space-y-12\@md>*+* {
    margin-top: 3rem;
  }

  .inset-12\@md {
    inset: 3rem;
  }

  .inset-x-12\@md {
    left: 3rem;
    right: 3rem;
  }

  .inset-y-12\@md {
    top: 3rem;
    bottom: 3rem;
  }

  .p-16\@md {
    padding: 4rem;
  }

  .px-16\@md {
    padding-inline: 4rem;
  }

  .py-16\@md {
    padding-block: 4rem;
  }

  .pt-16\@md {
    padding-top: 4rem;
  }

  .pr-16\@md {
    padding-right: 4rem;
  }

  .pb-16\@md {
    padding-bottom: 4rem;
  }

  .pl-16\@md {
    padding-left: 4rem;
  }

  .m-16\@md {
    margin: 4rem;
  }

  .mx-16\@md {
    margin-inline: 4rem;
  }

  .my-16\@md {
    margin-block: 4rem;
  }

  .mt-16\@md {
    margin-top: 4rem;
  }

  .mr-16\@md {
    margin-right: 4rem;
  }

  .mb-16\@md {
    margin-bottom: 4rem;
  }

  .ml-16\@md {
    margin-left: 4rem;
  }

  .gap-16\@md {
    gap: 4rem;
  }

  .gap-x-16\@md {
    column-gap: 4rem;
  }

  .gap-y-16\@md {
    row-gap: 4rem;
  }

  .space-x-16\@md>*+* {
    margin-left: 4rem;
  }

  .space-y-16\@md>*+* {
    margin-top: 4rem;
  }

  .inset-16\@md {
    inset: 4rem;
  }

  .inset-x-16\@md {
    left: 4rem;
    right: 4rem;
  }

  .inset-y-16\@md {
    top: 4rem;
    bottom: 4rem;
  }

  .p-20\@md {
    padding: 5rem;
  }

  .px-20\@md {
    padding-inline: 5rem;
  }

  .py-20\@md {
    padding-block: 5rem;
  }

  .pt-20\@md {
    padding-top: 5rem;
  }

  .pr-20\@md {
    padding-right: 5rem;
  }

  .pb-20\@md {
    padding-bottom: 5rem;
  }

  .pl-20\@md {
    padding-left: 5rem;
  }

  .m-20\@md {
    margin: 5rem;
  }

  .mx-20\@md {
    margin-inline: 5rem;
  }

  .my-20\@md {
    margin-block: 5rem;
  }

  .mt-20\@md {
    margin-top: 5rem;
  }

  .mr-20\@md {
    margin-right: 5rem;
  }

  .mb-20\@md {
    margin-bottom: 5rem;
  }

  .ml-20\@md {
    margin-left: 5rem;
  }

  .gap-20\@md {
    gap: 5rem;
  }

  .gap-x-20\@md {
    column-gap: 5rem;
  }

  .gap-y-20\@md {
    row-gap: 5rem;
  }

  .space-x-20\@md>*+* {
    margin-left: 5rem;
  }

  .space-y-20\@md>*+* {
    margin-top: 5rem;
  }

  .inset-20\@md {
    inset: 5rem;
  }

  .inset-x-20\@md {
    left: 5rem;
    right: 5rem;
  }

  .inset-y-20\@md {
    top: 5rem;
    bottom: 5rem;
  }

  .p-24\@md {
    padding: 6rem;
  }

  .px-24\@md {
    padding-inline: 6rem;
  }

  .py-24\@md {
    padding-block: 6rem;
  }

  .pt-24\@md {
    padding-top: 6rem;
  }

  .pr-24\@md {
    padding-right: 6rem;
  }

  .pb-24\@md {
    padding-bottom: 6rem;
  }

  .pl-24\@md {
    padding-left: 6rem;
  }

  .m-24\@md {
    margin: 6rem;
  }

  .mx-24\@md {
    margin-inline: 6rem;
  }

  .my-24\@md {
    margin-block: 6rem;
  }

  .mt-24\@md {
    margin-top: 6rem;
  }

  .mr-24\@md {
    margin-right: 6rem;
  }

  .mb-24\@md {
    margin-bottom: 6rem;
  }

  .ml-24\@md {
    margin-left: 6rem;
  }

  .gap-24\@md {
    gap: 6rem;
  }

  .gap-x-24\@md {
    column-gap: 6rem;
  }

  .gap-y-24\@md {
    row-gap: 6rem;
  }

  .space-x-24\@md>*+* {
    margin-left: 6rem;
  }

  .space-y-24\@md>*+* {
    margin-top: 6rem;
  }

  .inset-24\@md {
    inset: 6rem;
  }

  .inset-x-24\@md {
    left: 6rem;
    right: 6rem;
  }

  .inset-y-24\@md {
    top: 6rem;
    bottom: 6rem;
  }

  .p-32\@md {
    padding: 8rem;
  }

  .px-32\@md {
    padding-inline: 8rem;
  }

  .py-32\@md {
    padding-block: 8rem;
  }

  .pt-32\@md {
    padding-top: 8rem;
  }

  .pr-32\@md {
    padding-right: 8rem;
  }

  .pb-32\@md {
    padding-bottom: 8rem;
  }

  .pl-32\@md {
    padding-left: 8rem;
  }

  .m-32\@md {
    margin: 8rem;
  }

  .mx-32\@md {
    margin-inline: 8rem;
  }

  .my-32\@md {
    margin-block: 8rem;
  }

  .mt-32\@md {
    margin-top: 8rem;
  }

  .mr-32\@md {
    margin-right: 8rem;
  }

  .mb-32\@md {
    margin-bottom: 8rem;
  }

  .ml-32\@md {
    margin-left: 8rem;
  }

  .gap-32\@md {
    gap: 8rem;
  }

  .gap-x-32\@md {
    column-gap: 8rem;
  }

  .gap-y-32\@md {
    row-gap: 8rem;
  }

  .space-x-32\@md>*+* {
    margin-left: 8rem;
  }

  .space-y-32\@md>*+* {
    margin-top: 8rem;
  }

  .inset-32\@md {
    inset: 8rem;
  }

  .inset-x-32\@md {
    left: 8rem;
    right: 8rem;
  }

  .inset-y-32\@md {
    top: 8rem;
    bottom: 8rem;
  }

  .p-40\@md {
    padding: 10rem;
  }

  .px-40\@md {
    padding-inline: 10rem;
  }

  .py-40\@md {
    padding-block: 10rem;
  }

  .pt-40\@md {
    padding-top: 10rem;
  }

  .pr-40\@md {
    padding-right: 10rem;
  }

  .pb-40\@md {
    padding-bottom: 10rem;
  }

  .pl-40\@md {
    padding-left: 10rem;
  }

  .m-40\@md {
    margin: 10rem;
  }

  .mx-40\@md {
    margin-inline: 10rem;
  }

  .my-40\@md {
    margin-block: 10rem;
  }

  .mt-40\@md {
    margin-top: 10rem;
  }

  .mr-40\@md {
    margin-right: 10rem;
  }

  .mb-40\@md {
    margin-bottom: 10rem;
  }

  .ml-40\@md {
    margin-left: 10rem;
  }

  .gap-40\@md {
    gap: 10rem;
  }

  .gap-x-40\@md {
    column-gap: 10rem;
  }

  .gap-y-40\@md {
    row-gap: 10rem;
  }

  .space-x-40\@md>*+* {
    margin-left: 10rem;
  }

  .space-y-40\@md>*+* {
    margin-top: 10rem;
  }

  .inset-40\@md {
    inset: 10rem;
  }

  .inset-x-40\@md {
    left: 10rem;
    right: 10rem;
  }

  .inset-y-40\@md {
    top: 10rem;
    bottom: 10rem;
  }

  .p-48\@md {
    padding: 12rem;
  }

  .px-48\@md {
    padding-inline: 12rem;
  }

  .py-48\@md {
    padding-block: 12rem;
  }

  .pt-48\@md {
    padding-top: 12rem;
  }

  .pr-48\@md {
    padding-right: 12rem;
  }

  .pb-48\@md {
    padding-bottom: 12rem;
  }

  .pl-48\@md {
    padding-left: 12rem;
  }

  .m-48\@md {
    margin: 12rem;
  }

  .mx-48\@md {
    margin-inline: 12rem;
  }

  .my-48\@md {
    margin-block: 12rem;
  }

  .mt-48\@md {
    margin-top: 12rem;
  }

  .mr-48\@md {
    margin-right: 12rem;
  }

  .mb-48\@md {
    margin-bottom: 12rem;
  }

  .ml-48\@md {
    margin-left: 12rem;
  }

  .gap-48\@md {
    gap: 12rem;
  }

  .gap-x-48\@md {
    column-gap: 12rem;
  }

  .gap-y-48\@md {
    row-gap: 12rem;
  }

  .space-x-48\@md>*+* {
    margin-left: 12rem;
  }

  .space-y-48\@md>*+* {
    margin-top: 12rem;
  }

  .inset-48\@md {
    inset: 12rem;
  }

  .inset-x-48\@md {
    left: 12rem;
    right: 12rem;
  }

  .inset-y-48\@md {
    top: 12rem;
    bottom: 12rem;
  }

  .p-56\@md {
    padding: 14rem;
  }

  .px-56\@md {
    padding-inline: 14rem;
  }

  .py-56\@md {
    padding-block: 14rem;
  }

  .pt-56\@md {
    padding-top: 14rem;
  }

  .pr-56\@md {
    padding-right: 14rem;
  }

  .pb-56\@md {
    padding-bottom: 14rem;
  }

  .pl-56\@md {
    padding-left: 14rem;
  }

  .m-56\@md {
    margin: 14rem;
  }

  .mx-56\@md {
    margin-inline: 14rem;
  }

  .my-56\@md {
    margin-block: 14rem;
  }

  .mt-56\@md {
    margin-top: 14rem;
  }

  .mr-56\@md {
    margin-right: 14rem;
  }

  .mb-56\@md {
    margin-bottom: 14rem;
  }

  .ml-56\@md {
    margin-left: 14rem;
  }

  .gap-56\@md {
    gap: 14rem;
  }

  .gap-x-56\@md {
    column-gap: 14rem;
  }

  .gap-y-56\@md {
    row-gap: 14rem;
  }

  .space-x-56\@md>*+* {
    margin-left: 14rem;
  }

  .space-y-56\@md>*+* {
    margin-top: 14rem;
  }

  .inset-56\@md {
    inset: 14rem;
  }

  .inset-x-56\@md {
    left: 14rem;
    right: 14rem;
  }

  .inset-y-56\@md {
    top: 14rem;
    bottom: 14rem;
  }

  .p-64\@md {
    padding: 16rem;
  }

  .px-64\@md {
    padding-inline: 16rem;
  }

  .py-64\@md {
    padding-block: 16rem;
  }

  .pt-64\@md {
    padding-top: 16rem;
  }

  .pr-64\@md {
    padding-right: 16rem;
  }

  .pb-64\@md {
    padding-bottom: 16rem;
  }

  .pl-64\@md {
    padding-left: 16rem;
  }

  .m-64\@md {
    margin: 16rem;
  }

  .mx-64\@md {
    margin-inline: 16rem;
  }

  .my-64\@md {
    margin-block: 16rem;
  }

  .mt-64\@md {
    margin-top: 16rem;
  }

  .mr-64\@md {
    margin-right: 16rem;
  }

  .mb-64\@md {
    margin-bottom: 16rem;
  }

  .ml-64\@md {
    margin-left: 16rem;
  }

  .gap-64\@md {
    gap: 16rem;
  }

  .gap-x-64\@md {
    column-gap: 16rem;
  }

  .gap-y-64\@md {
    row-gap: 16rem;
  }

  .space-x-64\@md>*+* {
    margin-left: 16rem;
  }

  .space-y-64\@md>*+* {
    margin-top: 16rem;
  }

  .inset-64\@md {
    inset: 16rem;
  }

  .inset-x-64\@md {
    left: 16rem;
    right: 16rem;
  }

  .inset-y-64\@md {
    top: 16rem;
    bottom: 16rem;
  }

  .p-120\@md {
    padding: 30rem;
  }

  .px-120\@md {
    padding-inline: 30rem;
  }

  .py-120\@md {
    padding-block: 30rem;
  }

  .pt-120\@md {
    padding-top: 30rem;
  }

  .pr-120\@md {
    padding-right: 30rem;
  }

  .pb-120\@md {
    padding-bottom: 30rem;
  }

  .pl-120\@md {
    padding-left: 30rem;
  }

  .m-120\@md {
    margin: 30rem;
  }

  .mx-120\@md {
    margin-inline: 30rem;
  }

  .my-120\@md {
    margin-block: 30rem;
  }

  .mt-120\@md {
    margin-top: 30rem;
  }

  .mr-120\@md {
    margin-right: 30rem;
  }

  .mb-120\@md {
    margin-bottom: 30rem;
  }

  .ml-120\@md {
    margin-left: 30rem;
  }

  .gap-120\@md {
    gap: 30rem;
  }

  .gap-x-120\@md {
    column-gap: 30rem;
  }

  .gap-y-120\@md {
    row-gap: 30rem;
  }

  .space-x-120\@md>*+* {
    margin-left: 30rem;
  }

  .space-y-120\@md>*+* {
    margin-top: 30rem;
  }

  .inset-120\@md {
    inset: 30rem;
  }

  .inset-x-120\@md {
    left: 30rem;
    right: 30rem;
  }

  .inset-y-120\@md {
    top: 30rem;
    bottom: 30rem;
  }
}

@media (min-width: 1024px) {
  .mx-auto\@lg {
    margin-left: auto;
    margin-right: auto;
  }

  .ml-auto\@lg {
    margin-left: auto;
  }

  .mr-auto\@lg {
    margin-right: auto;
  }

  .inset-auto\@lg {
    inset: auto;
  }

  .inset-x-auto\@lg {
    left: auto;
    right: auto;
  }

  .inset-y-auto\@lg {
    top: auto;
    bottom: auto;
  }

  .p-0\@lg {
    padding: 0px;
  }

  .px-0\@lg {
    padding-inline: 0px;
  }

  .py-0\@lg {
    padding-block: 0px;
  }

  .pt-0\@lg {
    padding-top: 0px;
  }

  .pr-0\@lg {
    padding-right: 0px;
  }

  .pb-0\@lg {
    padding-bottom: 0px;
  }

  .pl-0\@lg {
    padding-left: 0px;
  }

  .m-0\@lg {
    margin: 0px;
  }

  .mx-0\@lg {
    margin-inline: 0px;
  }

  .my-0\@lg {
    margin-block: 0px;
  }

  .mt-0\@lg {
    margin-top: 0px;
  }

  .mr-0\@lg {
    margin-right: 0px;
  }

  .mb-0\@lg {
    margin-bottom: 0px;
  }

  .ml-0\@lg {
    margin-left: 0px;
  }

  .gap-0\@lg {
    gap: 0;
  }

  .gap-x-0\@lg {
    column-gap: 0;
  }

  .gap-y-0\@lg {
    row-gap: 0;
  }

  .space-x-0\@lg>*+* {
    margin-left: 0px;
  }

  .space-y-0\@lg>*+* {
    margin-top: 0px;
  }

  .inset-0\@lg {
    inset: 0px;
  }

  .inset-x-0\@lg {
    left: 0px;
    right: 0px;
  }

  .inset-y-0\@lg {
    top: 0px;
    bottom: 0px;
  }

  .p-1\@lg {
    padding: 0.25rem;
  }

  .px-1\@lg {
    padding-inline: 0.25rem;
  }

  .py-1\@lg {
    padding-block: 0.25rem;
  }

  .pt-1\@lg {
    padding-top: 0.25rem;
  }

  .pr-1\@lg {
    padding-right: 0.25rem;
  }

  .pb-1\@lg {
    padding-bottom: 0.25rem;
  }

  .pl-1\@lg {
    padding-left: 0.25rem;
  }

  .m-1\@lg {
    margin: 0.25rem;
  }

  .mx-1\@lg {
    margin-inline: 0.25rem;
  }

  .my-1\@lg {
    margin-block: 0.25rem;
  }

  .mt-1\@lg {
    margin-top: 0.25rem;
  }

  .mr-1\@lg {
    margin-right: 0.25rem;
  }

  .mb-1\@lg {
    margin-bottom: 0.25rem;
  }

  .ml-1\@lg {
    margin-left: 0.25rem;
  }

  .gap-1\@lg {
    gap: 0.25rem;
  }

  .gap-x-1\@lg {
    column-gap: 0.25rem;
  }

  .gap-y-1\@lg {
    row-gap: 0.25rem;
  }

  .space-x-1\@lg>*+* {
    margin-left: 0.25rem;
  }

  .space-y-1\@lg>*+* {
    margin-top: 0.25rem;
  }

  .inset-1\@lg {
    inset: 0.25rem;
  }

  .inset-x-1\@lg {
    left: 0.25rem;
    right: 0.25rem;
  }

  .inset-y-1\@lg {
    top: 0.25rem;
    bottom: 0.25rem;
  }

  .p-2\@lg {
    padding: 0.5rem;
  }

  .px-2\@lg {
    padding-inline: 0.5rem;
  }

  .py-2\@lg {
    padding-block: 0.5rem;
  }

  .pt-2\@lg {
    padding-top: 0.5rem;
  }

  .pr-2\@lg {
    padding-right: 0.5rem;
  }

  .pb-2\@lg {
    padding-bottom: 0.5rem;
  }

  .pl-2\@lg {
    padding-left: 0.5rem;
  }

  .m-2\@lg {
    margin: 0.5rem;
  }

  .mx-2\@lg {
    margin-inline: 0.5rem;
  }

  .my-2\@lg {
    margin-block: 0.5rem;
  }

  .mt-2\@lg {
    margin-top: 0.5rem;
  }

  .mr-2\@lg {
    margin-right: 0.5rem;
  }

  .mb-2\@lg {
    margin-bottom: 0.5rem;
  }

  .ml-2\@lg {
    margin-left: 0.5rem;
  }

  .gap-2\@lg {
    gap: 0.5rem;
  }

  .gap-x-2\@lg {
    column-gap: 0.5rem;
  }

  .gap-y-2\@lg {
    row-gap: 0.5rem;
  }

  .space-x-2\@lg>*+* {
    margin-left: 0.5rem;
  }

  .space-y-2\@lg>*+* {
    margin-top: 0.5rem;
  }

  .inset-2\@lg {
    inset: 0.5rem;
  }

  .inset-x-2\@lg {
    left: 0.5rem;
    right: 0.5rem;
  }

  .inset-y-2\@lg {
    top: 0.5rem;
    bottom: 0.5rem;
  }

  .p-3\@lg {
    padding: 0.75rem;
  }

  .px-3\@lg {
    padding-inline: 0.75rem;
  }

  .py-3\@lg {
    padding-block: 0.75rem;
  }

  .pt-3\@lg {
    padding-top: 0.75rem;
  }

  .pr-3\@lg {
    padding-right: 0.75rem;
  }

  .pb-3\@lg {
    padding-bottom: 0.75rem;
  }

  .pl-3\@lg {
    padding-left: 0.75rem;
  }

  .m-3\@lg {
    margin: 0.75rem;
  }

  .mx-3\@lg {
    margin-inline: 0.75rem;
  }

  .my-3\@lg {
    margin-block: 0.75rem;
  }

  .mt-3\@lg {
    margin-top: 0.75rem;
  }

  .mr-3\@lg {
    margin-right: 0.75rem;
  }

  .mb-3\@lg {
    margin-bottom: 0.75rem;
  }

  .ml-3\@lg {
    margin-left: 0.75rem;
  }

  .gap-3\@lg {
    gap: 0.75rem;
  }

  .gap-x-3\@lg {
    column-gap: 0.75rem;
  }

  .gap-y-3\@lg {
    row-gap: 0.75rem;
  }

  .space-x-3\@lg>*+* {
    margin-left: 0.75rem;
  }

  .space-y-3\@lg>*+* {
    margin-top: 0.75rem;
  }

  .inset-3\@lg {
    inset: 0.75rem;
  }

  .inset-x-3\@lg {
    left: 0.75rem;
    right: 0.75rem;
  }

  .inset-y-3\@lg {
    top: 0.75rem;
    bottom: 0.75rem;
  }

  .p-4\@lg {
    padding: 1rem;
  }

  .px-4\@lg {
    padding-inline: 1rem;
  }

  .py-4\@lg {
    padding-block: 1rem;
  }

  .pt-4\@lg {
    padding-top: 1rem;
  }

  .pr-4\@lg {
    padding-right: 1rem;
  }

  .pb-4\@lg {
    padding-bottom: 1rem;
  }

  .pl-4\@lg {
    padding-left: 1rem;
  }

  .m-4\@lg {
    margin: 1rem;
  }

  .mx-4\@lg {
    margin-inline: 1rem;
  }

  .my-4\@lg {
    margin-block: 1rem;
  }

  .mt-4\@lg {
    margin-top: 1rem;
  }

  .mr-4\@lg {
    margin-right: 1rem;
  }

  .mb-4\@lg {
    margin-bottom: 1rem;
  }

  .ml-4\@lg {
    margin-left: 1rem;
  }

  .gap-4\@lg {
    gap: 1rem;
  }

  .gap-x-4\@lg {
    column-gap: 1rem;
  }

  .gap-y-4\@lg {
    row-gap: 1rem;
  }

  .space-x-4\@lg>*+* {
    margin-left: 1rem;
  }

  .space-y-4\@lg>*+* {
    margin-top: 1rem;
  }

  .inset-4\@lg {
    inset: 1rem;
  }

  .inset-x-4\@lg {
    left: 1rem;
    right: 1rem;
  }

  .inset-y-4\@lg {
    top: 1rem;
    bottom: 1rem;
  }

  .p-5\@lg {
    padding: 1.25rem;
  }

  .px-5\@lg {
    padding-inline: 1.25rem;
  }

  .py-5\@lg {
    padding-block: 1.25rem;
  }

  .pt-5\@lg {
    padding-top: 1.25rem;
  }

  .pr-5\@lg {
    padding-right: 1.25rem;
  }

  .pb-5\@lg {
    padding-bottom: 1.25rem;
  }

  .pl-5\@lg {
    padding-left: 1.25rem;
  }

  .m-5\@lg {
    margin: 1.25rem;
  }

  .mx-5\@lg {
    margin-inline: 1.25rem;
  }

  .my-5\@lg {
    margin-block: 1.25rem;
  }

  .mt-5\@lg {
    margin-top: 1.25rem;
  }

  .mr-5\@lg {
    margin-right: 1.25rem;
  }

  .mb-5\@lg {
    margin-bottom: 1.25rem;
  }

  .ml-5\@lg {
    margin-left: 1.25rem;
  }

  .gap-5\@lg {
    gap: 1.25rem;
  }

  .gap-x-5\@lg {
    column-gap: 1.25rem;
  }

  .gap-y-5\@lg {
    row-gap: 1.25rem;
  }

  .space-x-5\@lg>*+* {
    margin-left: 1.25rem;
  }

  .space-y-5\@lg>*+* {
    margin-top: 1.25rem;
  }

  .inset-5\@lg {
    inset: 1.25rem;
  }

  .inset-x-5\@lg {
    left: 1.25rem;
    right: 1.25rem;
  }

  .inset-y-5\@lg {
    top: 1.25rem;
    bottom: 1.25rem;
  }

  .p-6\@lg {
    padding: 1.5rem;
  }

  .px-6\@lg {
    padding-inline: 1.5rem;
  }

  .py-6\@lg {
    padding-block: 1.5rem;
  }

  .pt-6\@lg {
    padding-top: 1.5rem;
  }

  .pr-6\@lg {
    padding-right: 1.5rem;
  }

  .pb-6\@lg {
    padding-bottom: 1.5rem;
  }

  .pl-6\@lg {
    padding-left: 1.5rem;
  }

  .m-6\@lg {
    margin: 1.5rem;
  }

  .mx-6\@lg {
    margin-inline: 1.5rem;
  }

  .my-6\@lg {
    margin-block: 1.5rem;
  }

  .mt-6\@lg {
    margin-top: 1.5rem;
  }

  .mr-6\@lg {
    margin-right: 1.5rem;
  }

  .mb-6\@lg {
    margin-bottom: 1.5rem;
  }

  .ml-6\@lg {
    margin-left: 1.5rem;
  }

  .gap-6\@lg {
    gap: 1.5rem;
  }

  .gap-x-6\@lg {
    column-gap: 1.5rem;
  }

  .gap-y-6\@lg {
    row-gap: 1.5rem;
  }

  .space-x-6\@lg>*+* {
    margin-left: 1.5rem;
  }

  .space-y-6\@lg>*+* {
    margin-top: 1.5rem;
  }

  .inset-6\@lg {
    inset: 1.5rem;
  }

  .inset-x-6\@lg {
    left: 1.5rem;
    right: 1.5rem;
  }

  .inset-y-6\@lg {
    top: 1.5rem;
    bottom: 1.5rem;
  }

  .p-8\@lg {
    padding: 2rem;
  }

  .px-8\@lg {
    padding-inline: 2rem;
  }

  .py-8\@lg {
    padding-block: 2rem;
  }

  .pt-8\@lg {
    padding-top: 2rem;
  }

  .pr-8\@lg {
    padding-right: 2rem;
  }

  .pb-8\@lg {
    padding-bottom: 2rem;
  }

  .pl-8\@lg {
    padding-left: 2rem;
  }

  .m-8\@lg {
    margin: 2rem;
  }

  .mx-8\@lg {
    margin-inline: 2rem;
  }

  .my-8\@lg {
    margin-block: 2rem;
  }

  .mt-8\@lg {
    margin-top: 2rem;
  }

  .mr-8\@lg {
    margin-right: 2rem;
  }

  .mb-8\@lg {
    margin-bottom: 2rem;
  }

  .ml-8\@lg {
    margin-left: 2rem;
  }

  .gap-8\@lg {
    gap: 2rem;
  }

  .gap-x-8\@lg {
    column-gap: 2rem;
  }

  .gap-y-8\@lg {
    row-gap: 2rem;
  }

  .space-x-8\@lg>*+* {
    margin-left: 2rem;
  }

  .space-y-8\@lg>*+* {
    margin-top: 2rem;
  }

  .inset-8\@lg {
    inset: 2rem;
  }

  .inset-x-8\@lg {
    left: 2rem;
    right: 2rem;
  }

  .inset-y-8\@lg {
    top: 2rem;
    bottom: 2rem;
  }

  .p-10\@lg {
    padding: 2.5rem;
  }

  .px-10\@lg {
    padding-inline: 2.5rem;
  }

  .py-10\@lg {
    padding-block: 2.5rem;
  }

  .pt-10\@lg {
    padding-top: 2.5rem;
  }

  .pr-10\@lg {
    padding-right: 2.5rem;
  }

  .pb-10\@lg {
    padding-bottom: 2.5rem;
  }

  .pl-10\@lg {
    padding-left: 2.5rem;
  }

  .m-10\@lg {
    margin: 2.5rem;
  }

  .mx-10\@lg {
    margin-inline: 2.5rem;
  }

  .my-10\@lg {
    margin-block: 2.5rem;
  }

  .mt-10\@lg {
    margin-top: 2.5rem;
  }

  .mr-10\@lg {
    margin-right: 2.5rem;
  }

  .mb-10\@lg {
    margin-bottom: 2.5rem;
  }

  .ml-10\@lg {
    margin-left: 2.5rem;
  }

  .gap-10\@lg {
    gap: 2.5rem;
  }

  .gap-x-10\@lg {
    column-gap: 2.5rem;
  }

  .gap-y-10\@lg {
    row-gap: 2.5rem;
  }

  .space-x-10\@lg>*+* {
    margin-left: 2.5rem;
  }

  .space-y-10\@lg>*+* {
    margin-top: 2.5rem;
  }

  .inset-10\@lg {
    inset: 2.5rem;
  }

  .inset-x-10\@lg {
    left: 2.5rem;
    right: 2.5rem;
  }

  .inset-y-10\@lg {
    top: 2.5rem;
    bottom: 2.5rem;
  }

  .p-12\@lg {
    padding: 3rem;
  }

  .px-12\@lg {
    padding-inline: 3rem;
  }

  .py-12\@lg {
    padding-block: 3rem;
  }

  .pt-12\@lg {
    padding-top: 3rem;
  }

  .pr-12\@lg {
    padding-right: 3rem;
  }

  .pb-12\@lg {
    padding-bottom: 3rem;
  }

  .pl-12\@lg {
    padding-left: 3rem;
  }

  .m-12\@lg {
    margin: 3rem;
  }

  .mx-12\@lg {
    margin-inline: 3rem;
  }

  .my-12\@lg {
    margin-block: 3rem;
  }

  .mt-12\@lg {
    margin-top: 3rem;
  }

  .mr-12\@lg {
    margin-right: 3rem;
  }

  .mb-12\@lg {
    margin-bottom: 3rem;
  }

  .ml-12\@lg {
    margin-left: 3rem;
  }

  .gap-12\@lg {
    gap: 3rem;
  }

  .gap-x-12\@lg {
    column-gap: 3rem;
  }

  .gap-y-12\@lg {
    row-gap: 3rem;
  }

  .space-x-12\@lg>*+* {
    margin-left: 3rem;
  }

  .space-y-12\@lg>*+* {
    margin-top: 3rem;
  }

  .inset-12\@lg {
    inset: 3rem;
  }

  .inset-x-12\@lg {
    left: 3rem;
    right: 3rem;
  }

  .inset-y-12\@lg {
    top: 3rem;
    bottom: 3rem;
  }

  .p-16\@lg {
    padding: 4rem;
  }

  .px-16\@lg {
    padding-inline: 4rem;
  }

  .py-16\@lg {
    padding-block: 4rem;
  }

  .pt-16\@lg {
    padding-top: 4rem;
  }

  .pr-16\@lg {
    padding-right: 4rem;
  }

  .pb-16\@lg {
    padding-bottom: 4rem;
  }

  .pl-16\@lg {
    padding-left: 4rem;
  }

  .m-16\@lg {
    margin: 4rem;
  }

  .mx-16\@lg {
    margin-inline: 4rem;
  }

  .my-16\@lg {
    margin-block: 4rem;
  }

  .mt-16\@lg {
    margin-top: 4rem;
  }

  .mr-16\@lg {
    margin-right: 4rem;
  }

  .mb-16\@lg {
    margin-bottom: 4rem;
  }

  .ml-16\@lg {
    margin-left: 4rem;
  }

  .gap-16\@lg {
    gap: 4rem;
  }

  .gap-x-16\@lg {
    column-gap: 4rem;
  }

  .gap-y-16\@lg {
    row-gap: 4rem;
  }

  .space-x-16\@lg>*+* {
    margin-left: 4rem;
  }

  .space-y-16\@lg>*+* {
    margin-top: 4rem;
  }

  .inset-16\@lg {
    inset: 4rem;
  }

  .inset-x-16\@lg {
    left: 4rem;
    right: 4rem;
  }

  .inset-y-16\@lg {
    top: 4rem;
    bottom: 4rem;
  }

  .p-20\@lg {
    padding: 5rem;
  }

  .px-20\@lg {
    padding-inline: 5rem;
  }

  .py-20\@lg {
    padding-block: 5rem;
  }

  .pt-20\@lg {
    padding-top: 5rem;
  }

  .pr-20\@lg {
    padding-right: 5rem;
  }

  .pb-20\@lg {
    padding-bottom: 5rem;
  }

  .pl-20\@lg {
    padding-left: 5rem;
  }

  .m-20\@lg {
    margin: 5rem;
  }

  .mx-20\@lg {
    margin-inline: 5rem;
  }

  .my-20\@lg {
    margin-block: 5rem;
  }

  .mt-20\@lg {
    margin-top: 5rem;
  }

  .mr-20\@lg {
    margin-right: 5rem;
  }

  .mb-20\@lg {
    margin-bottom: 5rem;
  }

  .ml-20\@lg {
    margin-left: 5rem;
  }

  .gap-20\@lg {
    gap: 5rem;
  }

  .gap-x-20\@lg {
    column-gap: 5rem;
  }

  .gap-y-20\@lg {
    row-gap: 5rem;
  }

  .space-x-20\@lg>*+* {
    margin-left: 5rem;
  }

  .space-y-20\@lg>*+* {
    margin-top: 5rem;
  }

  .inset-20\@lg {
    inset: 5rem;
  }

  .inset-x-20\@lg {
    left: 5rem;
    right: 5rem;
  }

  .inset-y-20\@lg {
    top: 5rem;
    bottom: 5rem;
  }

  .p-24\@lg {
    padding: 6rem;
  }

  .px-24\@lg {
    padding-inline: 6rem;
  }

  .py-24\@lg {
    padding-block: 6rem;
  }

  .pt-24\@lg {
    padding-top: 6rem;
  }

  .pr-24\@lg {
    padding-right: 6rem;
  }

  .pb-24\@lg {
    padding-bottom: 6rem;
  }

  .pl-24\@lg {
    padding-left: 6rem;
  }

  .m-24\@lg {
    margin: 6rem;
  }

  .mx-24\@lg {
    margin-inline: 6rem;
  }

  .my-24\@lg {
    margin-block: 6rem;
  }

  .mt-24\@lg {
    margin-top: 6rem;
  }

  .mr-24\@lg {
    margin-right: 6rem;
  }

  .mb-24\@lg {
    margin-bottom: 6rem;
  }

  .ml-24\@lg {
    margin-left: 6rem;
  }

  .gap-24\@lg {
    gap: 6rem;
  }

  .gap-x-24\@lg {
    column-gap: 6rem;
  }

  .gap-y-24\@lg {
    row-gap: 6rem;
  }

  .space-x-24\@lg>*+* {
    margin-left: 6rem;
  }

  .space-y-24\@lg>*+* {
    margin-top: 6rem;
  }

  .inset-24\@lg {
    inset: 6rem;
  }

  .inset-x-24\@lg {
    left: 6rem;
    right: 6rem;
  }

  .inset-y-24\@lg {
    top: 6rem;
    bottom: 6rem;
  }

  .p-32\@lg {
    padding: 8rem;
  }

  .px-32\@lg {
    padding-inline: 8rem;
  }

  .py-32\@lg {
    padding-block: 8rem;
  }

  .pt-32\@lg {
    padding-top: 8rem;
  }

  .pr-32\@lg {
    padding-right: 8rem;
  }

  .pb-32\@lg {
    padding-bottom: 8rem;
  }

  .pl-32\@lg {
    padding-left: 8rem;
  }

  .m-32\@lg {
    margin: 8rem;
  }

  .mx-32\@lg {
    margin-inline: 8rem;
  }

  .my-32\@lg {
    margin-block: 8rem;
  }

  .mt-32\@lg {
    margin-top: 8rem;
  }

  .mr-32\@lg {
    margin-right: 8rem;
  }

  .mb-32\@lg {
    margin-bottom: 8rem;
  }

  .ml-32\@lg {
    margin-left: 8rem;
  }

  .gap-32\@lg {
    gap: 8rem;
  }

  .gap-x-32\@lg {
    column-gap: 8rem;
  }

  .gap-y-32\@lg {
    row-gap: 8rem;
  }

  .space-x-32\@lg>*+* {
    margin-left: 8rem;
  }

  .space-y-32\@lg>*+* {
    margin-top: 8rem;
  }

  .inset-32\@lg {
    inset: 8rem;
  }

  .inset-x-32\@lg {
    left: 8rem;
    right: 8rem;
  }

  .inset-y-32\@lg {
    top: 8rem;
    bottom: 8rem;
  }

  .p-40\@lg {
    padding: 10rem;
  }

  .px-40\@lg {
    padding-inline: 10rem;
  }

  .py-40\@lg {
    padding-block: 10rem;
  }

  .pt-40\@lg {
    padding-top: 10rem;
  }

  .pr-40\@lg {
    padding-right: 10rem;
  }

  .pb-40\@lg {
    padding-bottom: 10rem;
  }

  .pl-40\@lg {
    padding-left: 10rem;
  }

  .m-40\@lg {
    margin: 10rem;
  }

  .mx-40\@lg {
    margin-inline: 10rem;
  }

  .my-40\@lg {
    margin-block: 10rem;
  }

  .mt-40\@lg {
    margin-top: 10rem;
  }

  .mr-40\@lg {
    margin-right: 10rem;
  }

  .mb-40\@lg {
    margin-bottom: 10rem;
  }

  .ml-40\@lg {
    margin-left: 10rem;
  }

  .gap-40\@lg {
    gap: 10rem;
  }

  .gap-x-40\@lg {
    column-gap: 10rem;
  }

  .gap-y-40\@lg {
    row-gap: 10rem;
  }

  .space-x-40\@lg>*+* {
    margin-left: 10rem;
  }

  .space-y-40\@lg>*+* {
    margin-top: 10rem;
  }

  .inset-40\@lg {
    inset: 10rem;
  }

  .inset-x-40\@lg {
    left: 10rem;
    right: 10rem;
  }

  .inset-y-40\@lg {
    top: 10rem;
    bottom: 10rem;
  }

  .p-48\@lg {
    padding: 12rem;
  }

  .px-48\@lg {
    padding-inline: 12rem;
  }

  .py-48\@lg {
    padding-block: 12rem;
  }

  .pt-48\@lg {
    padding-top: 12rem;
  }

  .pr-48\@lg {
    padding-right: 12rem;
  }

  .pb-48\@lg {
    padding-bottom: 12rem;
  }

  .pl-48\@lg {
    padding-left: 12rem;
  }

  .m-48\@lg {
    margin: 12rem;
  }

  .mx-48\@lg {
    margin-inline: 12rem;
  }

  .my-48\@lg {
    margin-block: 12rem;
  }

  .mt-48\@lg {
    margin-top: 12rem;
  }

  .mr-48\@lg {
    margin-right: 12rem;
  }

  .mb-48\@lg {
    margin-bottom: 12rem;
  }

  .ml-48\@lg {
    margin-left: 12rem;
  }

  .gap-48\@lg {
    gap: 12rem;
  }

  .gap-x-48\@lg {
    column-gap: 12rem;
  }

  .gap-y-48\@lg {
    row-gap: 12rem;
  }

  .space-x-48\@lg>*+* {
    margin-left: 12rem;
  }

  .space-y-48\@lg>*+* {
    margin-top: 12rem;
  }

  .inset-48\@lg {
    inset: 12rem;
  }

  .inset-x-48\@lg {
    left: 12rem;
    right: 12rem;
  }

  .inset-y-48\@lg {
    top: 12rem;
    bottom: 12rem;
  }

  .p-56\@lg {
    padding: 14rem;
  }

  .px-56\@lg {
    padding-inline: 14rem;
  }

  .py-56\@lg {
    padding-block: 14rem;
  }

  .pt-56\@lg {
    padding-top: 14rem;
  }

  .pr-56\@lg {
    padding-right: 14rem;
  }

  .pb-56\@lg {
    padding-bottom: 14rem;
  }

  .pl-56\@lg {
    padding-left: 14rem;
  }

  .m-56\@lg {
    margin: 14rem;
  }

  .mx-56\@lg {
    margin-inline: 14rem;
  }

  .my-56\@lg {
    margin-block: 14rem;
  }

  .mt-56\@lg {
    margin-top: 14rem;
  }

  .mr-56\@lg {
    margin-right: 14rem;
  }

  .mb-56\@lg {
    margin-bottom: 14rem;
  }

  .ml-56\@lg {
    margin-left: 14rem;
  }

  .gap-56\@lg {
    gap: 14rem;
  }

  .gap-x-56\@lg {
    column-gap: 14rem;
  }

  .gap-y-56\@lg {
    row-gap: 14rem;
  }

  .space-x-56\@lg>*+* {
    margin-left: 14rem;
  }

  .space-y-56\@lg>*+* {
    margin-top: 14rem;
  }

  .inset-56\@lg {
    inset: 14rem;
  }

  .inset-x-56\@lg {
    left: 14rem;
    right: 14rem;
  }

  .inset-y-56\@lg {
    top: 14rem;
    bottom: 14rem;
  }

  .p-64\@lg {
    padding: 16rem;
  }

  .px-64\@lg {
    padding-inline: 16rem;
  }

  .py-64\@lg {
    padding-block: 16rem;
  }

  .pt-64\@lg {
    padding-top: 16rem;
  }

  .pr-64\@lg {
    padding-right: 16rem;
  }

  .pb-64\@lg {
    padding-bottom: 16rem;
  }

  .pl-64\@lg {
    padding-left: 16rem;
  }

  .m-64\@lg {
    margin: 16rem;
  }

  .mx-64\@lg {
    margin-inline: 16rem;
  }

  .my-64\@lg {
    margin-block: 16rem;
  }

  .mt-64\@lg {
    margin-top: 16rem;
  }

  .mr-64\@lg {
    margin-right: 16rem;
  }

  .mb-64\@lg {
    margin-bottom: 16rem;
  }

  .ml-64\@lg {
    margin-left: 16rem;
  }

  .gap-64\@lg {
    gap: 16rem;
  }

  .gap-x-64\@lg {
    column-gap: 16rem;
  }

  .gap-y-64\@lg {
    row-gap: 16rem;
  }

  .space-x-64\@lg>*+* {
    margin-left: 16rem;
  }

  .space-y-64\@lg>*+* {
    margin-top: 16rem;
  }

  .inset-64\@lg {
    inset: 16rem;
  }

  .inset-x-64\@lg {
    left: 16rem;
    right: 16rem;
  }

  .inset-y-64\@lg {
    top: 16rem;
    bottom: 16rem;
  }

  .p-120\@lg {
    padding: 30rem;
  }

  .px-120\@lg {
    padding-inline: 30rem;
  }

  .py-120\@lg {
    padding-block: 30rem;
  }

  .pt-120\@lg {
    padding-top: 30rem;
  }

  .pr-120\@lg {
    padding-right: 30rem;
  }

  .pb-120\@lg {
    padding-bottom: 30rem;
  }

  .pl-120\@lg {
    padding-left: 30rem;
  }

  .m-120\@lg {
    margin: 30rem;
  }

  .mx-120\@lg {
    margin-inline: 30rem;
  }

  .my-120\@lg {
    margin-block: 30rem;
  }

  .mt-120\@lg {
    margin-top: 30rem;
  }

  .mr-120\@lg {
    margin-right: 30rem;
  }

  .mb-120\@lg {
    margin-bottom: 30rem;
  }

  .ml-120\@lg {
    margin-left: 30rem;
  }

  .gap-120\@lg {
    gap: 30rem;
  }

  .gap-x-120\@lg {
    column-gap: 30rem;
  }

  .gap-y-120\@lg {
    row-gap: 30rem;
  }

  .space-x-120\@lg>*+* {
    margin-left: 30rem;
  }

  .space-y-120\@lg>*+* {
    margin-top: 30rem;
  }

  .inset-120\@lg {
    inset: 30rem;
  }

  .inset-x-120\@lg {
    left: 30rem;
    right: 30rem;
  }

  .inset-y-120\@lg {
    top: 30rem;
    bottom: 30rem;
  }
}

@media (min-width: 1280px) {
  .mx-auto\@xl {
    margin-left: auto;
    margin-right: auto;
  }

  .ml-auto\@xl {
    margin-left: auto;
  }

  .mr-auto\@xl {
    margin-right: auto;
  }

  .inset-auto\@xl {
    inset: auto;
  }

  .inset-x-auto\@xl {
    left: auto;
    right: auto;
  }

  .inset-y-auto\@xl {
    top: auto;
    bottom: auto;
  }

  .p-0\@xl {
    padding: 0px;
  }

  .px-0\@xl {
    padding-inline: 0px;
  }

  .py-0\@xl {
    padding-block: 0px;
  }

  .pt-0\@xl {
    padding-top: 0px;
  }

  .pr-0\@xl {
    padding-right: 0px;
  }

  .pb-0\@xl {
    padding-bottom: 0px;
  }

  .pl-0\@xl {
    padding-left: 0px;
  }

  .m-0\@xl {
    margin: 0px;
  }

  .mx-0\@xl {
    margin-inline: 0px;
  }

  .my-0\@xl {
    margin-block: 0px;
  }

  .mt-0\@xl {
    margin-top: 0px;
  }

  .mr-0\@xl {
    margin-right: 0px;
  }

  .mb-0\@xl {
    margin-bottom: 0px;
  }

  .ml-0\@xl {
    margin-left: 0px;
  }

  .gap-0\@xl {
    gap: 0;
  }

  .gap-x-0\@xl {
    column-gap: 0;
  }

  .gap-y-0\@xl {
    row-gap: 0;
  }

  .space-x-0\@xl>*+* {
    margin-left: 0px;
  }

  .space-y-0\@xl>*+* {
    margin-top: 0px;
  }

  .inset-0\@xl {
    inset: 0px;
  }

  .inset-x-0\@xl {
    left: 0px;
    right: 0px;
  }

  .inset-y-0\@xl {
    top: 0px;
    bottom: 0px;
  }

  .p-1\@xl {
    padding: 0.25rem;
  }

  .px-1\@xl {
    padding-inline: 0.25rem;
  }

  .py-1\@xl {
    padding-block: 0.25rem;
  }

  .pt-1\@xl {
    padding-top: 0.25rem;
  }

  .pr-1\@xl {
    padding-right: 0.25rem;
  }

  .pb-1\@xl {
    padding-bottom: 0.25rem;
  }

  .pl-1\@xl {
    padding-left: 0.25rem;
  }

  .m-1\@xl {
    margin: 0.25rem;
  }

  .mx-1\@xl {
    margin-inline: 0.25rem;
  }

  .my-1\@xl {
    margin-block: 0.25rem;
  }

  .mt-1\@xl {
    margin-top: 0.25rem;
  }

  .mr-1\@xl {
    margin-right: 0.25rem;
  }

  .mb-1\@xl {
    margin-bottom: 0.25rem;
  }

  .ml-1\@xl {
    margin-left: 0.25rem;
  }

  .gap-1\@xl {
    gap: 0.25rem;
  }

  .gap-x-1\@xl {
    column-gap: 0.25rem;
  }

  .gap-y-1\@xl {
    row-gap: 0.25rem;
  }

  .space-x-1\@xl>*+* {
    margin-left: 0.25rem;
  }

  .space-y-1\@xl>*+* {
    margin-top: 0.25rem;
  }

  .inset-1\@xl {
    inset: 0.25rem;
  }

  .inset-x-1\@xl {
    left: 0.25rem;
    right: 0.25rem;
  }

  .inset-y-1\@xl {
    top: 0.25rem;
    bottom: 0.25rem;
  }

  .p-2\@xl {
    padding: 0.5rem;
  }

  .px-2\@xl {
    padding-inline: 0.5rem;
  }

  .py-2\@xl {
    padding-block: 0.5rem;
  }

  .pt-2\@xl {
    padding-top: 0.5rem;
  }

  .pr-2\@xl {
    padding-right: 0.5rem;
  }

  .pb-2\@xl {
    padding-bottom: 0.5rem;
  }

  .pl-2\@xl {
    padding-left: 0.5rem;
  }

  .m-2\@xl {
    margin: 0.5rem;
  }

  .mx-2\@xl {
    margin-inline: 0.5rem;
  }

  .my-2\@xl {
    margin-block: 0.5rem;
  }

  .mt-2\@xl {
    margin-top: 0.5rem;
  }

  .mr-2\@xl {
    margin-right: 0.5rem;
  }

  .mb-2\@xl {
    margin-bottom: 0.5rem;
  }

  .ml-2\@xl {
    margin-left: 0.5rem;
  }

  .gap-2\@xl {
    gap: 0.5rem;
  }

  .gap-x-2\@xl {
    column-gap: 0.5rem;
  }

  .gap-y-2\@xl {
    row-gap: 0.5rem;
  }

  .space-x-2\@xl>*+* {
    margin-left: 0.5rem;
  }

  .space-y-2\@xl>*+* {
    margin-top: 0.5rem;
  }

  .inset-2\@xl {
    inset: 0.5rem;
  }

  .inset-x-2\@xl {
    left: 0.5rem;
    right: 0.5rem;
  }

  .inset-y-2\@xl {
    top: 0.5rem;
    bottom: 0.5rem;
  }

  .p-3\@xl {
    padding: 0.75rem;
  }

  .px-3\@xl {
    padding-inline: 0.75rem;
  }

  .py-3\@xl {
    padding-block: 0.75rem;
  }

  .pt-3\@xl {
    padding-top: 0.75rem;
  }

  .pr-3\@xl {
    padding-right: 0.75rem;
  }

  .pb-3\@xl {
    padding-bottom: 0.75rem;
  }

  .pl-3\@xl {
    padding-left: 0.75rem;
  }

  .m-3\@xl {
    margin: 0.75rem;
  }

  .mx-3\@xl {
    margin-inline: 0.75rem;
  }

  .my-3\@xl {
    margin-block: 0.75rem;
  }

  .mt-3\@xl {
    margin-top: 0.75rem;
  }

  .mr-3\@xl {
    margin-right: 0.75rem;
  }

  .mb-3\@xl {
    margin-bottom: 0.75rem;
  }

  .ml-3\@xl {
    margin-left: 0.75rem;
  }

  .gap-3\@xl {
    gap: 0.75rem;
  }

  .gap-x-3\@xl {
    column-gap: 0.75rem;
  }

  .gap-y-3\@xl {
    row-gap: 0.75rem;
  }

  .space-x-3\@xl>*+* {
    margin-left: 0.75rem;
  }

  .space-y-3\@xl>*+* {
    margin-top: 0.75rem;
  }

  .inset-3\@xl {
    inset: 0.75rem;
  }

  .inset-x-3\@xl {
    left: 0.75rem;
    right: 0.75rem;
  }

  .inset-y-3\@xl {
    top: 0.75rem;
    bottom: 0.75rem;
  }

  .p-4\@xl {
    padding: 1rem;
  }

  .px-4\@xl {
    padding-inline: 1rem;
  }

  .py-4\@xl {
    padding-block: 1rem;
  }

  .pt-4\@xl {
    padding-top: 1rem;
  }

  .pr-4\@xl {
    padding-right: 1rem;
  }

  .pb-4\@xl {
    padding-bottom: 1rem;
  }

  .pl-4\@xl {
    padding-left: 1rem;
  }

  .m-4\@xl {
    margin: 1rem;
  }

  .mx-4\@xl {
    margin-inline: 1rem;
  }

  .my-4\@xl {
    margin-block: 1rem;
  }

  .mt-4\@xl {
    margin-top: 1rem;
  }

  .mr-4\@xl {
    margin-right: 1rem;
  }

  .mb-4\@xl {
    margin-bottom: 1rem;
  }

  .ml-4\@xl {
    margin-left: 1rem;
  }

  .gap-4\@xl {
    gap: 1rem;
  }

  .gap-x-4\@xl {
    column-gap: 1rem;
  }

  .gap-y-4\@xl {
    row-gap: 1rem;
  }

  .space-x-4\@xl>*+* {
    margin-left: 1rem;
  }

  .space-y-4\@xl>*+* {
    margin-top: 1rem;
  }

  .inset-4\@xl {
    inset: 1rem;
  }

  .inset-x-4\@xl {
    left: 1rem;
    right: 1rem;
  }

  .inset-y-4\@xl {
    top: 1rem;
    bottom: 1rem;
  }

  .p-5\@xl {
    padding: 1.25rem;
  }

  .px-5\@xl {
    padding-inline: 1.25rem;
  }

  .py-5\@xl {
    padding-block: 1.25rem;
  }

  .pt-5\@xl {
    padding-top: 1.25rem;
  }

  .pr-5\@xl {
    padding-right: 1.25rem;
  }

  .pb-5\@xl {
    padding-bottom: 1.25rem;
  }

  .pl-5\@xl {
    padding-left: 1.25rem;
  }

  .m-5\@xl {
    margin: 1.25rem;
  }

  .mx-5\@xl {
    margin-inline: 1.25rem;
  }

  .my-5\@xl {
    margin-block: 1.25rem;
  }

  .mt-5\@xl {
    margin-top: 1.25rem;
  }

  .mr-5\@xl {
    margin-right: 1.25rem;
  }

  .mb-5\@xl {
    margin-bottom: 1.25rem;
  }

  .ml-5\@xl {
    margin-left: 1.25rem;
  }

  .gap-5\@xl {
    gap: 1.25rem;
  }

  .gap-x-5\@xl {
    column-gap: 1.25rem;
  }

  .gap-y-5\@xl {
    row-gap: 1.25rem;
  }

  .space-x-5\@xl>*+* {
    margin-left: 1.25rem;
  }

  .space-y-5\@xl>*+* {
    margin-top: 1.25rem;
  }

  .inset-5\@xl {
    inset: 1.25rem;
  }

  .inset-x-5\@xl {
    left: 1.25rem;
    right: 1.25rem;
  }

  .inset-y-5\@xl {
    top: 1.25rem;
    bottom: 1.25rem;
  }

  .p-6\@xl {
    padding: 1.5rem;
  }

  .px-6\@xl {
    padding-inline: 1.5rem;
  }

  .py-6\@xl {
    padding-block: 1.5rem;
  }

  .pt-6\@xl {
    padding-top: 1.5rem;
  }

  .pr-6\@xl {
    padding-right: 1.5rem;
  }

  .pb-6\@xl {
    padding-bottom: 1.5rem;
  }

  .pl-6\@xl {
    padding-left: 1.5rem;
  }

  .m-6\@xl {
    margin: 1.5rem;
  }

  .mx-6\@xl {
    margin-inline: 1.5rem;
  }

  .my-6\@xl {
    margin-block: 1.5rem;
  }

  .mt-6\@xl {
    margin-top: 1.5rem;
  }

  .mr-6\@xl {
    margin-right: 1.5rem;
  }

  .mb-6\@xl {
    margin-bottom: 1.5rem;
  }

  .ml-6\@xl {
    margin-left: 1.5rem;
  }

  .gap-6\@xl {
    gap: 1.5rem;
  }

  .gap-x-6\@xl {
    column-gap: 1.5rem;
  }

  .gap-y-6\@xl {
    row-gap: 1.5rem;
  }

  .space-x-6\@xl>*+* {
    margin-left: 1.5rem;
  }

  .space-y-6\@xl>*+* {
    margin-top: 1.5rem;
  }

  .inset-6\@xl {
    inset: 1.5rem;
  }

  .inset-x-6\@xl {
    left: 1.5rem;
    right: 1.5rem;
  }

  .inset-y-6\@xl {
    top: 1.5rem;
    bottom: 1.5rem;
  }

  .p-8\@xl {
    padding: 2rem;
  }

  .px-8\@xl {
    padding-inline: 2rem;
  }

  .py-8\@xl {
    padding-block: 2rem;
  }

  .pt-8\@xl {
    padding-top: 2rem;
  }

  .pr-8\@xl {
    padding-right: 2rem;
  }

  .pb-8\@xl {
    padding-bottom: 2rem;
  }

  .pl-8\@xl {
    padding-left: 2rem;
  }

  .m-8\@xl {
    margin: 2rem;
  }

  .mx-8\@xl {
    margin-inline: 2rem;
  }

  .my-8\@xl {
    margin-block: 2rem;
  }

  .mt-8\@xl {
    margin-top: 2rem;
  }

  .mr-8\@xl {
    margin-right: 2rem;
  }

  .mb-8\@xl {
    margin-bottom: 2rem;
  }

  .ml-8\@xl {
    margin-left: 2rem;
  }

  .gap-8\@xl {
    gap: 2rem;
  }

  .gap-x-8\@xl {
    column-gap: 2rem;
  }

  .gap-y-8\@xl {
    row-gap: 2rem;
  }

  .space-x-8\@xl>*+* {
    margin-left: 2rem;
  }

  .space-y-8\@xl>*+* {
    margin-top: 2rem;
  }

  .inset-8\@xl {
    inset: 2rem;
  }

  .inset-x-8\@xl {
    left: 2rem;
    right: 2rem;
  }

  .inset-y-8\@xl {
    top: 2rem;
    bottom: 2rem;
  }

  .p-10\@xl {
    padding: 2.5rem;
  }

  .px-10\@xl {
    padding-inline: 2.5rem;
  }

  .py-10\@xl {
    padding-block: 2.5rem;
  }

  .pt-10\@xl {
    padding-top: 2.5rem;
  }

  .pr-10\@xl {
    padding-right: 2.5rem;
  }

  .pb-10\@xl {
    padding-bottom: 2.5rem;
  }

  .pl-10\@xl {
    padding-left: 2.5rem;
  }

  .m-10\@xl {
    margin: 2.5rem;
  }

  .mx-10\@xl {
    margin-inline: 2.5rem;
  }

  .my-10\@xl {
    margin-block: 2.5rem;
  }

  .mt-10\@xl {
    margin-top: 2.5rem;
  }

  .mr-10\@xl {
    margin-right: 2.5rem;
  }

  .mb-10\@xl {
    margin-bottom: 2.5rem;
  }

  .ml-10\@xl {
    margin-left: 2.5rem;
  }

  .gap-10\@xl {
    gap: 2.5rem;
  }

  .gap-x-10\@xl {
    column-gap: 2.5rem;
  }

  .gap-y-10\@xl {
    row-gap: 2.5rem;
  }

  .space-x-10\@xl>*+* {
    margin-left: 2.5rem;
  }

  .space-y-10\@xl>*+* {
    margin-top: 2.5rem;
  }

  .inset-10\@xl {
    inset: 2.5rem;
  }

  .inset-x-10\@xl {
    left: 2.5rem;
    right: 2.5rem;
  }

  .inset-y-10\@xl {
    top: 2.5rem;
    bottom: 2.5rem;
  }

  .p-12\@xl {
    padding: 3rem;
  }

  .px-12\@xl {
    padding-inline: 3rem;
  }

  .py-12\@xl {
    padding-block: 3rem;
  }

  .pt-12\@xl {
    padding-top: 3rem;
  }

  .pr-12\@xl {
    padding-right: 3rem;
  }

  .pb-12\@xl {
    padding-bottom: 3rem;
  }

  .pl-12\@xl {
    padding-left: 3rem;
  }

  .m-12\@xl {
    margin: 3rem;
  }

  .mx-12\@xl {
    margin-inline: 3rem;
  }

  .my-12\@xl {
    margin-block: 3rem;
  }

  .mt-12\@xl {
    margin-top: 3rem;
  }

  .mr-12\@xl {
    margin-right: 3rem;
  }

  .mb-12\@xl {
    margin-bottom: 3rem;
  }

  .ml-12\@xl {
    margin-left: 3rem;
  }

  .gap-12\@xl {
    gap: 3rem;
  }

  .gap-x-12\@xl {
    column-gap: 3rem;
  }

  .gap-y-12\@xl {
    row-gap: 3rem;
  }

  .space-x-12\@xl>*+* {
    margin-left: 3rem;
  }

  .space-y-12\@xl>*+* {
    margin-top: 3rem;
  }

  .inset-12\@xl {
    inset: 3rem;
  }

  .inset-x-12\@xl {
    left: 3rem;
    right: 3rem;
  }

  .inset-y-12\@xl {
    top: 3rem;
    bottom: 3rem;
  }

  .p-16\@xl {
    padding: 4rem;
  }

  .px-16\@xl {
    padding-inline: 4rem;
  }

  .py-16\@xl {
    padding-block: 4rem;
  }

  .pt-16\@xl {
    padding-top: 4rem;
  }

  .pr-16\@xl {
    padding-right: 4rem;
  }

  .pb-16\@xl {
    padding-bottom: 4rem;
  }

  .pl-16\@xl {
    padding-left: 4rem;
  }

  .m-16\@xl {
    margin: 4rem;
  }

  .mx-16\@xl {
    margin-inline: 4rem;
  }

  .my-16\@xl {
    margin-block: 4rem;
  }

  .mt-16\@xl {
    margin-top: 4rem;
  }

  .mr-16\@xl {
    margin-right: 4rem;
  }

  .mb-16\@xl {
    margin-bottom: 4rem;
  }

  .ml-16\@xl {
    margin-left: 4rem;
  }

  .gap-16\@xl {
    gap: 4rem;
  }

  .gap-x-16\@xl {
    column-gap: 4rem;
  }

  .gap-y-16\@xl {
    row-gap: 4rem;
  }

  .space-x-16\@xl>*+* {
    margin-left: 4rem;
  }

  .space-y-16\@xl>*+* {
    margin-top: 4rem;
  }

  .inset-16\@xl {
    inset: 4rem;
  }

  .inset-x-16\@xl {
    left: 4rem;
    right: 4rem;
  }

  .inset-y-16\@xl {
    top: 4rem;
    bottom: 4rem;
  }

  .p-20\@xl {
    padding: 5rem;
  }

  .px-20\@xl {
    padding-inline: 5rem;
  }

  .py-20\@xl {
    padding-block: 5rem;
  }

  .pt-20\@xl {
    padding-top: 5rem;
  }

  .pr-20\@xl {
    padding-right: 5rem;
  }

  .pb-20\@xl {
    padding-bottom: 5rem;
  }

  .pl-20\@xl {
    padding-left: 5rem;
  }

  .m-20\@xl {
    margin: 5rem;
  }

  .mx-20\@xl {
    margin-inline: 5rem;
  }

  .my-20\@xl {
    margin-block: 5rem;
  }

  .mt-20\@xl {
    margin-top: 5rem;
  }

  .mr-20\@xl {
    margin-right: 5rem;
  }

  .mb-20\@xl {
    margin-bottom: 5rem;
  }

  .ml-20\@xl {
    margin-left: 5rem;
  }

  .gap-20\@xl {
    gap: 5rem;
  }

  .gap-x-20\@xl {
    column-gap: 5rem;
  }

  .gap-y-20\@xl {
    row-gap: 5rem;
  }

  .space-x-20\@xl>*+* {
    margin-left: 5rem;
  }

  .space-y-20\@xl>*+* {
    margin-top: 5rem;
  }

  .inset-20\@xl {
    inset: 5rem;
  }

  .inset-x-20\@xl {
    left: 5rem;
    right: 5rem;
  }

  .inset-y-20\@xl {
    top: 5rem;
    bottom: 5rem;
  }

  .p-24\@xl {
    padding: 6rem;
  }

  .px-24\@xl {
    padding-inline: 6rem;
  }

  .py-24\@xl {
    padding-block: 6rem;
  }

  .pt-24\@xl {
    padding-top: 6rem;
  }

  .pr-24\@xl {
    padding-right: 6rem;
  }

  .pb-24\@xl {
    padding-bottom: 6rem;
  }

  .pl-24\@xl {
    padding-left: 6rem;
  }

  .m-24\@xl {
    margin: 6rem;
  }

  .mx-24\@xl {
    margin-inline: 6rem;
  }

  .my-24\@xl {
    margin-block: 6rem;
  }

  .mt-24\@xl {
    margin-top: 6rem;
  }

  .mr-24\@xl {
    margin-right: 6rem;
  }

  .mb-24\@xl {
    margin-bottom: 6rem;
  }

  .ml-24\@xl {
    margin-left: 6rem;
  }

  .gap-24\@xl {
    gap: 6rem;
  }

  .gap-x-24\@xl {
    column-gap: 6rem;
  }

  .gap-y-24\@xl {
    row-gap: 6rem;
  }

  .space-x-24\@xl>*+* {
    margin-left: 6rem;
  }

  .space-y-24\@xl>*+* {
    margin-top: 6rem;
  }

  .inset-24\@xl {
    inset: 6rem;
  }

  .inset-x-24\@xl {
    left: 6rem;
    right: 6rem;
  }

  .inset-y-24\@xl {
    top: 6rem;
    bottom: 6rem;
  }

  .p-32\@xl {
    padding: 8rem;
  }

  .px-32\@xl {
    padding-inline: 8rem;
  }

  .py-32\@xl {
    padding-block: 8rem;
  }

  .pt-32\@xl {
    padding-top: 8rem;
  }

  .pr-32\@xl {
    padding-right: 8rem;
  }

  .pb-32\@xl {
    padding-bottom: 8rem;
  }

  .pl-32\@xl {
    padding-left: 8rem;
  }

  .m-32\@xl {
    margin: 8rem;
  }

  .mx-32\@xl {
    margin-inline: 8rem;
  }

  .my-32\@xl {
    margin-block: 8rem;
  }

  .mt-32\@xl {
    margin-top: 8rem;
  }

  .mr-32\@xl {
    margin-right: 8rem;
  }

  .mb-32\@xl {
    margin-bottom: 8rem;
  }

  .ml-32\@xl {
    margin-left: 8rem;
  }

  .gap-32\@xl {
    gap: 8rem;
  }

  .gap-x-32\@xl {
    column-gap: 8rem;
  }

  .gap-y-32\@xl {
    row-gap: 8rem;
  }

  .space-x-32\@xl>*+* {
    margin-left: 8rem;
  }

  .space-y-32\@xl>*+* {
    margin-top: 8rem;
  }

  .inset-32\@xl {
    inset: 8rem;
  }

  .inset-x-32\@xl {
    left: 8rem;
    right: 8rem;
  }

  .inset-y-32\@xl {
    top: 8rem;
    bottom: 8rem;
  }

  .p-40\@xl {
    padding: 10rem;
  }

  .px-40\@xl {
    padding-inline: 10rem;
  }

  .py-40\@xl {
    padding-block: 10rem;
  }

  .pt-40\@xl {
    padding-top: 10rem;
  }

  .pr-40\@xl {
    padding-right: 10rem;
  }

  .pb-40\@xl {
    padding-bottom: 10rem;
  }

  .pl-40\@xl {
    padding-left: 10rem;
  }

  .m-40\@xl {
    margin: 10rem;
  }

  .mx-40\@xl {
    margin-inline: 10rem;
  }

  .my-40\@xl {
    margin-block: 10rem;
  }

  .mt-40\@xl {
    margin-top: 10rem;
  }

  .mr-40\@xl {
    margin-right: 10rem;
  }

  .mb-40\@xl {
    margin-bottom: 10rem;
  }

  .ml-40\@xl {
    margin-left: 10rem;
  }

  .gap-40\@xl {
    gap: 10rem;
  }

  .gap-x-40\@xl {
    column-gap: 10rem;
  }

  .gap-y-40\@xl {
    row-gap: 10rem;
  }

  .space-x-40\@xl>*+* {
    margin-left: 10rem;
  }

  .space-y-40\@xl>*+* {
    margin-top: 10rem;
  }

  .inset-40\@xl {
    inset: 10rem;
  }

  .inset-x-40\@xl {
    left: 10rem;
    right: 10rem;
  }

  .inset-y-40\@xl {
    top: 10rem;
    bottom: 10rem;
  }

  .p-48\@xl {
    padding: 12rem;
  }

  .px-48\@xl {
    padding-inline: 12rem;
  }

  .py-48\@xl {
    padding-block: 12rem;
  }

  .pt-48\@xl {
    padding-top: 12rem;
  }

  .pr-48\@xl {
    padding-right: 12rem;
  }

  .pb-48\@xl {
    padding-bottom: 12rem;
  }

  .pl-48\@xl {
    padding-left: 12rem;
  }

  .m-48\@xl {
    margin: 12rem;
  }

  .mx-48\@xl {
    margin-inline: 12rem;
  }

  .my-48\@xl {
    margin-block: 12rem;
  }

  .mt-48\@xl {
    margin-top: 12rem;
  }

  .mr-48\@xl {
    margin-right: 12rem;
  }

  .mb-48\@xl {
    margin-bottom: 12rem;
  }

  .ml-48\@xl {
    margin-left: 12rem;
  }

  .gap-48\@xl {
    gap: 12rem;
  }

  .gap-x-48\@xl {
    column-gap: 12rem;
  }

  .gap-y-48\@xl {
    row-gap: 12rem;
  }

  .space-x-48\@xl>*+* {
    margin-left: 12rem;
  }

  .space-y-48\@xl>*+* {
    margin-top: 12rem;
  }

  .inset-48\@xl {
    inset: 12rem;
  }

  .inset-x-48\@xl {
    left: 12rem;
    right: 12rem;
  }

  .inset-y-48\@xl {
    top: 12rem;
    bottom: 12rem;
  }

  .p-56\@xl {
    padding: 14rem;
  }

  .px-56\@xl {
    padding-inline: 14rem;
  }

  .py-56\@xl {
    padding-block: 14rem;
  }

  .pt-56\@xl {
    padding-top: 14rem;
  }

  .pr-56\@xl {
    padding-right: 14rem;
  }

  .pb-56\@xl {
    padding-bottom: 14rem;
  }

  .pl-56\@xl {
    padding-left: 14rem;
  }

  .m-56\@xl {
    margin: 14rem;
  }

  .mx-56\@xl {
    margin-inline: 14rem;
  }

  .my-56\@xl {
    margin-block: 14rem;
  }

  .mt-56\@xl {
    margin-top: 14rem;
  }

  .mr-56\@xl {
    margin-right: 14rem;
  }

  .mb-56\@xl {
    margin-bottom: 14rem;
  }

  .ml-56\@xl {
    margin-left: 14rem;
  }

  .gap-56\@xl {
    gap: 14rem;
  }

  .gap-x-56\@xl {
    column-gap: 14rem;
  }

  .gap-y-56\@xl {
    row-gap: 14rem;
  }

  .space-x-56\@xl>*+* {
    margin-left: 14rem;
  }

  .space-y-56\@xl>*+* {
    margin-top: 14rem;
  }

  .inset-56\@xl {
    inset: 14rem;
  }

  .inset-x-56\@xl {
    left: 14rem;
    right: 14rem;
  }

  .inset-y-56\@xl {
    top: 14rem;
    bottom: 14rem;
  }

  .p-64\@xl {
    padding: 16rem;
  }

  .px-64\@xl {
    padding-inline: 16rem;
  }

  .py-64\@xl {
    padding-block: 16rem;
  }

  .pt-64\@xl {
    padding-top: 16rem;
  }

  .pr-64\@xl {
    padding-right: 16rem;
  }

  .pb-64\@xl {
    padding-bottom: 16rem;
  }

  .pl-64\@xl {
    padding-left: 16rem;
  }

  .m-64\@xl {
    margin: 16rem;
  }

  .mx-64\@xl {
    margin-inline: 16rem;
  }

  .my-64\@xl {
    margin-block: 16rem;
  }

  .mt-64\@xl {
    margin-top: 16rem;
  }

  .mr-64\@xl {
    margin-right: 16rem;
  }

  .mb-64\@xl {
    margin-bottom: 16rem;
  }

  .ml-64\@xl {
    margin-left: 16rem;
  }

  .gap-64\@xl {
    gap: 16rem;
  }

  .gap-x-64\@xl {
    column-gap: 16rem;
  }

  .gap-y-64\@xl {
    row-gap: 16rem;
  }

  .space-x-64\@xl>*+* {
    margin-left: 16rem;
  }

  .space-y-64\@xl>*+* {
    margin-top: 16rem;
  }

  .inset-64\@xl {
    inset: 16rem;
  }

  .inset-x-64\@xl {
    left: 16rem;
    right: 16rem;
  }

  .inset-y-64\@xl {
    top: 16rem;
    bottom: 16rem;
  }

  .p-120\@xl {
    padding: 30rem;
  }

  .px-120\@xl {
    padding-inline: 30rem;
  }

  .py-120\@xl {
    padding-block: 30rem;
  }

  .pt-120\@xl {
    padding-top: 30rem;
  }

  .pr-120\@xl {
    padding-right: 30rem;
  }

  .pb-120\@xl {
    padding-bottom: 30rem;
  }

  .pl-120\@xl {
    padding-left: 30rem;
  }

  .m-120\@xl {
    margin: 30rem;
  }

  .mx-120\@xl {
    margin-inline: 30rem;
  }

  .my-120\@xl {
    margin-block: 30rem;
  }

  .mt-120\@xl {
    margin-top: 30rem;
  }

  .mr-120\@xl {
    margin-right: 30rem;
  }

  .mb-120\@xl {
    margin-bottom: 30rem;
  }

  .ml-120\@xl {
    margin-left: 30rem;
  }

  .gap-120\@xl {
    gap: 30rem;
  }

  .gap-x-120\@xl {
    column-gap: 30rem;
  }

  .gap-y-120\@xl {
    row-gap: 30rem;
  }

  .space-x-120\@xl>*+* {
    margin-left: 30rem;
  }

  .space-y-120\@xl>*+* {
    margin-top: 30rem;
  }

  .inset-120\@xl {
    inset: 30rem;
  }

  .inset-x-120\@xl {
    left: 30rem;
    right: 30rem;
  }

  .inset-y-120\@xl {
    top: 30rem;
    bottom: 30rem;
  }
}

@media (min-width: 1536px) {
  .mx-auto\@2xl {
    margin-left: auto;
    margin-right: auto;
  }

  .ml-auto\@2xl {
    margin-left: auto;
  }

  .mr-auto\@2xl {
    margin-right: auto;
  }

  .inset-auto\@2xl {
    inset: auto;
  }

  .inset-x-auto\@2xl {
    left: auto;
    right: auto;
  }

  .inset-y-auto\@2xl {
    top: auto;
    bottom: auto;
  }

  .p-0\@2xl {
    padding: 0px;
  }

  .px-0\@2xl {
    padding-inline: 0px;
  }

  .py-0\@2xl {
    padding-block: 0px;
  }

  .pt-0\@2xl {
    padding-top: 0px;
  }

  .pr-0\@2xl {
    padding-right: 0px;
  }

  .pb-0\@2xl {
    padding-bottom: 0px;
  }

  .pl-0\@2xl {
    padding-left: 0px;
  }

  .m-0\@2xl {
    margin: 0px;
  }

  .mx-0\@2xl {
    margin-inline: 0px;
  }

  .my-0\@2xl {
    margin-block: 0px;
  }

  .mt-0\@2xl {
    margin-top: 0px;
  }

  .mr-0\@2xl {
    margin-right: 0px;
  }

  .mb-0\@2xl {
    margin-bottom: 0px;
  }

  .ml-0\@2xl {
    margin-left: 0px;
  }

  .gap-0\@2xl {
    gap: 0;
  }

  .gap-x-0\@2xl {
    column-gap: 0;
  }

  .gap-y-0\@2xl {
    row-gap: 0;
  }

  .space-x-0\@2xl>*+* {
    margin-left: 0px;
  }

  .space-y-0\@2xl>*+* {
    margin-top: 0px;
  }

  .inset-0\@2xl {
    inset: 0px;
  }

  .inset-x-0\@2xl {
    left: 0px;
    right: 0px;
  }

  .inset-y-0\@2xl {
    top: 0px;
    bottom: 0px;
  }

  .p-1\@2xl {
    padding: 0.25rem;
  }

  .px-1\@2xl {
    padding-inline: 0.25rem;
  }

  .py-1\@2xl {
    padding-block: 0.25rem;
  }

  .pt-1\@2xl {
    padding-top: 0.25rem;
  }

  .pr-1\@2xl {
    padding-right: 0.25rem;
  }

  .pb-1\@2xl {
    padding-bottom: 0.25rem;
  }

  .pl-1\@2xl {
    padding-left: 0.25rem;
  }

  .m-1\@2xl {
    margin: 0.25rem;
  }

  .mx-1\@2xl {
    margin-inline: 0.25rem;
  }

  .my-1\@2xl {
    margin-block: 0.25rem;
  }

  .mt-1\@2xl {
    margin-top: 0.25rem;
  }

  .mr-1\@2xl {
    margin-right: 0.25rem;
  }

  .mb-1\@2xl {
    margin-bottom: 0.25rem;
  }

  .ml-1\@2xl {
    margin-left: 0.25rem;
  }

  .gap-1\@2xl {
    gap: 0.25rem;
  }

  .gap-x-1\@2xl {
    column-gap: 0.25rem;
  }

  .gap-y-1\@2xl {
    row-gap: 0.25rem;
  }

  .space-x-1\@2xl>*+* {
    margin-left: 0.25rem;
  }

  .space-y-1\@2xl>*+* {
    margin-top: 0.25rem;
  }

  .inset-1\@2xl {
    inset: 0.25rem;
  }

  .inset-x-1\@2xl {
    left: 0.25rem;
    right: 0.25rem;
  }

  .inset-y-1\@2xl {
    top: 0.25rem;
    bottom: 0.25rem;
  }

  .p-2\@2xl {
    padding: 0.5rem;
  }

  .px-2\@2xl {
    padding-inline: 0.5rem;
  }

  .py-2\@2xl {
    padding-block: 0.5rem;
  }

  .pt-2\@2xl {
    padding-top: 0.5rem;
  }

  .pr-2\@2xl {
    padding-right: 0.5rem;
  }

  .pb-2\@2xl {
    padding-bottom: 0.5rem;
  }

  .pl-2\@2xl {
    padding-left: 0.5rem;
  }

  .m-2\@2xl {
    margin: 0.5rem;
  }

  .mx-2\@2xl {
    margin-inline: 0.5rem;
  }

  .my-2\@2xl {
    margin-block: 0.5rem;
  }

  .mt-2\@2xl {
    margin-top: 0.5rem;
  }

  .mr-2\@2xl {
    margin-right: 0.5rem;
  }

  .mb-2\@2xl {
    margin-bottom: 0.5rem;
  }

  .ml-2\@2xl {
    margin-left: 0.5rem;
  }

  .gap-2\@2xl {
    gap: 0.5rem;
  }

  .gap-x-2\@2xl {
    column-gap: 0.5rem;
  }

  .gap-y-2\@2xl {
    row-gap: 0.5rem;
  }

  .space-x-2\@2xl>*+* {
    margin-left: 0.5rem;
  }

  .space-y-2\@2xl>*+* {
    margin-top: 0.5rem;
  }

  .inset-2\@2xl {
    inset: 0.5rem;
  }

  .inset-x-2\@2xl {
    left: 0.5rem;
    right: 0.5rem;
  }

  .inset-y-2\@2xl {
    top: 0.5rem;
    bottom: 0.5rem;
  }

  .p-3\@2xl {
    padding: 0.75rem;
  }

  .px-3\@2xl {
    padding-inline: 0.75rem;
  }

  .py-3\@2xl {
    padding-block: 0.75rem;
  }

  .pt-3\@2xl {
    padding-top: 0.75rem;
  }

  .pr-3\@2xl {
    padding-right: 0.75rem;
  }

  .pb-3\@2xl {
    padding-bottom: 0.75rem;
  }

  .pl-3\@2xl {
    padding-left: 0.75rem;
  }

  .m-3\@2xl {
    margin: 0.75rem;
  }

  .mx-3\@2xl {
    margin-inline: 0.75rem;
  }

  .my-3\@2xl {
    margin-block: 0.75rem;
  }

  .mt-3\@2xl {
    margin-top: 0.75rem;
  }

  .mr-3\@2xl {
    margin-right: 0.75rem;
  }

  .mb-3\@2xl {
    margin-bottom: 0.75rem;
  }

  .ml-3\@2xl {
    margin-left: 0.75rem;
  }

  .gap-3\@2xl {
    gap: 0.75rem;
  }

  .gap-x-3\@2xl {
    column-gap: 0.75rem;
  }

  .gap-y-3\@2xl {
    row-gap: 0.75rem;
  }

  .space-x-3\@2xl>*+* {
    margin-left: 0.75rem;
  }

  .space-y-3\@2xl>*+* {
    margin-top: 0.75rem;
  }

  .inset-3\@2xl {
    inset: 0.75rem;
  }

  .inset-x-3\@2xl {
    left: 0.75rem;
    right: 0.75rem;
  }

  .inset-y-3\@2xl {
    top: 0.75rem;
    bottom: 0.75rem;
  }

  .p-4\@2xl {
    padding: 1rem;
  }

  .px-4\@2xl {
    padding-inline: 1rem;
  }

  .py-4\@2xl {
    padding-block: 1rem;
  }

  .pt-4\@2xl {
    padding-top: 1rem;
  }

  .pr-4\@2xl {
    padding-right: 1rem;
  }

  .pb-4\@2xl {
    padding-bottom: 1rem;
  }

  .pl-4\@2xl {
    padding-left: 1rem;
  }

  .m-4\@2xl {
    margin: 1rem;
  }

  .mx-4\@2xl {
    margin-inline: 1rem;
  }

  .my-4\@2xl {
    margin-block: 1rem;
  }

  .mt-4\@2xl {
    margin-top: 1rem;
  }

  .mr-4\@2xl {
    margin-right: 1rem;
  }

  .mb-4\@2xl {
    margin-bottom: 1rem;
  }

  .ml-4\@2xl {
    margin-left: 1rem;
  }

  .gap-4\@2xl {
    gap: 1rem;
  }

  .gap-x-4\@2xl {
    column-gap: 1rem;
  }

  .gap-y-4\@2xl {
    row-gap: 1rem;
  }

  .space-x-4\@2xl>*+* {
    margin-left: 1rem;
  }

  .space-y-4\@2xl>*+* {
    margin-top: 1rem;
  }

  .inset-4\@2xl {
    inset: 1rem;
  }

  .inset-x-4\@2xl {
    left: 1rem;
    right: 1rem;
  }

  .inset-y-4\@2xl {
    top: 1rem;
    bottom: 1rem;
  }

  .p-5\@2xl {
    padding: 1.25rem;
  }

  .px-5\@2xl {
    padding-inline: 1.25rem;
  }

  .py-5\@2xl {
    padding-block: 1.25rem;
  }

  .pt-5\@2xl {
    padding-top: 1.25rem;
  }

  .pr-5\@2xl {
    padding-right: 1.25rem;
  }

  .pb-5\@2xl {
    padding-bottom: 1.25rem;
  }

  .pl-5\@2xl {
    padding-left: 1.25rem;
  }

  .m-5\@2xl {
    margin: 1.25rem;
  }

  .mx-5\@2xl {
    margin-inline: 1.25rem;
  }

  .my-5\@2xl {
    margin-block: 1.25rem;
  }

  .mt-5\@2xl {
    margin-top: 1.25rem;
  }

  .mr-5\@2xl {
    margin-right: 1.25rem;
  }

  .mb-5\@2xl {
    margin-bottom: 1.25rem;
  }

  .ml-5\@2xl {
    margin-left: 1.25rem;
  }

  .gap-5\@2xl {
    gap: 1.25rem;
  }

  .gap-x-5\@2xl {
    column-gap: 1.25rem;
  }

  .gap-y-5\@2xl {
    row-gap: 1.25rem;
  }

  .space-x-5\@2xl>*+* {
    margin-left: 1.25rem;
  }

  .space-y-5\@2xl>*+* {
    margin-top: 1.25rem;
  }

  .inset-5\@2xl {
    inset: 1.25rem;
  }

  .inset-x-5\@2xl {
    left: 1.25rem;
    right: 1.25rem;
  }

  .inset-y-5\@2xl {
    top: 1.25rem;
    bottom: 1.25rem;
  }

  .p-6\@2xl {
    padding: 1.5rem;
  }

  .px-6\@2xl {
    padding-inline: 1.5rem;
  }

  .py-6\@2xl {
    padding-block: 1.5rem;
  }

  .pt-6\@2xl {
    padding-top: 1.5rem;
  }

  .pr-6\@2xl {
    padding-right: 1.5rem;
  }

  .pb-6\@2xl {
    padding-bottom: 1.5rem;
  }

  .pl-6\@2xl {
    padding-left: 1.5rem;
  }

  .m-6\@2xl {
    margin: 1.5rem;
  }

  .mx-6\@2xl {
    margin-inline: 1.5rem;
  }

  .my-6\@2xl {
    margin-block: 1.5rem;
  }

  .mt-6\@2xl {
    margin-top: 1.5rem;
  }

  .mr-6\@2xl {
    margin-right: 1.5rem;
  }

  .mb-6\@2xl {
    margin-bottom: 1.5rem;
  }

  .ml-6\@2xl {
    margin-left: 1.5rem;
  }

  .gap-6\@2xl {
    gap: 1.5rem;
  }

  .gap-x-6\@2xl {
    column-gap: 1.5rem;
  }

  .gap-y-6\@2xl {
    row-gap: 1.5rem;
  }

  .space-x-6\@2xl>*+* {
    margin-left: 1.5rem;
  }

  .space-y-6\@2xl>*+* {
    margin-top: 1.5rem;
  }

  .inset-6\@2xl {
    inset: 1.5rem;
  }

  .inset-x-6\@2xl {
    left: 1.5rem;
    right: 1.5rem;
  }

  .inset-y-6\@2xl {
    top: 1.5rem;
    bottom: 1.5rem;
  }

  .p-8\@2xl {
    padding: 2rem;
  }

  .px-8\@2xl {
    padding-inline: 2rem;
  }

  .py-8\@2xl {
    padding-block: 2rem;
  }

  .pt-8\@2xl {
    padding-top: 2rem;
  }

  .pr-8\@2xl {
    padding-right: 2rem;
  }

  .pb-8\@2xl {
    padding-bottom: 2rem;
  }

  .pl-8\@2xl {
    padding-left: 2rem;
  }

  .m-8\@2xl {
    margin: 2rem;
  }

  .mx-8\@2xl {
    margin-inline: 2rem;
  }

  .my-8\@2xl {
    margin-block: 2rem;
  }

  .mt-8\@2xl {
    margin-top: 2rem;
  }

  .mr-8\@2xl {
    margin-right: 2rem;
  }

  .mb-8\@2xl {
    margin-bottom: 2rem;
  }

  .ml-8\@2xl {
    margin-left: 2rem;
  }

  .gap-8\@2xl {
    gap: 2rem;
  }

  .gap-x-8\@2xl {
    column-gap: 2rem;
  }

  .gap-y-8\@2xl {
    row-gap: 2rem;
  }

  .space-x-8\@2xl>*+* {
    margin-left: 2rem;
  }

  .space-y-8\@2xl>*+* {
    margin-top: 2rem;
  }

  .inset-8\@2xl {
    inset: 2rem;
  }

  .inset-x-8\@2xl {
    left: 2rem;
    right: 2rem;
  }

  .inset-y-8\@2xl {
    top: 2rem;
    bottom: 2rem;
  }

  .p-10\@2xl {
    padding: 2.5rem;
  }

  .px-10\@2xl {
    padding-inline: 2.5rem;
  }

  .py-10\@2xl {
    padding-block: 2.5rem;
  }

  .pt-10\@2xl {
    padding-top: 2.5rem;
  }

  .pr-10\@2xl {
    padding-right: 2.5rem;
  }

  .pb-10\@2xl {
    padding-bottom: 2.5rem;
  }

  .pl-10\@2xl {
    padding-left: 2.5rem;
  }

  .m-10\@2xl {
    margin: 2.5rem;
  }

  .mx-10\@2xl {
    margin-inline: 2.5rem;
  }

  .my-10\@2xl {
    margin-block: 2.5rem;
  }

  .mt-10\@2xl {
    margin-top: 2.5rem;
  }

  .mr-10\@2xl {
    margin-right: 2.5rem;
  }

  .mb-10\@2xl {
    margin-bottom: 2.5rem;
  }

  .ml-10\@2xl {
    margin-left: 2.5rem;
  }

  .gap-10\@2xl {
    gap: 2.5rem;
  }

  .gap-x-10\@2xl {
    column-gap: 2.5rem;
  }

  .gap-y-10\@2xl {
    row-gap: 2.5rem;
  }

  .space-x-10\@2xl>*+* {
    margin-left: 2.5rem;
  }

  .space-y-10\@2xl>*+* {
    margin-top: 2.5rem;
  }

  .inset-10\@2xl {
    inset: 2.5rem;
  }

  .inset-x-10\@2xl {
    left: 2.5rem;
    right: 2.5rem;
  }

  .inset-y-10\@2xl {
    top: 2.5rem;
    bottom: 2.5rem;
  }

  .p-12\@2xl {
    padding: 3rem;
  }

  .px-12\@2xl {
    padding-inline: 3rem;
  }

  .py-12\@2xl {
    padding-block: 3rem;
  }

  .pt-12\@2xl {
    padding-top: 3rem;
  }

  .pr-12\@2xl {
    padding-right: 3rem;
  }

  .pb-12\@2xl {
    padding-bottom: 3rem;
  }

  .pl-12\@2xl {
    padding-left: 3rem;
  }

  .m-12\@2xl {
    margin: 3rem;
  }

  .mx-12\@2xl {
    margin-inline: 3rem;
  }

  .my-12\@2xl {
    margin-block: 3rem;
  }

  .mt-12\@2xl {
    margin-top: 3rem;
  }

  .mr-12\@2xl {
    margin-right: 3rem;
  }

  .mb-12\@2xl {
    margin-bottom: 3rem;
  }

  .ml-12\@2xl {
    margin-left: 3rem;
  }

  .gap-12\@2xl {
    gap: 3rem;
  }

  .gap-x-12\@2xl {
    column-gap: 3rem;
  }

  .gap-y-12\@2xl {
    row-gap: 3rem;
  }

  .space-x-12\@2xl>*+* {
    margin-left: 3rem;
  }

  .space-y-12\@2xl>*+* {
    margin-top: 3rem;
  }

  .inset-12\@2xl {
    inset: 3rem;
  }

  .inset-x-12\@2xl {
    left: 3rem;
    right: 3rem;
  }

  .inset-y-12\@2xl {
    top: 3rem;
    bottom: 3rem;
  }

  .p-16\@2xl {
    padding: 4rem;
  }

  .px-16\@2xl {
    padding-inline: 4rem;
  }

  .py-16\@2xl {
    padding-block: 4rem;
  }

  .pt-16\@2xl {
    padding-top: 4rem;
  }

  .pr-16\@2xl {
    padding-right: 4rem;
  }

  .pb-16\@2xl {
    padding-bottom: 4rem;
  }

  .pl-16\@2xl {
    padding-left: 4rem;
  }

  .m-16\@2xl {
    margin: 4rem;
  }

  .mx-16\@2xl {
    margin-inline: 4rem;
  }

  .my-16\@2xl {
    margin-block: 4rem;
  }

  .mt-16\@2xl {
    margin-top: 4rem;
  }

  .mr-16\@2xl {
    margin-right: 4rem;
  }

  .mb-16\@2xl {
    margin-bottom: 4rem;
  }

  .ml-16\@2xl {
    margin-left: 4rem;
  }

  .gap-16\@2xl {
    gap: 4rem;
  }

  .gap-x-16\@2xl {
    column-gap: 4rem;
  }

  .gap-y-16\@2xl {
    row-gap: 4rem;
  }

  .space-x-16\@2xl>*+* {
    margin-left: 4rem;
  }

  .space-y-16\@2xl>*+* {
    margin-top: 4rem;
  }

  .inset-16\@2xl {
    inset: 4rem;
  }

  .inset-x-16\@2xl {
    left: 4rem;
    right: 4rem;
  }

  .inset-y-16\@2xl {
    top: 4rem;
    bottom: 4rem;
  }

  .p-20\@2xl {
    padding: 5rem;
  }

  .px-20\@2xl {
    padding-inline: 5rem;
  }

  .py-20\@2xl {
    padding-block: 5rem;
  }

  .pt-20\@2xl {
    padding-top: 5rem;
  }

  .pr-20\@2xl {
    padding-right: 5rem;
  }

  .pb-20\@2xl {
    padding-bottom: 5rem;
  }

  .pl-20\@2xl {
    padding-left: 5rem;
  }

  .m-20\@2xl {
    margin: 5rem;
  }

  .mx-20\@2xl {
    margin-inline: 5rem;
  }

  .my-20\@2xl {
    margin-block: 5rem;
  }

  .mt-20\@2xl {
    margin-top: 5rem;
  }

  .mr-20\@2xl {
    margin-right: 5rem;
  }

  .mb-20\@2xl {
    margin-bottom: 5rem;
  }

  .ml-20\@2xl {
    margin-left: 5rem;
  }

  .gap-20\@2xl {
    gap: 5rem;
  }

  .gap-x-20\@2xl {
    column-gap: 5rem;
  }

  .gap-y-20\@2xl {
    row-gap: 5rem;
  }

  .space-x-20\@2xl>*+* {
    margin-left: 5rem;
  }

  .space-y-20\@2xl>*+* {
    margin-top: 5rem;
  }

  .inset-20\@2xl {
    inset: 5rem;
  }

  .inset-x-20\@2xl {
    left: 5rem;
    right: 5rem;
  }

  .inset-y-20\@2xl {
    top: 5rem;
    bottom: 5rem;
  }

  .p-24\@2xl {
    padding: 6rem;
  }

  .px-24\@2xl {
    padding-inline: 6rem;
  }

  .py-24\@2xl {
    padding-block: 6rem;
  }

  .pt-24\@2xl {
    padding-top: 6rem;
  }

  .pr-24\@2xl {
    padding-right: 6rem;
  }

  .pb-24\@2xl {
    padding-bottom: 6rem;
  }

  .pl-24\@2xl {
    padding-left: 6rem;
  }

  .m-24\@2xl {
    margin: 6rem;
  }

  .mx-24\@2xl {
    margin-inline: 6rem;
  }

  .my-24\@2xl {
    margin-block: 6rem;
  }

  .mt-24\@2xl {
    margin-top: 6rem;
  }

  .mr-24\@2xl {
    margin-right: 6rem;
  }

  .mb-24\@2xl {
    margin-bottom: 6rem;
  }

  .ml-24\@2xl {
    margin-left: 6rem;
  }

  .gap-24\@2xl {
    gap: 6rem;
  }

  .gap-x-24\@2xl {
    column-gap: 6rem;
  }

  .gap-y-24\@2xl {
    row-gap: 6rem;
  }

  .space-x-24\@2xl>*+* {
    margin-left: 6rem;
  }

  .space-y-24\@2xl>*+* {
    margin-top: 6rem;
  }

  .inset-24\@2xl {
    inset: 6rem;
  }

  .inset-x-24\@2xl {
    left: 6rem;
    right: 6rem;
  }

  .inset-y-24\@2xl {
    top: 6rem;
    bottom: 6rem;
  }

  .p-32\@2xl {
    padding: 8rem;
  }

  .px-32\@2xl {
    padding-inline: 8rem;
  }

  .py-32\@2xl {
    padding-block: 8rem;
  }

  .pt-32\@2xl {
    padding-top: 8rem;
  }

  .pr-32\@2xl {
    padding-right: 8rem;
  }

  .pb-32\@2xl {
    padding-bottom: 8rem;
  }

  .pl-32\@2xl {
    padding-left: 8rem;
  }

  .m-32\@2xl {
    margin: 8rem;
  }

  .mx-32\@2xl {
    margin-inline: 8rem;
  }

  .my-32\@2xl {
    margin-block: 8rem;
  }

  .mt-32\@2xl {
    margin-top: 8rem;
  }

  .mr-32\@2xl {
    margin-right: 8rem;
  }

  .mb-32\@2xl {
    margin-bottom: 8rem;
  }

  .ml-32\@2xl {
    margin-left: 8rem;
  }

  .gap-32\@2xl {
    gap: 8rem;
  }

  .gap-x-32\@2xl {
    column-gap: 8rem;
  }

  .gap-y-32\@2xl {
    row-gap: 8rem;
  }

  .space-x-32\@2xl>*+* {
    margin-left: 8rem;
  }

  .space-y-32\@2xl>*+* {
    margin-top: 8rem;
  }

  .inset-32\@2xl {
    inset: 8rem;
  }

  .inset-x-32\@2xl {
    left: 8rem;
    right: 8rem;
  }

  .inset-y-32\@2xl {
    top: 8rem;
    bottom: 8rem;
  }

  .p-40\@2xl {
    padding: 10rem;
  }

  .px-40\@2xl {
    padding-inline: 10rem;
  }

  .py-40\@2xl {
    padding-block: 10rem;
  }

  .pt-40\@2xl {
    padding-top: 10rem;
  }

  .pr-40\@2xl {
    padding-right: 10rem;
  }

  .pb-40\@2xl {
    padding-bottom: 10rem;
  }

  .pl-40\@2xl {
    padding-left: 10rem;
  }

  .m-40\@2xl {
    margin: 10rem;
  }

  .mx-40\@2xl {
    margin-inline: 10rem;
  }

  .my-40\@2xl {
    margin-block: 10rem;
  }

  .mt-40\@2xl {
    margin-top: 10rem;
  }

  .mr-40\@2xl {
    margin-right: 10rem;
  }

  .mb-40\@2xl {
    margin-bottom: 10rem;
  }

  .ml-40\@2xl {
    margin-left: 10rem;
  }

  .gap-40\@2xl {
    gap: 10rem;
  }

  .gap-x-40\@2xl {
    column-gap: 10rem;
  }

  .gap-y-40\@2xl {
    row-gap: 10rem;
  }

  .space-x-40\@2xl>*+* {
    margin-left: 10rem;
  }

  .space-y-40\@2xl>*+* {
    margin-top: 10rem;
  }

  .inset-40\@2xl {
    inset: 10rem;
  }

  .inset-x-40\@2xl {
    left: 10rem;
    right: 10rem;
  }

  .inset-y-40\@2xl {
    top: 10rem;
    bottom: 10rem;
  }

  .p-48\@2xl {
    padding: 12rem;
  }

  .px-48\@2xl {
    padding-inline: 12rem;
  }

  .py-48\@2xl {
    padding-block: 12rem;
  }

  .pt-48\@2xl {
    padding-top: 12rem;
  }

  .pr-48\@2xl {
    padding-right: 12rem;
  }

  .pb-48\@2xl {
    padding-bottom: 12rem;
  }

  .pl-48\@2xl {
    padding-left: 12rem;
  }

  .m-48\@2xl {
    margin: 12rem;
  }

  .mx-48\@2xl {
    margin-inline: 12rem;
  }

  .my-48\@2xl {
    margin-block: 12rem;
  }

  .mt-48\@2xl {
    margin-top: 12rem;
  }

  .mr-48\@2xl {
    margin-right: 12rem;
  }

  .mb-48\@2xl {
    margin-bottom: 12rem;
  }

  .ml-48\@2xl {
    margin-left: 12rem;
  }

  .gap-48\@2xl {
    gap: 12rem;
  }

  .gap-x-48\@2xl {
    column-gap: 12rem;
  }

  .gap-y-48\@2xl {
    row-gap: 12rem;
  }

  .space-x-48\@2xl>*+* {
    margin-left: 12rem;
  }

  .space-y-48\@2xl>*+* {
    margin-top: 12rem;
  }

  .inset-48\@2xl {
    inset: 12rem;
  }

  .inset-x-48\@2xl {
    left: 12rem;
    right: 12rem;
  }

  .inset-y-48\@2xl {
    top: 12rem;
    bottom: 12rem;
  }

  .p-56\@2xl {
    padding: 14rem;
  }

  .px-56\@2xl {
    padding-inline: 14rem;
  }

  .py-56\@2xl {
    padding-block: 14rem;
  }

  .pt-56\@2xl {
    padding-top: 14rem;
  }

  .pr-56\@2xl {
    padding-right: 14rem;
  }

  .pb-56\@2xl {
    padding-bottom: 14rem;
  }

  .pl-56\@2xl {
    padding-left: 14rem;
  }

  .m-56\@2xl {
    margin: 14rem;
  }

  .mx-56\@2xl {
    margin-inline: 14rem;
  }

  .my-56\@2xl {
    margin-block: 14rem;
  }

  .mt-56\@2xl {
    margin-top: 14rem;
  }

  .mr-56\@2xl {
    margin-right: 14rem;
  }

  .mb-56\@2xl {
    margin-bottom: 14rem;
  }

  .ml-56\@2xl {
    margin-left: 14rem;
  }

  .gap-56\@2xl {
    gap: 14rem;
  }

  .gap-x-56\@2xl {
    column-gap: 14rem;
  }

  .gap-y-56\@2xl {
    row-gap: 14rem;
  }

  .space-x-56\@2xl>*+* {
    margin-left: 14rem;
  }

  .space-y-56\@2xl>*+* {
    margin-top: 14rem;
  }

  .inset-56\@2xl {
    inset: 14rem;
  }

  .inset-x-56\@2xl {
    left: 14rem;
    right: 14rem;
  }

  .inset-y-56\@2xl {
    top: 14rem;
    bottom: 14rem;
  }

  .p-64\@2xl {
    padding: 16rem;
  }

  .px-64\@2xl {
    padding-inline: 16rem;
  }

  .py-64\@2xl {
    padding-block: 16rem;
  }

  .pt-64\@2xl {
    padding-top: 16rem;
  }

  .pr-64\@2xl {
    padding-right: 16rem;
  }

  .pb-64\@2xl {
    padding-bottom: 16rem;
  }

  .pl-64\@2xl {
    padding-left: 16rem;
  }

  .m-64\@2xl {
    margin: 16rem;
  }

  .mx-64\@2xl {
    margin-inline: 16rem;
  }

  .my-64\@2xl {
    margin-block: 16rem;
  }

  .mt-64\@2xl {
    margin-top: 16rem;
  }

  .mr-64\@2xl {
    margin-right: 16rem;
  }

  .mb-64\@2xl {
    margin-bottom: 16rem;
  }

  .ml-64\@2xl {
    margin-left: 16rem;
  }

  .gap-64\@2xl {
    gap: 16rem;
  }

  .gap-x-64\@2xl {
    column-gap: 16rem;
  }

  .gap-y-64\@2xl {
    row-gap: 16rem;
  }

  .space-x-64\@2xl>*+* {
    margin-left: 16rem;
  }

  .space-y-64\@2xl>*+* {
    margin-top: 16rem;
  }

  .inset-64\@2xl {
    inset: 16rem;
  }

  .inset-x-64\@2xl {
    left: 16rem;
    right: 16rem;
  }

  .inset-y-64\@2xl {
    top: 16rem;
    bottom: 16rem;
  }

  .p-120\@2xl {
    padding: 30rem;
  }

  .px-120\@2xl {
    padding-inline: 30rem;
  }

  .py-120\@2xl {
    padding-block: 30rem;
  }

  .pt-120\@2xl {
    padding-top: 30rem;
  }

  .pr-120\@2xl {
    padding-right: 30rem;
  }

  .pb-120\@2xl {
    padding-bottom: 30rem;
  }

  .pl-120\@2xl {
    padding-left: 30rem;
  }

  .m-120\@2xl {
    margin: 30rem;
  }

  .mx-120\@2xl {
    margin-inline: 30rem;
  }

  .my-120\@2xl {
    margin-block: 30rem;
  }

  .mt-120\@2xl {
    margin-top: 30rem;
  }

  .mr-120\@2xl {
    margin-right: 30rem;
  }

  .mb-120\@2xl {
    margin-bottom: 30rem;
  }

  .ml-120\@2xl {
    margin-left: 30rem;
  }

  .gap-120\@2xl {
    gap: 30rem;
  }

  .gap-x-120\@2xl {
    column-gap: 30rem;
  }

  .gap-y-120\@2xl {
    row-gap: 30rem;
  }

  .space-x-120\@2xl>*+* {
    margin-left: 30rem;
  }

  .space-y-120\@2xl>*+* {
    margin-top: 30rem;
  }

  .inset-120\@2xl {
    inset: 30rem;
  }

  .inset-x-120\@2xl {
    left: 30rem;
    right: 30rem;
  }

  .inset-y-120\@2xl {
    top: 30rem;
    bottom: 30rem;
  }
}

:root {
  --tooltip-bg: rgba(17 17 17 / 90%);
  --tooltip-shadow-color: rgb(0 0 0 / 20%);
  --tooltip-text-color: #FFF;
  --microtip-transition-duration: 0.18s;
  --microtip-transition-easing: ease-in-out;
  --microtip-transition-delay: 0s;
  --microtip-font-size: 13px;
  --microtip-font-weight: normal;
  --microtip-text-transform: none;
  --tooltip-small-width: 80px;
  --tooltip-medium-width: 150px;
  --tooltip-large-width: 260px;
  --tooltip-border-radius: 4px;
}

[data-tooltip][role~=tooltip] {
  position: relative;
}

[data-tooltip][role~=tooltip]::before,
[data-tooltip][role~=tooltip]::after {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
  opacity: 0;
  pointer-events: none;
  transition: all var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay);
  position: absolute;
  box-sizing: border-box;
  z-index: 10;
  transform-origin: top;
}

[data-tooltip][role~=tooltip]::before {
  background-size: 100% auto !important;
  content: "";
}

[data-tooltip][role~=tooltip]::after {
  background: var(--tooltip-bg);
  box-shadow: 0 3px 7px var(--tooltip-shadow-color);
  border-radius: var(--tooltip-border-radius);
  color: var(--tooltip-text-color);
  content: attr(data-tooltip);
  font-size: var(--microtip-font-size);
  font-weight: var(--microtip-font-weight);
  text-transform: var(--microtip-text-transform);
  padding: 0.5em 1em;
  white-space: nowrap;
  box-sizing: content-box;
}

[data-tooltip][role~=tooltip]:hover::before,
[data-tooltip][role~=tooltip]:hover::after,
[data-tooltip][role~=tooltip]:focus::before,
[data-tooltip][role~=tooltip]:focus::after {
  opacity: 1;
  pointer-events: auto;
}

[role~=tooltip][data-microtip-position|=top]::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
  height: 6px;
  width: 18px;
  margin-bottom: 5px;
  transform: translate3d(-50%, 0, 0);
  bottom: 100%;
  left: 50%;
}

[role~=tooltip][data-microtip-position|=top]::after {
  margin-bottom: 11px;
  transform: translate3d(-50%, 0, 0);
  bottom: 100%;
  left: 50%;
}

[role~=tooltip][data-microtip-position|=top]:hover::before {
  transform: translate3d(-50%, -5px, 0);
}

[role~=tooltip][data-microtip-position=top]:hover::after {
  transform: translate3d(-50%, -5px, 0);
}

[role~=tooltip][data-microtip-position=top-left]::after {
  transform: translate3d(calc(-100% + 16px), 0, 0);
  bottom: 100%;
}

[role~=tooltip][data-microtip-position=top-left]:hover::after {
  transform: translate3d(calc(-100% + 16px), -5px, 0);
}

[role~=tooltip][data-microtip-position=top-right]::after {
  transform: translate3d(calc(0% - 16px), 0, 0);
  bottom: 100%;
}

[role~=tooltip][data-microtip-position=top-right]:hover::after {
  transform: translate3d(calc(0% - 16px), -5px, 0);
}

[role~=tooltip][data-microtip-position|=bottom]::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
  height: 6px;
  width: 18px;
  margin-top: 5px;
  margin-bottom: 0;
  transform: translate3d(-50%, -10px, 0);
  bottom: auto;
  left: 50%;
  top: 100%;
}

[role~=tooltip][data-microtip-position|=bottom]::after {
  margin-top: 11px;
  transform: translate3d(-50%, -10px, 0);
  top: 100%;
  left: 50%;
}

[role~=tooltip][data-microtip-position|=bottom]:hover::before {
  transform: translate3d(-50%, 0, 0);
}

[role~=tooltip][data-microtip-position=bottom]:hover::after {
  transform: translate3d(-50%, 0, 0);
}

[role~=tooltip][data-microtip-position=bottom-left]::after {
  transform: translate3d(calc(-100% + 16px), -10px, 0);
  top: 100%;
}

[role~=tooltip][data-microtip-position=bottom-left]:hover::after {
  transform: translate3d(calc(-100% + 16px), 0, 0);
}

[role~=tooltip][data-microtip-position=bottom-right]::after {
  transform: translate3d(calc(0% - 16px), -10px, 0);
  top: 100%;
}

[role~=tooltip][data-microtip-position=bottom-right]:hover::after {
  transform: translate3d(calc(0% - 16px), 0, 0);
}

[role~=tooltip][data-microtip-position=left]::before,
[role~=tooltip][data-microtip-position=left]::after {
  inset: auto auto auto 100%;
  left: auto;
  right: 100%;
  top: 50%;
  transform: translate3d(10px, -50%, 0);
}

[role~=tooltip][data-microtip-position=left]::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
  height: 18px;
  width: 6px;
  margin-right: 5px;
  margin-bottom: 0;
}

[role~=tooltip][data-microtip-position=left]::after {
  margin-right: 11px;
}

[role~=tooltip][data-microtip-position=left]:hover::before,
[role~=tooltip][data-microtip-position=left]:hover::after {
  transform: translate3d(0, -50%, 0);
}

[role~=tooltip][data-microtip-position=right]::before,
[role~=tooltip][data-microtip-position=right]::after {
  bottom: auto;
  left: 100%;
  top: 50%;
  transform: translate3d(-10px, -50%, 0);
}

[role~=tooltip][data-microtip-position=right]::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
  height: 18px;
  width: 6px;
  margin-bottom: 0;
  margin-left: 5px;
}

[role~=tooltip][data-microtip-position=right]::after {
  margin-left: 11px;
}

[role~=tooltip][data-microtip-position=right]:hover::before,
[role~=tooltip][data-microtip-position=right]:hover::after {
  transform: translate3d(0, -50%, 0);
}

[role~=tooltip][data-microtip-size=small]::after {
  white-space: initial;
  width: var(--tooltip-small-width);
}

[role~=tooltip][data-microtip-size=medium]::after {
  white-space: initial;
  width: var(--tooltip-medium-width);
}

[role~=tooltip][data-microtip-size=large]::after {
  white-space: initial;
  width: var(--tooltip-large-width);
}

/**
 * Transform Utilities
 * 
 * - Translate (X, Y, Z)
 * - Scale
 * - Rotate
 * - Skew
 * - Transform origin
 */
.translate-x-0,
.hover\:translate-x-0:hover,
.group:hover .group-hover\:translate-x-0 {
  --translate-x: 0;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-y-0,
.hover\:translate-y-0:hover,
.group:hover .group-hover\:translate-y-0 {
  --translate-y: 0;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-x-1,
.hover\:translate-x-1:hover,
.group:hover .group-hover\:translate-x-1 {
  --translate-x: 0.25rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-y-1,
.hover\:translate-y-1:hover,
.group:hover .group-hover\:translate-y-1 {
  --translate-y: 0.25rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-x-2,
.hover\:translate-x-2:hover,
.group:hover .group-hover\:translate-x-2 {
  --translate-x: 0.5rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-y-2,
.hover\:translate-y-2:hover,
.group:hover .group-hover\:translate-y-2 {
  --translate-y: 0.5rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-x-3,
.hover\:translate-x-3:hover,
.group:hover .group-hover\:translate-x-3 {
  --translate-x: 0.75rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-y-3,
.hover\:translate-y-3:hover,
.group:hover .group-hover\:translate-y-3 {
  --translate-y: 0.75rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-x-4,
.hover\:translate-x-4:hover,
.group:hover .group-hover\:translate-x-4 {
  --translate-x: 1rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-y-4,
.hover\:translate-y-4:hover,
.group:hover .group-hover\:translate-y-4 {
  --translate-y: 1rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-x-5,
.hover\:translate-x-5:hover,
.group:hover .group-hover\:translate-x-5 {
  --translate-x: 1.25rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-y-5,
.hover\:translate-y-5:hover,
.group:hover .group-hover\:translate-y-5 {
  --translate-y: 1.25rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-x-6,
.hover\:translate-x-6:hover,
.group:hover .group-hover\:translate-x-6 {
  --translate-x: 1.5rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-y-6,
.hover\:translate-y-6:hover,
.group:hover .group-hover\:translate-y-6 {
  --translate-y: 1.5rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-x-8,
.hover\:translate-x-8:hover,
.group:hover .group-hover\:translate-x-8 {
  --translate-x: 2rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-y-8,
.hover\:translate-y-8:hover,
.group:hover .group-hover\:translate-y-8 {
  --translate-y: 2rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-x-10,
.hover\:translate-x-10:hover,
.group:hover .group-hover\:translate-x-10 {
  --translate-x: 2.5rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-y-10,
.hover\:translate-y-10:hover,
.group:hover .group-hover\:translate-y-10 {
  --translate-y: 2.5rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-x-12,
.hover\:translate-x-12:hover,
.group:hover .group-hover\:translate-x-12 {
  --translate-x: 3rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-y-12,
.hover\:translate-y-12:hover,
.group:hover .group-hover\:translate-y-12 {
  --translate-y: 3rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-x-16,
.hover\:translate-x-16:hover,
.group:hover .group-hover\:translate-x-16 {
  --translate-x: 4rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-y-16,
.hover\:translate-y-16:hover,
.group:hover .group-hover\:translate-y-16 {
  --translate-y: 4rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-x-20,
.hover\:translate-x-20:hover,
.group:hover .group-hover\:translate-x-20 {
  --translate-x: 5rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-y-20,
.hover\:translate-y-20:hover,
.group:hover .group-hover\:translate-y-20 {
  --translate-y: 5rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-x-25p,
.hover\:translate-x-25p:hover,
.group:hover .group-hover\:translate-x-25p {
  --translate-x: 25%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-y-25p,
.hover\:translate-y-25p:hover,
.group:hover .group-hover\:translate-y-25p {
  --translate-y: 25%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-x-33p,
.hover\:translate-x-33p:hover,
.group:hover .group-hover\:translate-x-33p {
  --translate-x: 33.333%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-y-33p,
.hover\:translate-y-33p:hover,
.group:hover .group-hover\:translate-y-33p {
  --translate-y: 33.333%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-x-50p,
.hover\:translate-x-50p:hover,
.group:hover .group-hover\:translate-x-50p {
  --translate-x: 50%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-y-50p,
.hover\:translate-y-50p:hover,
.group:hover .group-hover\:translate-y-50p {
  --translate-y: 50%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-x-66p,
.hover\:translate-x-66p:hover,
.group:hover .group-hover\:translate-x-66p {
  --translate-x: 66.667%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-y-66p,
.hover\:translate-y-66p:hover,
.group:hover .group-hover\:translate-y-66p {
  --translate-y: 66.667%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-x-75p,
.hover\:translate-x-75p:hover,
.group:hover .group-hover\:translate-x-75p {
  --translate-x: 75%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-y-75p,
.hover\:translate-y-75p:hover,
.group:hover .group-hover\:translate-y-75p {
  --translate-y: 75%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-x-100p,
.hover\:translate-x-100p:hover,
.group:hover .group-hover\:translate-x-100p {
  --translate-x: 100%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.translate-y-100p,
.hover\:translate-y-100p:hover,
.group:hover .group-hover\:translate-y-100p {
  --translate-y: 100%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-x-1,
.hover\:-translate-x-1:hover,
.group:hover .group-hover\:-translate-x-1 {
  --translate-x: -0.25rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-y-1,
.hover\:-translate-y-1:hover,
.group:hover .group-hover\:-translate-y-1 {
  --translate-y: -0.25rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-x-2,
.hover\:-translate-x-2:hover,
.group:hover .group-hover\:-translate-x-2 {
  --translate-x: -0.5rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-y-2,
.hover\:-translate-y-2:hover,
.group:hover .group-hover\:-translate-y-2 {
  --translate-y: -0.5rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-x-3,
.hover\:-translate-x-3:hover,
.group:hover .group-hover\:-translate-x-3 {
  --translate-x: -0.75rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-y-3,
.hover\:-translate-y-3:hover,
.group:hover .group-hover\:-translate-y-3 {
  --translate-y: -0.75rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-x-4,
.hover\:-translate-x-4:hover,
.group:hover .group-hover\:-translate-x-4 {
  --translate-x: -1rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-y-4,
.hover\:-translate-y-4:hover,
.group:hover .group-hover\:-translate-y-4 {
  --translate-y: -1rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-x-5,
.hover\:-translate-x-5:hover,
.group:hover .group-hover\:-translate-x-5 {
  --translate-x: -1.25rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-y-5,
.hover\:-translate-y-5:hover,
.group:hover .group-hover\:-translate-y-5 {
  --translate-y: -1.25rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-x-6,
.hover\:-translate-x-6:hover,
.group:hover .group-hover\:-translate-x-6 {
  --translate-x: -1.5rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-y-6,
.hover\:-translate-y-6:hover,
.group:hover .group-hover\:-translate-y-6 {
  --translate-y: -1.5rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-x-8,
.hover\:-translate-x-8:hover,
.group:hover .group-hover\:-translate-x-8 {
  --translate-x: -2rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-y-8,
.hover\:-translate-y-8:hover,
.group:hover .group-hover\:-translate-y-8 {
  --translate-y: -2rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-x-10,
.hover\:-translate-x-10:hover,
.group:hover .group-hover\:-translate-x-10 {
  --translate-x: -2.5rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-y-10,
.hover\:-translate-y-10:hover,
.group:hover .group-hover\:-translate-y-10 {
  --translate-y: -2.5rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-x-12,
.hover\:-translate-x-12:hover,
.group:hover .group-hover\:-translate-x-12 {
  --translate-x: -3rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-y-12,
.hover\:-translate-y-12:hover,
.group:hover .group-hover\:-translate-y-12 {
  --translate-y: -3rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-x-16,
.hover\:-translate-x-16:hover,
.group:hover .group-hover\:-translate-x-16 {
  --translate-x: -4rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-y-16,
.hover\:-translate-y-16:hover,
.group:hover .group-hover\:-translate-y-16 {
  --translate-y: -4rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-x-20,
.hover\:-translate-x-20:hover,
.group:hover .group-hover\:-translate-x-20 {
  --translate-x: -5rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-y-20,
.hover\:-translate-y-20:hover,
.group:hover .group-hover\:-translate-y-20 {
  --translate-y: -5rem;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-x-25p,
.hover\:-translate-x-25p:hover,
.group:hover .group-hover\:-translate-x-25p {
  --translate-x: 25%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-y-25p,
.hover\:-translate-y-25p:hover,
.group:hover .group-hover\:-translate-y-25p {
  --translate-y: 25%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-x-33p,
.hover\:-translate-x-33p:hover,
.group:hover .group-hover\:-translate-x-33p {
  --translate-x: 33.333%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-y-33p,
.hover\:-translate-y-33p:hover,
.group:hover .group-hover\:-translate-y-33p {
  --translate-y: 33.333%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-x-50p,
.hover\:-translate-x-50p:hover,
.group:hover .group-hover\:-translate-x-50p {
  --translate-x: 50%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-y-50p,
.hover\:-translate-y-50p:hover,
.group:hover .group-hover\:-translate-y-50p {
  --translate-y: 50%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-x-66p,
.hover\:-translate-x-66p:hover,
.group:hover .group-hover\:-translate-x-66p {
  --translate-x: 66.667%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-y-66p,
.hover\:-translate-y-66p:hover,
.group:hover .group-hover\:-translate-y-66p {
  --translate-y: 66.667%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-x-75p,
.hover\:-translate-x-75p:hover,
.group:hover .group-hover\:-translate-x-75p {
  --translate-x: 75%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-y-75p,
.hover\:-translate-y-75p:hover,
.group:hover .group-hover\:-translate-y-75p {
  --translate-y: 75%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-x-100p,
.hover\:-translate-x-100p:hover,
.group:hover .group-hover\:-translate-x-100p {
  --translate-x: -100%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-translate-y-100p,
.hover\:-translate-y-100p:hover,
.group:hover .group-hover\:-translate-y-100p {
  --translate-y: -100%;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-0,
.hover\:scale-0:hover,
.group:hover .group-hover\:scale-0 {
  --scale-x: 0;
  --scale-y: 0;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-x-0,
.hover\:scale-x-0:hover,
.group:hover .group-hover\:scale-x-0 {
  --scale-x: 0;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-y-0,
.hover\:scale-y-0:hover,
.group:hover .group-hover\:scale-y-0 {
  --scale-y: 0;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-50,
.hover\:scale-50:hover,
.group:hover .group-hover\:scale-50 {
  --scale-x: 0.5;
  --scale-y: 0.5;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-x-50,
.hover\:scale-x-50:hover,
.group:hover .group-hover\:scale-x-50 {
  --scale-x: 0.5;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-y-50,
.hover\:scale-y-50:hover,
.group:hover .group-hover\:scale-y-50 {
  --scale-y: 0.5;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-75,
.hover\:scale-75:hover,
.group:hover .group-hover\:scale-75 {
  --scale-x: 0.75;
  --scale-y: 0.75;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-x-75,
.hover\:scale-x-75:hover,
.group:hover .group-hover\:scale-x-75 {
  --scale-x: 0.75;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-y-75,
.hover\:scale-y-75:hover,
.group:hover .group-hover\:scale-y-75 {
  --scale-y: 0.75;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-90,
.hover\:scale-90:hover,
.group:hover .group-hover\:scale-90 {
  --scale-x: 0.9;
  --scale-y: 0.9;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-x-90,
.hover\:scale-x-90:hover,
.group:hover .group-hover\:scale-x-90 {
  --scale-x: 0.9;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-y-90,
.hover\:scale-y-90:hover,
.group:hover .group-hover\:scale-y-90 {
  --scale-y: 0.9;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-95,
.hover\:scale-95:hover,
.group:hover .group-hover\:scale-95 {
  --scale-x: 0.95;
  --scale-y: 0.95;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-x-95,
.hover\:scale-x-95:hover,
.group:hover .group-hover\:scale-x-95 {
  --scale-x: 0.95;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-y-95,
.hover\:scale-y-95:hover,
.group:hover .group-hover\:scale-y-95 {
  --scale-y: 0.95;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-100,
.hover\:scale-100:hover,
.group:hover .group-hover\:scale-100 {
  --scale-x: 1;
  --scale-y: 1;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-x-100,
.hover\:scale-x-100:hover,
.group:hover .group-hover\:scale-x-100 {
  --scale-x: 1;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-y-100,
.hover\:scale-y-100:hover,
.group:hover .group-hover\:scale-y-100 {
  --scale-y: 1;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-105,
.hover\:scale-105:hover,
.group:hover .group-hover\:scale-105 {
  --scale-x: 1.05;
  --scale-y: 1.05;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-x-105,
.hover\:scale-x-105:hover,
.group:hover .group-hover\:scale-x-105 {
  --scale-x: 1.05;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-y-105,
.hover\:scale-y-105:hover,
.group:hover .group-hover\:scale-y-105 {
  --scale-y: 1.05;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-110,
.hover\:scale-110:hover,
.group:hover .group-hover\:scale-110 {
  --scale-x: 1.1;
  --scale-y: 1.1;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-x-110,
.hover\:scale-x-110:hover,
.group:hover .group-hover\:scale-x-110 {
  --scale-x: 1.1;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-y-110,
.hover\:scale-y-110:hover,
.group:hover .group-hover\:scale-y-110 {
  --scale-y: 1.1;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-125,
.hover\:scale-125:hover,
.group:hover .group-hover\:scale-125 {
  --scale-x: 1.25;
  --scale-y: 1.25;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-x-125,
.hover\:scale-x-125:hover,
.group:hover .group-hover\:scale-x-125 {
  --scale-x: 1.25;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-y-125,
.hover\:scale-y-125:hover,
.group:hover .group-hover\:scale-y-125 {
  --scale-y: 1.25;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-150,
.hover\:scale-150:hover,
.group:hover .group-hover\:scale-150 {
  --scale-x: 1.5;
  --scale-y: 1.5;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-x-150,
.hover\:scale-x-150:hover,
.group:hover .group-hover\:scale-x-150 {
  --scale-x: 1.5;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.scale-y-150,
.hover\:scale-y-150:hover,
.group:hover .group-hover\:scale-y-150 {
  --scale-y: 1.5;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.rotate-0,
.hover\:rotate-0:hover,
.group:hover .group-hover\:rotate-0 {
  --rotate: 0deg;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.rotate-45,
.hover\:rotate-45:hover,
.group:hover .group-hover\:rotate-45 {
  --rotate: 45deg;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.rotate-90,
.hover\:rotate-90:hover,
.group:hover .group-hover\:rotate-90 {
  --rotate: 90deg;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.rotate-180,
.hover\:rotate-180:hover,
.group:hover .group-hover\:rotate-180 {
  --rotate: 180deg;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.rotate-270,
.hover\:rotate-270:hover,
.group:hover .group-hover\:rotate-270 {
  --rotate: 270deg;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-rotate-45,
.hover\:-rotate-45:hover,
.group:hover .group-hover\:-rotate-45 {
  --rotate: -45deg;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-rotate-90,
.hover\:-rotate-90:hover,
.group:hover .group-hover\:-rotate-90 {
  --rotate: -90deg;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-rotate-180,
.hover\:-rotate-180:hover,
.group:hover .group-hover\:-rotate-180 {
  --rotate: -180deg;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.-rotate-270,
.hover\:-rotate-270:hover,
.group:hover .group-hover\:-rotate-270 {
  --rotate: -270deg;
  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
}

.origin-center,
.hover\:origin-center:hover,
.group:hover .group-hover\:origin-center {
  transform-origin: center;
}

.origin-top,
.hover\:origin-top:hover,
.group:hover .group-hover\:origin-top {
  transform-origin: top;
}

.origin-top-right,
.hover\:origin-top-right:hover,
.group:hover .group-hover\:origin-top-right {
  transform-origin: top right;
}

.origin-right,
.hover\:origin-right:hover,
.group:hover .group-hover\:origin-right {
  transform-origin: right;
}

.origin-bottom-right,
.hover\:origin-bottom-right:hover,
.group:hover .group-hover\:origin-bottom-right {
  transform-origin: bottom right;
}

.origin-bottom,
.hover\:origin-bottom:hover,
.group:hover .group-hover\:origin-bottom {
  transform-origin: bottom;
}

.origin-bottom-left,
.hover\:origin-bottom-left:hover,
.group:hover .group-hover\:origin-bottom-left {
  transform-origin: bottom left;
}

.origin-left,
.hover\:origin-left:hover,
.group:hover .group-hover\:origin-left {
  transform-origin: left;
}

.origin-top-left,
.hover\:origin-top-left:hover,
.group:hover .group-hover\:origin-top-left {
  transform-origin: top left;
}

@media (min-width: 480px) {

  .translate-x-0\@xs,
  .hover\:translate-x-0\@xs:hover,
  .group:hover .group-hover\:translate-x-0\@xs {
    --translate-x: 0;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-0\@xs,
  .hover\:translate-y-0\@xs:hover,
  .group:hover .group-hover\:translate-y-0\@xs {
    --translate-y: 0;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-1\@xs,
  .hover\:translate-x-1\@xs:hover,
  .group:hover .group-hover\:translate-x-1\@xs {
    --translate-x: 0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-1\@xs,
  .hover\:translate-y-1\@xs:hover,
  .group:hover .group-hover\:translate-y-1\@xs {
    --translate-y: 0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-2\@xs,
  .hover\:translate-x-2\@xs:hover,
  .group:hover .group-hover\:translate-x-2\@xs {
    --translate-x: 0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-2\@xs,
  .hover\:translate-y-2\@xs:hover,
  .group:hover .group-hover\:translate-y-2\@xs {
    --translate-y: 0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-3\@xs,
  .hover\:translate-x-3\@xs:hover,
  .group:hover .group-hover\:translate-x-3\@xs {
    --translate-x: 0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-3\@xs,
  .hover\:translate-y-3\@xs:hover,
  .group:hover .group-hover\:translate-y-3\@xs {
    --translate-y: 0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-4\@xs,
  .hover\:translate-x-4\@xs:hover,
  .group:hover .group-hover\:translate-x-4\@xs {
    --translate-x: 1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-4\@xs,
  .hover\:translate-y-4\@xs:hover,
  .group:hover .group-hover\:translate-y-4\@xs {
    --translate-y: 1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-5\@xs,
  .hover\:translate-x-5\@xs:hover,
  .group:hover .group-hover\:translate-x-5\@xs {
    --translate-x: 1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-5\@xs,
  .hover\:translate-y-5\@xs:hover,
  .group:hover .group-hover\:translate-y-5\@xs {
    --translate-y: 1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-6\@xs,
  .hover\:translate-x-6\@xs:hover,
  .group:hover .group-hover\:translate-x-6\@xs {
    --translate-x: 1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-6\@xs,
  .hover\:translate-y-6\@xs:hover,
  .group:hover .group-hover\:translate-y-6\@xs {
    --translate-y: 1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-8\@xs,
  .hover\:translate-x-8\@xs:hover,
  .group:hover .group-hover\:translate-x-8\@xs {
    --translate-x: 2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-8\@xs,
  .hover\:translate-y-8\@xs:hover,
  .group:hover .group-hover\:translate-y-8\@xs {
    --translate-y: 2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-10\@xs,
  .hover\:translate-x-10\@xs:hover,
  .group:hover .group-hover\:translate-x-10\@xs {
    --translate-x: 2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-10\@xs,
  .hover\:translate-y-10\@xs:hover,
  .group:hover .group-hover\:translate-y-10\@xs {
    --translate-y: 2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-12\@xs,
  .hover\:translate-x-12\@xs:hover,
  .group:hover .group-hover\:translate-x-12\@xs {
    --translate-x: 3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-12\@xs,
  .hover\:translate-y-12\@xs:hover,
  .group:hover .group-hover\:translate-y-12\@xs {
    --translate-y: 3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-16\@xs,
  .hover\:translate-x-16\@xs:hover,
  .group:hover .group-hover\:translate-x-16\@xs {
    --translate-x: 4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-16\@xs,
  .hover\:translate-y-16\@xs:hover,
  .group:hover .group-hover\:translate-y-16\@xs {
    --translate-y: 4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-20\@xs,
  .hover\:translate-x-20\@xs:hover,
  .group:hover .group-hover\:translate-x-20\@xs {
    --translate-x: 5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-20\@xs,
  .hover\:translate-y-20\@xs:hover,
  .group:hover .group-hover\:translate-y-20\@xs {
    --translate-y: 5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-25p\@xs,
  .hover\:translate-x-25p\@xs:hover,
  .group:hover .group-hover\:translate-x-25p\@xs {
    --translate-x: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-25p\@xs,
  .hover\:translate-y-25p\@xs:hover,
  .group:hover .group-hover\:translate-y-25p\@xs {
    --translate-y: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-33p\@xs,
  .hover\:translate-x-33p\@xs:hover,
  .group:hover .group-hover\:translate-x-33p\@xs {
    --translate-x: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-33p\@xs,
  .hover\:translate-y-33p\@xs:hover,
  .group:hover .group-hover\:translate-y-33p\@xs {
    --translate-y: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-50p\@xs,
  .hover\:translate-x-50p\@xs:hover,
  .group:hover .group-hover\:translate-x-50p\@xs {
    --translate-x: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-50p\@xs,
  .hover\:translate-y-50p\@xs:hover,
  .group:hover .group-hover\:translate-y-50p\@xs {
    --translate-y: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-66p\@xs,
  .hover\:translate-x-66p\@xs:hover,
  .group:hover .group-hover\:translate-x-66p\@xs {
    --translate-x: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-66p\@xs,
  .hover\:translate-y-66p\@xs:hover,
  .group:hover .group-hover\:translate-y-66p\@xs {
    --translate-y: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-75p\@xs,
  .hover\:translate-x-75p\@xs:hover,
  .group:hover .group-hover\:translate-x-75p\@xs {
    --translate-x: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-75p\@xs,
  .hover\:translate-y-75p\@xs:hover,
  .group:hover .group-hover\:translate-y-75p\@xs {
    --translate-y: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-100p\@xs,
  .hover\:translate-x-100p\@xs:hover,
  .group:hover .group-hover\:translate-x-100p\@xs {
    --translate-x: 100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-100p\@xs,
  .hover\:translate-y-100p\@xs:hover,
  .group:hover .group-hover\:translate-y-100p\@xs {
    --translate-y: 100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-1\@xs,
  .hover\:-translate-x-1\@xs:hover,
  .group:hover .group-hover\:-translate-x-1\@xs {
    --translate-x: -0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-1\@xs,
  .hover\:-translate-y-1\@xs:hover,
  .group:hover .group-hover\:-translate-y-1\@xs {
    --translate-y: -0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-2\@xs,
  .hover\:-translate-x-2\@xs:hover,
  .group:hover .group-hover\:-translate-x-2\@xs {
    --translate-x: -0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-2\@xs,
  .hover\:-translate-y-2\@xs:hover,
  .group:hover .group-hover\:-translate-y-2\@xs {
    --translate-y: -0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-3\@xs,
  .hover\:-translate-x-3\@xs:hover,
  .group:hover .group-hover\:-translate-x-3\@xs {
    --translate-x: -0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-3\@xs,
  .hover\:-translate-y-3\@xs:hover,
  .group:hover .group-hover\:-translate-y-3\@xs {
    --translate-y: -0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-4\@xs,
  .hover\:-translate-x-4\@xs:hover,
  .group:hover .group-hover\:-translate-x-4\@xs {
    --translate-x: -1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-4\@xs,
  .hover\:-translate-y-4\@xs:hover,
  .group:hover .group-hover\:-translate-y-4\@xs {
    --translate-y: -1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-5\@xs,
  .hover\:-translate-x-5\@xs:hover,
  .group:hover .group-hover\:-translate-x-5\@xs {
    --translate-x: -1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-5\@xs,
  .hover\:-translate-y-5\@xs:hover,
  .group:hover .group-hover\:-translate-y-5\@xs {
    --translate-y: -1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-6\@xs,
  .hover\:-translate-x-6\@xs:hover,
  .group:hover .group-hover\:-translate-x-6\@xs {
    --translate-x: -1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-6\@xs,
  .hover\:-translate-y-6\@xs:hover,
  .group:hover .group-hover\:-translate-y-6\@xs {
    --translate-y: -1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-8\@xs,
  .hover\:-translate-x-8\@xs:hover,
  .group:hover .group-hover\:-translate-x-8\@xs {
    --translate-x: -2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-8\@xs,
  .hover\:-translate-y-8\@xs:hover,
  .group:hover .group-hover\:-translate-y-8\@xs {
    --translate-y: -2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-10\@xs,
  .hover\:-translate-x-10\@xs:hover,
  .group:hover .group-hover\:-translate-x-10\@xs {
    --translate-x: -2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-10\@xs,
  .hover\:-translate-y-10\@xs:hover,
  .group:hover .group-hover\:-translate-y-10\@xs {
    --translate-y: -2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-12\@xs,
  .hover\:-translate-x-12\@xs:hover,
  .group:hover .group-hover\:-translate-x-12\@xs {
    --translate-x: -3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-12\@xs,
  .hover\:-translate-y-12\@xs:hover,
  .group:hover .group-hover\:-translate-y-12\@xs {
    --translate-y: -3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-16\@xs,
  .hover\:-translate-x-16\@xs:hover,
  .group:hover .group-hover\:-translate-x-16\@xs {
    --translate-x: -4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-16\@xs,
  .hover\:-translate-y-16\@xs:hover,
  .group:hover .group-hover\:-translate-y-16\@xs {
    --translate-y: -4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-20\@xs,
  .hover\:-translate-x-20\@xs:hover,
  .group:hover .group-hover\:-translate-x-20\@xs {
    --translate-x: -5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-20\@xs,
  .hover\:-translate-y-20\@xs:hover,
  .group:hover .group-hover\:-translate-y-20\@xs {
    --translate-y: -5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-25p\@xs,
  .hover\:-translate-x-25p\@xs:hover,
  .group:hover .group-hover\:-translate-x-25p\@xs {
    --translate-x: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-25p\@xs,
  .hover\:-translate-y-25p\@xs:hover,
  .group:hover .group-hover\:-translate-y-25p\@xs {
    --translate-y: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-33p\@xs,
  .hover\:-translate-x-33p\@xs:hover,
  .group:hover .group-hover\:-translate-x-33p\@xs {
    --translate-x: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-33p\@xs,
  .hover\:-translate-y-33p\@xs:hover,
  .group:hover .group-hover\:-translate-y-33p\@xs {
    --translate-y: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-50p\@xs,
  .hover\:-translate-x-50p\@xs:hover,
  .group:hover .group-hover\:-translate-x-50p\@xs {
    --translate-x: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-50p\@xs,
  .hover\:-translate-y-50p\@xs:hover,
  .group:hover .group-hover\:-translate-y-50p\@xs {
    --translate-y: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-66p\@xs,
  .hover\:-translate-x-66p\@xs:hover,
  .group:hover .group-hover\:-translate-x-66p\@xs {
    --translate-x: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-66p\@xs,
  .hover\:-translate-y-66p\@xs:hover,
  .group:hover .group-hover\:-translate-y-66p\@xs {
    --translate-y: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-75p\@xs,
  .hover\:-translate-x-75p\@xs:hover,
  .group:hover .group-hover\:-translate-x-75p\@xs {
    --translate-x: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-75p\@xs,
  .hover\:-translate-y-75p\@xs:hover,
  .group:hover .group-hover\:-translate-y-75p\@xs {
    --translate-y: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-100p\@xs,
  .hover\:-translate-x-100p\@xs:hover,
  .group:hover .group-hover\:-translate-x-100p\@xs {
    --translate-x: -100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-100p\@xs,
  .hover\:-translate-y-100p\@xs:hover,
  .group:hover .group-hover\:-translate-y-100p\@xs {
    --translate-y: -100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-0\@xs,
  .hover\:scale-0\@xs:hover,
  .group:hover .group-hover\:scale-0\@xs {
    --scale-x: 0;
    --scale-y: 0;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-50\@xs,
  .hover\:scale-50\@xs:hover,
  .group:hover .group-hover\:scale-50\@xs {
    --scale-x: 0.5;
    --scale-y: 0.5;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-75\@xs,
  .hover\:scale-75\@xs:hover,
  .group:hover .group-hover\:scale-75\@xs {
    --scale-x: 0.75;
    --scale-y: 0.75;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-90\@xs,
  .hover\:scale-90\@xs:hover,
  .group:hover .group-hover\:scale-90\@xs {
    --scale-x: 0.9;
    --scale-y: 0.9;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-95\@xs,
  .hover\:scale-95\@xs:hover,
  .group:hover .group-hover\:scale-95\@xs {
    --scale-x: 0.95;
    --scale-y: 0.95;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-100\@xs,
  .hover\:scale-100\@xs:hover,
  .group:hover .group-hover\:scale-100\@xs {
    --scale-x: 1;
    --scale-y: 1;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-105\@xs,
  .hover\:scale-105\@xs:hover,
  .group:hover .group-hover\:scale-105\@xs {
    --scale-x: 1.05;
    --scale-y: 1.05;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-110\@xs,
  .hover\:scale-110\@xs:hover,
  .group:hover .group-hover\:scale-110\@xs {
    --scale-x: 1.1;
    --scale-y: 1.1;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-125\@xs,
  .hover\:scale-125\@xs:hover,
  .group:hover .group-hover\:scale-125\@xs {
    --scale-x: 1.25;
    --scale-y: 1.25;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-150\@xs,
  .hover\:scale-150\@xs:hover,
  .group:hover .group-hover\:scale-150\@xs {
    --scale-x: 1.5;
    --scale-y: 1.5;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-0\@xs,
  .hover\:rotate-0\@xs:hover,
  .group:hover .group-hover\:rotate-0\@xs {
    --rotate: 0deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-45\@xs,
  .hover\:rotate-45\@xs:hover,
  .group:hover .group-hover\:rotate-45\@xs {
    --rotate: 45deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-90\@xs,
  .hover\:rotate-90\@xs:hover,
  .group:hover .group-hover\:rotate-90\@xs {
    --rotate: 90deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-180\@xs,
  .hover\:rotate-180\@xs:hover,
  .group:hover .group-hover\:rotate-180\@xs {
    --rotate: 180deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-270\@xs,
  .hover\:rotate-270\@xs:hover,
  .group:hover .group-hover\:rotate-270\@xs {
    --rotate: 270deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-45\@xs,
  .hover\:-rotate-45\@xs:hover,
  .group:hover .group-hover\:-rotate-45\@xs {
    --rotate: -45deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-90\@xs,
  .hover\:-rotate-90\@xs:hover,
  .group:hover .group-hover\:-rotate-90\@xs {
    --rotate: -90deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-180\@xs,
  .hover\:-rotate-180\@xs:hover,
  .group:hover .group-hover\:-rotate-180\@xs {
    --rotate: -180deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-270\@xs,
  .hover\:-rotate-270\@xs:hover,
  .group:hover .group-hover\:-rotate-270\@xs {
    --rotate: -270deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }
}

@media (min-width: 640px) {

  .translate-x-0\@sm,
  .hover\:translate-x-0\@sm:hover,
  .group:hover .group-hover\:translate-x-0\@sm {
    --translate-x: 0;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-0\@sm,
  .hover\:translate-y-0\@sm:hover,
  .group:hover .group-hover\:translate-y-0\@sm {
    --translate-y: 0;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-1\@sm,
  .hover\:translate-x-1\@sm:hover,
  .group:hover .group-hover\:translate-x-1\@sm {
    --translate-x: 0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-1\@sm,
  .hover\:translate-y-1\@sm:hover,
  .group:hover .group-hover\:translate-y-1\@sm {
    --translate-y: 0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-2\@sm,
  .hover\:translate-x-2\@sm:hover,
  .group:hover .group-hover\:translate-x-2\@sm {
    --translate-x: 0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-2\@sm,
  .hover\:translate-y-2\@sm:hover,
  .group:hover .group-hover\:translate-y-2\@sm {
    --translate-y: 0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-3\@sm,
  .hover\:translate-x-3\@sm:hover,
  .group:hover .group-hover\:translate-x-3\@sm {
    --translate-x: 0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-3\@sm,
  .hover\:translate-y-3\@sm:hover,
  .group:hover .group-hover\:translate-y-3\@sm {
    --translate-y: 0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-4\@sm,
  .hover\:translate-x-4\@sm:hover,
  .group:hover .group-hover\:translate-x-4\@sm {
    --translate-x: 1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-4\@sm,
  .hover\:translate-y-4\@sm:hover,
  .group:hover .group-hover\:translate-y-4\@sm {
    --translate-y: 1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-5\@sm,
  .hover\:translate-x-5\@sm:hover,
  .group:hover .group-hover\:translate-x-5\@sm {
    --translate-x: 1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-5\@sm,
  .hover\:translate-y-5\@sm:hover,
  .group:hover .group-hover\:translate-y-5\@sm {
    --translate-y: 1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-6\@sm,
  .hover\:translate-x-6\@sm:hover,
  .group:hover .group-hover\:translate-x-6\@sm {
    --translate-x: 1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-6\@sm,
  .hover\:translate-y-6\@sm:hover,
  .group:hover .group-hover\:translate-y-6\@sm {
    --translate-y: 1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-8\@sm,
  .hover\:translate-x-8\@sm:hover,
  .group:hover .group-hover\:translate-x-8\@sm {
    --translate-x: 2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-8\@sm,
  .hover\:translate-y-8\@sm:hover,
  .group:hover .group-hover\:translate-y-8\@sm {
    --translate-y: 2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-10\@sm,
  .hover\:translate-x-10\@sm:hover,
  .group:hover .group-hover\:translate-x-10\@sm {
    --translate-x: 2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-10\@sm,
  .hover\:translate-y-10\@sm:hover,
  .group:hover .group-hover\:translate-y-10\@sm {
    --translate-y: 2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-12\@sm,
  .hover\:translate-x-12\@sm:hover,
  .group:hover .group-hover\:translate-x-12\@sm {
    --translate-x: 3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-12\@sm,
  .hover\:translate-y-12\@sm:hover,
  .group:hover .group-hover\:translate-y-12\@sm {
    --translate-y: 3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-16\@sm,
  .hover\:translate-x-16\@sm:hover,
  .group:hover .group-hover\:translate-x-16\@sm {
    --translate-x: 4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-16\@sm,
  .hover\:translate-y-16\@sm:hover,
  .group:hover .group-hover\:translate-y-16\@sm {
    --translate-y: 4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-20\@sm,
  .hover\:translate-x-20\@sm:hover,
  .group:hover .group-hover\:translate-x-20\@sm {
    --translate-x: 5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-20\@sm,
  .hover\:translate-y-20\@sm:hover,
  .group:hover .group-hover\:translate-y-20\@sm {
    --translate-y: 5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-25p\@sm,
  .hover\:translate-x-25p\@sm:hover,
  .group:hover .group-hover\:translate-x-25p\@sm {
    --translate-x: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-25p\@sm,
  .hover\:translate-y-25p\@sm:hover,
  .group:hover .group-hover\:translate-y-25p\@sm {
    --translate-y: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-33p\@sm,
  .hover\:translate-x-33p\@sm:hover,
  .group:hover .group-hover\:translate-x-33p\@sm {
    --translate-x: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-33p\@sm,
  .hover\:translate-y-33p\@sm:hover,
  .group:hover .group-hover\:translate-y-33p\@sm {
    --translate-y: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-50p\@sm,
  .hover\:translate-x-50p\@sm:hover,
  .group:hover .group-hover\:translate-x-50p\@sm {
    --translate-x: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-50p\@sm,
  .hover\:translate-y-50p\@sm:hover,
  .group:hover .group-hover\:translate-y-50p\@sm {
    --translate-y: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-66p\@sm,
  .hover\:translate-x-66p\@sm:hover,
  .group:hover .group-hover\:translate-x-66p\@sm {
    --translate-x: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-66p\@sm,
  .hover\:translate-y-66p\@sm:hover,
  .group:hover .group-hover\:translate-y-66p\@sm {
    --translate-y: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-75p\@sm,
  .hover\:translate-x-75p\@sm:hover,
  .group:hover .group-hover\:translate-x-75p\@sm {
    --translate-x: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-75p\@sm,
  .hover\:translate-y-75p\@sm:hover,
  .group:hover .group-hover\:translate-y-75p\@sm {
    --translate-y: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-100p\@sm,
  .hover\:translate-x-100p\@sm:hover,
  .group:hover .group-hover\:translate-x-100p\@sm {
    --translate-x: 100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-100p\@sm,
  .hover\:translate-y-100p\@sm:hover,
  .group:hover .group-hover\:translate-y-100p\@sm {
    --translate-y: 100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-1\@sm,
  .hover\:-translate-x-1\@sm:hover,
  .group:hover .group-hover\:-translate-x-1\@sm {
    --translate-x: -0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-1\@sm,
  .hover\:-translate-y-1\@sm:hover,
  .group:hover .group-hover\:-translate-y-1\@sm {
    --translate-y: -0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-2\@sm,
  .hover\:-translate-x-2\@sm:hover,
  .group:hover .group-hover\:-translate-x-2\@sm {
    --translate-x: -0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-2\@sm,
  .hover\:-translate-y-2\@sm:hover,
  .group:hover .group-hover\:-translate-y-2\@sm {
    --translate-y: -0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-3\@sm,
  .hover\:-translate-x-3\@sm:hover,
  .group:hover .group-hover\:-translate-x-3\@sm {
    --translate-x: -0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-3\@sm,
  .hover\:-translate-y-3\@sm:hover,
  .group:hover .group-hover\:-translate-y-3\@sm {
    --translate-y: -0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-4\@sm,
  .hover\:-translate-x-4\@sm:hover,
  .group:hover .group-hover\:-translate-x-4\@sm {
    --translate-x: -1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-4\@sm,
  .hover\:-translate-y-4\@sm:hover,
  .group:hover .group-hover\:-translate-y-4\@sm {
    --translate-y: -1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-5\@sm,
  .hover\:-translate-x-5\@sm:hover,
  .group:hover .group-hover\:-translate-x-5\@sm {
    --translate-x: -1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-5\@sm,
  .hover\:-translate-y-5\@sm:hover,
  .group:hover .group-hover\:-translate-y-5\@sm {
    --translate-y: -1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-6\@sm,
  .hover\:-translate-x-6\@sm:hover,
  .group:hover .group-hover\:-translate-x-6\@sm {
    --translate-x: -1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-6\@sm,
  .hover\:-translate-y-6\@sm:hover,
  .group:hover .group-hover\:-translate-y-6\@sm {
    --translate-y: -1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-8\@sm,
  .hover\:-translate-x-8\@sm:hover,
  .group:hover .group-hover\:-translate-x-8\@sm {
    --translate-x: -2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-8\@sm,
  .hover\:-translate-y-8\@sm:hover,
  .group:hover .group-hover\:-translate-y-8\@sm {
    --translate-y: -2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-10\@sm,
  .hover\:-translate-x-10\@sm:hover,
  .group:hover .group-hover\:-translate-x-10\@sm {
    --translate-x: -2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-10\@sm,
  .hover\:-translate-y-10\@sm:hover,
  .group:hover .group-hover\:-translate-y-10\@sm {
    --translate-y: -2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-12\@sm,
  .hover\:-translate-x-12\@sm:hover,
  .group:hover .group-hover\:-translate-x-12\@sm {
    --translate-x: -3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-12\@sm,
  .hover\:-translate-y-12\@sm:hover,
  .group:hover .group-hover\:-translate-y-12\@sm {
    --translate-y: -3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-16\@sm,
  .hover\:-translate-x-16\@sm:hover,
  .group:hover .group-hover\:-translate-x-16\@sm {
    --translate-x: -4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-16\@sm,
  .hover\:-translate-y-16\@sm:hover,
  .group:hover .group-hover\:-translate-y-16\@sm {
    --translate-y: -4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-20\@sm,
  .hover\:-translate-x-20\@sm:hover,
  .group:hover .group-hover\:-translate-x-20\@sm {
    --translate-x: -5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-20\@sm,
  .hover\:-translate-y-20\@sm:hover,
  .group:hover .group-hover\:-translate-y-20\@sm {
    --translate-y: -5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-25p\@sm,
  .hover\:-translate-x-25p\@sm:hover,
  .group:hover .group-hover\:-translate-x-25p\@sm {
    --translate-x: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-25p\@sm,
  .hover\:-translate-y-25p\@sm:hover,
  .group:hover .group-hover\:-translate-y-25p\@sm {
    --translate-y: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-33p\@sm,
  .hover\:-translate-x-33p\@sm:hover,
  .group:hover .group-hover\:-translate-x-33p\@sm {
    --translate-x: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-33p\@sm,
  .hover\:-translate-y-33p\@sm:hover,
  .group:hover .group-hover\:-translate-y-33p\@sm {
    --translate-y: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-50p\@sm,
  .hover\:-translate-x-50p\@sm:hover,
  .group:hover .group-hover\:-translate-x-50p\@sm {
    --translate-x: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-50p\@sm,
  .hover\:-translate-y-50p\@sm:hover,
  .group:hover .group-hover\:-translate-y-50p\@sm {
    --translate-y: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-66p\@sm,
  .hover\:-translate-x-66p\@sm:hover,
  .group:hover .group-hover\:-translate-x-66p\@sm {
    --translate-x: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-66p\@sm,
  .hover\:-translate-y-66p\@sm:hover,
  .group:hover .group-hover\:-translate-y-66p\@sm {
    --translate-y: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-75p\@sm,
  .hover\:-translate-x-75p\@sm:hover,
  .group:hover .group-hover\:-translate-x-75p\@sm {
    --translate-x: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-75p\@sm,
  .hover\:-translate-y-75p\@sm:hover,
  .group:hover .group-hover\:-translate-y-75p\@sm {
    --translate-y: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-100p\@sm,
  .hover\:-translate-x-100p\@sm:hover,
  .group:hover .group-hover\:-translate-x-100p\@sm {
    --translate-x: -100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-100p\@sm,
  .hover\:-translate-y-100p\@sm:hover,
  .group:hover .group-hover\:-translate-y-100p\@sm {
    --translate-y: -100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-0\@sm,
  .hover\:scale-0\@sm:hover,
  .group:hover .group-hover\:scale-0\@sm {
    --scale-x: 0;
    --scale-y: 0;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-50\@sm,
  .hover\:scale-50\@sm:hover,
  .group:hover .group-hover\:scale-50\@sm {
    --scale-x: 0.5;
    --scale-y: 0.5;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-75\@sm,
  .hover\:scale-75\@sm:hover,
  .group:hover .group-hover\:scale-75\@sm {
    --scale-x: 0.75;
    --scale-y: 0.75;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-90\@sm,
  .hover\:scale-90\@sm:hover,
  .group:hover .group-hover\:scale-90\@sm {
    --scale-x: 0.9;
    --scale-y: 0.9;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-95\@sm,
  .hover\:scale-95\@sm:hover,
  .group:hover .group-hover\:scale-95\@sm {
    --scale-x: 0.95;
    --scale-y: 0.95;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-100\@sm,
  .hover\:scale-100\@sm:hover,
  .group:hover .group-hover\:scale-100\@sm {
    --scale-x: 1;
    --scale-y: 1;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-105\@sm,
  .hover\:scale-105\@sm:hover,
  .group:hover .group-hover\:scale-105\@sm {
    --scale-x: 1.05;
    --scale-y: 1.05;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-110\@sm,
  .hover\:scale-110\@sm:hover,
  .group:hover .group-hover\:scale-110\@sm {
    --scale-x: 1.1;
    --scale-y: 1.1;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-125\@sm,
  .hover\:scale-125\@sm:hover,
  .group:hover .group-hover\:scale-125\@sm {
    --scale-x: 1.25;
    --scale-y: 1.25;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-150\@sm,
  .hover\:scale-150\@sm:hover,
  .group:hover .group-hover\:scale-150\@sm {
    --scale-x: 1.5;
    --scale-y: 1.5;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-0\@sm,
  .hover\:rotate-0\@sm:hover,
  .group:hover .group-hover\:rotate-0\@sm {
    --rotate: 0deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-45\@sm,
  .hover\:rotate-45\@sm:hover,
  .group:hover .group-hover\:rotate-45\@sm {
    --rotate: 45deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-90\@sm,
  .hover\:rotate-90\@sm:hover,
  .group:hover .group-hover\:rotate-90\@sm {
    --rotate: 90deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-180\@sm,
  .hover\:rotate-180\@sm:hover,
  .group:hover .group-hover\:rotate-180\@sm {
    --rotate: 180deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-270\@sm,
  .hover\:rotate-270\@sm:hover,
  .group:hover .group-hover\:rotate-270\@sm {
    --rotate: 270deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-45\@sm,
  .hover\:-rotate-45\@sm:hover,
  .group:hover .group-hover\:-rotate-45\@sm {
    --rotate: -45deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-90\@sm,
  .hover\:-rotate-90\@sm:hover,
  .group:hover .group-hover\:-rotate-90\@sm {
    --rotate: -90deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-180\@sm,
  .hover\:-rotate-180\@sm:hover,
  .group:hover .group-hover\:-rotate-180\@sm {
    --rotate: -180deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-270\@sm,
  .hover\:-rotate-270\@sm:hover,
  .group:hover .group-hover\:-rotate-270\@sm {
    --rotate: -270deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }
}

@media (min-width: 768px) {

  .translate-x-0\@md,
  .hover\:translate-x-0\@md:hover,
  .group:hover .group-hover\:translate-x-0\@md {
    --translate-x: 0;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-0\@md,
  .hover\:translate-y-0\@md:hover,
  .group:hover .group-hover\:translate-y-0\@md {
    --translate-y: 0;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-1\@md,
  .hover\:translate-x-1\@md:hover,
  .group:hover .group-hover\:translate-x-1\@md {
    --translate-x: 0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-1\@md,
  .hover\:translate-y-1\@md:hover,
  .group:hover .group-hover\:translate-y-1\@md {
    --translate-y: 0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-2\@md,
  .hover\:translate-x-2\@md:hover,
  .group:hover .group-hover\:translate-x-2\@md {
    --translate-x: 0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-2\@md,
  .hover\:translate-y-2\@md:hover,
  .group:hover .group-hover\:translate-y-2\@md {
    --translate-y: 0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-3\@md,
  .hover\:translate-x-3\@md:hover,
  .group:hover .group-hover\:translate-x-3\@md {
    --translate-x: 0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-3\@md,
  .hover\:translate-y-3\@md:hover,
  .group:hover .group-hover\:translate-y-3\@md {
    --translate-y: 0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-4\@md,
  .hover\:translate-x-4\@md:hover,
  .group:hover .group-hover\:translate-x-4\@md {
    --translate-x: 1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-4\@md,
  .hover\:translate-y-4\@md:hover,
  .group:hover .group-hover\:translate-y-4\@md {
    --translate-y: 1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-5\@md,
  .hover\:translate-x-5\@md:hover,
  .group:hover .group-hover\:translate-x-5\@md {
    --translate-x: 1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-5\@md,
  .hover\:translate-y-5\@md:hover,
  .group:hover .group-hover\:translate-y-5\@md {
    --translate-y: 1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-6\@md,
  .hover\:translate-x-6\@md:hover,
  .group:hover .group-hover\:translate-x-6\@md {
    --translate-x: 1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-6\@md,
  .hover\:translate-y-6\@md:hover,
  .group:hover .group-hover\:translate-y-6\@md {
    --translate-y: 1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-8\@md,
  .hover\:translate-x-8\@md:hover,
  .group:hover .group-hover\:translate-x-8\@md {
    --translate-x: 2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-8\@md,
  .hover\:translate-y-8\@md:hover,
  .group:hover .group-hover\:translate-y-8\@md {
    --translate-y: 2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-10\@md,
  .hover\:translate-x-10\@md:hover,
  .group:hover .group-hover\:translate-x-10\@md {
    --translate-x: 2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-10\@md,
  .hover\:translate-y-10\@md:hover,
  .group:hover .group-hover\:translate-y-10\@md {
    --translate-y: 2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-12\@md,
  .hover\:translate-x-12\@md:hover,
  .group:hover .group-hover\:translate-x-12\@md {
    --translate-x: 3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-12\@md,
  .hover\:translate-y-12\@md:hover,
  .group:hover .group-hover\:translate-y-12\@md {
    --translate-y: 3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-16\@md,
  .hover\:translate-x-16\@md:hover,
  .group:hover .group-hover\:translate-x-16\@md {
    --translate-x: 4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-16\@md,
  .hover\:translate-y-16\@md:hover,
  .group:hover .group-hover\:translate-y-16\@md {
    --translate-y: 4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-20\@md,
  .hover\:translate-x-20\@md:hover,
  .group:hover .group-hover\:translate-x-20\@md {
    --translate-x: 5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-20\@md,
  .hover\:translate-y-20\@md:hover,
  .group:hover .group-hover\:translate-y-20\@md {
    --translate-y: 5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-25p\@md,
  .hover\:translate-x-25p\@md:hover,
  .group:hover .group-hover\:translate-x-25p\@md {
    --translate-x: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-25p\@md,
  .hover\:translate-y-25p\@md:hover,
  .group:hover .group-hover\:translate-y-25p\@md {
    --translate-y: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-33p\@md,
  .hover\:translate-x-33p\@md:hover,
  .group:hover .group-hover\:translate-x-33p\@md {
    --translate-x: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-33p\@md,
  .hover\:translate-y-33p\@md:hover,
  .group:hover .group-hover\:translate-y-33p\@md {
    --translate-y: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-50p\@md,
  .hover\:translate-x-50p\@md:hover,
  .group:hover .group-hover\:translate-x-50p\@md {
    --translate-x: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-50p\@md,
  .hover\:translate-y-50p\@md:hover,
  .group:hover .group-hover\:translate-y-50p\@md {
    --translate-y: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-66p\@md,
  .hover\:translate-x-66p\@md:hover,
  .group:hover .group-hover\:translate-x-66p\@md {
    --translate-x: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-66p\@md,
  .hover\:translate-y-66p\@md:hover,
  .group:hover .group-hover\:translate-y-66p\@md {
    --translate-y: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-75p\@md,
  .hover\:translate-x-75p\@md:hover,
  .group:hover .group-hover\:translate-x-75p\@md {
    --translate-x: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-75p\@md,
  .hover\:translate-y-75p\@md:hover,
  .group:hover .group-hover\:translate-y-75p\@md {
    --translate-y: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-100p\@md,
  .hover\:translate-x-100p\@md:hover,
  .group:hover .group-hover\:translate-x-100p\@md {
    --translate-x: 100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-100p\@md,
  .hover\:translate-y-100p\@md:hover,
  .group:hover .group-hover\:translate-y-100p\@md {
    --translate-y: 100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-1\@md,
  .hover\:-translate-x-1\@md:hover,
  .group:hover .group-hover\:-translate-x-1\@md {
    --translate-x: -0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-1\@md,
  .hover\:-translate-y-1\@md:hover,
  .group:hover .group-hover\:-translate-y-1\@md {
    --translate-y: -0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-2\@md,
  .hover\:-translate-x-2\@md:hover,
  .group:hover .group-hover\:-translate-x-2\@md {
    --translate-x: -0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-2\@md,
  .hover\:-translate-y-2\@md:hover,
  .group:hover .group-hover\:-translate-y-2\@md {
    --translate-y: -0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-3\@md,
  .hover\:-translate-x-3\@md:hover,
  .group:hover .group-hover\:-translate-x-3\@md {
    --translate-x: -0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-3\@md,
  .hover\:-translate-y-3\@md:hover,
  .group:hover .group-hover\:-translate-y-3\@md {
    --translate-y: -0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-4\@md,
  .hover\:-translate-x-4\@md:hover,
  .group:hover .group-hover\:-translate-x-4\@md {
    --translate-x: -1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-4\@md,
  .hover\:-translate-y-4\@md:hover,
  .group:hover .group-hover\:-translate-y-4\@md {
    --translate-y: -1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-5\@md,
  .hover\:-translate-x-5\@md:hover,
  .group:hover .group-hover\:-translate-x-5\@md {
    --translate-x: -1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-5\@md,
  .hover\:-translate-y-5\@md:hover,
  .group:hover .group-hover\:-translate-y-5\@md {
    --translate-y: -1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-6\@md,
  .hover\:-translate-x-6\@md:hover,
  .group:hover .group-hover\:-translate-x-6\@md {
    --translate-x: -1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-6\@md,
  .hover\:-translate-y-6\@md:hover,
  .group:hover .group-hover\:-translate-y-6\@md {
    --translate-y: -1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-8\@md,
  .hover\:-translate-x-8\@md:hover,
  .group:hover .group-hover\:-translate-x-8\@md {
    --translate-x: -2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-8\@md,
  .hover\:-translate-y-8\@md:hover,
  .group:hover .group-hover\:-translate-y-8\@md {
    --translate-y: -2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-10\@md,
  .hover\:-translate-x-10\@md:hover,
  .group:hover .group-hover\:-translate-x-10\@md {
    --translate-x: -2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-10\@md,
  .hover\:-translate-y-10\@md:hover,
  .group:hover .group-hover\:-translate-y-10\@md {
    --translate-y: -2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-12\@md,
  .hover\:-translate-x-12\@md:hover,
  .group:hover .group-hover\:-translate-x-12\@md {
    --translate-x: -3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-12\@md,
  .hover\:-translate-y-12\@md:hover,
  .group:hover .group-hover\:-translate-y-12\@md {
    --translate-y: -3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-16\@md,
  .hover\:-translate-x-16\@md:hover,
  .group:hover .group-hover\:-translate-x-16\@md {
    --translate-x: -4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-16\@md,
  .hover\:-translate-y-16\@md:hover,
  .group:hover .group-hover\:-translate-y-16\@md {
    --translate-y: -4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-20\@md,
  .hover\:-translate-x-20\@md:hover,
  .group:hover .group-hover\:-translate-x-20\@md {
    --translate-x: -5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-20\@md,
  .hover\:-translate-y-20\@md:hover,
  .group:hover .group-hover\:-translate-y-20\@md {
    --translate-y: -5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-25p\@md,
  .hover\:-translate-x-25p\@md:hover,
  .group:hover .group-hover\:-translate-x-25p\@md {
    --translate-x: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-25p\@md,
  .hover\:-translate-y-25p\@md:hover,
  .group:hover .group-hover\:-translate-y-25p\@md {
    --translate-y: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-33p\@md,
  .hover\:-translate-x-33p\@md:hover,
  .group:hover .group-hover\:-translate-x-33p\@md {
    --translate-x: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-33p\@md,
  .hover\:-translate-y-33p\@md:hover,
  .group:hover .group-hover\:-translate-y-33p\@md {
    --translate-y: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-50p\@md,
  .hover\:-translate-x-50p\@md:hover,
  .group:hover .group-hover\:-translate-x-50p\@md {
    --translate-x: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-50p\@md,
  .hover\:-translate-y-50p\@md:hover,
  .group:hover .group-hover\:-translate-y-50p\@md {
    --translate-y: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-66p\@md,
  .hover\:-translate-x-66p\@md:hover,
  .group:hover .group-hover\:-translate-x-66p\@md {
    --translate-x: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-66p\@md,
  .hover\:-translate-y-66p\@md:hover,
  .group:hover .group-hover\:-translate-y-66p\@md {
    --translate-y: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-75p\@md,
  .hover\:-translate-x-75p\@md:hover,
  .group:hover .group-hover\:-translate-x-75p\@md {
    --translate-x: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-75p\@md,
  .hover\:-translate-y-75p\@md:hover,
  .group:hover .group-hover\:-translate-y-75p\@md {
    --translate-y: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-100p\@md,
  .hover\:-translate-x-100p\@md:hover,
  .group:hover .group-hover\:-translate-x-100p\@md {
    --translate-x: -100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-100p\@md,
  .hover\:-translate-y-100p\@md:hover,
  .group:hover .group-hover\:-translate-y-100p\@md {
    --translate-y: -100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-0\@md,
  .hover\:scale-0\@md:hover,
  .group:hover .group-hover\:scale-0\@md {
    --scale-x: 0;
    --scale-y: 0;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-50\@md,
  .hover\:scale-50\@md:hover,
  .group:hover .group-hover\:scale-50\@md {
    --scale-x: 0.5;
    --scale-y: 0.5;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-75\@md,
  .hover\:scale-75\@md:hover,
  .group:hover .group-hover\:scale-75\@md {
    --scale-x: 0.75;
    --scale-y: 0.75;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-90\@md,
  .hover\:scale-90\@md:hover,
  .group:hover .group-hover\:scale-90\@md {
    --scale-x: 0.9;
    --scale-y: 0.9;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-95\@md,
  .hover\:scale-95\@md:hover,
  .group:hover .group-hover\:scale-95\@md {
    --scale-x: 0.95;
    --scale-y: 0.95;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-100\@md,
  .hover\:scale-100\@md:hover,
  .group:hover .group-hover\:scale-100\@md {
    --scale-x: 1;
    --scale-y: 1;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-105\@md,
  .hover\:scale-105\@md:hover,
  .group:hover .group-hover\:scale-105\@md {
    --scale-x: 1.05;
    --scale-y: 1.05;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-110\@md,
  .hover\:scale-110\@md:hover,
  .group:hover .group-hover\:scale-110\@md {
    --scale-x: 1.1;
    --scale-y: 1.1;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-125\@md,
  .hover\:scale-125\@md:hover,
  .group:hover .group-hover\:scale-125\@md {
    --scale-x: 1.25;
    --scale-y: 1.25;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-150\@md,
  .hover\:scale-150\@md:hover,
  .group:hover .group-hover\:scale-150\@md {
    --scale-x: 1.5;
    --scale-y: 1.5;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-0\@md,
  .hover\:rotate-0\@md:hover,
  .group:hover .group-hover\:rotate-0\@md {
    --rotate: 0deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-45\@md,
  .hover\:rotate-45\@md:hover,
  .group:hover .group-hover\:rotate-45\@md {
    --rotate: 45deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-90\@md,
  .hover\:rotate-90\@md:hover,
  .group:hover .group-hover\:rotate-90\@md {
    --rotate: 90deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-180\@md,
  .hover\:rotate-180\@md:hover,
  .group:hover .group-hover\:rotate-180\@md {
    --rotate: 180deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-270\@md,
  .hover\:rotate-270\@md:hover,
  .group:hover .group-hover\:rotate-270\@md {
    --rotate: 270deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-45\@md,
  .hover\:-rotate-45\@md:hover,
  .group:hover .group-hover\:-rotate-45\@md {
    --rotate: -45deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-90\@md,
  .hover\:-rotate-90\@md:hover,
  .group:hover .group-hover\:-rotate-90\@md {
    --rotate: -90deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-180\@md,
  .hover\:-rotate-180\@md:hover,
  .group:hover .group-hover\:-rotate-180\@md {
    --rotate: -180deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-270\@md,
  .hover\:-rotate-270\@md:hover,
  .group:hover .group-hover\:-rotate-270\@md {
    --rotate: -270deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }
}

@media (min-width: 1024px) {

  .translate-x-0\@lg,
  .hover\:translate-x-0\@lg:hover,
  .group:hover .group-hover\:translate-x-0\@lg {
    --translate-x: 0;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-0\@lg,
  .hover\:translate-y-0\@lg:hover,
  .group:hover .group-hover\:translate-y-0\@lg {
    --translate-y: 0;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-1\@lg,
  .hover\:translate-x-1\@lg:hover,
  .group:hover .group-hover\:translate-x-1\@lg {
    --translate-x: 0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-1\@lg,
  .hover\:translate-y-1\@lg:hover,
  .group:hover .group-hover\:translate-y-1\@lg {
    --translate-y: 0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-2\@lg,
  .hover\:translate-x-2\@lg:hover,
  .group:hover .group-hover\:translate-x-2\@lg {
    --translate-x: 0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-2\@lg,
  .hover\:translate-y-2\@lg:hover,
  .group:hover .group-hover\:translate-y-2\@lg {
    --translate-y: 0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-3\@lg,
  .hover\:translate-x-3\@lg:hover,
  .group:hover .group-hover\:translate-x-3\@lg {
    --translate-x: 0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-3\@lg,
  .hover\:translate-y-3\@lg:hover,
  .group:hover .group-hover\:translate-y-3\@lg {
    --translate-y: 0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-4\@lg,
  .hover\:translate-x-4\@lg:hover,
  .group:hover .group-hover\:translate-x-4\@lg {
    --translate-x: 1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-4\@lg,
  .hover\:translate-y-4\@lg:hover,
  .group:hover .group-hover\:translate-y-4\@lg {
    --translate-y: 1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-5\@lg,
  .hover\:translate-x-5\@lg:hover,
  .group:hover .group-hover\:translate-x-5\@lg {
    --translate-x: 1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-5\@lg,
  .hover\:translate-y-5\@lg:hover,
  .group:hover .group-hover\:translate-y-5\@lg {
    --translate-y: 1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-6\@lg,
  .hover\:translate-x-6\@lg:hover,
  .group:hover .group-hover\:translate-x-6\@lg {
    --translate-x: 1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-6\@lg,
  .hover\:translate-y-6\@lg:hover,
  .group:hover .group-hover\:translate-y-6\@lg {
    --translate-y: 1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-8\@lg,
  .hover\:translate-x-8\@lg:hover,
  .group:hover .group-hover\:translate-x-8\@lg {
    --translate-x: 2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-8\@lg,
  .hover\:translate-y-8\@lg:hover,
  .group:hover .group-hover\:translate-y-8\@lg {
    --translate-y: 2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-10\@lg,
  .hover\:translate-x-10\@lg:hover,
  .group:hover .group-hover\:translate-x-10\@lg {
    --translate-x: 2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-10\@lg,
  .hover\:translate-y-10\@lg:hover,
  .group:hover .group-hover\:translate-y-10\@lg {
    --translate-y: 2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-12\@lg,
  .hover\:translate-x-12\@lg:hover,
  .group:hover .group-hover\:translate-x-12\@lg {
    --translate-x: 3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-12\@lg,
  .hover\:translate-y-12\@lg:hover,
  .group:hover .group-hover\:translate-y-12\@lg {
    --translate-y: 3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-16\@lg,
  .hover\:translate-x-16\@lg:hover,
  .group:hover .group-hover\:translate-x-16\@lg {
    --translate-x: 4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-16\@lg,
  .hover\:translate-y-16\@lg:hover,
  .group:hover .group-hover\:translate-y-16\@lg {
    --translate-y: 4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-20\@lg,
  .hover\:translate-x-20\@lg:hover,
  .group:hover .group-hover\:translate-x-20\@lg {
    --translate-x: 5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-20\@lg,
  .hover\:translate-y-20\@lg:hover,
  .group:hover .group-hover\:translate-y-20\@lg {
    --translate-y: 5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-25p\@lg,
  .hover\:translate-x-25p\@lg:hover,
  .group:hover .group-hover\:translate-x-25p\@lg {
    --translate-x: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-25p\@lg,
  .hover\:translate-y-25p\@lg:hover,
  .group:hover .group-hover\:translate-y-25p\@lg {
    --translate-y: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-33p\@lg,
  .hover\:translate-x-33p\@lg:hover,
  .group:hover .group-hover\:translate-x-33p\@lg {
    --translate-x: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-33p\@lg,
  .hover\:translate-y-33p\@lg:hover,
  .group:hover .group-hover\:translate-y-33p\@lg {
    --translate-y: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-50p\@lg,
  .hover\:translate-x-50p\@lg:hover,
  .group:hover .group-hover\:translate-x-50p\@lg {
    --translate-x: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-50p\@lg,
  .hover\:translate-y-50p\@lg:hover,
  .group:hover .group-hover\:translate-y-50p\@lg {
    --translate-y: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-66p\@lg,
  .hover\:translate-x-66p\@lg:hover,
  .group:hover .group-hover\:translate-x-66p\@lg {
    --translate-x: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-66p\@lg,
  .hover\:translate-y-66p\@lg:hover,
  .group:hover .group-hover\:translate-y-66p\@lg {
    --translate-y: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-75p\@lg,
  .hover\:translate-x-75p\@lg:hover,
  .group:hover .group-hover\:translate-x-75p\@lg {
    --translate-x: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-75p\@lg,
  .hover\:translate-y-75p\@lg:hover,
  .group:hover .group-hover\:translate-y-75p\@lg {
    --translate-y: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-100p\@lg,
  .hover\:translate-x-100p\@lg:hover,
  .group:hover .group-hover\:translate-x-100p\@lg {
    --translate-x: 100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-100p\@lg,
  .hover\:translate-y-100p\@lg:hover,
  .group:hover .group-hover\:translate-y-100p\@lg {
    --translate-y: 100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-1\@lg,
  .hover\:-translate-x-1\@lg:hover,
  .group:hover .group-hover\:-translate-x-1\@lg {
    --translate-x: -0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-1\@lg,
  .hover\:-translate-y-1\@lg:hover,
  .group:hover .group-hover\:-translate-y-1\@lg {
    --translate-y: -0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-2\@lg,
  .hover\:-translate-x-2\@lg:hover,
  .group:hover .group-hover\:-translate-x-2\@lg {
    --translate-x: -0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-2\@lg,
  .hover\:-translate-y-2\@lg:hover,
  .group:hover .group-hover\:-translate-y-2\@lg {
    --translate-y: -0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-3\@lg,
  .hover\:-translate-x-3\@lg:hover,
  .group:hover .group-hover\:-translate-x-3\@lg {
    --translate-x: -0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-3\@lg,
  .hover\:-translate-y-3\@lg:hover,
  .group:hover .group-hover\:-translate-y-3\@lg {
    --translate-y: -0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-4\@lg,
  .hover\:-translate-x-4\@lg:hover,
  .group:hover .group-hover\:-translate-x-4\@lg {
    --translate-x: -1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-4\@lg,
  .hover\:-translate-y-4\@lg:hover,
  .group:hover .group-hover\:-translate-y-4\@lg {
    --translate-y: -1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-5\@lg,
  .hover\:-translate-x-5\@lg:hover,
  .group:hover .group-hover\:-translate-x-5\@lg {
    --translate-x: -1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-5\@lg,
  .hover\:-translate-y-5\@lg:hover,
  .group:hover .group-hover\:-translate-y-5\@lg {
    --translate-y: -1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-6\@lg,
  .hover\:-translate-x-6\@lg:hover,
  .group:hover .group-hover\:-translate-x-6\@lg {
    --translate-x: -1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-6\@lg,
  .hover\:-translate-y-6\@lg:hover,
  .group:hover .group-hover\:-translate-y-6\@lg {
    --translate-y: -1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-8\@lg,
  .hover\:-translate-x-8\@lg:hover,
  .group:hover .group-hover\:-translate-x-8\@lg {
    --translate-x: -2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-8\@lg,
  .hover\:-translate-y-8\@lg:hover,
  .group:hover .group-hover\:-translate-y-8\@lg {
    --translate-y: -2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-10\@lg,
  .hover\:-translate-x-10\@lg:hover,
  .group:hover .group-hover\:-translate-x-10\@lg {
    --translate-x: -2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-10\@lg,
  .hover\:-translate-y-10\@lg:hover,
  .group:hover .group-hover\:-translate-y-10\@lg {
    --translate-y: -2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-12\@lg,
  .hover\:-translate-x-12\@lg:hover,
  .group:hover .group-hover\:-translate-x-12\@lg {
    --translate-x: -3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-12\@lg,
  .hover\:-translate-y-12\@lg:hover,
  .group:hover .group-hover\:-translate-y-12\@lg {
    --translate-y: -3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-16\@lg,
  .hover\:-translate-x-16\@lg:hover,
  .group:hover .group-hover\:-translate-x-16\@lg {
    --translate-x: -4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-16\@lg,
  .hover\:-translate-y-16\@lg:hover,
  .group:hover .group-hover\:-translate-y-16\@lg {
    --translate-y: -4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-20\@lg,
  .hover\:-translate-x-20\@lg:hover,
  .group:hover .group-hover\:-translate-x-20\@lg {
    --translate-x: -5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-20\@lg,
  .hover\:-translate-y-20\@lg:hover,
  .group:hover .group-hover\:-translate-y-20\@lg {
    --translate-y: -5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-25p\@lg,
  .hover\:-translate-x-25p\@lg:hover,
  .group:hover .group-hover\:-translate-x-25p\@lg {
    --translate-x: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-25p\@lg,
  .hover\:-translate-y-25p\@lg:hover,
  .group:hover .group-hover\:-translate-y-25p\@lg {
    --translate-y: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-33p\@lg,
  .hover\:-translate-x-33p\@lg:hover,
  .group:hover .group-hover\:-translate-x-33p\@lg {
    --translate-x: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-33p\@lg,
  .hover\:-translate-y-33p\@lg:hover,
  .group:hover .group-hover\:-translate-y-33p\@lg {
    --translate-y: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-50p\@lg,
  .hover\:-translate-x-50p\@lg:hover,
  .group:hover .group-hover\:-translate-x-50p\@lg {
    --translate-x: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-50p\@lg,
  .hover\:-translate-y-50p\@lg:hover,
  .group:hover .group-hover\:-translate-y-50p\@lg {
    --translate-y: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-66p\@lg,
  .hover\:-translate-x-66p\@lg:hover,
  .group:hover .group-hover\:-translate-x-66p\@lg {
    --translate-x: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-66p\@lg,
  .hover\:-translate-y-66p\@lg:hover,
  .group:hover .group-hover\:-translate-y-66p\@lg {
    --translate-y: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-75p\@lg,
  .hover\:-translate-x-75p\@lg:hover,
  .group:hover .group-hover\:-translate-x-75p\@lg {
    --translate-x: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-75p\@lg,
  .hover\:-translate-y-75p\@lg:hover,
  .group:hover .group-hover\:-translate-y-75p\@lg {
    --translate-y: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-100p\@lg,
  .hover\:-translate-x-100p\@lg:hover,
  .group:hover .group-hover\:-translate-x-100p\@lg {
    --translate-x: -100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-100p\@lg,
  .hover\:-translate-y-100p\@lg:hover,
  .group:hover .group-hover\:-translate-y-100p\@lg {
    --translate-y: -100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-0\@lg,
  .hover\:scale-0\@lg:hover,
  .group:hover .group-hover\:scale-0\@lg {
    --scale-x: 0;
    --scale-y: 0;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-50\@lg,
  .hover\:scale-50\@lg:hover,
  .group:hover .group-hover\:scale-50\@lg {
    --scale-x: 0.5;
    --scale-y: 0.5;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-75\@lg,
  .hover\:scale-75\@lg:hover,
  .group:hover .group-hover\:scale-75\@lg {
    --scale-x: 0.75;
    --scale-y: 0.75;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-90\@lg,
  .hover\:scale-90\@lg:hover,
  .group:hover .group-hover\:scale-90\@lg {
    --scale-x: 0.9;
    --scale-y: 0.9;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-95\@lg,
  .hover\:scale-95\@lg:hover,
  .group:hover .group-hover\:scale-95\@lg {
    --scale-x: 0.95;
    --scale-y: 0.95;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-100\@lg,
  .hover\:scale-100\@lg:hover,
  .group:hover .group-hover\:scale-100\@lg {
    --scale-x: 1;
    --scale-y: 1;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-105\@lg,
  .hover\:scale-105\@lg:hover,
  .group:hover .group-hover\:scale-105\@lg {
    --scale-x: 1.05;
    --scale-y: 1.05;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-110\@lg,
  .hover\:scale-110\@lg:hover,
  .group:hover .group-hover\:scale-110\@lg {
    --scale-x: 1.1;
    --scale-y: 1.1;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-125\@lg,
  .hover\:scale-125\@lg:hover,
  .group:hover .group-hover\:scale-125\@lg {
    --scale-x: 1.25;
    --scale-y: 1.25;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-150\@lg,
  .hover\:scale-150\@lg:hover,
  .group:hover .group-hover\:scale-150\@lg {
    --scale-x: 1.5;
    --scale-y: 1.5;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-0\@lg,
  .hover\:rotate-0\@lg:hover,
  .group:hover .group-hover\:rotate-0\@lg {
    --rotate: 0deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-45\@lg,
  .hover\:rotate-45\@lg:hover,
  .group:hover .group-hover\:rotate-45\@lg {
    --rotate: 45deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-90\@lg,
  .hover\:rotate-90\@lg:hover,
  .group:hover .group-hover\:rotate-90\@lg {
    --rotate: 90deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-180\@lg,
  .hover\:rotate-180\@lg:hover,
  .group:hover .group-hover\:rotate-180\@lg {
    --rotate: 180deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-270\@lg,
  .hover\:rotate-270\@lg:hover,
  .group:hover .group-hover\:rotate-270\@lg {
    --rotate: 270deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-45\@lg,
  .hover\:-rotate-45\@lg:hover,
  .group:hover .group-hover\:-rotate-45\@lg {
    --rotate: -45deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-90\@lg,
  .hover\:-rotate-90\@lg:hover,
  .group:hover .group-hover\:-rotate-90\@lg {
    --rotate: -90deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-180\@lg,
  .hover\:-rotate-180\@lg:hover,
  .group:hover .group-hover\:-rotate-180\@lg {
    --rotate: -180deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-270\@lg,
  .hover\:-rotate-270\@lg:hover,
  .group:hover .group-hover\:-rotate-270\@lg {
    --rotate: -270deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }
}

@media (min-width: 1280px) {

  .translate-x-0\@xl,
  .hover\:translate-x-0\@xl:hover,
  .group:hover .group-hover\:translate-x-0\@xl {
    --translate-x: 0;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-0\@xl,
  .hover\:translate-y-0\@xl:hover,
  .group:hover .group-hover\:translate-y-0\@xl {
    --translate-y: 0;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-1\@xl,
  .hover\:translate-x-1\@xl:hover,
  .group:hover .group-hover\:translate-x-1\@xl {
    --translate-x: 0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-1\@xl,
  .hover\:translate-y-1\@xl:hover,
  .group:hover .group-hover\:translate-y-1\@xl {
    --translate-y: 0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-2\@xl,
  .hover\:translate-x-2\@xl:hover,
  .group:hover .group-hover\:translate-x-2\@xl {
    --translate-x: 0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-2\@xl,
  .hover\:translate-y-2\@xl:hover,
  .group:hover .group-hover\:translate-y-2\@xl {
    --translate-y: 0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-3\@xl,
  .hover\:translate-x-3\@xl:hover,
  .group:hover .group-hover\:translate-x-3\@xl {
    --translate-x: 0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-3\@xl,
  .hover\:translate-y-3\@xl:hover,
  .group:hover .group-hover\:translate-y-3\@xl {
    --translate-y: 0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-4\@xl,
  .hover\:translate-x-4\@xl:hover,
  .group:hover .group-hover\:translate-x-4\@xl {
    --translate-x: 1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-4\@xl,
  .hover\:translate-y-4\@xl:hover,
  .group:hover .group-hover\:translate-y-4\@xl {
    --translate-y: 1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-5\@xl,
  .hover\:translate-x-5\@xl:hover,
  .group:hover .group-hover\:translate-x-5\@xl {
    --translate-x: 1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-5\@xl,
  .hover\:translate-y-5\@xl:hover,
  .group:hover .group-hover\:translate-y-5\@xl {
    --translate-y: 1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-6\@xl,
  .hover\:translate-x-6\@xl:hover,
  .group:hover .group-hover\:translate-x-6\@xl {
    --translate-x: 1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-6\@xl,
  .hover\:translate-y-6\@xl:hover,
  .group:hover .group-hover\:translate-y-6\@xl {
    --translate-y: 1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-8\@xl,
  .hover\:translate-x-8\@xl:hover,
  .group:hover .group-hover\:translate-x-8\@xl {
    --translate-x: 2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-8\@xl,
  .hover\:translate-y-8\@xl:hover,
  .group:hover .group-hover\:translate-y-8\@xl {
    --translate-y: 2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-10\@xl,
  .hover\:translate-x-10\@xl:hover,
  .group:hover .group-hover\:translate-x-10\@xl {
    --translate-x: 2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-10\@xl,
  .hover\:translate-y-10\@xl:hover,
  .group:hover .group-hover\:translate-y-10\@xl {
    --translate-y: 2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-12\@xl,
  .hover\:translate-x-12\@xl:hover,
  .group:hover .group-hover\:translate-x-12\@xl {
    --translate-x: 3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-12\@xl,
  .hover\:translate-y-12\@xl:hover,
  .group:hover .group-hover\:translate-y-12\@xl {
    --translate-y: 3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-16\@xl,
  .hover\:translate-x-16\@xl:hover,
  .group:hover .group-hover\:translate-x-16\@xl {
    --translate-x: 4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-16\@xl,
  .hover\:translate-y-16\@xl:hover,
  .group:hover .group-hover\:translate-y-16\@xl {
    --translate-y: 4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-20\@xl,
  .hover\:translate-x-20\@xl:hover,
  .group:hover .group-hover\:translate-x-20\@xl {
    --translate-x: 5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-20\@xl,
  .hover\:translate-y-20\@xl:hover,
  .group:hover .group-hover\:translate-y-20\@xl {
    --translate-y: 5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-25p\@xl,
  .hover\:translate-x-25p\@xl:hover,
  .group:hover .group-hover\:translate-x-25p\@xl {
    --translate-x: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-25p\@xl,
  .hover\:translate-y-25p\@xl:hover,
  .group:hover .group-hover\:translate-y-25p\@xl {
    --translate-y: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-33p\@xl,
  .hover\:translate-x-33p\@xl:hover,
  .group:hover .group-hover\:translate-x-33p\@xl {
    --translate-x: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-33p\@xl,
  .hover\:translate-y-33p\@xl:hover,
  .group:hover .group-hover\:translate-y-33p\@xl {
    --translate-y: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-50p\@xl,
  .hover\:translate-x-50p\@xl:hover,
  .group:hover .group-hover\:translate-x-50p\@xl {
    --translate-x: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-50p\@xl,
  .hover\:translate-y-50p\@xl:hover,
  .group:hover .group-hover\:translate-y-50p\@xl {
    --translate-y: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-66p\@xl,
  .hover\:translate-x-66p\@xl:hover,
  .group:hover .group-hover\:translate-x-66p\@xl {
    --translate-x: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-66p\@xl,
  .hover\:translate-y-66p\@xl:hover,
  .group:hover .group-hover\:translate-y-66p\@xl {
    --translate-y: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-75p\@xl,
  .hover\:translate-x-75p\@xl:hover,
  .group:hover .group-hover\:translate-x-75p\@xl {
    --translate-x: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-75p\@xl,
  .hover\:translate-y-75p\@xl:hover,
  .group:hover .group-hover\:translate-y-75p\@xl {
    --translate-y: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-100p\@xl,
  .hover\:translate-x-100p\@xl:hover,
  .group:hover .group-hover\:translate-x-100p\@xl {
    --translate-x: 100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-100p\@xl,
  .hover\:translate-y-100p\@xl:hover,
  .group:hover .group-hover\:translate-y-100p\@xl {
    --translate-y: 100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-1\@xl,
  .hover\:-translate-x-1\@xl:hover,
  .group:hover .group-hover\:-translate-x-1\@xl {
    --translate-x: -0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-1\@xl,
  .hover\:-translate-y-1\@xl:hover,
  .group:hover .group-hover\:-translate-y-1\@xl {
    --translate-y: -0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-2\@xl,
  .hover\:-translate-x-2\@xl:hover,
  .group:hover .group-hover\:-translate-x-2\@xl {
    --translate-x: -0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-2\@xl,
  .hover\:-translate-y-2\@xl:hover,
  .group:hover .group-hover\:-translate-y-2\@xl {
    --translate-y: -0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-3\@xl,
  .hover\:-translate-x-3\@xl:hover,
  .group:hover .group-hover\:-translate-x-3\@xl {
    --translate-x: -0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-3\@xl,
  .hover\:-translate-y-3\@xl:hover,
  .group:hover .group-hover\:-translate-y-3\@xl {
    --translate-y: -0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-4\@xl,
  .hover\:-translate-x-4\@xl:hover,
  .group:hover .group-hover\:-translate-x-4\@xl {
    --translate-x: -1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-4\@xl,
  .hover\:-translate-y-4\@xl:hover,
  .group:hover .group-hover\:-translate-y-4\@xl {
    --translate-y: -1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-5\@xl,
  .hover\:-translate-x-5\@xl:hover,
  .group:hover .group-hover\:-translate-x-5\@xl {
    --translate-x: -1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-5\@xl,
  .hover\:-translate-y-5\@xl:hover,
  .group:hover .group-hover\:-translate-y-5\@xl {
    --translate-y: -1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-6\@xl,
  .hover\:-translate-x-6\@xl:hover,
  .group:hover .group-hover\:-translate-x-6\@xl {
    --translate-x: -1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-6\@xl,
  .hover\:-translate-y-6\@xl:hover,
  .group:hover .group-hover\:-translate-y-6\@xl {
    --translate-y: -1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-8\@xl,
  .hover\:-translate-x-8\@xl:hover,
  .group:hover .group-hover\:-translate-x-8\@xl {
    --translate-x: -2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-8\@xl,
  .hover\:-translate-y-8\@xl:hover,
  .group:hover .group-hover\:-translate-y-8\@xl {
    --translate-y: -2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-10\@xl,
  .hover\:-translate-x-10\@xl:hover,
  .group:hover .group-hover\:-translate-x-10\@xl {
    --translate-x: -2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-10\@xl,
  .hover\:-translate-y-10\@xl:hover,
  .group:hover .group-hover\:-translate-y-10\@xl {
    --translate-y: -2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-12\@xl,
  .hover\:-translate-x-12\@xl:hover,
  .group:hover .group-hover\:-translate-x-12\@xl {
    --translate-x: -3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-12\@xl,
  .hover\:-translate-y-12\@xl:hover,
  .group:hover .group-hover\:-translate-y-12\@xl {
    --translate-y: -3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-16\@xl,
  .hover\:-translate-x-16\@xl:hover,
  .group:hover .group-hover\:-translate-x-16\@xl {
    --translate-x: -4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-16\@xl,
  .hover\:-translate-y-16\@xl:hover,
  .group:hover .group-hover\:-translate-y-16\@xl {
    --translate-y: -4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-20\@xl,
  .hover\:-translate-x-20\@xl:hover,
  .group:hover .group-hover\:-translate-x-20\@xl {
    --translate-x: -5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-20\@xl,
  .hover\:-translate-y-20\@xl:hover,
  .group:hover .group-hover\:-translate-y-20\@xl {
    --translate-y: -5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-25p\@xl,
  .hover\:-translate-x-25p\@xl:hover,
  .group:hover .group-hover\:-translate-x-25p\@xl {
    --translate-x: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-25p\@xl,
  .hover\:-translate-y-25p\@xl:hover,
  .group:hover .group-hover\:-translate-y-25p\@xl {
    --translate-y: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-33p\@xl,
  .hover\:-translate-x-33p\@xl:hover,
  .group:hover .group-hover\:-translate-x-33p\@xl {
    --translate-x: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-33p\@xl,
  .hover\:-translate-y-33p\@xl:hover,
  .group:hover .group-hover\:-translate-y-33p\@xl {
    --translate-y: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-50p\@xl,
  .hover\:-translate-x-50p\@xl:hover,
  .group:hover .group-hover\:-translate-x-50p\@xl {
    --translate-x: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-50p\@xl,
  .hover\:-translate-y-50p\@xl:hover,
  .group:hover .group-hover\:-translate-y-50p\@xl {
    --translate-y: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-66p\@xl,
  .hover\:-translate-x-66p\@xl:hover,
  .group:hover .group-hover\:-translate-x-66p\@xl {
    --translate-x: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-66p\@xl,
  .hover\:-translate-y-66p\@xl:hover,
  .group:hover .group-hover\:-translate-y-66p\@xl {
    --translate-y: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-75p\@xl,
  .hover\:-translate-x-75p\@xl:hover,
  .group:hover .group-hover\:-translate-x-75p\@xl {
    --translate-x: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-75p\@xl,
  .hover\:-translate-y-75p\@xl:hover,
  .group:hover .group-hover\:-translate-y-75p\@xl {
    --translate-y: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-100p\@xl,
  .hover\:-translate-x-100p\@xl:hover,
  .group:hover .group-hover\:-translate-x-100p\@xl {
    --translate-x: -100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-100p\@xl,
  .hover\:-translate-y-100p\@xl:hover,
  .group:hover .group-hover\:-translate-y-100p\@xl {
    --translate-y: -100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-0\@xl,
  .hover\:scale-0\@xl:hover,
  .group:hover .group-hover\:scale-0\@xl {
    --scale-x: 0;
    --scale-y: 0;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-50\@xl,
  .hover\:scale-50\@xl:hover,
  .group:hover .group-hover\:scale-50\@xl {
    --scale-x: 0.5;
    --scale-y: 0.5;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-75\@xl,
  .hover\:scale-75\@xl:hover,
  .group:hover .group-hover\:scale-75\@xl {
    --scale-x: 0.75;
    --scale-y: 0.75;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-90\@xl,
  .hover\:scale-90\@xl:hover,
  .group:hover .group-hover\:scale-90\@xl {
    --scale-x: 0.9;
    --scale-y: 0.9;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-95\@xl,
  .hover\:scale-95\@xl:hover,
  .group:hover .group-hover\:scale-95\@xl {
    --scale-x: 0.95;
    --scale-y: 0.95;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-100\@xl,
  .hover\:scale-100\@xl:hover,
  .group:hover .group-hover\:scale-100\@xl {
    --scale-x: 1;
    --scale-y: 1;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-105\@xl,
  .hover\:scale-105\@xl:hover,
  .group:hover .group-hover\:scale-105\@xl {
    --scale-x: 1.05;
    --scale-y: 1.05;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-110\@xl,
  .hover\:scale-110\@xl:hover,
  .group:hover .group-hover\:scale-110\@xl {
    --scale-x: 1.1;
    --scale-y: 1.1;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-125\@xl,
  .hover\:scale-125\@xl:hover,
  .group:hover .group-hover\:scale-125\@xl {
    --scale-x: 1.25;
    --scale-y: 1.25;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-150\@xl,
  .hover\:scale-150\@xl:hover,
  .group:hover .group-hover\:scale-150\@xl {
    --scale-x: 1.5;
    --scale-y: 1.5;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-0\@xl,
  .hover\:rotate-0\@xl:hover,
  .group:hover .group-hover\:rotate-0\@xl {
    --rotate: 0deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-45\@xl,
  .hover\:rotate-45\@xl:hover,
  .group:hover .group-hover\:rotate-45\@xl {
    --rotate: 45deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-90\@xl,
  .hover\:rotate-90\@xl:hover,
  .group:hover .group-hover\:rotate-90\@xl {
    --rotate: 90deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-180\@xl,
  .hover\:rotate-180\@xl:hover,
  .group:hover .group-hover\:rotate-180\@xl {
    --rotate: 180deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-270\@xl,
  .hover\:rotate-270\@xl:hover,
  .group:hover .group-hover\:rotate-270\@xl {
    --rotate: 270deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-45\@xl,
  .hover\:-rotate-45\@xl:hover,
  .group:hover .group-hover\:-rotate-45\@xl {
    --rotate: -45deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-90\@xl,
  .hover\:-rotate-90\@xl:hover,
  .group:hover .group-hover\:-rotate-90\@xl {
    --rotate: -90deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-180\@xl,
  .hover\:-rotate-180\@xl:hover,
  .group:hover .group-hover\:-rotate-180\@xl {
    --rotate: -180deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-270\@xl,
  .hover\:-rotate-270\@xl:hover,
  .group:hover .group-hover\:-rotate-270\@xl {
    --rotate: -270deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }
}

@media (min-width: 1536px) {

  .translate-x-0\@2xl,
  .hover\:translate-x-0\@2xl:hover,
  .group:hover .group-hover\:translate-x-0\@2xl {
    --translate-x: 0;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-0\@2xl,
  .hover\:translate-y-0\@2xl:hover,
  .group:hover .group-hover\:translate-y-0\@2xl {
    --translate-y: 0;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-1\@2xl,
  .hover\:translate-x-1\@2xl:hover,
  .group:hover .group-hover\:translate-x-1\@2xl {
    --translate-x: 0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-1\@2xl,
  .hover\:translate-y-1\@2xl:hover,
  .group:hover .group-hover\:translate-y-1\@2xl {
    --translate-y: 0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-2\@2xl,
  .hover\:translate-x-2\@2xl:hover,
  .group:hover .group-hover\:translate-x-2\@2xl {
    --translate-x: 0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-2\@2xl,
  .hover\:translate-y-2\@2xl:hover,
  .group:hover .group-hover\:translate-y-2\@2xl {
    --translate-y: 0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-3\@2xl,
  .hover\:translate-x-3\@2xl:hover,
  .group:hover .group-hover\:translate-x-3\@2xl {
    --translate-x: 0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-3\@2xl,
  .hover\:translate-y-3\@2xl:hover,
  .group:hover .group-hover\:translate-y-3\@2xl {
    --translate-y: 0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-4\@2xl,
  .hover\:translate-x-4\@2xl:hover,
  .group:hover .group-hover\:translate-x-4\@2xl {
    --translate-x: 1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-4\@2xl,
  .hover\:translate-y-4\@2xl:hover,
  .group:hover .group-hover\:translate-y-4\@2xl {
    --translate-y: 1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-5\@2xl,
  .hover\:translate-x-5\@2xl:hover,
  .group:hover .group-hover\:translate-x-5\@2xl {
    --translate-x: 1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-5\@2xl,
  .hover\:translate-y-5\@2xl:hover,
  .group:hover .group-hover\:translate-y-5\@2xl {
    --translate-y: 1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-6\@2xl,
  .hover\:translate-x-6\@2xl:hover,
  .group:hover .group-hover\:translate-x-6\@2xl {
    --translate-x: 1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-6\@2xl,
  .hover\:translate-y-6\@2xl:hover,
  .group:hover .group-hover\:translate-y-6\@2xl {
    --translate-y: 1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-8\@2xl,
  .hover\:translate-x-8\@2xl:hover,
  .group:hover .group-hover\:translate-x-8\@2xl {
    --translate-x: 2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-8\@2xl,
  .hover\:translate-y-8\@2xl:hover,
  .group:hover .group-hover\:translate-y-8\@2xl {
    --translate-y: 2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-10\@2xl,
  .hover\:translate-x-10\@2xl:hover,
  .group:hover .group-hover\:translate-x-10\@2xl {
    --translate-x: 2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-10\@2xl,
  .hover\:translate-y-10\@2xl:hover,
  .group:hover .group-hover\:translate-y-10\@2xl {
    --translate-y: 2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-12\@2xl,
  .hover\:translate-x-12\@2xl:hover,
  .group:hover .group-hover\:translate-x-12\@2xl {
    --translate-x: 3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-12\@2xl,
  .hover\:translate-y-12\@2xl:hover,
  .group:hover .group-hover\:translate-y-12\@2xl {
    --translate-y: 3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-16\@2xl,
  .hover\:translate-x-16\@2xl:hover,
  .group:hover .group-hover\:translate-x-16\@2xl {
    --translate-x: 4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-16\@2xl,
  .hover\:translate-y-16\@2xl:hover,
  .group:hover .group-hover\:translate-y-16\@2xl {
    --translate-y: 4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-20\@2xl,
  .hover\:translate-x-20\@2xl:hover,
  .group:hover .group-hover\:translate-x-20\@2xl {
    --translate-x: 5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-20\@2xl,
  .hover\:translate-y-20\@2xl:hover,
  .group:hover .group-hover\:translate-y-20\@2xl {
    --translate-y: 5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-25p\@2xl,
  .hover\:translate-x-25p\@2xl:hover,
  .group:hover .group-hover\:translate-x-25p\@2xl {
    --translate-x: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-25p\@2xl,
  .hover\:translate-y-25p\@2xl:hover,
  .group:hover .group-hover\:translate-y-25p\@2xl {
    --translate-y: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-33p\@2xl,
  .hover\:translate-x-33p\@2xl:hover,
  .group:hover .group-hover\:translate-x-33p\@2xl {
    --translate-x: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-33p\@2xl,
  .hover\:translate-y-33p\@2xl:hover,
  .group:hover .group-hover\:translate-y-33p\@2xl {
    --translate-y: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-50p\@2xl,
  .hover\:translate-x-50p\@2xl:hover,
  .group:hover .group-hover\:translate-x-50p\@2xl {
    --translate-x: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-50p\@2xl,
  .hover\:translate-y-50p\@2xl:hover,
  .group:hover .group-hover\:translate-y-50p\@2xl {
    --translate-y: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-66p\@2xl,
  .hover\:translate-x-66p\@2xl:hover,
  .group:hover .group-hover\:translate-x-66p\@2xl {
    --translate-x: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-66p\@2xl,
  .hover\:translate-y-66p\@2xl:hover,
  .group:hover .group-hover\:translate-y-66p\@2xl {
    --translate-y: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-75p\@2xl,
  .hover\:translate-x-75p\@2xl:hover,
  .group:hover .group-hover\:translate-x-75p\@2xl {
    --translate-x: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-75p\@2xl,
  .hover\:translate-y-75p\@2xl:hover,
  .group:hover .group-hover\:translate-y-75p\@2xl {
    --translate-y: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-100p\@2xl,
  .hover\:translate-x-100p\@2xl:hover,
  .group:hover .group-hover\:translate-x-100p\@2xl {
    --translate-x: 100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .translate-x-100p\@2xl,
  .hover\:translate-y-100p\@2xl:hover,
  .group:hover .group-hover\:translate-y-100p\@2xl {
    --translate-y: 100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-1\@2xl,
  .hover\:-translate-x-1\@2xl:hover,
  .group:hover .group-hover\:-translate-x-1\@2xl {
    --translate-x: -0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-1\@2xl,
  .hover\:-translate-y-1\@2xl:hover,
  .group:hover .group-hover\:-translate-y-1\@2xl {
    --translate-y: -0.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-2\@2xl,
  .hover\:-translate-x-2\@2xl:hover,
  .group:hover .group-hover\:-translate-x-2\@2xl {
    --translate-x: -0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-2\@2xl,
  .hover\:-translate-y-2\@2xl:hover,
  .group:hover .group-hover\:-translate-y-2\@2xl {
    --translate-y: -0.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-3\@2xl,
  .hover\:-translate-x-3\@2xl:hover,
  .group:hover .group-hover\:-translate-x-3\@2xl {
    --translate-x: -0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-3\@2xl,
  .hover\:-translate-y-3\@2xl:hover,
  .group:hover .group-hover\:-translate-y-3\@2xl {
    --translate-y: -0.75rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-4\@2xl,
  .hover\:-translate-x-4\@2xl:hover,
  .group:hover .group-hover\:-translate-x-4\@2xl {
    --translate-x: -1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-4\@2xl,
  .hover\:-translate-y-4\@2xl:hover,
  .group:hover .group-hover\:-translate-y-4\@2xl {
    --translate-y: -1rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-5\@2xl,
  .hover\:-translate-x-5\@2xl:hover,
  .group:hover .group-hover\:-translate-x-5\@2xl {
    --translate-x: -1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-5\@2xl,
  .hover\:-translate-y-5\@2xl:hover,
  .group:hover .group-hover\:-translate-y-5\@2xl {
    --translate-y: -1.25rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-6\@2xl,
  .hover\:-translate-x-6\@2xl:hover,
  .group:hover .group-hover\:-translate-x-6\@2xl {
    --translate-x: -1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-6\@2xl,
  .hover\:-translate-y-6\@2xl:hover,
  .group:hover .group-hover\:-translate-y-6\@2xl {
    --translate-y: -1.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-8\@2xl,
  .hover\:-translate-x-8\@2xl:hover,
  .group:hover .group-hover\:-translate-x-8\@2xl {
    --translate-x: -2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-8\@2xl,
  .hover\:-translate-y-8\@2xl:hover,
  .group:hover .group-hover\:-translate-y-8\@2xl {
    --translate-y: -2rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-10\@2xl,
  .hover\:-translate-x-10\@2xl:hover,
  .group:hover .group-hover\:-translate-x-10\@2xl {
    --translate-x: -2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-10\@2xl,
  .hover\:-translate-y-10\@2xl:hover,
  .group:hover .group-hover\:-translate-y-10\@2xl {
    --translate-y: -2.5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-12\@2xl,
  .hover\:-translate-x-12\@2xl:hover,
  .group:hover .group-hover\:-translate-x-12\@2xl {
    --translate-x: -3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-12\@2xl,
  .hover\:-translate-y-12\@2xl:hover,
  .group:hover .group-hover\:-translate-y-12\@2xl {
    --translate-y: -3rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-16\@2xl,
  .hover\:-translate-x-16\@2xl:hover,
  .group:hover .group-hover\:-translate-x-16\@2xl {
    --translate-x: -4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-16\@2xl,
  .hover\:-translate-y-16\@2xl:hover,
  .group:hover .group-hover\:-translate-y-16\@2xl {
    --translate-y: -4rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-20\@2xl,
  .hover\:-translate-x-20\@2xl:hover,
  .group:hover .group-hover\:-translate-x-20\@2xl {
    --translate-x: -5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-20\@2xl,
  .hover\:-translate-y-20\@2xl:hover,
  .group:hover .group-hover\:-translate-y-20\@2xl {
    --translate-y: -5rem;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-25p\@2xl,
  .hover\:-translate-x-25p\@2xl:hover,
  .group:hover .group-hover\:-translate-x-25p\@2xl {
    --translate-x: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-25p\@2xl,
  .hover\:-translate-y-25p\@2xl:hover,
  .group:hover .group-hover\:-translate-y-25p\@2xl {
    --translate-y: 25%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-33p\@2xl,
  .hover\:-translate-x-33p\@2xl:hover,
  .group:hover .group-hover\:-translate-x-33p\@2xl {
    --translate-x: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-33p\@2xl,
  .hover\:-translate-y-33p\@2xl:hover,
  .group:hover .group-hover\:-translate-y-33p\@2xl {
    --translate-y: 33.333%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-50p\@2xl,
  .hover\:-translate-x-50p\@2xl:hover,
  .group:hover .group-hover\:-translate-x-50p\@2xl {
    --translate-x: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-50p\@2xl,
  .hover\:-translate-y-50p\@2xl:hover,
  .group:hover .group-hover\:-translate-y-50p\@2xl {
    --translate-y: 50%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-66p\@2xl,
  .hover\:-translate-x-66p\@2xl:hover,
  .group:hover .group-hover\:-translate-x-66p\@2xl {
    --translate-x: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-66p\@2xl,
  .hover\:-translate-y-66p\@2xl:hover,
  .group:hover .group-hover\:-translate-y-66p\@2xl {
    --translate-y: 66.667%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-75p\@2xl,
  .hover\:-translate-x-75p\@2xl:hover,
  .group:hover .group-hover\:-translate-x-75p\@2xl {
    --translate-x: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-75p\@2xl,
  .hover\:-translate-y-75p\@2xl:hover,
  .group:hover .group-hover\:-translate-y-75p\@2xl {
    --translate-y: 75%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-100p\@2xl,
  .hover\:-translate-x-100p\@2xl:hover,
  .group:hover .group-hover\:-translate-x-100p\@2xl {
    --translate-x: -100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-translate-x-100p\@2xl,
  .hover\:-translate-y-100p\@2xl:hover,
  .group:hover .group-hover\:-translate-y-100p\@2xl {
    --translate-y: -100%;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-0\@2xl,
  .hover\:scale-0\@2xl:hover,
  .group:hover .group-hover\:scale-0\@2xl {
    --scale-x: 0;
    --scale-y: 0;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-50\@2xl,
  .hover\:scale-50\@2xl:hover,
  .group:hover .group-hover\:scale-50\@2xl {
    --scale-x: 0.5;
    --scale-y: 0.5;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-75\@2xl,
  .hover\:scale-75\@2xl:hover,
  .group:hover .group-hover\:scale-75\@2xl {
    --scale-x: 0.75;
    --scale-y: 0.75;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-90\@2xl,
  .hover\:scale-90\@2xl:hover,
  .group:hover .group-hover\:scale-90\@2xl {
    --scale-x: 0.9;
    --scale-y: 0.9;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-95\@2xl,
  .hover\:scale-95\@2xl:hover,
  .group:hover .group-hover\:scale-95\@2xl {
    --scale-x: 0.95;
    --scale-y: 0.95;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-100\@2xl,
  .hover\:scale-100\@2xl:hover,
  .group:hover .group-hover\:scale-100\@2xl {
    --scale-x: 1;
    --scale-y: 1;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-105\@2xl,
  .hover\:scale-105\@2xl:hover,
  .group:hover .group-hover\:scale-105\@2xl {
    --scale-x: 1.05;
    --scale-y: 1.05;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-110\@2xl,
  .hover\:scale-110\@2xl:hover,
  .group:hover .group-hover\:scale-110\@2xl {
    --scale-x: 1.1;
    --scale-y: 1.1;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-125\@2xl,
  .hover\:scale-125\@2xl:hover,
  .group:hover .group-hover\:scale-125\@2xl {
    --scale-x: 1.25;
    --scale-y: 1.25;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .scale-150\@2xl,
  .hover\:scale-150\@2xl:hover,
  .group:hover .group-hover\:scale-150\@2xl {
    --scale-x: 1.5;
    --scale-y: 1.5;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-0\@2xl,
  .hover\:rotate-0\@2xl:hover,
  .group:hover .group-hover\:rotate-0\@2xl {
    --rotate: 0deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-45\@2xl,
  .hover\:rotate-45\@2xl:hover,
  .group:hover .group-hover\:rotate-45\@2xl {
    --rotate: 45deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-90\@2xl,
  .hover\:rotate-90\@2xl:hover,
  .group:hover .group-hover\:rotate-90\@2xl {
    --rotate: 90deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-180\@2xl,
  .hover\:rotate-180\@2xl:hover,
  .group:hover .group-hover\:rotate-180\@2xl {
    --rotate: 180deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .rotate-270\@2xl,
  .hover\:rotate-270\@2xl:hover,
  .group:hover .group-hover\:rotate-270\@2xl {
    --rotate: 270deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-45\@2xl,
  .hover\:-rotate-45\@2xl:hover,
  .group:hover .group-hover\:-rotate-45\@2xl {
    --rotate: -45deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-90\@2xl,
  .hover\:-rotate-90\@2xl:hover,
  .group:hover .group-hover\:-rotate-90\@2xl {
    --rotate: -90deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-180\@2xl,
  .hover\:-rotate-180\@2xl:hover,
  .group:hover .group-hover\:-rotate-180\@2xl {
    --rotate: -180deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }

  .-rotate-270\@2xl,
  .hover\:-rotate-270\@2xl:hover,
  .group:hover .group-hover\:-rotate-270\@2xl {
    --rotate: -270deg;
    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
  }
}

/**
 * Transition Utilities
 * 
 * - .transition: Default transition for common properties
 * - .transition-{property}: Transition specific properties
 * - .duration-{time}: Set transition duration
 * - .ease-{type}: Set transition timing function
 * - .delay-{time}: Set transition delay
 */
.transition-none {
  transition-property: none;
}

.transition {
  transition-property: all;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
}

.transition-opacity {
  transition-property: opacity;
}

.transition-shadow {
  transition-property: box-shadow;
}

.transition-transform {
  transition-property: transform;
}

.duration-0 {
  transition-duration: 0ms;
}

.duration-75 {
  transition-duration: 75ms;
}

.duration-100 {
  transition-duration: 100ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.duration-700 {
  transition-duration: 700ms;
}

.duration-1000 {
  transition-duration: 1000ms;
}

.ease-linear {
  transition-timing-function: linear;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear {
  transition-timing-function: linear;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.delay-0 {
  transition-delay: 0ms;
}

.delay-75 {
  transition-delay: 75ms;
}

.delay-100 {
  transition-delay: 100ms;
}

.delay-150 {
  transition-delay: 150ms;
}

.delay-200 {
  transition-delay: 200ms;
}

.delay-300 {
  transition-delay: 300ms;
}

.delay-500 {
  transition-delay: 500ms;
}

.delay-700 {
  transition-delay: 700ms;
}

.delay-1000 {
  transition-delay: 1000ms;
}

@media (min-width: 480px) {
  .transition\@xs {
    transition-property: all;
  }

  .transition-none\@xs {
    transition-property: none;
  }

  .transition\@xs {
    transition-property: all;
  }

  .transition-colors\@xs {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  }

  .transition-opacity\@xs {
    transition-property: opacity;
  }

  .transition-shadow\@xs {
    transition-property: box-shadow;
  }

  .transition-transform\@xs {
    transition-property: transform;
  }

  .duration-0\@xs {
    transition-duration: 0ms;
  }

  .duration-75\@xs {
    transition-duration: 75ms;
  }

  .duration-100\@xs {
    transition-duration: 100ms;
  }

  .duration-150\@xs {
    transition-duration: 150ms;
  }

  .duration-200\@xs {
    transition-duration: 200ms;
  }

  .duration-300\@xs {
    transition-duration: 300ms;
  }

  .duration-500\@xs {
    transition-duration: 500ms;
  }

  .duration-700\@xs {
    transition-duration: 700ms;
  }

  .duration-1000\@xs {
    transition-duration: 1000ms;
  }

  .ease-linear\@xs {
    transition-timing-function: linear;
  }

  .ease-in\@xs {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }

  .ease-out\@xs {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }

  .ease-in-out\@xs {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .delay-0\@xs {
    transition-delay: 0ms;
  }

  .delay-75\@xs {
    transition-delay: 75ms;
  }

  .delay-100\@xs {
    transition-delay: 100ms;
  }

  .delay-150\@xs {
    transition-delay: 150ms;
  }

  .delay-200\@xs {
    transition-delay: 200ms;
  }

  .delay-300\@xs {
    transition-delay: 300ms;
  }

  .delay-500\@xs {
    transition-delay: 500ms;
  }

  .delay-700\@xs {
    transition-delay: 700ms;
  }

  .delay-1000\@xs {
    transition-delay: 1000ms;
  }
}

@media (min-width: 640px) {
  .transition\@sm {
    transition-property: all;
  }

  .transition-none\@sm {
    transition-property: none;
  }

  .transition\@sm {
    transition-property: all;
  }

  .transition-colors\@sm {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  }

  .transition-opacity\@sm {
    transition-property: opacity;
  }

  .transition-shadow\@sm {
    transition-property: box-shadow;
  }

  .transition-transform\@sm {
    transition-property: transform;
  }

  .duration-0\@sm {
    transition-duration: 0ms;
  }

  .duration-75\@sm {
    transition-duration: 75ms;
  }

  .duration-100\@sm {
    transition-duration: 100ms;
  }

  .duration-150\@sm {
    transition-duration: 150ms;
  }

  .duration-200\@sm {
    transition-duration: 200ms;
  }

  .duration-300\@sm {
    transition-duration: 300ms;
  }

  .duration-500\@sm {
    transition-duration: 500ms;
  }

  .duration-700\@sm {
    transition-duration: 700ms;
  }

  .duration-1000\@sm {
    transition-duration: 1000ms;
  }

  .ease-linear\@sm {
    transition-timing-function: linear;
  }

  .ease-in\@sm {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }

  .ease-out\@sm {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }

  .ease-in-out\@sm {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .delay-0\@sm {
    transition-delay: 0ms;
  }

  .delay-75\@sm {
    transition-delay: 75ms;
  }

  .delay-100\@sm {
    transition-delay: 100ms;
  }

  .delay-150\@sm {
    transition-delay: 150ms;
  }

  .delay-200\@sm {
    transition-delay: 200ms;
  }

  .delay-300\@sm {
    transition-delay: 300ms;
  }

  .delay-500\@sm {
    transition-delay: 500ms;
  }

  .delay-700\@sm {
    transition-delay: 700ms;
  }

  .delay-1000\@sm {
    transition-delay: 1000ms;
  }
}

@media (min-width: 768px) {
  .transition\@md {
    transition-property: all;
  }

  .transition-none\@md {
    transition-property: none;
  }

  .transition\@md {
    transition-property: all;
  }

  .transition-colors\@md {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  }

  .transition-opacity\@md {
    transition-property: opacity;
  }

  .transition-shadow\@md {
    transition-property: box-shadow;
  }

  .transition-transform\@md {
    transition-property: transform;
  }

  .duration-0\@md {
    transition-duration: 0ms;
  }

  .duration-75\@md {
    transition-duration: 75ms;
  }

  .duration-100\@md {
    transition-duration: 100ms;
  }

  .duration-150\@md {
    transition-duration: 150ms;
  }

  .duration-200\@md {
    transition-duration: 200ms;
  }

  .duration-300\@md {
    transition-duration: 300ms;
  }

  .duration-500\@md {
    transition-duration: 500ms;
  }

  .duration-700\@md {
    transition-duration: 700ms;
  }

  .duration-1000\@md {
    transition-duration: 1000ms;
  }

  .ease-linear\@md {
    transition-timing-function: linear;
  }

  .ease-in\@md {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }

  .ease-out\@md {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }

  .ease-in-out\@md {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .delay-0\@md {
    transition-delay: 0ms;
  }

  .delay-75\@md {
    transition-delay: 75ms;
  }

  .delay-100\@md {
    transition-delay: 100ms;
  }

  .delay-150\@md {
    transition-delay: 150ms;
  }

  .delay-200\@md {
    transition-delay: 200ms;
  }

  .delay-300\@md {
    transition-delay: 300ms;
  }

  .delay-500\@md {
    transition-delay: 500ms;
  }

  .delay-700\@md {
    transition-delay: 700ms;
  }

  .delay-1000\@md {
    transition-delay: 1000ms;
  }
}

@media (min-width: 1024px) {
  .transition\@lg {
    transition-property: all;
  }

  .transition-none\@lg {
    transition-property: none;
  }

  .transition\@lg {
    transition-property: all;
  }

  .transition-colors\@lg {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  }

  .transition-opacity\@lg {
    transition-property: opacity;
  }

  .transition-shadow\@lg {
    transition-property: box-shadow;
  }

  .transition-transform\@lg {
    transition-property: transform;
  }

  .duration-0\@lg {
    transition-duration: 0ms;
  }

  .duration-75\@lg {
    transition-duration: 75ms;
  }

  .duration-100\@lg {
    transition-duration: 100ms;
  }

  .duration-150\@lg {
    transition-duration: 150ms;
  }

  .duration-200\@lg {
    transition-duration: 200ms;
  }

  .duration-300\@lg {
    transition-duration: 300ms;
  }

  .duration-500\@lg {
    transition-duration: 500ms;
  }

  .duration-700\@lg {
    transition-duration: 700ms;
  }

  .duration-1000\@lg {
    transition-duration: 1000ms;
  }

  .ease-linear\@lg {
    transition-timing-function: linear;
  }

  .ease-in\@lg {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }

  .ease-out\@lg {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }

  .ease-in-out\@lg {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .delay-0\@lg {
    transition-delay: 0ms;
  }

  .delay-75\@lg {
    transition-delay: 75ms;
  }

  .delay-100\@lg {
    transition-delay: 100ms;
  }

  .delay-150\@lg {
    transition-delay: 150ms;
  }

  .delay-200\@lg {
    transition-delay: 200ms;
  }

  .delay-300\@lg {
    transition-delay: 300ms;
  }

  .delay-500\@lg {
    transition-delay: 500ms;
  }

  .delay-700\@lg {
    transition-delay: 700ms;
  }

  .delay-1000\@lg {
    transition-delay: 1000ms;
  }
}

@media (min-width: 1280px) {
  .transition\@xl {
    transition-property: all;
  }

  .transition-none\@xl {
    transition-property: none;
  }

  .transition\@xl {
    transition-property: all;
  }

  .transition-colors\@xl {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  }

  .transition-opacity\@xl {
    transition-property: opacity;
  }

  .transition-shadow\@xl {
    transition-property: box-shadow;
  }

  .transition-transform\@xl {
    transition-property: transform;
  }

  .duration-0\@xl {
    transition-duration: 0ms;
  }

  .duration-75\@xl {
    transition-duration: 75ms;
  }

  .duration-100\@xl {
    transition-duration: 100ms;
  }

  .duration-150\@xl {
    transition-duration: 150ms;
  }

  .duration-200\@xl {
    transition-duration: 200ms;
  }

  .duration-300\@xl {
    transition-duration: 300ms;
  }

  .duration-500\@xl {
    transition-duration: 500ms;
  }

  .duration-700\@xl {
    transition-duration: 700ms;
  }

  .duration-1000\@xl {
    transition-duration: 1000ms;
  }

  .ease-linear\@xl {
    transition-timing-function: linear;
  }

  .ease-in\@xl {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }

  .ease-out\@xl {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }

  .ease-in-out\@xl {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .delay-0\@xl {
    transition-delay: 0ms;
  }

  .delay-75\@xl {
    transition-delay: 75ms;
  }

  .delay-100\@xl {
    transition-delay: 100ms;
  }

  .delay-150\@xl {
    transition-delay: 150ms;
  }

  .delay-200\@xl {
    transition-delay: 200ms;
  }

  .delay-300\@xl {
    transition-delay: 300ms;
  }

  .delay-500\@xl {
    transition-delay: 500ms;
  }

  .delay-700\@xl {
    transition-delay: 700ms;
  }

  .delay-1000\@xl {
    transition-delay: 1000ms;
  }
}

@media (min-width: 1536px) {
  .transition\@2xl {
    transition-property: all;
  }

  .transition-none\@2xl {
    transition-property: none;
  }

  .transition\@2xl {
    transition-property: all;
  }

  .transition-colors\@2xl {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  }

  .transition-opacity\@2xl {
    transition-property: opacity;
  }

  .transition-shadow\@2xl {
    transition-property: box-shadow;
  }

  .transition-transform\@2xl {
    transition-property: transform;
  }

  .duration-0\@2xl {
    transition-duration: 0ms;
  }

  .duration-75\@2xl {
    transition-duration: 75ms;
  }

  .duration-100\@2xl {
    transition-duration: 100ms;
  }

  .duration-150\@2xl {
    transition-duration: 150ms;
  }

  .duration-200\@2xl {
    transition-duration: 200ms;
  }

  .duration-300\@2xl {
    transition-duration: 300ms;
  }

  .duration-500\@2xl {
    transition-duration: 500ms;
  }

  .duration-700\@2xl {
    transition-duration: 700ms;
  }

  .duration-1000\@2xl {
    transition-duration: 1000ms;
  }

  .ease-linear\@2xl {
    transition-timing-function: linear;
  }

  .ease-in\@2xl {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }

  .ease-out\@2xl {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }

  .ease-in-out\@2xl {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .delay-0\@2xl {
    transition-delay: 0ms;
  }

  .delay-75\@2xl {
    transition-delay: 75ms;
  }

  .delay-100\@2xl {
    transition-delay: 100ms;
  }

  .delay-150\@2xl {
    transition-delay: 150ms;
  }

  .delay-200\@2xl {
    transition-delay: 200ms;
  }

  .delay-300\@2xl {
    transition-delay: 300ms;
  }

  .delay-500\@2xl {
    transition-delay: 500ms;
  }

  .delay-700\@2xl {
    transition-delay: 700ms;
  }

  .delay-1000\@2xl {
    transition-delay: 1000ms;
  }
}

/**
 * Typography Utilities
 * 
 * Classes:
 * - Font Size: .text-xs, .text-sm, .text-base, etc.
 * - Font Weight: .font-thin, .font-normal, .font-bold, etc.
 * - Line Height: .leading-none, .leading-tight, .leading-normal, etc.
 * - Text Align: .text-left, .text-center, .text-right, .text-justify
 * - Text Transform: .uppercase, .lowercase, .capitalize, .normal-case
 * - Text Style: .italic, .not-italic
 * - Text Decoration: .underline, .line-through, .no-underline
 * - Text Overflow: .truncate
 * 
 * All utilities support responsive variants with @breakpoint suffix:
 * - .text-lg@md, .font-bold@lg, etc.
 */
/**
* Text size utility
* @param {string} $size - The size of the text.
*/
.text-xs {
  font-size: 0.75rem;
}

.text-sm {
  font-size: 0.875rem;
}

.text-md {
  font-size: 1rem;
}

.text-lg {
  font-size: 1.25rem;
}

.text-xl {
  font-size: 1.5rem;
}

.text-2xl {
  font-size: 1.75rem;
}

.text-3xl {
  font-size: 2rem;
}

.text-4xl {
  font-size: 2.5rem;
}

.font-thin {
  font-weight: 100;
}

.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-black {
  font-weight: 900;
}

.leading-none {
  line-height: 1;
}

.leading-tight {
  line-height: 1.25;
}

.leading-snug {
  line-height: 1.375;
}

.leading-normal {
  line-height: 1.5;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-loose {
  line-height: 2;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.normal-case {
  text-transform: none;
}

.italic {
  font-style: italic;
}

.not-italic {
  font-style: normal;
}

.underline {
  text-decoration: underline;
}

.line-through {
  text-decoration: line-through;
}

.no-underline {
  text-decoration: none;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tracking-tighter {
  letter-spacing: -0.05em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-normal {
  letter-spacing: 0;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.overflow-label {
  white-space: nowrap;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
}

.break-normal {
  overflow-wrap: normal;
  word-break: normal;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.whitespace-normal {
  white-space: normal;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre {
  white-space: pre;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

@media (min-width: 480px) {
  .text-xs\@xs {
    font-size: 0.75rem;
  }

  .text-sm\@xs {
    font-size: 0.875rem;
  }

  .text-md\@xs {
    font-size: 1rem;
  }

  .text-lg\@xs {
    font-size: 1.25rem;
  }

  .text-xl\@xs {
    font-size: 1.5rem;
  }

  .text-2xl\@xs {
    font-size: 1.75rem;
  }

  .text-3xl\@xs {
    font-size: 2rem;
  }

  .text-4xl\@xs {
    font-size: 2.5rem;
  }

  .text-xs\@xs {
    font-size: 0.75rem;
  }

  .text-sm\@xs {
    font-size: 0.875rem;
  }

  .text-md\@xs {
    font-size: 1rem;
  }

  .text-lg\@xs {
    font-size: 1.25rem;
  }

  .text-xl\@xs {
    font-size: 1.5rem;
  }

  .text-2xl\@xs {
    font-size: 1.75rem;
  }

  .text-3xl\@xs {
    font-size: 2rem;
  }

  .text-4xl\@xs {
    font-size: 2.5rem;
  }

  .font-thin\@xs {
    font-weight: 100;
  }

  .font-extralight\@xs {
    font-weight: 200;
  }

  .font-light\@xs {
    font-weight: 300;
  }

  .font-normal\@xs {
    font-weight: 400;
  }

  .font-medium\@xs {
    font-weight: 500;
  }

  .font-semibold\@xs {
    font-weight: 600;
  }

  .font-bold\@xs {
    font-weight: 700;
  }

  .font-extrabold\@xs {
    font-weight: 800;
  }

  .font-black\@xs {
    font-weight: 900;
  }

  .leading-none\@xs {
    line-height: 1;
  }

  .leading-tight\@xs {
    line-height: 1.25;
  }

  .leading-snug\@xs {
    line-height: 1.375;
  }

  .leading-normal\@xs {
    line-height: 1.5;
  }

  .leading-relaxed\@xs {
    line-height: 1.625;
  }

  .leading-loose\@xs {
    line-height: 2;
  }

  .text-left\@xs {
    text-align: left;
  }

  .text-center\@xs {
    text-align: center;
  }

  .text-right\@xs {
    text-align: right;
  }

  .text-justify\@xs {
    text-align: justify;
  }

  .uppercase\@xs {
    text-transform: uppercase;
  }

  .lowercase\@xs {
    text-transform: lowercase;
  }

  .capitalize\@xs {
    text-transform: capitalize;
  }

  .normal-case\@xs {
    text-transform: none;
  }

  .italic\@xs {
    font-style: italic;
  }

  .not-italic\@xs {
    font-style: normal;
  }

  .underline\@xs {
    text-decoration: underline;
  }

  .line-through\@xs {
    text-decoration: line-through;
  }

  .no-underline\@xs {
    text-decoration: none;
  }

  .truncate\@xs {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .truncate-2\@xs {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .truncate-3\@xs {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .truncate-4\@xs {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .truncate-5\@xs {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tracking-tighter\@xs {
    letter-spacing: -0.05em;
  }

  .tracking-tight\@xs {
    letter-spacing: -0.025em;
  }

  .tracking-normal\@xs {
    letter-spacing: 0;
  }

  .tracking-wide\@xs {
    letter-spacing: 0.025em;
  }

  .tracking-wider\@xs {
    letter-spacing: 0.05em;
  }

  .tracking-widest\@xs {
    letter-spacing: 0.1em;
  }

  .overflow-label\@xs {
    white-space: nowrap;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
  }
}

@media (min-width: 640px) {
  .text-xs\@sm {
    font-size: 0.75rem;
  }

  .text-sm\@sm {
    font-size: 0.875rem;
  }

  .text-md\@sm {
    font-size: 1rem;
  }

  .text-lg\@sm {
    font-size: 1.25rem;
  }

  .text-xl\@sm {
    font-size: 1.5rem;
  }

  .text-2xl\@sm {
    font-size: 1.75rem;
  }

  .text-3xl\@sm {
    font-size: 2rem;
  }

  .text-4xl\@sm {
    font-size: 2.5rem;
  }

  .text-xs\@sm {
    font-size: 0.75rem;
  }

  .text-sm\@sm {
    font-size: 0.875rem;
  }

  .text-md\@sm {
    font-size: 1rem;
  }

  .text-lg\@sm {
    font-size: 1.25rem;
  }

  .text-xl\@sm {
    font-size: 1.5rem;
  }

  .text-2xl\@sm {
    font-size: 1.75rem;
  }

  .text-3xl\@sm {
    font-size: 2rem;
  }

  .text-4xl\@sm {
    font-size: 2.5rem;
  }

  .font-thin\@sm {
    font-weight: 100;
  }

  .font-extralight\@sm {
    font-weight: 200;
  }

  .font-light\@sm {
    font-weight: 300;
  }

  .font-normal\@sm {
    font-weight: 400;
  }

  .font-medium\@sm {
    font-weight: 500;
  }

  .font-semibold\@sm {
    font-weight: 600;
  }

  .font-bold\@sm {
    font-weight: 700;
  }

  .font-extrabold\@sm {
    font-weight: 800;
  }

  .font-black\@sm {
    font-weight: 900;
  }

  .leading-none\@sm {
    line-height: 1;
  }

  .leading-tight\@sm {
    line-height: 1.25;
  }

  .leading-snug\@sm {
    line-height: 1.375;
  }

  .leading-normal\@sm {
    line-height: 1.5;
  }

  .leading-relaxed\@sm {
    line-height: 1.625;
  }

  .leading-loose\@sm {
    line-height: 2;
  }

  .text-left\@sm {
    text-align: left;
  }

  .text-center\@sm {
    text-align: center;
  }

  .text-right\@sm {
    text-align: right;
  }

  .text-justify\@sm {
    text-align: justify;
  }

  .uppercase\@sm {
    text-transform: uppercase;
  }

  .lowercase\@sm {
    text-transform: lowercase;
  }

  .capitalize\@sm {
    text-transform: capitalize;
  }

  .normal-case\@sm {
    text-transform: none;
  }

  .italic\@sm {
    font-style: italic;
  }

  .not-italic\@sm {
    font-style: normal;
  }

  .underline\@sm {
    text-decoration: underline;
  }

  .line-through\@sm {
    text-decoration: line-through;
  }

  .no-underline\@sm {
    text-decoration: none;
  }

  .truncate\@sm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .truncate-2\@sm {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .truncate-3\@sm {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .truncate-4\@sm {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .truncate-5\@sm {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tracking-tighter\@sm {
    letter-spacing: -0.05em;
  }

  .tracking-tight\@sm {
    letter-spacing: -0.025em;
  }

  .tracking-normal\@sm {
    letter-spacing: 0;
  }

  .tracking-wide\@sm {
    letter-spacing: 0.025em;
  }

  .tracking-wider\@sm {
    letter-spacing: 0.05em;
  }

  .tracking-widest\@sm {
    letter-spacing: 0.1em;
  }

  .overflow-label\@sm {
    white-space: nowrap;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
  }
}

@media (min-width: 768px) {
  .text-xs\@md {
    font-size: 0.75rem;
  }

  .text-sm\@md {
    font-size: 0.875rem;
  }

  .text-md\@md {
    font-size: 1rem;
  }

  .text-lg\@md {
    font-size: 1.25rem;
  }

  .text-xl\@md {
    font-size: 1.5rem;
  }

  .text-2xl\@md {
    font-size: 1.75rem;
  }

  .text-3xl\@md {
    font-size: 2rem;
  }

  .text-4xl\@md {
    font-size: 2.5rem;
  }

  .text-xs\@md {
    font-size: 0.75rem;
  }

  .text-sm\@md {
    font-size: 0.875rem;
  }

  .text-md\@md {
    font-size: 1rem;
  }

  .text-lg\@md {
    font-size: 1.25rem;
  }

  .text-xl\@md {
    font-size: 1.5rem;
  }

  .text-2xl\@md {
    font-size: 1.75rem;
  }

  .text-3xl\@md {
    font-size: 2rem;
  }

  .text-4xl\@md {
    font-size: 2.5rem;
  }

  .font-thin\@md {
    font-weight: 100;
  }

  .font-extralight\@md {
    font-weight: 200;
  }

  .font-light\@md {
    font-weight: 300;
  }

  .font-normal\@md {
    font-weight: 400;
  }

  .font-medium\@md {
    font-weight: 500;
  }

  .font-semibold\@md {
    font-weight: 600;
  }

  .font-bold\@md {
    font-weight: 700;
  }

  .font-extrabold\@md {
    font-weight: 800;
  }

  .font-black\@md {
    font-weight: 900;
  }

  .leading-none\@md {
    line-height: 1;
  }

  .leading-tight\@md {
    line-height: 1.25;
  }

  .leading-snug\@md {
    line-height: 1.375;
  }

  .leading-normal\@md {
    line-height: 1.5;
  }

  .leading-relaxed\@md {
    line-height: 1.625;
  }

  .leading-loose\@md {
    line-height: 2;
  }

  .text-left\@md {
    text-align: left;
  }

  .text-center\@md {
    text-align: center;
  }

  .text-right\@md {
    text-align: right;
  }

  .text-justify\@md {
    text-align: justify;
  }

  .uppercase\@md {
    text-transform: uppercase;
  }

  .lowercase\@md {
    text-transform: lowercase;
  }

  .capitalize\@md {
    text-transform: capitalize;
  }

  .normal-case\@md {
    text-transform: none;
  }

  .italic\@md {
    font-style: italic;
  }

  .not-italic\@md {
    font-style: normal;
  }

  .underline\@md {
    text-decoration: underline;
  }

  .line-through\@md {
    text-decoration: line-through;
  }

  .no-underline\@md {
    text-decoration: none;
  }

  .truncate\@md {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .truncate-2\@md {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .truncate-3\@md {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .truncate-4\@md {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .truncate-5\@md {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tracking-tighter\@md {
    letter-spacing: -0.05em;
  }

  .tracking-tight\@md {
    letter-spacing: -0.025em;
  }

  .tracking-normal\@md {
    letter-spacing: 0;
  }

  .tracking-wide\@md {
    letter-spacing: 0.025em;
  }

  .tracking-wider\@md {
    letter-spacing: 0.05em;
  }

  .tracking-widest\@md {
    letter-spacing: 0.1em;
  }

  .overflow-label\@md {
    white-space: nowrap;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
  }
}

@media (min-width: 1024px) {
  .text-xs\@lg {
    font-size: 0.75rem;
  }

  .text-sm\@lg {
    font-size: 0.875rem;
  }

  .text-md\@lg {
    font-size: 1rem;
  }

  .text-lg\@lg {
    font-size: 1.25rem;
  }

  .text-xl\@lg {
    font-size: 1.5rem;
  }

  .text-2xl\@lg {
    font-size: 1.75rem;
  }

  .text-3xl\@lg {
    font-size: 2rem;
  }

  .text-4xl\@lg {
    font-size: 2.5rem;
  }

  .text-xs\@lg {
    font-size: 0.75rem;
  }

  .text-sm\@lg {
    font-size: 0.875rem;
  }

  .text-md\@lg {
    font-size: 1rem;
  }

  .text-lg\@lg {
    font-size: 1.25rem;
  }

  .text-xl\@lg {
    font-size: 1.5rem;
  }

  .text-2xl\@lg {
    font-size: 1.75rem;
  }

  .text-3xl\@lg {
    font-size: 2rem;
  }

  .text-4xl\@lg {
    font-size: 2.5rem;
  }

  .font-thin\@lg {
    font-weight: 100;
  }

  .font-extralight\@lg {
    font-weight: 200;
  }

  .font-light\@lg {
    font-weight: 300;
  }

  .font-normal\@lg {
    font-weight: 400;
  }

  .font-medium\@lg {
    font-weight: 500;
  }

  .font-semibold\@lg {
    font-weight: 600;
  }

  .font-bold\@lg {
    font-weight: 700;
  }

  .font-extrabold\@lg {
    font-weight: 800;
  }

  .font-black\@lg {
    font-weight: 900;
  }

  .leading-none\@lg {
    line-height: 1;
  }

  .leading-tight\@lg {
    line-height: 1.25;
  }

  .leading-snug\@lg {
    line-height: 1.375;
  }

  .leading-normal\@lg {
    line-height: 1.5;
  }

  .leading-relaxed\@lg {
    line-height: 1.625;
  }

  .leading-loose\@lg {
    line-height: 2;
  }

  .text-left\@lg {
    text-align: left;
  }

  .text-center\@lg {
    text-align: center;
  }

  .text-right\@lg {
    text-align: right;
  }

  .text-justify\@lg {
    text-align: justify;
  }

  .uppercase\@lg {
    text-transform: uppercase;
  }

  .lowercase\@lg {
    text-transform: lowercase;
  }

  .capitalize\@lg {
    text-transform: capitalize;
  }

  .normal-case\@lg {
    text-transform: none;
  }

  .italic\@lg {
    font-style: italic;
  }

  .not-italic\@lg {
    font-style: normal;
  }

  .underline\@lg {
    text-decoration: underline;
  }

  .line-through\@lg {
    text-decoration: line-through;
  }

  .no-underline\@lg {
    text-decoration: none;
  }

  .truncate\@lg {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .truncate-2\@lg {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .truncate-3\@lg {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .truncate-4\@lg {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .truncate-5\@lg {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tracking-tighter\@lg {
    letter-spacing: -0.05em;
  }

  .tracking-tight\@lg {
    letter-spacing: -0.025em;
  }

  .tracking-normal\@lg {
    letter-spacing: 0;
  }

  .tracking-wide\@lg {
    letter-spacing: 0.025em;
  }

  .tracking-wider\@lg {
    letter-spacing: 0.05em;
  }

  .tracking-widest\@lg {
    letter-spacing: 0.1em;
  }

  .overflow-label\@lg {
    white-space: nowrap;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
  }
}

@media (min-width: 1280px) {
  .text-xs\@xl {
    font-size: 0.75rem;
  }

  .text-sm\@xl {
    font-size: 0.875rem;
  }

  .text-md\@xl {
    font-size: 1rem;
  }

  .text-lg\@xl {
    font-size: 1.25rem;
  }

  .text-xl\@xl {
    font-size: 1.5rem;
  }

  .text-2xl\@xl {
    font-size: 1.75rem;
  }

  .text-3xl\@xl {
    font-size: 2rem;
  }

  .text-4xl\@xl {
    font-size: 2.5rem;
  }

  .text-xs\@xl {
    font-size: 0.75rem;
  }

  .text-sm\@xl {
    font-size: 0.875rem;
  }

  .text-md\@xl {
    font-size: 1rem;
  }

  .text-lg\@xl {
    font-size: 1.25rem;
  }

  .text-xl\@xl {
    font-size: 1.5rem;
  }

  .text-2xl\@xl {
    font-size: 1.75rem;
  }

  .text-3xl\@xl {
    font-size: 2rem;
  }

  .text-4xl\@xl {
    font-size: 2.5rem;
  }

  .font-thin\@xl {
    font-weight: 100;
  }

  .font-extralight\@xl {
    font-weight: 200;
  }

  .font-light\@xl {
    font-weight: 300;
  }

  .font-normal\@xl {
    font-weight: 400;
  }

  .font-medium\@xl {
    font-weight: 500;
  }

  .font-semibold\@xl {
    font-weight: 600;
  }

  .font-bold\@xl {
    font-weight: 700;
  }

  .font-extrabold\@xl {
    font-weight: 800;
  }

  .font-black\@xl {
    font-weight: 900;
  }

  .leading-none\@xl {
    line-height: 1;
  }

  .leading-tight\@xl {
    line-height: 1.25;
  }

  .leading-snug\@xl {
    line-height: 1.375;
  }

  .leading-normal\@xl {
    line-height: 1.5;
  }

  .leading-relaxed\@xl {
    line-height: 1.625;
  }

  .leading-loose\@xl {
    line-height: 2;
  }

  .text-left\@xl {
    text-align: left;
  }

  .text-center\@xl {
    text-align: center;
  }

  .text-right\@xl {
    text-align: right;
  }

  .text-justify\@xl {
    text-align: justify;
  }

  .uppercase\@xl {
    text-transform: uppercase;
  }

  .lowercase\@xl {
    text-transform: lowercase;
  }

  .capitalize\@xl {
    text-transform: capitalize;
  }

  .normal-case\@xl {
    text-transform: none;
  }

  .italic\@xl {
    font-style: italic;
  }

  .not-italic\@xl {
    font-style: normal;
  }

  .underline\@xl {
    text-decoration: underline;
  }

  .line-through\@xl {
    text-decoration: line-through;
  }

  .no-underline\@xl {
    text-decoration: none;
  }

  .truncate\@xl {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .truncate-2\@xl {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .truncate-3\@xl {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .truncate-4\@xl {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .truncate-5\@xl {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tracking-tighter\@xl {
    letter-spacing: -0.05em;
  }

  .tracking-tight\@xl {
    letter-spacing: -0.025em;
  }

  .tracking-normal\@xl {
    letter-spacing: 0;
  }

  .tracking-wide\@xl {
    letter-spacing: 0.025em;
  }

  .tracking-wider\@xl {
    letter-spacing: 0.05em;
  }

  .tracking-widest\@xl {
    letter-spacing: 0.1em;
  }

  .overflow-label\@xl {
    white-space: nowrap;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
  }
}

@media (min-width: 1536px) {
  .text-xs\@2xl {
    font-size: 0.75rem;
  }

  .text-sm\@2xl {
    font-size: 0.875rem;
  }

  .text-md\@2xl {
    font-size: 1rem;
  }

  .text-lg\@2xl {
    font-size: 1.25rem;
  }

  .text-xl\@2xl {
    font-size: 1.5rem;
  }

  .text-2xl\@2xl {
    font-size: 1.75rem;
  }

  .text-3xl\@2xl {
    font-size: 2rem;
  }

  .text-4xl\@2xl {
    font-size: 2.5rem;
  }

  .text-xs\@2xl {
    font-size: 0.75rem;
  }

  .text-sm\@2xl {
    font-size: 0.875rem;
  }

  .text-md\@2xl {
    font-size: 1rem;
  }

  .text-lg\@2xl {
    font-size: 1.25rem;
  }

  .text-xl\@2xl {
    font-size: 1.5rem;
  }

  .text-2xl\@2xl {
    font-size: 1.75rem;
  }

  .text-3xl\@2xl {
    font-size: 2rem;
  }

  .text-4xl\@2xl {
    font-size: 2.5rem;
  }

  .font-thin\@2xl {
    font-weight: 100;
  }

  .font-extralight\@2xl {
    font-weight: 200;
  }

  .font-light\@2xl {
    font-weight: 300;
  }

  .font-normal\@2xl {
    font-weight: 400;
  }

  .font-medium\@2xl {
    font-weight: 500;
  }

  .font-semibold\@2xl {
    font-weight: 600;
  }

  .font-bold\@2xl {
    font-weight: 700;
  }

  .font-extrabold\@2xl {
    font-weight: 800;
  }

  .font-black\@2xl {
    font-weight: 900;
  }

  .leading-none\@2xl {
    line-height: 1;
  }

  .leading-tight\@2xl {
    line-height: 1.25;
  }

  .leading-snug\@2xl {
    line-height: 1.375;
  }

  .leading-normal\@2xl {
    line-height: 1.5;
  }

  .leading-relaxed\@2xl {
    line-height: 1.625;
  }

  .leading-loose\@2xl {
    line-height: 2;
  }

  .text-left\@2xl {
    text-align: left;
  }

  .text-center\@2xl {
    text-align: center;
  }

  .text-right\@2xl {
    text-align: right;
  }

  .text-justify\@2xl {
    text-align: justify;
  }

  .uppercase\@2xl {
    text-transform: uppercase;
  }

  .lowercase\@2xl {
    text-transform: lowercase;
  }

  .capitalize\@2xl {
    text-transform: capitalize;
  }

  .normal-case\@2xl {
    text-transform: none;
  }

  .italic\@2xl {
    font-style: italic;
  }

  .not-italic\@2xl {
    font-style: normal;
  }

  .underline\@2xl {
    text-decoration: underline;
  }

  .line-through\@2xl {
    text-decoration: line-through;
  }

  .no-underline\@2xl {
    text-decoration: none;
  }

  .truncate\@2xl {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .truncate-2\@2xl {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .truncate-3\@2xl {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .truncate-4\@2xl {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .truncate-5\@2xl {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tracking-tighter\@2xl {
    letter-spacing: -0.05em;
  }

  .tracking-tight\@2xl {
    letter-spacing: -0.025em;
  }

  .tracking-normal\@2xl {
    letter-spacing: 0;
  }

  .tracking-wide\@2xl {
    letter-spacing: 0.025em;
  }

  .tracking-wider\@2xl {
    letter-spacing: 0.05em;
  }

  .tracking-widest\@2xl {
    letter-spacing: 0.1em;
  }

  .overflow-label\@2xl {
    white-space: nowrap;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
  }
}

/**
 * Z-Index Utilities
 * 
 * Classes:
 * - z-index values: .z-0, .z-10, .z-20, etc.
 * - Named z-index levels: .z-auto, .z-base, .z-dropdown, etc.
 * 
 * All utilities support responsive variants with @breakpoint suffix:
 * - .z-10@md, .z-dropdown@lg, etc.
 */
/**
 * Apply a z-index value
 * @param {Number|String} $value - Z-index value or key
 */
/**
 * Generate z-index utility classes
 * @param {String} $breakpoint - Optional breakpoint name for responsive variants
 */
.z-auto {
  z-index: auto;
}

.z-0 {
  z-index: 0;
}

.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-60 {
  z-index: 60;
}

.z-70 {
  z-index: 70;
}

.z-80 {
  z-index: 80;
}

.z-90 {
  z-index: 90;
}

.z-100 {
  z-index: 100;
}

.z-200 {
  z-index: 200;
}

.z-500 {
  z-index: 500;
}

.z-1000 {
  z-index: 1000;
}

.z-base {
  z-index: 0;
}

.z-hover {
  z-index: 10;
}

.z-dropdown {
  z-index: 100;
}

.z-sticky {
  z-index: 200;
}

.z-fixed {
  z-index: 300;
}

.z-drawer {
  z-index: 400;
}

.z-modal {
  z-index: 500;
}

.z-popover {
  z-index: 600;
}

.z-tooltip {
  z-index: 700;
}

.z-overlay {
  z-index: 800;
}

.z-toast {
  z-index: 900;
}

.z-max {
  z-index: 9999;
}

@media (min-width: 480px) {
  .z-auto\@xs {
    z-index: auto;
  }

  .z-0\@xs {
    z-index: 0;
  }

  .z-10\@xs {
    z-index: 10;
  }

  .z-20\@xs {
    z-index: 20;
  }

  .z-30\@xs {
    z-index: 30;
  }

  .z-40\@xs {
    z-index: 40;
  }

  .z-50\@xs {
    z-index: 50;
  }

  .z-60\@xs {
    z-index: 60;
  }

  .z-70\@xs {
    z-index: 70;
  }

  .z-80\@xs {
    z-index: 80;
  }

  .z-90\@xs {
    z-index: 90;
  }

  .z-100\@xs {
    z-index: 100;
  }

  .z-200\@xs {
    z-index: 200;
  }

  .z-500\@xs {
    z-index: 500;
  }

  .z-1000\@xs {
    z-index: 1000;
  }

  .z-base\@xs {
    z-index: 0;
  }

  .z-hover\@xs {
    z-index: 10;
  }

  .z-dropdown\@xs {
    z-index: 100;
  }

  .z-sticky\@xs {
    z-index: 200;
  }

  .z-fixed\@xs {
    z-index: 300;
  }

  .z-drawer\@xs {
    z-index: 400;
  }

  .z-modal\@xs {
    z-index: 500;
  }

  .z-popover\@xs {
    z-index: 600;
  }

  .z-tooltip\@xs {
    z-index: 700;
  }

  .z-overlay\@xs {
    z-index: 800;
  }

  .z-toast\@xs {
    z-index: 900;
  }

  .z-max\@xs {
    z-index: 9999;
  }
}

@media (min-width: 640px) {
  .z-auto\@sm {
    z-index: auto;
  }

  .z-0\@sm {
    z-index: 0;
  }

  .z-10\@sm {
    z-index: 10;
  }

  .z-20\@sm {
    z-index: 20;
  }

  .z-30\@sm {
    z-index: 30;
  }

  .z-40\@sm {
    z-index: 40;
  }

  .z-50\@sm {
    z-index: 50;
  }

  .z-60\@sm {
    z-index: 60;
  }

  .z-70\@sm {
    z-index: 70;
  }

  .z-80\@sm {
    z-index: 80;
  }

  .z-90\@sm {
    z-index: 90;
  }

  .z-100\@sm {
    z-index: 100;
  }

  .z-200\@sm {
    z-index: 200;
  }

  .z-500\@sm {
    z-index: 500;
  }

  .z-1000\@sm {
    z-index: 1000;
  }

  .z-base\@sm {
    z-index: 0;
  }

  .z-hover\@sm {
    z-index: 10;
  }

  .z-dropdown\@sm {
    z-index: 100;
  }

  .z-sticky\@sm {
    z-index: 200;
  }

  .z-fixed\@sm {
    z-index: 300;
  }

  .z-drawer\@sm {
    z-index: 400;
  }

  .z-modal\@sm {
    z-index: 500;
  }

  .z-popover\@sm {
    z-index: 600;
  }

  .z-tooltip\@sm {
    z-index: 700;
  }

  .z-overlay\@sm {
    z-index: 800;
  }

  .z-toast\@sm {
    z-index: 900;
  }

  .z-max\@sm {
    z-index: 9999;
  }
}

@media (min-width: 768px) {
  .z-auto\@md {
    z-index: auto;
  }

  .z-0\@md {
    z-index: 0;
  }

  .z-10\@md {
    z-index: 10;
  }

  .z-20\@md {
    z-index: 20;
  }

  .z-30\@md {
    z-index: 30;
  }

  .z-40\@md {
    z-index: 40;
  }

  .z-50\@md {
    z-index: 50;
  }

  .z-60\@md {
    z-index: 60;
  }

  .z-70\@md {
    z-index: 70;
  }

  .z-80\@md {
    z-index: 80;
  }

  .z-90\@md {
    z-index: 90;
  }

  .z-100\@md {
    z-index: 100;
  }

  .z-200\@md {
    z-index: 200;
  }

  .z-500\@md {
    z-index: 500;
  }

  .z-1000\@md {
    z-index: 1000;
  }

  .z-base\@md {
    z-index: 0;
  }

  .z-hover\@md {
    z-index: 10;
  }

  .z-dropdown\@md {
    z-index: 100;
  }

  .z-sticky\@md {
    z-index: 200;
  }

  .z-fixed\@md {
    z-index: 300;
  }

  .z-drawer\@md {
    z-index: 400;
  }

  .z-modal\@md {
    z-index: 500;
  }

  .z-popover\@md {
    z-index: 600;
  }

  .z-tooltip\@md {
    z-index: 700;
  }

  .z-overlay\@md {
    z-index: 800;
  }

  .z-toast\@md {
    z-index: 900;
  }

  .z-max\@md {
    z-index: 9999;
  }
}

@media (min-width: 1024px) {
  .z-auto\@lg {
    z-index: auto;
  }

  .z-0\@lg {
    z-index: 0;
  }

  .z-10\@lg {
    z-index: 10;
  }

  .z-20\@lg {
    z-index: 20;
  }

  .z-30\@lg {
    z-index: 30;
  }

  .z-40\@lg {
    z-index: 40;
  }

  .z-50\@lg {
    z-index: 50;
  }

  .z-60\@lg {
    z-index: 60;
  }

  .z-70\@lg {
    z-index: 70;
  }

  .z-80\@lg {
    z-index: 80;
  }

  .z-90\@lg {
    z-index: 90;
  }

  .z-100\@lg {
    z-index: 100;
  }

  .z-200\@lg {
    z-index: 200;
  }

  .z-500\@lg {
    z-index: 500;
  }

  .z-1000\@lg {
    z-index: 1000;
  }

  .z-base\@lg {
    z-index: 0;
  }

  .z-hover\@lg {
    z-index: 10;
  }

  .z-dropdown\@lg {
    z-index: 100;
  }

  .z-sticky\@lg {
    z-index: 200;
  }

  .z-fixed\@lg {
    z-index: 300;
  }

  .z-drawer\@lg {
    z-index: 400;
  }

  .z-modal\@lg {
    z-index: 500;
  }

  .z-popover\@lg {
    z-index: 600;
  }

  .z-tooltip\@lg {
    z-index: 700;
  }

  .z-overlay\@lg {
    z-index: 800;
  }

  .z-toast\@lg {
    z-index: 900;
  }

  .z-max\@lg {
    z-index: 9999;
  }
}

@media (min-width: 1280px) {
  .z-auto\@xl {
    z-index: auto;
  }

  .z-0\@xl {
    z-index: 0;
  }

  .z-10\@xl {
    z-index: 10;
  }

  .z-20\@xl {
    z-index: 20;
  }

  .z-30\@xl {
    z-index: 30;
  }

  .z-40\@xl {
    z-index: 40;
  }

  .z-50\@xl {
    z-index: 50;
  }

  .z-60\@xl {
    z-index: 60;
  }

  .z-70\@xl {
    z-index: 70;
  }

  .z-80\@xl {
    z-index: 80;
  }

  .z-90\@xl {
    z-index: 90;
  }

  .z-100\@xl {
    z-index: 100;
  }

  .z-200\@xl {
    z-index: 200;
  }

  .z-500\@xl {
    z-index: 500;
  }

  .z-1000\@xl {
    z-index: 1000;
  }

  .z-base\@xl {
    z-index: 0;
  }

  .z-hover\@xl {
    z-index: 10;
  }

  .z-dropdown\@xl {
    z-index: 100;
  }

  .z-sticky\@xl {
    z-index: 200;
  }

  .z-fixed\@xl {
    z-index: 300;
  }

  .z-drawer\@xl {
    z-index: 400;
  }

  .z-modal\@xl {
    z-index: 500;
  }

  .z-popover\@xl {
    z-index: 600;
  }

  .z-tooltip\@xl {
    z-index: 700;
  }

  .z-overlay\@xl {
    z-index: 800;
  }

  .z-toast\@xl {
    z-index: 900;
  }

  .z-max\@xl {
    z-index: 9999;
  }
}

@media (min-width: 1536px) {
  .z-auto\@2xl {
    z-index: auto;
  }

  .z-0\@2xl {
    z-index: 0;
  }

  .z-10\@2xl {
    z-index: 10;
  }

  .z-20\@2xl {
    z-index: 20;
  }

  .z-30\@2xl {
    z-index: 30;
  }

  .z-40\@2xl {
    z-index: 40;
  }

  .z-50\@2xl {
    z-index: 50;
  }

  .z-60\@2xl {
    z-index: 60;
  }

  .z-70\@2xl {
    z-index: 70;
  }

  .z-80\@2xl {
    z-index: 80;
  }

  .z-90\@2xl {
    z-index: 90;
  }

  .z-100\@2xl {
    z-index: 100;
  }

  .z-200\@2xl {
    z-index: 200;
  }

  .z-500\@2xl {
    z-index: 500;
  }

  .z-1000\@2xl {
    z-index: 1000;
  }

  .z-base\@2xl {
    z-index: 0;
  }

  .z-hover\@2xl {
    z-index: 10;
  }

  .z-dropdown\@2xl {
    z-index: 100;
  }

  .z-sticky\@2xl {
    z-index: 200;
  }

  .z-fixed\@2xl {
    z-index: 300;
  }

  .z-drawer\@2xl {
    z-index: 400;
  }

  .z-modal\@2xl {
    z-index: 500;
  }

  .z-popover\@2xl {
    z-index: 600;
  }

  .z-tooltip\@2xl {
    z-index: 700;
  }

  .z-overlay\@2xl {
    z-index: 800;
  }

  .z-toast\@2xl {
    z-index: 900;
  }

  .z-max\@2xl {
    z-index: 9999;
  }
}

:root {
  --primary: #007bff;
  --primary-50: rgb(229.5, 241.8, 255);
  --primary-100: rgb(178.5, 215.4, 255);
  --primary-200: rgb(127.5, 189, 255);
  --primary-300: rgb(76.5, 162.6, 255);
  --primary-400: rgb(25.5, 136.2, 255);
  --primary-500: #007bff;
  --primary-600: rgb(0, 110.7, 229.5);
  --primary-700: rgb(0, 86.1, 178.5);
  --primary-800: rgb(0, 61.5, 127.5);
  --primary-900: rgb(0, 36.9, 76.5);
  --secondary: #6c757d;
  --secondary-50: rgb(240.3, 241.2, 242);
  --secondary-100: rgb(210.9, 213.6, 216);
  --secondary-200: rgb(181.5, 186, 190);
  --secondary-300: rgb(152.1, 158.4, 164);
  --secondary-400: rgb(122.7, 130.8, 138);
  --secondary-500: #6c757d;
  --secondary-600: rgb(97.2, 105.3, 112.5);
  --secondary-700: rgb(75.6, 81.9, 87.5);
  --secondary-800: rgb(54, 58.5, 62.5);
  --secondary-900: rgb(32.4, 35.1, 37.5);
  --success: #34c759;
  --success-50: rgb(234.7, 249.4, 238.4);
  --success-100: rgb(194.1, 238.2, 205.2);
  --success-200: rgb(153.5, 227, 172);
  --success-300: rgb(112.9, 215.8, 138.8);
  --success-400: rgb(72.3, 204.6, 105.6);
  --success-500: #34c759;
  --success-600: rgb(46.8, 179.1, 80.1);
  --success-700: rgb(36.4, 139.3, 62.3);
  --success-800: rgb(26, 99.5, 44.5);
  --success-900: rgb(15.6, 59.7, 26.7);
  --danger: #ff3b30;
  --danger-50: rgb(255, 235.4, 234.3);
  --danger-100: rgb(255, 196.2, 192.9);
  --danger-200: rgb(255, 157, 151.5);
  --danger-300: rgb(255, 117.8, 110.1);
  --danger-400: rgb(255, 78.6, 68.7);
  --danger-500: #ff3b30;
  --danger-600: rgb(229.5, 53.1, 43.2);
  --danger-700: rgb(178.5, 41.3, 33.6);
  --danger-800: rgb(127.5, 29.5, 24);
  --danger-900: rgb(76.5, 17.7, 14.4);
  --warning: #f8af08;
  --warning-50: rgb(254.3, 247, 230.3);
  --warning-100: rgb(252.9, 231, 180.9);
  --warning-200: rgb(251.5, 215, 131.5);
  --warning-300: rgb(250.1, 199, 82.1);
  --warning-400: rgb(248.7, 183, 32.7);
  --warning-500: #f8af08;
  --warning-600: rgb(223.2, 157.5, 7.2);
  --warning-700: rgb(173.6, 122.5, 5.6);
  --warning-800: rgb(124, 87.5, 4);
  --warning-900: rgb(74.4, 52.5, 2.4);
  --info: #17a2b8;
  --info-50: rgb(231.8, 245.7, 247.9);
  --info-100: rgb(185.4, 227.1, 233.7);
  --info-200: rgb(139, 208.5, 219.5);
  --info-300: rgb(92.6, 189.9, 205.3);
  --info-400: rgb(46.2, 171.3, 191.1);
  --info-500: #17a2b8;
  --info-600: rgb(20.7, 145.8, 165.6);
  --info-700: rgb(16.1, 113.4, 128.8);
  --info-800: rgb(11.5, 81, 92);
  --info-900: rgb(6.9, 48.6, 55.2);
  --gray: #6b7280;
  --gray-50: rgb(240.2, 240.9, 242.3);
  --gray-100: rgb(210.6, 212.7, 216.9);
  --gray-200: rgb(181, 184.5, 191.5);
  --gray-300: rgb(151.4, 156.3, 166.1);
  --gray-400: rgb(121.8, 128.1, 140.7);
  --gray-500: #6b7280;
  --gray-600: rgb(96.3, 102.6, 115.2);
  --gray-700: rgb(74.9, 79.8, 89.6);
  --gray-800: rgb(53.5, 57, 64);
  --gray-900: rgb(32.1, 34.2, 38.4);
  --red: #ef4444;
  --red-50: rgb(253.4, 236.3, 236.3);
  --red-100: rgb(250.2, 198.9, 198.9);
  --red-200: rgb(247, 161.5, 161.5);
  --red-300: rgb(243.8, 124.1, 124.1);
  --red-400: rgb(240.6, 86.7, 86.7);
  --red-500: #ef4444;
  --red-600: rgb(215.1, 61.2, 61.2);
  --red-700: rgb(167.3, 47.6, 47.6);
  --red-800: rgb(119.5, 34, 34);
  --red-900: rgb(71.7, 20.4, 20.4);
  --blue: #3b82f6;
  --blue-50: rgb(235.4, 242.5, 254.1);
  --blue-100: rgb(196.2, 217.5, 252.3);
  --blue-200: rgb(157, 192.5, 250.5);
  --blue-300: rgb(117.8, 167.5, 248.7);
  --blue-400: rgb(78.6, 142.5, 246.9);
  --blue-500: #3b82f6;
  --blue-600: rgb(53.1, 117, 221.4);
  --blue-700: rgb(41.3, 91, 172.2);
  --blue-800: rgb(29.5, 65, 123);
  --blue-900: rgb(17.7, 39, 73.8);
  --green: #22c55e;
  --green-50: rgb(232.9, 249.2, 238.9);
  --green-100: rgb(188.7, 237.6, 206.7);
  --green-200: rgb(144.5, 226, 174.5);
  --green-300: rgb(100.3, 214.4, 142.3);
  --green-400: rgb(56.1, 202.8, 110.1);
  --green-500: #22c55e;
  --green-600: rgb(30.6, 177.3, 84.6);
  --green-700: rgb(23.8, 137.9, 65.8);
  --green-800: rgb(17, 98.5, 47);
  --green-900: rgb(10.2, 59.1, 28.2);
  --yellow: #eab308;
  --yellow-50: rgb(252.9, 247.4, 230.3);
  --yellow-100: rgb(248.7, 232.2, 180.9);
  --yellow-200: rgb(244.5, 217, 131.5);
  --yellow-300: rgb(240.3, 201.8, 82.1);
  --yellow-400: rgb(236.1, 186.6, 32.7);
  --yellow-500: #eab308;
  --yellow-600: rgb(210.6, 161.1, 7.2);
  --yellow-700: rgb(163.8, 125.3, 5.6);
  --yellow-800: rgb(117, 89.5, 4);
  --yellow-900: rgb(70.2, 53.7, 2.4);
  --purple: #a855f7;
  --purple-50: rgb(246.3, 238, 254.2);
  --purple-100: rgb(228.9, 204, 252.6);
  --purple-200: rgb(211.5, 170, 251);
  --purple-300: rgb(194.1, 136, 249.4);
  --purple-400: rgb(176.7, 102, 247.8);
  --purple-500: #a855f7;
  --purple-600: rgb(151.2, 76.5, 222.3);
  --purple-700: rgb(117.6, 59.5, 172.9);
  --purple-800: rgb(84, 42.5, 123.5);
  --purple-900: rgb(50.4, 25.5, 74.1);
  --pink: #ec4899;
  --pink-50: rgb(253.1, 236.7, 244.8);
  --pink-100: rgb(249.3, 200.1, 224.4);
  --pink-200: rgb(245.5, 163.5, 204);
  --pink-300: rgb(241.7, 126.9, 183.6);
  --pink-400: rgb(237.9, 90.3, 163.2);
  --pink-500: #ec4899;
  --pink-600: rgb(212.4, 64.8, 137.7);
  --pink-700: rgb(165.2, 50.4, 107.1);
  --pink-800: rgb(118, 36, 76.5);
  --pink-900: rgb(70.8, 21.6, 45.9);
  --background: #f5f5f5;
  --foreground: #000;
  --surface: #fff;
  --border: var(--gray-600);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --button-bg-color: var(--primary);
  --button-bg-color-hover: var(--primary-600);
  --button-text-color: var(--gray-100);
  --link-color: var(--primary);
  --link-hover-color: var(--primary-600);
  --inverted-text-color: var(--gray-100);
  scrollbar-width: thin;
  scrollbar-color: #888 var(--background);
}

:root::-webkit-scrollbar {
  width: 12px;
}

:root::-webkit-scrollbar-track {
  background: var(--background);
}

:root::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 6px;
  border: 3px solid var(--background);
}

[data-theme=dark] {
  --background: #1a1a1a;
  --foreground: #fff;
  --surface: #1a1a1a;
  --border: var(--gray-400);
  --text-primary: var(--gray-100);
  --text-secondary: var(--gray-400);
  --button-bg-color: var(--primary);
  --button-bg-color-hover: var(--primary-400);
  --button-text-color: var(--gray-200);
  --link-color: var(--primary);
  --link-hover-color: var(--primary-400);
  --inverted-text-color: var(--gray-900);
  scrollbar-color: #555 var(--background);
}

[data-theme=dark]::-webkit-scrollbar-track {
  background: var(--background);
}

[data-theme=dark]::-webkit-scrollbar-thumb {
  background-color: #555;
  border: 3px solid var(--background);
}

.text-on-primary-50 {
  color: #000;
}

.text-primary-50,
.hover\:text-primary-50:hover,
.group:hover .group-hover\:text-primary-50 {
  color: var(--primary-50);
}

.bg-primary-50,
.hover\:bg-primary-50:hover,
.group:hover .group-hover\:bg-primary-50 {
  background-color: var(--primary-50);
}

.border-primary-50,
.hover\:border-primary-50:hover,
.group:hover .group-hover\:border-primary-50 {
  border-color: var(--primary-50);
}

.text-on-primary-100 {
  color: #000;
}

.text-primary-100,
.hover\:text-primary-100:hover,
.group:hover .group-hover\:text-primary-100 {
  color: var(--primary-100);
}

.bg-primary-100,
.hover\:bg-primary-100:hover,
.group:hover .group-hover\:bg-primary-100 {
  background-color: var(--primary-100);
}

.border-primary-100,
.hover\:border-primary-100:hover,
.group:hover .group-hover\:border-primary-100 {
  border-color: var(--primary-100);
}

.text-on-primary-200 {
  color: #fff;
}

.text-primary-200,
.hover\:text-primary-200:hover,
.group:hover .group-hover\:text-primary-200 {
  color: var(--primary-200);
}

.bg-primary-200,
.hover\:bg-primary-200:hover,
.group:hover .group-hover\:bg-primary-200 {
  background-color: var(--primary-200);
}

.border-primary-200,
.hover\:border-primary-200:hover,
.group:hover .group-hover\:border-primary-200 {
  border-color: var(--primary-200);
}

.text-on-primary-300 {
  color: #fff;
}

.text-primary-300,
.hover\:text-primary-300:hover,
.group:hover .group-hover\:text-primary-300 {
  color: var(--primary-300);
}

.bg-primary-300,
.hover\:bg-primary-300:hover,
.group:hover .group-hover\:bg-primary-300 {
  background-color: var(--primary-300);
}

.border-primary-300,
.hover\:border-primary-300:hover,
.group:hover .group-hover\:border-primary-300 {
  border-color: var(--primary-300);
}

.text-on-primary-400 {
  color: #fff;
}

.text-primary-400,
.hover\:text-primary-400:hover,
.group:hover .group-hover\:text-primary-400 {
  color: var(--primary-400);
}

.bg-primary-400,
.hover\:bg-primary-400:hover,
.group:hover .group-hover\:bg-primary-400 {
  background-color: var(--primary-400);
}

.border-primary-400,
.hover\:border-primary-400:hover,
.group:hover .group-hover\:border-primary-400 {
  border-color: var(--primary-400);
}

.text-on-primary-500 {
  color: #fff;
}

.text-primary-500,
.hover\:text-primary-500:hover,
.group:hover .group-hover\:text-primary-500 {
  color: var(--primary-500);
}

.bg-primary-500,
.hover\:bg-primary-500:hover,
.group:hover .group-hover\:bg-primary-500 {
  background-color: var(--primary-500);
}

.border-primary-500,
.hover\:border-primary-500:hover,
.group:hover .group-hover\:border-primary-500 {
  border-color: var(--primary-500);
}

.text-on-primary-600 {
  color: #fff;
}

.text-primary-600,
.hover\:text-primary-600:hover,
.group:hover .group-hover\:text-primary-600 {
  color: var(--primary-600);
}

.bg-primary-600,
.hover\:bg-primary-600:hover,
.group:hover .group-hover\:bg-primary-600 {
  background-color: var(--primary-600);
}

.border-primary-600,
.hover\:border-primary-600:hover,
.group:hover .group-hover\:border-primary-600 {
  border-color: var(--primary-600);
}

.text-on-primary-700 {
  color: #fff;
}

.text-primary-700,
.hover\:text-primary-700:hover,
.group:hover .group-hover\:text-primary-700 {
  color: var(--primary-700);
}

.bg-primary-700,
.hover\:bg-primary-700:hover,
.group:hover .group-hover\:bg-primary-700 {
  background-color: var(--primary-700);
}

.border-primary-700,
.hover\:border-primary-700:hover,
.group:hover .group-hover\:border-primary-700 {
  border-color: var(--primary-700);
}

.text-on-primary-800 {
  color: #fff;
}

.text-primary-800,
.hover\:text-primary-800:hover,
.group:hover .group-hover\:text-primary-800 {
  color: var(--primary-800);
}

.bg-primary-800,
.hover\:bg-primary-800:hover,
.group:hover .group-hover\:bg-primary-800 {
  background-color: var(--primary-800);
}

.border-primary-800,
.hover\:border-primary-800:hover,
.group:hover .group-hover\:border-primary-800 {
  border-color: var(--primary-800);
}

.text-on-primary-900 {
  color: #fff;
}

.text-primary-900,
.hover\:text-primary-900:hover,
.group:hover .group-hover\:text-primary-900 {
  color: var(--primary-900);
}

.bg-primary-900,
.hover\:bg-primary-900:hover,
.group:hover .group-hover\:bg-primary-900 {
  background-color: var(--primary-900);
}

.border-primary-900,
.hover\:border-primary-900:hover,
.group:hover .group-hover\:border-primary-900 {
  border-color: var(--primary-900);
}

.text-primary,
.hover\:text-primary:hover,
.group:hover .group-hover\:text-primary {
  color: var(--primary);
}

.bg-primary,
.hover\:bg-primary:hover,
.group:hover .group-hover\:bg-primary {
  background-color: var(--primary);
}

.border-primary,
.hover\:border-primary:hover,
.group:hover .group-hover\:border-primary {
  border-color: var(--primary);
}

.text-on-secondary-50 {
  color: #000;
}

.text-secondary-50,
.hover\:text-secondary-50:hover,
.group:hover .group-hover\:text-secondary-50 {
  color: var(--secondary-50);
}

.bg-secondary-50,
.hover\:bg-secondary-50:hover,
.group:hover .group-hover\:bg-secondary-50 {
  background-color: var(--secondary-50);
}

.border-secondary-50,
.hover\:border-secondary-50:hover,
.group:hover .group-hover\:border-secondary-50 {
  border-color: var(--secondary-50);
}

.text-on-secondary-100 {
  color: #000;
}

.text-secondary-100,
.hover\:text-secondary-100:hover,
.group:hover .group-hover\:text-secondary-100 {
  color: var(--secondary-100);
}

.bg-secondary-100,
.hover\:bg-secondary-100:hover,
.group:hover .group-hover\:bg-secondary-100 {
  background-color: var(--secondary-100);
}

.border-secondary-100,
.hover\:border-secondary-100:hover,
.group:hover .group-hover\:border-secondary-100 {
  border-color: var(--secondary-100);
}

.text-on-secondary-200 {
  color: #fff;
}

.text-secondary-200,
.hover\:text-secondary-200:hover,
.group:hover .group-hover\:text-secondary-200 {
  color: var(--secondary-200);
}

.bg-secondary-200,
.hover\:bg-secondary-200:hover,
.group:hover .group-hover\:bg-secondary-200 {
  background-color: var(--secondary-200);
}

.border-secondary-200,
.hover\:border-secondary-200:hover,
.group:hover .group-hover\:border-secondary-200 {
  border-color: var(--secondary-200);
}

.text-on-secondary-300 {
  color: #fff;
}

.text-secondary-300,
.hover\:text-secondary-300:hover,
.group:hover .group-hover\:text-secondary-300 {
  color: var(--secondary-300);
}

.bg-secondary-300,
.hover\:bg-secondary-300:hover,
.group:hover .group-hover\:bg-secondary-300 {
  background-color: var(--secondary-300);
}

.border-secondary-300,
.hover\:border-secondary-300:hover,
.group:hover .group-hover\:border-secondary-300 {
  border-color: var(--secondary-300);
}

.text-on-secondary-400 {
  color: #fff;
}

.text-secondary-400,
.hover\:text-secondary-400:hover,
.group:hover .group-hover\:text-secondary-400 {
  color: var(--secondary-400);
}

.bg-secondary-400,
.hover\:bg-secondary-400:hover,
.group:hover .group-hover\:bg-secondary-400 {
  background-color: var(--secondary-400);
}

.border-secondary-400,
.hover\:border-secondary-400:hover,
.group:hover .group-hover\:border-secondary-400 {
  border-color: var(--secondary-400);
}

.text-on-secondary-500 {
  color: #fff;
}

.text-secondary-500,
.hover\:text-secondary-500:hover,
.group:hover .group-hover\:text-secondary-500 {
  color: var(--secondary-500);
}

.bg-secondary-500,
.hover\:bg-secondary-500:hover,
.group:hover .group-hover\:bg-secondary-500 {
  background-color: var(--secondary-500);
}

.border-secondary-500,
.hover\:border-secondary-500:hover,
.group:hover .group-hover\:border-secondary-500 {
  border-color: var(--secondary-500);
}

.text-on-secondary-600 {
  color: #fff;
}

.text-secondary-600,
.hover\:text-secondary-600:hover,
.group:hover .group-hover\:text-secondary-600 {
  color: var(--secondary-600);
}

.bg-secondary-600,
.hover\:bg-secondary-600:hover,
.group:hover .group-hover\:bg-secondary-600 {
  background-color: var(--secondary-600);
}

.border-secondary-600,
.hover\:border-secondary-600:hover,
.group:hover .group-hover\:border-secondary-600 {
  border-color: var(--secondary-600);
}

.text-on-secondary-700 {
  color: #fff;
}

.text-secondary-700,
.hover\:text-secondary-700:hover,
.group:hover .group-hover\:text-secondary-700 {
  color: var(--secondary-700);
}

.bg-secondary-700,
.hover\:bg-secondary-700:hover,
.group:hover .group-hover\:bg-secondary-700 {
  background-color: var(--secondary-700);
}

.border-secondary-700,
.hover\:border-secondary-700:hover,
.group:hover .group-hover\:border-secondary-700 {
  border-color: var(--secondary-700);
}

.text-on-secondary-800 {
  color: #fff;
}

.text-secondary-800,
.hover\:text-secondary-800:hover,
.group:hover .group-hover\:text-secondary-800 {
  color: var(--secondary-800);
}

.bg-secondary-800,
.hover\:bg-secondary-800:hover,
.group:hover .group-hover\:bg-secondary-800 {
  background-color: var(--secondary-800);
}

.border-secondary-800,
.hover\:border-secondary-800:hover,
.group:hover .group-hover\:border-secondary-800 {
  border-color: var(--secondary-800);
}

.text-on-secondary-900 {
  color: #fff;
}

.text-secondary-900,
.hover\:text-secondary-900:hover,
.group:hover .group-hover\:text-secondary-900 {
  color: var(--secondary-900);
}

.bg-secondary-900,
.hover\:bg-secondary-900:hover,
.group:hover .group-hover\:bg-secondary-900 {
  background-color: var(--secondary-900);
}

.border-secondary-900,
.hover\:border-secondary-900:hover,
.group:hover .group-hover\:border-secondary-900 {
  border-color: var(--secondary-900);
}

.text-secondary,
.hover\:text-secondary:hover,
.group:hover .group-hover\:text-secondary {
  color: var(--secondary);
}

.bg-secondary,
.hover\:bg-secondary:hover,
.group:hover .group-hover\:bg-secondary {
  background-color: var(--secondary);
}

.border-secondary,
.hover\:border-secondary:hover,
.group:hover .group-hover\:border-secondary {
  border-color: var(--secondary);
}

.text-on-success-50 {
  color: #000;
}

.text-success-50,
.hover\:text-success-50:hover,
.group:hover .group-hover\:text-success-50 {
  color: var(--success-50);
}

.bg-success-50,
.hover\:bg-success-50:hover,
.group:hover .group-hover\:bg-success-50 {
  background-color: var(--success-50);
}

.border-success-50,
.hover\:border-success-50:hover,
.group:hover .group-hover\:border-success-50 {
  border-color: var(--success-50);
}

.text-on-success-100 {
  color: #000;
}

.text-success-100,
.hover\:text-success-100:hover,
.group:hover .group-hover\:text-success-100 {
  color: var(--success-100);
}

.bg-success-100,
.hover\:bg-success-100:hover,
.group:hover .group-hover\:bg-success-100 {
  background-color: var(--success-100);
}

.border-success-100,
.hover\:border-success-100:hover,
.group:hover .group-hover\:border-success-100 {
  border-color: var(--success-100);
}

.text-on-success-200 {
  color: #000;
}

.text-success-200,
.hover\:text-success-200:hover,
.group:hover .group-hover\:text-success-200 {
  color: var(--success-200);
}

.bg-success-200,
.hover\:bg-success-200:hover,
.group:hover .group-hover\:bg-success-200 {
  background-color: var(--success-200);
}

.border-success-200,
.hover\:border-success-200:hover,
.group:hover .group-hover\:border-success-200 {
  border-color: var(--success-200);
}

.text-on-success-300 {
  color: #fff;
}

.text-success-300,
.hover\:text-success-300:hover,
.group:hover .group-hover\:text-success-300 {
  color: var(--success-300);
}

.bg-success-300,
.hover\:bg-success-300:hover,
.group:hover .group-hover\:bg-success-300 {
  background-color: var(--success-300);
}

.border-success-300,
.hover\:border-success-300:hover,
.group:hover .group-hover\:border-success-300 {
  border-color: var(--success-300);
}

.text-on-success-400 {
  color: #fff;
}

.text-success-400,
.hover\:text-success-400:hover,
.group:hover .group-hover\:text-success-400 {
  color: var(--success-400);
}

.bg-success-400,
.hover\:bg-success-400:hover,
.group:hover .group-hover\:bg-success-400 {
  background-color: var(--success-400);
}

.border-success-400,
.hover\:border-success-400:hover,
.group:hover .group-hover\:border-success-400 {
  border-color: var(--success-400);
}

.text-on-success-500 {
  color: #fff;
}

.text-success-500,
.hover\:text-success-500:hover,
.group:hover .group-hover\:text-success-500 {
  color: var(--success-500);
}

.bg-success-500,
.hover\:bg-success-500:hover,
.group:hover .group-hover\:bg-success-500 {
  background-color: var(--success-500);
}

.border-success-500,
.hover\:border-success-500:hover,
.group:hover .group-hover\:border-success-500 {
  border-color: var(--success-500);
}

.text-on-success-600 {
  color: #fff;
}

.text-success-600,
.hover\:text-success-600:hover,
.group:hover .group-hover\:text-success-600 {
  color: var(--success-600);
}

.bg-success-600,
.hover\:bg-success-600:hover,
.group:hover .group-hover\:bg-success-600 {
  background-color: var(--success-600);
}

.border-success-600,
.hover\:border-success-600:hover,
.group:hover .group-hover\:border-success-600 {
  border-color: var(--success-600);
}

.text-on-success-700 {
  color: #fff;
}

.text-success-700,
.hover\:text-success-700:hover,
.group:hover .group-hover\:text-success-700 {
  color: var(--success-700);
}

.bg-success-700,
.hover\:bg-success-700:hover,
.group:hover .group-hover\:bg-success-700 {
  background-color: var(--success-700);
}

.border-success-700,
.hover\:border-success-700:hover,
.group:hover .group-hover\:border-success-700 {
  border-color: var(--success-700);
}

.text-on-success-800 {
  color: #fff;
}

.text-success-800,
.hover\:text-success-800:hover,
.group:hover .group-hover\:text-success-800 {
  color: var(--success-800);
}

.bg-success-800,
.hover\:bg-success-800:hover,
.group:hover .group-hover\:bg-success-800 {
  background-color: var(--success-800);
}

.border-success-800,
.hover\:border-success-800:hover,
.group:hover .group-hover\:border-success-800 {
  border-color: var(--success-800);
}

.text-on-success-900 {
  color: #fff;
}

.text-success-900,
.hover\:text-success-900:hover,
.group:hover .group-hover\:text-success-900 {
  color: var(--success-900);
}

.bg-success-900,
.hover\:bg-success-900:hover,
.group:hover .group-hover\:bg-success-900 {
  background-color: var(--success-900);
}

.border-success-900,
.hover\:border-success-900:hover,
.group:hover .group-hover\:border-success-900 {
  border-color: var(--success-900);
}

.text-success,
.hover\:text-success:hover,
.group:hover .group-hover\:text-success {
  color: var(--success);
}

.bg-success,
.hover\:bg-success:hover,
.group:hover .group-hover\:bg-success {
  background-color: var(--success);
}

.border-success,
.hover\:border-success:hover,
.group:hover .group-hover\:border-success {
  border-color: var(--success);
}

.text-on-danger-50 {
  color: #000;
}

.text-danger-50,
.hover\:text-danger-50:hover,
.group:hover .group-hover\:text-danger-50 {
  color: var(--danger-50);
}

.bg-danger-50,
.hover\:bg-danger-50:hover,
.group:hover .group-hover\:bg-danger-50 {
  background-color: var(--danger-50);
}

.border-danger-50,
.hover\:border-danger-50:hover,
.group:hover .group-hover\:border-danger-50 {
  border-color: var(--danger-50);
}

.text-on-danger-100 {
  color: #000;
}

.text-danger-100,
.hover\:text-danger-100:hover,
.group:hover .group-hover\:text-danger-100 {
  color: var(--danger-100);
}

.bg-danger-100,
.hover\:bg-danger-100:hover,
.group:hover .group-hover\:bg-danger-100 {
  background-color: var(--danger-100);
}

.border-danger-100,
.hover\:border-danger-100:hover,
.group:hover .group-hover\:border-danger-100 {
  border-color: var(--danger-100);
}

.text-on-danger-200 {
  color: #fff;
}

.text-danger-200,
.hover\:text-danger-200:hover,
.group:hover .group-hover\:text-danger-200 {
  color: var(--danger-200);
}

.bg-danger-200,
.hover\:bg-danger-200:hover,
.group:hover .group-hover\:bg-danger-200 {
  background-color: var(--danger-200);
}

.border-danger-200,
.hover\:border-danger-200:hover,
.group:hover .group-hover\:border-danger-200 {
  border-color: var(--danger-200);
}

.text-on-danger-300 {
  color: #fff;
}

.text-danger-300,
.hover\:text-danger-300:hover,
.group:hover .group-hover\:text-danger-300 {
  color: var(--danger-300);
}

.bg-danger-300,
.hover\:bg-danger-300:hover,
.group:hover .group-hover\:bg-danger-300 {
  background-color: var(--danger-300);
}

.border-danger-300,
.hover\:border-danger-300:hover,
.group:hover .group-hover\:border-danger-300 {
  border-color: var(--danger-300);
}

.text-on-danger-400 {
  color: #fff;
}

.text-danger-400,
.hover\:text-danger-400:hover,
.group:hover .group-hover\:text-danger-400 {
  color: var(--danger-400);
}

.bg-danger-400,
.hover\:bg-danger-400:hover,
.group:hover .group-hover\:bg-danger-400 {
  background-color: var(--danger-400);
}

.border-danger-400,
.hover\:border-danger-400:hover,
.group:hover .group-hover\:border-danger-400 {
  border-color: var(--danger-400);
}

.text-on-danger-500 {
  color: #fff;
}

.text-danger-500,
.hover\:text-danger-500:hover,
.group:hover .group-hover\:text-danger-500 {
  color: var(--danger-500);
}

.bg-danger-500,
.hover\:bg-danger-500:hover,
.group:hover .group-hover\:bg-danger-500 {
  background-color: var(--danger-500);
}

.border-danger-500,
.hover\:border-danger-500:hover,
.group:hover .group-hover\:border-danger-500 {
  border-color: var(--danger-500);
}

.text-on-danger-600 {
  color: #fff;
}

.text-danger-600,
.hover\:text-danger-600:hover,
.group:hover .group-hover\:text-danger-600 {
  color: var(--danger-600);
}

.bg-danger-600,
.hover\:bg-danger-600:hover,
.group:hover .group-hover\:bg-danger-600 {
  background-color: var(--danger-600);
}

.border-danger-600,
.hover\:border-danger-600:hover,
.group:hover .group-hover\:border-danger-600 {
  border-color: var(--danger-600);
}

.text-on-danger-700 {
  color: #fff;
}

.text-danger-700,
.hover\:text-danger-700:hover,
.group:hover .group-hover\:text-danger-700 {
  color: var(--danger-700);
}

.bg-danger-700,
.hover\:bg-danger-700:hover,
.group:hover .group-hover\:bg-danger-700 {
  background-color: var(--danger-700);
}

.border-danger-700,
.hover\:border-danger-700:hover,
.group:hover .group-hover\:border-danger-700 {
  border-color: var(--danger-700);
}

.text-on-danger-800 {
  color: #fff;
}

.text-danger-800,
.hover\:text-danger-800:hover,
.group:hover .group-hover\:text-danger-800 {
  color: var(--danger-800);
}

.bg-danger-800,
.hover\:bg-danger-800:hover,
.group:hover .group-hover\:bg-danger-800 {
  background-color: var(--danger-800);
}

.border-danger-800,
.hover\:border-danger-800:hover,
.group:hover .group-hover\:border-danger-800 {
  border-color: var(--danger-800);
}

.text-on-danger-900 {
  color: #fff;
}

.text-danger-900,
.hover\:text-danger-900:hover,
.group:hover .group-hover\:text-danger-900 {
  color: var(--danger-900);
}

.bg-danger-900,
.hover\:bg-danger-900:hover,
.group:hover .group-hover\:bg-danger-900 {
  background-color: var(--danger-900);
}

.border-danger-900,
.hover\:border-danger-900:hover,
.group:hover .group-hover\:border-danger-900 {
  border-color: var(--danger-900);
}

.text-danger,
.hover\:text-danger:hover,
.group:hover .group-hover\:text-danger {
  color: var(--danger);
}

.bg-danger,
.hover\:bg-danger:hover,
.group:hover .group-hover\:bg-danger {
  background-color: var(--danger);
}

.border-danger,
.hover\:border-danger:hover,
.group:hover .group-hover\:border-danger {
  border-color: var(--danger);
}

.text-on-warning-50 {
  color: #000;
}

.text-warning-50,
.hover\:text-warning-50:hover,
.group:hover .group-hover\:text-warning-50 {
  color: var(--warning-50);
}

.bg-warning-50,
.hover\:bg-warning-50:hover,
.group:hover .group-hover\:bg-warning-50 {
  background-color: var(--warning-50);
}

.border-warning-50,
.hover\:border-warning-50:hover,
.group:hover .group-hover\:border-warning-50 {
  border-color: var(--warning-50);
}

.text-on-warning-100 {
  color: #000;
}

.text-warning-100,
.hover\:text-warning-100:hover,
.group:hover .group-hover\:text-warning-100 {
  color: var(--warning-100);
}

.bg-warning-100,
.hover\:bg-warning-100:hover,
.group:hover .group-hover\:bg-warning-100 {
  background-color: var(--warning-100);
}

.border-warning-100,
.hover\:border-warning-100:hover,
.group:hover .group-hover\:border-warning-100 {
  border-color: var(--warning-100);
}

.text-on-warning-200 {
  color: #000;
}

.text-warning-200,
.hover\:text-warning-200:hover,
.group:hover .group-hover\:text-warning-200 {
  color: var(--warning-200);
}

.bg-warning-200,
.hover\:bg-warning-200:hover,
.group:hover .group-hover\:bg-warning-200 {
  background-color: var(--warning-200);
}

.border-warning-200,
.hover\:border-warning-200:hover,
.group:hover .group-hover\:border-warning-200 {
  border-color: var(--warning-200);
}

.text-on-warning-300 {
  color: #000;
}

.text-warning-300,
.hover\:text-warning-300:hover,
.group:hover .group-hover\:text-warning-300 {
  color: var(--warning-300);
}

.bg-warning-300,
.hover\:bg-warning-300:hover,
.group:hover .group-hover\:bg-warning-300 {
  background-color: var(--warning-300);
}

.border-warning-300,
.hover\:border-warning-300:hover,
.group:hover .group-hover\:border-warning-300 {
  border-color: var(--warning-300);
}

.text-on-warning-400 {
  color: #fff;
}

.text-warning-400,
.hover\:text-warning-400:hover,
.group:hover .group-hover\:text-warning-400 {
  color: var(--warning-400);
}

.bg-warning-400,
.hover\:bg-warning-400:hover,
.group:hover .group-hover\:bg-warning-400 {
  background-color: var(--warning-400);
}

.border-warning-400,
.hover\:border-warning-400:hover,
.group:hover .group-hover\:border-warning-400 {
  border-color: var(--warning-400);
}

.text-on-warning-500 {
  color: #fff;
}

.text-warning-500,
.hover\:text-warning-500:hover,
.group:hover .group-hover\:text-warning-500 {
  color: var(--warning-500);
}

.bg-warning-500,
.hover\:bg-warning-500:hover,
.group:hover .group-hover\:bg-warning-500 {
  background-color: var(--warning-500);
}

.border-warning-500,
.hover\:border-warning-500:hover,
.group:hover .group-hover\:border-warning-500 {
  border-color: var(--warning-500);
}

.text-on-warning-600 {
  color: #fff;
}

.text-warning-600,
.hover\:text-warning-600:hover,
.group:hover .group-hover\:text-warning-600 {
  color: var(--warning-600);
}

.bg-warning-600,
.hover\:bg-warning-600:hover,
.group:hover .group-hover\:bg-warning-600 {
  background-color: var(--warning-600);
}

.border-warning-600,
.hover\:border-warning-600:hover,
.group:hover .group-hover\:border-warning-600 {
  border-color: var(--warning-600);
}

.text-on-warning-700 {
  color: #fff;
}

.text-warning-700,
.hover\:text-warning-700:hover,
.group:hover .group-hover\:text-warning-700 {
  color: var(--warning-700);
}

.bg-warning-700,
.hover\:bg-warning-700:hover,
.group:hover .group-hover\:bg-warning-700 {
  background-color: var(--warning-700);
}

.border-warning-700,
.hover\:border-warning-700:hover,
.group:hover .group-hover\:border-warning-700 {
  border-color: var(--warning-700);
}

.text-on-warning-800 {
  color: #fff;
}

.text-warning-800,
.hover\:text-warning-800:hover,
.group:hover .group-hover\:text-warning-800 {
  color: var(--warning-800);
}

.bg-warning-800,
.hover\:bg-warning-800:hover,
.group:hover .group-hover\:bg-warning-800 {
  background-color: var(--warning-800);
}

.border-warning-800,
.hover\:border-warning-800:hover,
.group:hover .group-hover\:border-warning-800 {
  border-color: var(--warning-800);
}

.text-on-warning-900 {
  color: #fff;
}

.text-warning-900,
.hover\:text-warning-900:hover,
.group:hover .group-hover\:text-warning-900 {
  color: var(--warning-900);
}

.bg-warning-900,
.hover\:bg-warning-900:hover,
.group:hover .group-hover\:bg-warning-900 {
  background-color: var(--warning-900);
}

.border-warning-900,
.hover\:border-warning-900:hover,
.group:hover .group-hover\:border-warning-900 {
  border-color: var(--warning-900);
}

.text-warning,
.hover\:text-warning:hover,
.group:hover .group-hover\:text-warning {
  color: var(--warning);
}

.bg-warning,
.hover\:bg-warning:hover,
.group:hover .group-hover\:bg-warning {
  background-color: var(--warning);
}

.border-warning,
.hover\:border-warning:hover,
.group:hover .group-hover\:border-warning {
  border-color: var(--warning);
}

.text-on-info-50 {
  color: #000;
}

.text-info-50,
.hover\:text-info-50:hover,
.group:hover .group-hover\:text-info-50 {
  color: var(--info-50);
}

.bg-info-50,
.hover\:bg-info-50:hover,
.group:hover .group-hover\:bg-info-50 {
  background-color: var(--info-50);
}

.border-info-50,
.hover\:border-info-50:hover,
.group:hover .group-hover\:border-info-50 {
  border-color: var(--info-50);
}

.text-on-info-100 {
  color: #000;
}

.text-info-100,
.hover\:text-info-100:hover,
.group:hover .group-hover\:text-info-100 {
  color: var(--info-100);
}

.bg-info-100,
.hover\:bg-info-100:hover,
.group:hover .group-hover\:bg-info-100 {
  background-color: var(--info-100);
}

.border-info-100,
.hover\:border-info-100:hover,
.group:hover .group-hover\:border-info-100 {
  border-color: var(--info-100);
}

.text-on-info-200 {
  color: #000;
}

.text-info-200,
.hover\:text-info-200:hover,
.group:hover .group-hover\:text-info-200 {
  color: var(--info-200);
}

.bg-info-200,
.hover\:bg-info-200:hover,
.group:hover .group-hover\:bg-info-200 {
  background-color: var(--info-200);
}

.border-info-200,
.hover\:border-info-200:hover,
.group:hover .group-hover\:border-info-200 {
  border-color: var(--info-200);
}

.text-on-info-300 {
  color: #fff;
}

.text-info-300,
.hover\:text-info-300:hover,
.group:hover .group-hover\:text-info-300 {
  color: var(--info-300);
}

.bg-info-300,
.hover\:bg-info-300:hover,
.group:hover .group-hover\:bg-info-300 {
  background-color: var(--info-300);
}

.border-info-300,
.hover\:border-info-300:hover,
.group:hover .group-hover\:border-info-300 {
  border-color: var(--info-300);
}

.text-on-info-400 {
  color: #fff;
}

.text-info-400,
.hover\:text-info-400:hover,
.group:hover .group-hover\:text-info-400 {
  color: var(--info-400);
}

.bg-info-400,
.hover\:bg-info-400:hover,
.group:hover .group-hover\:bg-info-400 {
  background-color: var(--info-400);
}

.border-info-400,
.hover\:border-info-400:hover,
.group:hover .group-hover\:border-info-400 {
  border-color: var(--info-400);
}

.text-on-info-500 {
  color: #fff;
}

.text-info-500,
.hover\:text-info-500:hover,
.group:hover .group-hover\:text-info-500 {
  color: var(--info-500);
}

.bg-info-500,
.hover\:bg-info-500:hover,
.group:hover .group-hover\:bg-info-500 {
  background-color: var(--info-500);
}

.border-info-500,
.hover\:border-info-500:hover,
.group:hover .group-hover\:border-info-500 {
  border-color: var(--info-500);
}

.text-on-info-600 {
  color: #fff;
}

.text-info-600,
.hover\:text-info-600:hover,
.group:hover .group-hover\:text-info-600 {
  color: var(--info-600);
}

.bg-info-600,
.hover\:bg-info-600:hover,
.group:hover .group-hover\:bg-info-600 {
  background-color: var(--info-600);
}

.border-info-600,
.hover\:border-info-600:hover,
.group:hover .group-hover\:border-info-600 {
  border-color: var(--info-600);
}

.text-on-info-700 {
  color: #fff;
}

.text-info-700,
.hover\:text-info-700:hover,
.group:hover .group-hover\:text-info-700 {
  color: var(--info-700);
}

.bg-info-700,
.hover\:bg-info-700:hover,
.group:hover .group-hover\:bg-info-700 {
  background-color: var(--info-700);
}

.border-info-700,
.hover\:border-info-700:hover,
.group:hover .group-hover\:border-info-700 {
  border-color: var(--info-700);
}

.text-on-info-800 {
  color: #fff;
}

.text-info-800,
.hover\:text-info-800:hover,
.group:hover .group-hover\:text-info-800 {
  color: var(--info-800);
}

.bg-info-800,
.hover\:bg-info-800:hover,
.group:hover .group-hover\:bg-info-800 {
  background-color: var(--info-800);
}

.border-info-800,
.hover\:border-info-800:hover,
.group:hover .group-hover\:border-info-800 {
  border-color: var(--info-800);
}

.text-on-info-900 {
  color: #fff;
}

.text-info-900,
.hover\:text-info-900:hover,
.group:hover .group-hover\:text-info-900 {
  color: var(--info-900);
}

.bg-info-900,
.hover\:bg-info-900:hover,
.group:hover .group-hover\:bg-info-900 {
  background-color: var(--info-900);
}

.border-info-900,
.hover\:border-info-900:hover,
.group:hover .group-hover\:border-info-900 {
  border-color: var(--info-900);
}

.text-info,
.hover\:text-info:hover,
.group:hover .group-hover\:text-info {
  color: var(--info);
}

.bg-info,
.hover\:bg-info:hover,
.group:hover .group-hover\:bg-info {
  background-color: var(--info);
}

.border-info,
.hover\:border-info:hover,
.group:hover .group-hover\:border-info {
  border-color: var(--info);
}

.text-on-gray-50 {
  color: #000;
}

.text-gray-50,
.hover\:text-gray-50:hover,
.group:hover .group-hover\:text-gray-50 {
  color: var(--gray-50);
}

.bg-gray-50,
.hover\:bg-gray-50:hover,
.group:hover .group-hover\:bg-gray-50 {
  background-color: var(--gray-50);
}

.border-gray-50,
.hover\:border-gray-50:hover,
.group:hover .group-hover\:border-gray-50 {
  border-color: var(--gray-50);
}

.text-on-gray-100 {
  color: #000;
}

.text-gray-100,
.hover\:text-gray-100:hover,
.group:hover .group-hover\:text-gray-100 {
  color: var(--gray-100);
}

.bg-gray-100,
.hover\:bg-gray-100:hover,
.group:hover .group-hover\:bg-gray-100 {
  background-color: var(--gray-100);
}

.border-gray-100,
.hover\:border-gray-100:hover,
.group:hover .group-hover\:border-gray-100 {
  border-color: var(--gray-100);
}

.text-on-gray-200 {
  color: #fff;
}

.text-gray-200,
.hover\:text-gray-200:hover,
.group:hover .group-hover\:text-gray-200 {
  color: var(--gray-200);
}

.bg-gray-200,
.hover\:bg-gray-200:hover,
.group:hover .group-hover\:bg-gray-200 {
  background-color: var(--gray-200);
}

.border-gray-200,
.hover\:border-gray-200:hover,
.group:hover .group-hover\:border-gray-200 {
  border-color: var(--gray-200);
}

.text-on-gray-300 {
  color: #fff;
}

.text-gray-300,
.hover\:text-gray-300:hover,
.group:hover .group-hover\:text-gray-300 {
  color: var(--gray-300);
}

.bg-gray-300,
.hover\:bg-gray-300:hover,
.group:hover .group-hover\:bg-gray-300 {
  background-color: var(--gray-300);
}

.border-gray-300,
.hover\:border-gray-300:hover,
.group:hover .group-hover\:border-gray-300 {
  border-color: var(--gray-300);
}

.text-on-gray-400 {
  color: #fff;
}

.text-gray-400,
.hover\:text-gray-400:hover,
.group:hover .group-hover\:text-gray-400 {
  color: var(--gray-400);
}

.bg-gray-400,
.hover\:bg-gray-400:hover,
.group:hover .group-hover\:bg-gray-400 {
  background-color: var(--gray-400);
}

.border-gray-400,
.hover\:border-gray-400:hover,
.group:hover .group-hover\:border-gray-400 {
  border-color: var(--gray-400);
}

.text-on-gray-500 {
  color: #fff;
}

.text-gray-500,
.hover\:text-gray-500:hover,
.group:hover .group-hover\:text-gray-500 {
  color: var(--gray-500);
}

.bg-gray-500,
.hover\:bg-gray-500:hover,
.group:hover .group-hover\:bg-gray-500 {
  background-color: var(--gray-500);
}

.border-gray-500,
.hover\:border-gray-500:hover,
.group:hover .group-hover\:border-gray-500 {
  border-color: var(--gray-500);
}

.text-on-gray-600 {
  color: #fff;
}

.text-gray-600,
.hover\:text-gray-600:hover,
.group:hover .group-hover\:text-gray-600 {
  color: var(--gray-600);
}

.bg-gray-600,
.hover\:bg-gray-600:hover,
.group:hover .group-hover\:bg-gray-600 {
  background-color: var(--gray-600);
}

.border-gray-600,
.hover\:border-gray-600:hover,
.group:hover .group-hover\:border-gray-600 {
  border-color: var(--gray-600);
}

.text-on-gray-700 {
  color: #fff;
}

.text-gray-700,
.hover\:text-gray-700:hover,
.group:hover .group-hover\:text-gray-700 {
  color: var(--gray-700);
}

.bg-gray-700,
.hover\:bg-gray-700:hover,
.group:hover .group-hover\:bg-gray-700 {
  background-color: var(--gray-700);
}

.border-gray-700,
.hover\:border-gray-700:hover,
.group:hover .group-hover\:border-gray-700 {
  border-color: var(--gray-700);
}

.text-on-gray-800 {
  color: #fff;
}

.text-gray-800,
.hover\:text-gray-800:hover,
.group:hover .group-hover\:text-gray-800 {
  color: var(--gray-800);
}

.bg-gray-800,
.hover\:bg-gray-800:hover,
.group:hover .group-hover\:bg-gray-800 {
  background-color: var(--gray-800);
}

.border-gray-800,
.hover\:border-gray-800:hover,
.group:hover .group-hover\:border-gray-800 {
  border-color: var(--gray-800);
}

.text-on-gray-900 {
  color: #fff;
}

.text-gray-900,
.hover\:text-gray-900:hover,
.group:hover .group-hover\:text-gray-900 {
  color: var(--gray-900);
}

.bg-gray-900,
.hover\:bg-gray-900:hover,
.group:hover .group-hover\:bg-gray-900 {
  background-color: var(--gray-900);
}

.border-gray-900,
.hover\:border-gray-900:hover,
.group:hover .group-hover\:border-gray-900 {
  border-color: var(--gray-900);
}

.text-gray,
.hover\:text-gray:hover,
.group:hover .group-hover\:text-gray {
  color: var(--gray);
}

.bg-gray,
.hover\:bg-gray:hover,
.group:hover .group-hover\:bg-gray {
  background-color: var(--gray);
}

.border-gray,
.hover\:border-gray:hover,
.group:hover .group-hover\:border-gray {
  border-color: var(--gray);
}

.text-on-red-50 {
  color: #000;
}

.text-red-50,
.hover\:text-red-50:hover,
.group:hover .group-hover\:text-red-50 {
  color: var(--red-50);
}

.bg-red-50,
.hover\:bg-red-50:hover,
.group:hover .group-hover\:bg-red-50 {
  background-color: var(--red-50);
}

.border-red-50,
.hover\:border-red-50:hover,
.group:hover .group-hover\:border-red-50 {
  border-color: var(--red-50);
}

.text-on-red-100 {
  color: #000;
}

.text-red-100,
.hover\:text-red-100:hover,
.group:hover .group-hover\:text-red-100 {
  color: var(--red-100);
}

.bg-red-100,
.hover\:bg-red-100:hover,
.group:hover .group-hover\:bg-red-100 {
  background-color: var(--red-100);
}

.border-red-100,
.hover\:border-red-100:hover,
.group:hover .group-hover\:border-red-100 {
  border-color: var(--red-100);
}

.text-on-red-200 {
  color: #fff;
}

.text-red-200,
.hover\:text-red-200:hover,
.group:hover .group-hover\:text-red-200 {
  color: var(--red-200);
}

.bg-red-200,
.hover\:bg-red-200:hover,
.group:hover .group-hover\:bg-red-200 {
  background-color: var(--red-200);
}

.border-red-200,
.hover\:border-red-200:hover,
.group:hover .group-hover\:border-red-200 {
  border-color: var(--red-200);
}

.text-on-red-300 {
  color: #fff;
}

.text-red-300,
.hover\:text-red-300:hover,
.group:hover .group-hover\:text-red-300 {
  color: var(--red-300);
}

.bg-red-300,
.hover\:bg-red-300:hover,
.group:hover .group-hover\:bg-red-300 {
  background-color: var(--red-300);
}

.border-red-300,
.hover\:border-red-300:hover,
.group:hover .group-hover\:border-red-300 {
  border-color: var(--red-300);
}

.text-on-red-400 {
  color: #fff;
}

.text-red-400,
.hover\:text-red-400:hover,
.group:hover .group-hover\:text-red-400 {
  color: var(--red-400);
}

.bg-red-400,
.hover\:bg-red-400:hover,
.group:hover .group-hover\:bg-red-400 {
  background-color: var(--red-400);
}

.border-red-400,
.hover\:border-red-400:hover,
.group:hover .group-hover\:border-red-400 {
  border-color: var(--red-400);
}

.text-on-red-500 {
  color: #fff;
}

.text-red-500,
.hover\:text-red-500:hover,
.group:hover .group-hover\:text-red-500 {
  color: var(--red-500);
}

.bg-red-500,
.hover\:bg-red-500:hover,
.group:hover .group-hover\:bg-red-500 {
  background-color: var(--red-500);
}

.border-red-500,
.hover\:border-red-500:hover,
.group:hover .group-hover\:border-red-500 {
  border-color: var(--red-500);
}

.text-on-red-600 {
  color: #fff;
}

.text-red-600,
.hover\:text-red-600:hover,
.group:hover .group-hover\:text-red-600 {
  color: var(--red-600);
}

.bg-red-600,
.hover\:bg-red-600:hover,
.group:hover .group-hover\:bg-red-600 {
  background-color: var(--red-600);
}

.border-red-600,
.hover\:border-red-600:hover,
.group:hover .group-hover\:border-red-600 {
  border-color: var(--red-600);
}

.text-on-red-700 {
  color: #fff;
}

.text-red-700,
.hover\:text-red-700:hover,
.group:hover .group-hover\:text-red-700 {
  color: var(--red-700);
}

.bg-red-700,
.hover\:bg-red-700:hover,
.group:hover .group-hover\:bg-red-700 {
  background-color: var(--red-700);
}

.border-red-700,
.hover\:border-red-700:hover,
.group:hover .group-hover\:border-red-700 {
  border-color: var(--red-700);
}

.text-on-red-800 {
  color: #fff;
}

.text-red-800,
.hover\:text-red-800:hover,
.group:hover .group-hover\:text-red-800 {
  color: var(--red-800);
}

.bg-red-800,
.hover\:bg-red-800:hover,
.group:hover .group-hover\:bg-red-800 {
  background-color: var(--red-800);
}

.border-red-800,
.hover\:border-red-800:hover,
.group:hover .group-hover\:border-red-800 {
  border-color: var(--red-800);
}

.text-on-red-900 {
  color: #fff;
}

.text-red-900,
.hover\:text-red-900:hover,
.group:hover .group-hover\:text-red-900 {
  color: var(--red-900);
}

.bg-red-900,
.hover\:bg-red-900:hover,
.group:hover .group-hover\:bg-red-900 {
  background-color: var(--red-900);
}

.border-red-900,
.hover\:border-red-900:hover,
.group:hover .group-hover\:border-red-900 {
  border-color: var(--red-900);
}

.text-red,
.hover\:text-red:hover,
.group:hover .group-hover\:text-red {
  color: var(--red);
}

.bg-red,
.hover\:bg-red:hover,
.group:hover .group-hover\:bg-red {
  background-color: var(--red);
}

.border-red,
.hover\:border-red:hover,
.group:hover .group-hover\:border-red {
  border-color: var(--red);
}

.text-on-blue-50 {
  color: #000;
}

.text-blue-50,
.hover\:text-blue-50:hover,
.group:hover .group-hover\:text-blue-50 {
  color: var(--blue-50);
}

.bg-blue-50,
.hover\:bg-blue-50:hover,
.group:hover .group-hover\:bg-blue-50 {
  background-color: var(--blue-50);
}

.border-blue-50,
.hover\:border-blue-50:hover,
.group:hover .group-hover\:border-blue-50 {
  border-color: var(--blue-50);
}

.text-on-blue-100 {
  color: #000;
}

.text-blue-100,
.hover\:text-blue-100:hover,
.group:hover .group-hover\:text-blue-100 {
  color: var(--blue-100);
}

.bg-blue-100,
.hover\:bg-blue-100:hover,
.group:hover .group-hover\:bg-blue-100 {
  background-color: var(--blue-100);
}

.border-blue-100,
.hover\:border-blue-100:hover,
.group:hover .group-hover\:border-blue-100 {
  border-color: var(--blue-100);
}

.text-on-blue-200 {
  color: #fff;
}

.text-blue-200,
.hover\:text-blue-200:hover,
.group:hover .group-hover\:text-blue-200 {
  color: var(--blue-200);
}

.bg-blue-200,
.hover\:bg-blue-200:hover,
.group:hover .group-hover\:bg-blue-200 {
  background-color: var(--blue-200);
}

.border-blue-200,
.hover\:border-blue-200:hover,
.group:hover .group-hover\:border-blue-200 {
  border-color: var(--blue-200);
}

.text-on-blue-300 {
  color: #fff;
}

.text-blue-300,
.hover\:text-blue-300:hover,
.group:hover .group-hover\:text-blue-300 {
  color: var(--blue-300);
}

.bg-blue-300,
.hover\:bg-blue-300:hover,
.group:hover .group-hover\:bg-blue-300 {
  background-color: var(--blue-300);
}

.border-blue-300,
.hover\:border-blue-300:hover,
.group:hover .group-hover\:border-blue-300 {
  border-color: var(--blue-300);
}

.text-on-blue-400 {
  color: #fff;
}

.text-blue-400,
.hover\:text-blue-400:hover,
.group:hover .group-hover\:text-blue-400 {
  color: var(--blue-400);
}

.bg-blue-400,
.hover\:bg-blue-400:hover,
.group:hover .group-hover\:bg-blue-400 {
  background-color: var(--blue-400);
}

.border-blue-400,
.hover\:border-blue-400:hover,
.group:hover .group-hover\:border-blue-400 {
  border-color: var(--blue-400);
}

.text-on-blue-500 {
  color: #fff;
}

.text-blue-500,
.hover\:text-blue-500:hover,
.group:hover .group-hover\:text-blue-500 {
  color: var(--blue-500);
}

.bg-blue-500,
.hover\:bg-blue-500:hover,
.group:hover .group-hover\:bg-blue-500 {
  background-color: var(--blue-500);
}

.border-blue-500,
.hover\:border-blue-500:hover,
.group:hover .group-hover\:border-blue-500 {
  border-color: var(--blue-500);
}

.text-on-blue-600 {
  color: #fff;
}

.text-blue-600,
.hover\:text-blue-600:hover,
.group:hover .group-hover\:text-blue-600 {
  color: var(--blue-600);
}

.bg-blue-600,
.hover\:bg-blue-600:hover,
.group:hover .group-hover\:bg-blue-600 {
  background-color: var(--blue-600);
}

.border-blue-600,
.hover\:border-blue-600:hover,
.group:hover .group-hover\:border-blue-600 {
  border-color: var(--blue-600);
}

.text-on-blue-700 {
  color: #fff;
}

.text-blue-700,
.hover\:text-blue-700:hover,
.group:hover .group-hover\:text-blue-700 {
  color: var(--blue-700);
}

.bg-blue-700,
.hover\:bg-blue-700:hover,
.group:hover .group-hover\:bg-blue-700 {
  background-color: var(--blue-700);
}

.border-blue-700,
.hover\:border-blue-700:hover,
.group:hover .group-hover\:border-blue-700 {
  border-color: var(--blue-700);
}

.text-on-blue-800 {
  color: #fff;
}

.text-blue-800,
.hover\:text-blue-800:hover,
.group:hover .group-hover\:text-blue-800 {
  color: var(--blue-800);
}

.bg-blue-800,
.hover\:bg-blue-800:hover,
.group:hover .group-hover\:bg-blue-800 {
  background-color: var(--blue-800);
}

.border-blue-800,
.hover\:border-blue-800:hover,
.group:hover .group-hover\:border-blue-800 {
  border-color: var(--blue-800);
}

.text-on-blue-900 {
  color: #fff;
}

.text-blue-900,
.hover\:text-blue-900:hover,
.group:hover .group-hover\:text-blue-900 {
  color: var(--blue-900);
}

.bg-blue-900,
.hover\:bg-blue-900:hover,
.group:hover .group-hover\:bg-blue-900 {
  background-color: var(--blue-900);
}

.border-blue-900,
.hover\:border-blue-900:hover,
.group:hover .group-hover\:border-blue-900 {
  border-color: var(--blue-900);
}

.text-blue,
.hover\:text-blue:hover,
.group:hover .group-hover\:text-blue {
  color: var(--blue);
}

.bg-blue,
.hover\:bg-blue:hover,
.group:hover .group-hover\:bg-blue {
  background-color: var(--blue);
}

.border-blue,
.hover\:border-blue:hover,
.group:hover .group-hover\:border-blue {
  border-color: var(--blue);
}

.text-on-green-50 {
  color: #000;
}

.text-green-50,
.hover\:text-green-50:hover,
.group:hover .group-hover\:text-green-50 {
  color: var(--green-50);
}

.bg-green-50,
.hover\:bg-green-50:hover,
.group:hover .group-hover\:bg-green-50 {
  background-color: var(--green-50);
}

.border-green-50,
.hover\:border-green-50:hover,
.group:hover .group-hover\:border-green-50 {
  border-color: var(--green-50);
}

.text-on-green-100 {
  color: #000;
}

.text-green-100,
.hover\:text-green-100:hover,
.group:hover .group-hover\:text-green-100 {
  color: var(--green-100);
}

.bg-green-100,
.hover\:bg-green-100:hover,
.group:hover .group-hover\:bg-green-100 {
  background-color: var(--green-100);
}

.border-green-100,
.hover\:border-green-100:hover,
.group:hover .group-hover\:border-green-100 {
  border-color: var(--green-100);
}

.text-on-green-200 {
  color: #000;
}

.text-green-200,
.hover\:text-green-200:hover,
.group:hover .group-hover\:text-green-200 {
  color: var(--green-200);
}

.bg-green-200,
.hover\:bg-green-200:hover,
.group:hover .group-hover\:bg-green-200 {
  background-color: var(--green-200);
}

.border-green-200,
.hover\:border-green-200:hover,
.group:hover .group-hover\:border-green-200 {
  border-color: var(--green-200);
}

.text-on-green-300 {
  color: #fff;
}

.text-green-300,
.hover\:text-green-300:hover,
.group:hover .group-hover\:text-green-300 {
  color: var(--green-300);
}

.bg-green-300,
.hover\:bg-green-300:hover,
.group:hover .group-hover\:bg-green-300 {
  background-color: var(--green-300);
}

.border-green-300,
.hover\:border-green-300:hover,
.group:hover .group-hover\:border-green-300 {
  border-color: var(--green-300);
}

.text-on-green-400 {
  color: #fff;
}

.text-green-400,
.hover\:text-green-400:hover,
.group:hover .group-hover\:text-green-400 {
  color: var(--green-400);
}

.bg-green-400,
.hover\:bg-green-400:hover,
.group:hover .group-hover\:bg-green-400 {
  background-color: var(--green-400);
}

.border-green-400,
.hover\:border-green-400:hover,
.group:hover .group-hover\:border-green-400 {
  border-color: var(--green-400);
}

.text-on-green-500 {
  color: #fff;
}

.text-green-500,
.hover\:text-green-500:hover,
.group:hover .group-hover\:text-green-500 {
  color: var(--green-500);
}

.bg-green-500,
.hover\:bg-green-500:hover,
.group:hover .group-hover\:bg-green-500 {
  background-color: var(--green-500);
}

.border-green-500,
.hover\:border-green-500:hover,
.group:hover .group-hover\:border-green-500 {
  border-color: var(--green-500);
}

.text-on-green-600 {
  color: #fff;
}

.text-green-600,
.hover\:text-green-600:hover,
.group:hover .group-hover\:text-green-600 {
  color: var(--green-600);
}

.bg-green-600,
.hover\:bg-green-600:hover,
.group:hover .group-hover\:bg-green-600 {
  background-color: var(--green-600);
}

.border-green-600,
.hover\:border-green-600:hover,
.group:hover .group-hover\:border-green-600 {
  border-color: var(--green-600);
}

.text-on-green-700 {
  color: #fff;
}

.text-green-700,
.hover\:text-green-700:hover,
.group:hover .group-hover\:text-green-700 {
  color: var(--green-700);
}

.bg-green-700,
.hover\:bg-green-700:hover,
.group:hover .group-hover\:bg-green-700 {
  background-color: var(--green-700);
}

.border-green-700,
.hover\:border-green-700:hover,
.group:hover .group-hover\:border-green-700 {
  border-color: var(--green-700);
}

.text-on-green-800 {
  color: #fff;
}

.text-green-800,
.hover\:text-green-800:hover,
.group:hover .group-hover\:text-green-800 {
  color: var(--green-800);
}

.bg-green-800,
.hover\:bg-green-800:hover,
.group:hover .group-hover\:bg-green-800 {
  background-color: var(--green-800);
}

.border-green-800,
.hover\:border-green-800:hover,
.group:hover .group-hover\:border-green-800 {
  border-color: var(--green-800);
}

.text-on-green-900 {
  color: #fff;
}

.text-green-900,
.hover\:text-green-900:hover,
.group:hover .group-hover\:text-green-900 {
  color: var(--green-900);
}

.bg-green-900,
.hover\:bg-green-900:hover,
.group:hover .group-hover\:bg-green-900 {
  background-color: var(--green-900);
}

.border-green-900,
.hover\:border-green-900:hover,
.group:hover .group-hover\:border-green-900 {
  border-color: var(--green-900);
}

.text-green,
.hover\:text-green:hover,
.group:hover .group-hover\:text-green {
  color: var(--green);
}

.bg-green,
.hover\:bg-green:hover,
.group:hover .group-hover\:bg-green {
  background-color: var(--green);
}

.border-green,
.hover\:border-green:hover,
.group:hover .group-hover\:border-green {
  border-color: var(--green);
}

.text-on-yellow-50 {
  color: #000;
}

.text-yellow-50,
.hover\:text-yellow-50:hover,
.group:hover .group-hover\:text-yellow-50 {
  color: var(--yellow-50);
}

.bg-yellow-50,
.hover\:bg-yellow-50:hover,
.group:hover .group-hover\:bg-yellow-50 {
  background-color: var(--yellow-50);
}

.border-yellow-50,
.hover\:border-yellow-50:hover,
.group:hover .group-hover\:border-yellow-50 {
  border-color: var(--yellow-50);
}

.text-on-yellow-100 {
  color: #000;
}

.text-yellow-100,
.hover\:text-yellow-100:hover,
.group:hover .group-hover\:text-yellow-100 {
  color: var(--yellow-100);
}

.bg-yellow-100,
.hover\:bg-yellow-100:hover,
.group:hover .group-hover\:bg-yellow-100 {
  background-color: var(--yellow-100);
}

.border-yellow-100,
.hover\:border-yellow-100:hover,
.group:hover .group-hover\:border-yellow-100 {
  border-color: var(--yellow-100);
}

.text-on-yellow-200 {
  color: #000;
}

.text-yellow-200,
.hover\:text-yellow-200:hover,
.group:hover .group-hover\:text-yellow-200 {
  color: var(--yellow-200);
}

.bg-yellow-200,
.hover\:bg-yellow-200:hover,
.group:hover .group-hover\:bg-yellow-200 {
  background-color: var(--yellow-200);
}

.border-yellow-200,
.hover\:border-yellow-200:hover,
.group:hover .group-hover\:border-yellow-200 {
  border-color: var(--yellow-200);
}

.text-on-yellow-300 {
  color: #000;
}

.text-yellow-300,
.hover\:text-yellow-300:hover,
.group:hover .group-hover\:text-yellow-300 {
  color: var(--yellow-300);
}

.bg-yellow-300,
.hover\:bg-yellow-300:hover,
.group:hover .group-hover\:bg-yellow-300 {
  background-color: var(--yellow-300);
}

.border-yellow-300,
.hover\:border-yellow-300:hover,
.group:hover .group-hover\:border-yellow-300 {
  border-color: var(--yellow-300);
}

.text-on-yellow-400 {
  color: #fff;
}

.text-yellow-400,
.hover\:text-yellow-400:hover,
.group:hover .group-hover\:text-yellow-400 {
  color: var(--yellow-400);
}

.bg-yellow-400,
.hover\:bg-yellow-400:hover,
.group:hover .group-hover\:bg-yellow-400 {
  background-color: var(--yellow-400);
}

.border-yellow-400,
.hover\:border-yellow-400:hover,
.group:hover .group-hover\:border-yellow-400 {
  border-color: var(--yellow-400);
}

.text-on-yellow-500 {
  color: #fff;
}

.text-yellow-500,
.hover\:text-yellow-500:hover,
.group:hover .group-hover\:text-yellow-500 {
  color: var(--yellow-500);
}

.bg-yellow-500,
.hover\:bg-yellow-500:hover,
.group:hover .group-hover\:bg-yellow-500 {
  background-color: var(--yellow-500);
}

.border-yellow-500,
.hover\:border-yellow-500:hover,
.group:hover .group-hover\:border-yellow-500 {
  border-color: var(--yellow-500);
}

.text-on-yellow-600 {
  color: #fff;
}

.text-yellow-600,
.hover\:text-yellow-600:hover,
.group:hover .group-hover\:text-yellow-600 {
  color: var(--yellow-600);
}

.bg-yellow-600,
.hover\:bg-yellow-600:hover,
.group:hover .group-hover\:bg-yellow-600 {
  background-color: var(--yellow-600);
}

.border-yellow-600,
.hover\:border-yellow-600:hover,
.group:hover .group-hover\:border-yellow-600 {
  border-color: var(--yellow-600);
}

.text-on-yellow-700 {
  color: #fff;
}

.text-yellow-700,
.hover\:text-yellow-700:hover,
.group:hover .group-hover\:text-yellow-700 {
  color: var(--yellow-700);
}

.bg-yellow-700,
.hover\:bg-yellow-700:hover,
.group:hover .group-hover\:bg-yellow-700 {
  background-color: var(--yellow-700);
}

.border-yellow-700,
.hover\:border-yellow-700:hover,
.group:hover .group-hover\:border-yellow-700 {
  border-color: var(--yellow-700);
}

.text-on-yellow-800 {
  color: #fff;
}

.text-yellow-800,
.hover\:text-yellow-800:hover,
.group:hover .group-hover\:text-yellow-800 {
  color: var(--yellow-800);
}

.bg-yellow-800,
.hover\:bg-yellow-800:hover,
.group:hover .group-hover\:bg-yellow-800 {
  background-color: var(--yellow-800);
}

.border-yellow-800,
.hover\:border-yellow-800:hover,
.group:hover .group-hover\:border-yellow-800 {
  border-color: var(--yellow-800);
}

.text-on-yellow-900 {
  color: #fff;
}

.text-yellow-900,
.hover\:text-yellow-900:hover,
.group:hover .group-hover\:text-yellow-900 {
  color: var(--yellow-900);
}

.bg-yellow-900,
.hover\:bg-yellow-900:hover,
.group:hover .group-hover\:bg-yellow-900 {
  background-color: var(--yellow-900);
}

.border-yellow-900,
.hover\:border-yellow-900:hover,
.group:hover .group-hover\:border-yellow-900 {
  border-color: var(--yellow-900);
}

.text-yellow,
.hover\:text-yellow:hover,
.group:hover .group-hover\:text-yellow {
  color: var(--yellow);
}

.bg-yellow,
.hover\:bg-yellow:hover,
.group:hover .group-hover\:bg-yellow {
  background-color: var(--yellow);
}

.border-yellow,
.hover\:border-yellow:hover,
.group:hover .group-hover\:border-yellow {
  border-color: var(--yellow);
}

.text-on-purple-50 {
  color: #000;
}

.text-purple-50,
.hover\:text-purple-50:hover,
.group:hover .group-hover\:text-purple-50 {
  color: var(--purple-50);
}

.bg-purple-50,
.hover\:bg-purple-50:hover,
.group:hover .group-hover\:bg-purple-50 {
  background-color: var(--purple-50);
}

.border-purple-50,
.hover\:border-purple-50:hover,
.group:hover .group-hover\:border-purple-50 {
  border-color: var(--purple-50);
}

.text-on-purple-100 {
  color: #000;
}

.text-purple-100,
.hover\:text-purple-100:hover,
.group:hover .group-hover\:text-purple-100 {
  color: var(--purple-100);
}

.bg-purple-100,
.hover\:bg-purple-100:hover,
.group:hover .group-hover\:bg-purple-100 {
  background-color: var(--purple-100);
}

.border-purple-100,
.hover\:border-purple-100:hover,
.group:hover .group-hover\:border-purple-100 {
  border-color: var(--purple-100);
}

.text-on-purple-200 {
  color: #fff;
}

.text-purple-200,
.hover\:text-purple-200:hover,
.group:hover .group-hover\:text-purple-200 {
  color: var(--purple-200);
}

.bg-purple-200,
.hover\:bg-purple-200:hover,
.group:hover .group-hover\:bg-purple-200 {
  background-color: var(--purple-200);
}

.border-purple-200,
.hover\:border-purple-200:hover,
.group:hover .group-hover\:border-purple-200 {
  border-color: var(--purple-200);
}

.text-on-purple-300 {
  color: #fff;
}

.text-purple-300,
.hover\:text-purple-300:hover,
.group:hover .group-hover\:text-purple-300 {
  color: var(--purple-300);
}

.bg-purple-300,
.hover\:bg-purple-300:hover,
.group:hover .group-hover\:bg-purple-300 {
  background-color: var(--purple-300);
}

.border-purple-300,
.hover\:border-purple-300:hover,
.group:hover .group-hover\:border-purple-300 {
  border-color: var(--purple-300);
}

.text-on-purple-400 {
  color: #fff;
}

.text-purple-400,
.hover\:text-purple-400:hover,
.group:hover .group-hover\:text-purple-400 {
  color: var(--purple-400);
}

.bg-purple-400,
.hover\:bg-purple-400:hover,
.group:hover .group-hover\:bg-purple-400 {
  background-color: var(--purple-400);
}

.border-purple-400,
.hover\:border-purple-400:hover,
.group:hover .group-hover\:border-purple-400 {
  border-color: var(--purple-400);
}

.text-on-purple-500 {
  color: #fff;
}

.text-purple-500,
.hover\:text-purple-500:hover,
.group:hover .group-hover\:text-purple-500 {
  color: var(--purple-500);
}

.bg-purple-500,
.hover\:bg-purple-500:hover,
.group:hover .group-hover\:bg-purple-500 {
  background-color: var(--purple-500);
}

.border-purple-500,
.hover\:border-purple-500:hover,
.group:hover .group-hover\:border-purple-500 {
  border-color: var(--purple-500);
}

.text-on-purple-600 {
  color: #fff;
}

.text-purple-600,
.hover\:text-purple-600:hover,
.group:hover .group-hover\:text-purple-600 {
  color: var(--purple-600);
}

.bg-purple-600,
.hover\:bg-purple-600:hover,
.group:hover .group-hover\:bg-purple-600 {
  background-color: var(--purple-600);
}

.border-purple-600,
.hover\:border-purple-600:hover,
.group:hover .group-hover\:border-purple-600 {
  border-color: var(--purple-600);
}

.text-on-purple-700 {
  color: #fff;
}

.text-purple-700,
.hover\:text-purple-700:hover,
.group:hover .group-hover\:text-purple-700 {
  color: var(--purple-700);
}

.bg-purple-700,
.hover\:bg-purple-700:hover,
.group:hover .group-hover\:bg-purple-700 {
  background-color: var(--purple-700);
}

.border-purple-700,
.hover\:border-purple-700:hover,
.group:hover .group-hover\:border-purple-700 {
  border-color: var(--purple-700);
}

.text-on-purple-800 {
  color: #fff;
}

.text-purple-800,
.hover\:text-purple-800:hover,
.group:hover .group-hover\:text-purple-800 {
  color: var(--purple-800);
}

.bg-purple-800,
.hover\:bg-purple-800:hover,
.group:hover .group-hover\:bg-purple-800 {
  background-color: var(--purple-800);
}

.border-purple-800,
.hover\:border-purple-800:hover,
.group:hover .group-hover\:border-purple-800 {
  border-color: var(--purple-800);
}

.text-on-purple-900 {
  color: #fff;
}

.text-purple-900,
.hover\:text-purple-900:hover,
.group:hover .group-hover\:text-purple-900 {
  color: var(--purple-900);
}

.bg-purple-900,
.hover\:bg-purple-900:hover,
.group:hover .group-hover\:bg-purple-900 {
  background-color: var(--purple-900);
}

.border-purple-900,
.hover\:border-purple-900:hover,
.group:hover .group-hover\:border-purple-900 {
  border-color: var(--purple-900);
}

.text-purple,
.hover\:text-purple:hover,
.group:hover .group-hover\:text-purple {
  color: var(--purple);
}

.bg-purple,
.hover\:bg-purple:hover,
.group:hover .group-hover\:bg-purple {
  background-color: var(--purple);
}

.border-purple,
.hover\:border-purple:hover,
.group:hover .group-hover\:border-purple {
  border-color: var(--purple);
}

.text-on-pink-50 {
  color: #000;
}

.text-pink-50,
.hover\:text-pink-50:hover,
.group:hover .group-hover\:text-pink-50 {
  color: var(--pink-50);
}

.bg-pink-50,
.hover\:bg-pink-50:hover,
.group:hover .group-hover\:bg-pink-50 {
  background-color: var(--pink-50);
}

.border-pink-50,
.hover\:border-pink-50:hover,
.group:hover .group-hover\:border-pink-50 {
  border-color: var(--pink-50);
}

.text-on-pink-100 {
  color: #000;
}

.text-pink-100,
.hover\:text-pink-100:hover,
.group:hover .group-hover\:text-pink-100 {
  color: var(--pink-100);
}

.bg-pink-100,
.hover\:bg-pink-100:hover,
.group:hover .group-hover\:bg-pink-100 {
  background-color: var(--pink-100);
}

.border-pink-100,
.hover\:border-pink-100:hover,
.group:hover .group-hover\:border-pink-100 {
  border-color: var(--pink-100);
}

.text-on-pink-200 {
  color: #fff;
}

.text-pink-200,
.hover\:text-pink-200:hover,
.group:hover .group-hover\:text-pink-200 {
  color: var(--pink-200);
}

.bg-pink-200,
.hover\:bg-pink-200:hover,
.group:hover .group-hover\:bg-pink-200 {
  background-color: var(--pink-200);
}

.border-pink-200,
.hover\:border-pink-200:hover,
.group:hover .group-hover\:border-pink-200 {
  border-color: var(--pink-200);
}

.text-on-pink-300 {
  color: #fff;
}

.text-pink-300,
.hover\:text-pink-300:hover,
.group:hover .group-hover\:text-pink-300 {
  color: var(--pink-300);
}

.bg-pink-300,
.hover\:bg-pink-300:hover,
.group:hover .group-hover\:bg-pink-300 {
  background-color: var(--pink-300);
}

.border-pink-300,
.hover\:border-pink-300:hover,
.group:hover .group-hover\:border-pink-300 {
  border-color: var(--pink-300);
}

.text-on-pink-400 {
  color: #fff;
}

.text-pink-400,
.hover\:text-pink-400:hover,
.group:hover .group-hover\:text-pink-400 {
  color: var(--pink-400);
}

.bg-pink-400,
.hover\:bg-pink-400:hover,
.group:hover .group-hover\:bg-pink-400 {
  background-color: var(--pink-400);
}

.border-pink-400,
.hover\:border-pink-400:hover,
.group:hover .group-hover\:border-pink-400 {
  border-color: var(--pink-400);
}

.text-on-pink-500 {
  color: #fff;
}

.text-pink-500,
.hover\:text-pink-500:hover,
.group:hover .group-hover\:text-pink-500 {
  color: var(--pink-500);
}

.bg-pink-500,
.hover\:bg-pink-500:hover,
.group:hover .group-hover\:bg-pink-500 {
  background-color: var(--pink-500);
}

.border-pink-500,
.hover\:border-pink-500:hover,
.group:hover .group-hover\:border-pink-500 {
  border-color: var(--pink-500);
}

.text-on-pink-600 {
  color: #fff;
}

.text-pink-600,
.hover\:text-pink-600:hover,
.group:hover .group-hover\:text-pink-600 {
  color: var(--pink-600);
}

.bg-pink-600,
.hover\:bg-pink-600:hover,
.group:hover .group-hover\:bg-pink-600 {
  background-color: var(--pink-600);
}

.border-pink-600,
.hover\:border-pink-600:hover,
.group:hover .group-hover\:border-pink-600 {
  border-color: var(--pink-600);
}

.text-on-pink-700 {
  color: #fff;
}

.text-pink-700,
.hover\:text-pink-700:hover,
.group:hover .group-hover\:text-pink-700 {
  color: var(--pink-700);
}

.bg-pink-700,
.hover\:bg-pink-700:hover,
.group:hover .group-hover\:bg-pink-700 {
  background-color: var(--pink-700);
}

.border-pink-700,
.hover\:border-pink-700:hover,
.group:hover .group-hover\:border-pink-700 {
  border-color: var(--pink-700);
}

.text-on-pink-800 {
  color: #fff;
}

.text-pink-800,
.hover\:text-pink-800:hover,
.group:hover .group-hover\:text-pink-800 {
  color: var(--pink-800);
}

.bg-pink-800,
.hover\:bg-pink-800:hover,
.group:hover .group-hover\:bg-pink-800 {
  background-color: var(--pink-800);
}

.border-pink-800,
.hover\:border-pink-800:hover,
.group:hover .group-hover\:border-pink-800 {
  border-color: var(--pink-800);
}

.text-on-pink-900 {
  color: #fff;
}

.text-pink-900,
.hover\:text-pink-900:hover,
.group:hover .group-hover\:text-pink-900 {
  color: var(--pink-900);
}

.bg-pink-900,
.hover\:bg-pink-900:hover,
.group:hover .group-hover\:bg-pink-900 {
  background-color: var(--pink-900);
}

.border-pink-900,
.hover\:border-pink-900:hover,
.group:hover .group-hover\:border-pink-900 {
  border-color: var(--pink-900);
}

.text-pink,
.hover\:text-pink:hover,
.group:hover .group-hover\:text-pink {
  color: var(--pink);
}

.bg-pink,
.hover\:bg-pink:hover,
.group:hover .group-hover\:bg-pink {
  background-color: var(--pink);
}

.border-pink,
.hover\:border-pink:hover,
.group:hover .group-hover\:border-pink {
  border-color: var(--pink);
}

.bg-page {
  background-color: var(--background);
}

.bg-card {
  background-color: var(--surface);
}

.bg-active {
  background-color: var(--button-bg-color);
}

.bg-hover {
  background-color: var(--button-bg-color-hover);
}

.bg-white,
.hover\:bg-white:hover {
  background-color: white;
}

.bg-black,
.hover\:bg-black:hover {
  background-color: black;
}

.text-default {
  color: var(--text-primary);
}

.text-muted {
  color: var(--text-secondary);
}

.text-inverted {
  color: var(--inverted-text-color);
}

.text-white,
.hover\:text-white:hover {
  color: white;
}

.text-black,
.hover\:text-black:hover {
  color: black;
}

.text-subtle {
  color: var(--text-secondary);
  opacity: 0.7;
}

.navbar {
  align-items: center;
  justify-content: space-between;
  background-color: var(--background);
  display: flex;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 480px) {
  .navbar {
    max-width: 380px;
  }
}

@media (min-width: 640px) {
  .navbar {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .navbar {
    max-width: 668px;
  }
}

@media (min-width: 1024px) {
  .navbar {
    max-width: 924px;
  }
}

@media (min-width: 1280px) {
  .navbar {
    max-width: 1180px;
  }
}

@media (min-width: 1536px) {
  .navbar {
    max-width: 1436px;
  }
}

.navbar {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.navbar:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.navbar .logo img {
  max-height: 40px;
  width: auto;
}

.navbar .submenu {
  background-color: white;
  display: block;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.navbar .submenu li a {
  padding: 0.75rem 1rem;
}

.navbar .submenu .submenu {
  top: 0;
  left: 100%;
}

.navbar .menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar .menu li {
  position: relative;
}

.navbar .menu li a {
  display: block;
  padding: 1rem;
  text-decoration: none;
  color: var(--text-primary);
  transition: background-color 0.2s ease-in-out;
}

.navbar .menu li a:hover {
  background-color: var(--nav-hover);
}

.navbar .menu li:hover>.submenu {
  display: block;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

@media screen and (max-width: 767.99px) {
  .navbar .menu {
    transition: all 1.3s ease;
    display: none;
    flex-direction: column;
    background-color: #e1e1e1;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
  }

  .navbar .menu[data-visible=true] {
    display: flex;
  }

  .navbar .menu li {
    width: 100%;
    text-align: left;
  }

  .navbar .menu li .submenu {
    position: relative;
    left: 0;
    top: 0;
    display: none;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    background-color: var(--nav-hover);
  }

  .navbar .menu li .submenu[data-visible=true] {
    display: flex;
    flex-direction: column;
  }

  .navbar .navbar__cta {
    width: 100%;
    justify-content: center;
    padding: 1rem 0;
  }
}

.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.form-group:has(input:not(:placeholder-shown))>label.form-label,
.form-group:has(input:focus)>label.form-label {
  top: 0;
  font-size: 0.875rem;
  transform: translateY(-50%);
  background: var(--primary);
  padding: 0 0.5rem;
}

.form-group:has(input:focus)>label {
  color: var(--primary);
}

.form-inline {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.form-label {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.2s ease-in-out;
  color: var(--text-secondary);
  pointer-events: none;
  font-size: 1rem;
}

.form-input {
  width: 100%;
  padding: 0.85rem;
  border: 1px solid rgba(25, 25, 25, 0.01) !important;
  border-radius: 0.5rem;
  background: white;
  color: var(--text-primary);
  font-size: 1rem;
  transition: all 0.2s ease-in-out;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
}

.form-select {
  width: 100%;
  padding: 0.85rem;
  border: 1px solid rgba(25, 25, 25, 0.01) !important;
  border-radius: 0.5rem;
  background: white;
  color: var(--text-primary);
  font-size: 1rem;
  transition: all 0.2s ease-in-out;
  appearance: none;
  background-image: url("data:image/svg+xml,...");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.form-select:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
}

.form-check,
.form-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.form-check-input,
.form-radio-input {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--border-color);
  margin-right: 0.5rem;
  cursor: pointer;
}

.form-check-input[type=checkbox],
.form-radio-input[type=checkbox] {
  border-radius: 0.25rem;
}

.form-check-input[type=radio],
.form-radio-input[type=radio] {
  border-radius: 20rem;
}

.is-valid {
  border-color: var(--success);
}

.is-valid+label {
  color: var(--success);
}

.is-invalid {
  border-color: var(--danger);
}

.is-invalid+label {
  color: var(--danger);
}

small {
  font-size: 0.875rem;
  position: absolute;
  right: 20px;
  top: -10px;
  background: #f8f9fa;
  padding: 0 10px;
}

.form-input,
.form-select {
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

.form-input.xs,
.form-select.xs {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

.form-input.sm,
.form-select.sm {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}

.form-input.md,
.form-select.md {
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

.form-input.lg,
.form-select.lg {
  font-size: 1.25rem;
  padding: 0.75rem 1.5rem;
}

.form-input.xl,
.form-select.xl {
  font-size: 1.5rem;
  padding: 1rem 2rem;
}

.form-input.xxl,
.form-select.xxl {
  font-size: 1.75rem;
  padding: 1.25rem 2.5rem;
}

.form-input.xxxl,
.form-select.xxxl {
  font-size: 2rem;
  padding: 1.5rem 3rem;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  font-family: "Mukta";
}

.mukta {
  font-family: "Mukta";
}

.rubik {
  font-family: "Rubik";
}

.text-dark {
  color: #1a1a1a;
}

.text-warning {
  color: var(--warning);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease-in-out;
}

.btn.pill {
  border-radius: 9999px;
}

.btn.dark {
  background: #1a1a1a;
  color: #fff;
}

.btn.light {
  background: #f5f5f5;
  color: #000;
}

.btn.success {
  background: var(--success);
  color: #fff;
}

.btn.warning {
  background: var(--warning);
  color: #fff;
}

.btn.transparent {
  background: transparent;
  color: #000;
}

.btn.transparent:hover {
  background: transparent;
  color: #000;
}

header {
  box-shadow: 0 20px 55px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 999;
  background-color: var(--bg-primary);
}

header .navbar .hamburger {
  --hamburger-color: var(--text-primary);
  --hamburger-size: 24px;
  --hamburger-thickness: 2px;
  cursor: pointer;
  width: var(--hamburger-size);
  height: var(--hamburger-size);
  position: relative;
  border: 0;
  background: transparent;
  padding: 0;
}

header .navbar .hamburger:focus {
  outline: none;
  box-shadow: none;
}

header .navbar .hamburger span {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  height: var(--hamburger-thickness);
  background-color: var(--hamburger-color);
  transform-origin: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

header .navbar .hamburger span:first-child {
  top: 20%;
}

header .navbar .hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

header .navbar .hamburger span:last-child {
  bottom: 20%;
}

header .navbar .hamburger[aria-expanded=true] span:first-child {
  transform: translateY(7px) rotate(45deg);
}

header .navbar .hamburger[aria-expanded=true] span:nth-child(2) {
  opacity: 0;
}

header .navbar .hamburger[aria-expanded=true] span:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

@media screen and (min-width: 768px) {
  header .navbar .hamburger {
    display: none;
  }
}

@media screen and (max-width: 767.99px) {
  header .navbar .menu {
    display: none;
  }

  header .navbar .menu[data-visible=true] {
    display: flex;
  }

  header .navbar .navbar__cta {
    width: 100%;
    justify-content: center;
    padding: 1rem 0;
  }
}

header .navbar {
  font-size: 0.875rem;
  color: #636363 !important;
  box-shadow: none;
  height: 90px;
}

header .navbar:hover {
  box-shadow: none;
}

header .navbar .logo img {
  max-height: 60px;
}

.hero {
  padding-block: 50px;
  position: relative;
  background-image: url("/images/header-bg.webp");
  background-attachment: fixed;
  animation: scroll-background 20s linear infinite;
}

.hero h1 {
  font-weight: 500;
  font-size: 2rem;
  margin-top: 50px;
  color: var(--text-primary);
  max-width: 600px;
  font-family: "Rubik";
}

@media screen and (max-width: 639.99px) {
  .hero h1 {
    padding: 3px;
    text-align: center;
  }
}

.hero h2 {
  font-size: 1.25rem;
  line-height: 1.625;
  margin-top: 30px;
  margin-bottom: 80px;
  font-weight: 100;
  font-family: "Rubik";
}

.hero input {
  background-color: white;
}

@media screen and (min-width: 768px) {
  .hero .images-section img:nth-child(1) {
    animation: anim-bounce-0--10per 15s ease-in-out infinite;
  }

  @keyframes anim-bounce-0--10per {

    0%,
    100% {
      transform: translate(0, 0);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
      transform: translate(0, -10%);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }
}

.hero .images-section img:nth-child(1) {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  top: 200px;
}

@media screen and (min-width: 768px) {
  .hero .images-section img:nth-child(2) {
    animation: anim-bounce-0-20per 20s ease-in-out infinite;
  }

  @keyframes anim-bounce-0-20per {

    0%,
    100% {
      transform: translate(0, 0);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
      transform: translate(0, 20%);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }
}

.hero .images-section img:nth-child(2) {
  position: absolute;
  z-index: 1;
  top: 200px;
}

@media screen and (min-width: 768px) {
  .hero .images-section img:nth-child(3) {
    animation: anim-bounce--1per-5per 10s ease-in-out infinite;
  }

  @keyframes anim-bounce--1per-5per {

    0%,
    100% {
      transform: translate(0, 0);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
      transform: translate(-1%, 5%);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }
}

@media screen and (max-width: 639.99px) {
  .hero .images-section img:nth-child(3) {
    left: 0% !important;
  }
}

.hero .images-section img:nth-child(3) {
  position: absolute;
  left: 20%;
  filter: drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.4));
}

.hero .images-section .form-group input {
  border-radius: 10px;
}

.hero .features h3 {
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.hero .features p {
  font-size: 0.875rem;
  font-weight: 300;
}

@media screen and (max-width: 767.99px) {
  main {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

main.index-dark {
  padding-block: 20px;
  background-color: #1a1a1a;
  color: #fff;
}

main.index-dark h2 {
  font-size: 1.75rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-block: 50px;
  font-family: "Rubik";
  max-width: 500px;
}

main.index-dark.panel-1 .features {
  text-align: center;
}

main.index-dark.panel-1 .features .flex-row {
  padding: 20px;
  font-size: 1rem;
  align-items: stretch;
  background-color: #f5f5f5;
  color: #505050;
  border-radius: 10px;
  height: 100%;
}

main.index-dark.panel-1 .features .flex-row h3 {
  font-size: 1.25rem;
}

main.index-dark.panel-1 .features .flex-row img {
  margin-left: auto;
  margin-right: auto;
  margin-block: 20px;
  height: 36px;
  width: 36px;
}

main.index-dark.panel-2 .img-anim-2 img:nth-child(1) {
  margin-left: auto;
  margin-right: auto;
  margin-block: 40px;
  animation: anim-bounce-0-3per 25s ease-in-out infinite;
}

@keyframes anim-bounce-0-3per {

  0%,
  100% {
    transform: translate(0, 0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translate(0, 3%);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

main.index-dark.panel-2 .img-anim-2 img:nth-child(2) {
  animation: anim-bounce-1per-20per 20s ease-in-out infinite;
}

@keyframes anim-bounce-1per-20per {

  0%,
  100% {
    transform: translate(0, 0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translate(1%, 20%);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@media screen and (max-width: 639.99px) {
  main.index-dark.panel-2 .img-anim-2 img:nth-child(2) {
    width: 50%;
    left: 30%;
  }
}

main.index-dark.panel-2 .img-anim-2 img:nth-child(2) {
  position: absolute;
  bottom: -100px;
  left: -40px;
}

@media screen and (max-width: 639.99px) {
  main.index-dark.panel-2 .img-anim-2 img:nth-child(2) {
    left: 0px;
  }
}

main.index-dark.panel-2 .img-anim-2 img:nth-child(3) {
  animation: anim-bounce--1per-5per 15s ease-in-out infinite;
}

@media screen and (max-width: 639.99px) {
  main.index-dark.panel-2 .img-anim-2 img:nth-child(3) {
    width: 70%;
    left: 30%;
    bottom: -180px;
  }
}

main.index-dark.panel-2 .img-anim-2 img:nth-child(3) {
  position: absolute;
  bottom: -120px;
  right: -40px;
}

main.index-light.panel-1 {
  background-color: #f5f5f5;
}

main.index-light.panel-1 .shop-sample {
  display: flex;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  main.index-light.panel-1 .shop-sample {
    flex-direction: row;
    align-items: stretch;
  }

  main.index-light.panel-1 .shop-sample .contents {
    flex: 1 1 60%;
    order: 1;
    border-radius: 20px 0 0 20px;
  }

  main.index-light.panel-1 .shop-sample .cover {
    flex: 0 0 35%;
    order: 2;
  }

  main.index-light.panel-1 .shop-sample .cover img {
    border-radius: 0 20px 20px 0;
  }
}

@media (max-width: 767px) {
  main.index-light.panel-1 .shop-sample {
    flex-direction: column;
  }

  main.index-light.panel-1 .shop-sample img {
    border-radius: 20px 20px 0 0;
  }

  main.index-light.panel-1 .shop-sample .contents {
    border-radius: 20px;
    top: -20px;
    position: relative;
  }
}

main.index-light.panel-1 .shop-sample img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main.index-light.panel-1 .shop-sample .contents {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--success);
  color: var(--text-primary);
  padding: 50px;
  min-height: 100%;
}

@media screen and (max-width: 767.99px) {
  main.index-light.panel-1 .shop-sample .contents {
    padding: 20px;
  }
}

main.index-light.panel-1 .shop-sample.footwear-body .contents {
  background-color: #634d40;
}

main.index-light.panel-1 .shop-sample.footwear-body .contents button {
  background: rgba(255, 255, 255, 0.5019607843);
  color: #505050;
}

main.index-light.panel-1 .shop-sample.book-store-body .contents {
  background-color: #1e1e1e;
}

main.index-light.panel-1 .shop-sample.book-store-body .contents button {
  background: rgba(255, 255, 255, 0.5019607843);
  color: #505050;
}

main.index-light.panel-1 .shop-sample.general-store-body .contents {
  background-color: #009371;
}

main.index-light.panel-1 .shop-sample.general-store-body .contents button {
  background: rgba(255, 255, 255, 0.5019607843);
  color: #505050;
}

main.index-light.panel-1 .shop-sample.jewelry-store-body .contents {
  background-color: #b99d21;
}

main.index-light.panel-1 .shop-sample.jewelry-store-body .contents button {
  background: rgba(255, 255, 255, 0.5019607843);
  color: #505050;
}

main.index-light.panel-1 .shop-sample.vitamin-store-body .contents {
  background-color: #db3f06;
}

main.index-light.panel-1 .shop-sample.vitamin-store-body .contents button {
  background: rgba(255, 255, 255, 0.5019607843);
  color: #505050;
}

main.index-light.panel-1 .shop-sample.toy-store-body .contents {
  background-color: #52738c;
}

main.index-light.panel-1 .shop-sample.toy-store-body .contents button {
  background: rgba(255, 255, 255, 0.5019607843);
  color: #505050;
}

main.index-light.panel-1 .shop-sample.coffee-store-body .contents {
  background-color: #724b2d;
}

main.index-light.panel-1 .shop-sample.coffee-store-body .contents button {
  background: rgba(255, 255, 255, 0.5019607843);
  color: #505050;
}

main.index-light.panel-1 .shop-sample.fashion-store-body .contents {
  background-color: #b80e10;
}

main.index-light.panel-1 .shop-sample.fashion-store-body .contents button {
  background: rgba(255, 255, 255, 0.5019607843);
  color: #505050;
}

main.index-light.panel-1 .shop-sample.restaurant-body .contents {
  background-color: #656a70;
}

main.index-light.panel-1 .shop-sample.restaurant-body .contents button {
  background: rgba(255, 255, 255, 0.5019607843);
  color: #505050;
}

main.index-light.panel-1 .content-wrapper {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 600px;
}

@media (max-width: 1023px) {
  main.index-light.panel-1 .content-wrapper {
    flex-direction: column;
    height: auto;
  }
}

main.index-light.panel-1 .content-wrapper .content {
  flex: 0 0 50%;
  padding-left: 15%;
}

@media (max-width: 1280px) {
  main.index-light.panel-1 .content-wrapper .content {
    padding-left: 10%;
  }
}

@media (max-width: 1023px) {
  main.index-light.panel-1 .content-wrapper .content {
    padding-left: 6%;
    padding-right: 6%;
    flex: 0 0 100%;
  }
}

main.index-light.panel-1 .content-wrapper .image-wrapper {
  position: relative;
  min-height: 700px;
  right: 0;
  overflow: hidden;
  width: 50vw;
}

@media (max-width: 1280px) and (min-width: 1024px) {
  main.index-light.panel-1 .content-wrapper .image-wrapper {
    min-height: 600px;
  }
}

@media (max-width: 1023px) {
  main.index-light.panel-1 .content-wrapper .image-wrapper {
    flex: 0 0 100%;
    width: 80vw;
    min-height: 75vw;
  }

  main.index-light.panel-1 .content-wrapper .image-wrapper img {
    position: absolute;
    left: 15vw !important;
    object-fit: cover;
  }
}

main.index-light.panel-1 .content-wrapper .image-wrapper img {
  position: absolute;
  object-fit: cover;
}

@media screen and (min-width: 768px) {
  main.index-light.panel-1 .content-wrapper .image-wrapper img {
    animation: anim-bounce--1per-0per 8s ease-in-out infinite;
  }

  @keyframes anim-bounce--1per-0per {

    0%,
    100% {
      transform: translate(0, 0);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
      transform: translate(-1%, 0%);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }
}

@media screen and (max-width: 767.99px) {
  main.index-light.panel-1 .content-wrapper .image-wrapper img {
    left: 0 !important;
  }
}

main.index-light.panel-1 .content-wrapper .floating-chart {
  position: absolute;
  z-index: 2;
  left: 25%;
  margin-top: 550px;
  animation: anim-bounce-17per--16per 8s ease-in-out infinite;
}

@keyframes anim-bounce-17per--16per {

  0%,
  100% {
    transform: translate(0, 0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translate(17%, -16%);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@media (max-width: 1023px) {
  main.index-light.panel-1 .content-wrapper .floating-chart {
    left: 5%;
    margin-top: 80vw;
  }
}

@media (max-width: 623px) {
  main.index-light.panel-1 .content-wrapper .floating-chart {
    display: none;
  }
}

main.index-light.panel-1 .pill-buttons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media screen and (max-width: 767.99px) {
  main.index-light.panel-1 .pill-buttons {
    display: none;
  }
}

main.index-light.panel-1 .pill-buttons button.active {
  background-color: var(--warning);
  border: 1px solid transparent;
  color: white;
}

main.index-light.panel-1 .pill-buttons button:hover {
  background-color: var(--warning);
  border: 1px solid transparent;
  color: white;
}

main.index-light.panel-2 {
  background-color: #f5f5f5;
}

main.index-light.panel-2 h2 {
  font-size: "2xl";
  line-height: 1.625;
  margin-top: 30px;
  margin-bottom: 80px;
  font-weight: 700;
  font-family: "Rubik";
}

@media screen and (min-width: 1024px) {
  main.index-light.panel-2 .container-for-floating-items .make-it-flex>div {
    position: absolute;
  }

  main.index-light.panel-2 .container-for-floating-items .make-it-flex>div:nth-child(1) {
    top: 0px;
    left: 50px;
    z-index: 10;
    animation: anim-bounce-5per-1per 15s ease-in-out infinite;
  }

  @keyframes anim-bounce-5per-1per {

    0%,
    100% {
      transform: translate(0, 0);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
      transform: translate(5%, 1%);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }

  main.index-light.panel-2 .container-for-floating-items .make-it-flex>div:nth-child(2) {
    top: 150px;
    left: 150px;
    z-index: 11;
    animation: anim-bounce-2per-5per 15s ease-in-out infinite;
  }

  @keyframes anim-bounce-2per-5per {

    0%,
    100% {
      transform: translate(0, 0);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
      transform: translate(2%, 5%);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }

  main.index-light.panel-2 .container-for-floating-items .make-it-flex>div:nth-child(3) {
    bottom: 150px;
    left: 0px;
    z-index: 13;
    animation: anim-bounce-0-2per 5s ease-in-out infinite;
  }

  @keyframes anim-bounce-0-2per {

    0%,
    100% {
      transform: translate(0, 0);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
      transform: translate(0, 2%);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }

  main.index-light.panel-2 .container-for-floating-items .make-it-flex+img {
    position: absolute;
    top: 50px;
    right: 0px;
    animation: anim-bounce--3per-3per 35s ease-in-out infinite;
  }

  @keyframes anim-bounce--3per-3per {

    0%,
    100% {
      transform: translate(0, 0);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
      transform: translate(-3%, 3%);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }
}

@media screen and (max-width: 1023.99px) {
  main.index-light.panel-2 .container-for-floating-items .make-it-flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
  }

  main.index-light.panel-2 .container-for-floating-items .make-it-flex>div {
    flex: 0 0 50%;
  }
}

@media screen and (max-width: 767.99px) {
  main.index-light.panel-2 .container-for-floating-items .make-it-flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
  }

  main.index-light.panel-2 .container-for-floating-items .make-it-flex>div {
    flex: 0 0 50%;
  }
}

main.index-light.panel-2 .container-for-floating-items .floating-info {
  padding: 30px;
  position: absolute;
  animation: anim-bounce-0--2per 5s ease-in-out infinite;
}

@media screen and (min-width: 1200px) {
  main.index-light.panel-2 .container-for-floating-items .floating-info {
    right: 3px;
  }
}

@media screen and (max-width: 479.99px) {
  main.index-light.panel-2 .container-for-floating-items .floating-info {
    font-size: 11px;
    width: 300px !important;
  }
}

@keyframes anim-bounce-0--2per {

  0%,
  100% {
    transform: translate(0, 0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translate(0, -2%);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

main.index-light.panel-2 .container-for-floating-items .floating-info {
  background-color: var(--success);
  color: var(--text-primary);
  bottom: 20px;
  border-radius: 20px;
  width: 350px;
}

.features .swiper-wrapper .swiper-slide {
  height: auto !important;
}

.swiper-pagination {
  --swiper-pagination-color: var(--warning);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0, 0, 0, 0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 12px;
  --swiper-pagination-bullet-width: 12px;
  --swiper-pagination-bullet-height: 12px;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: auto !important;
}

main.pricing-dark {
  min-height: 50vh;
  background: radial-gradient(circle at center, #444444 0%, #1a1a1a 80%, #1a1a1a 100%) no-repeat;
  color: #c6c6c6;
}

main.pricing-dark .arrow-down {
  animation: anim-bounce-0-15per 1.5s ease-in-out infinite;
}

@keyframes anim-bounce-0-15per {

  0%,
  100% {
    transform: translate(0, 0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translate(0, 15%);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

main.pricing-dark .features.included .feature {
  background-color: #606060;
  position: relative;
}

@media screen and (min-width: 1024px) {
  main.pricing-dark .features.included .feature {
    min-width: 350px;
  }
}

@media screen and (max-width: 639.99px) {
  main.pricing-dark .features.included .feature {
    min-width: 220px;
  }
}

main.pricing-dark .features.included .feature .form-group {
  color: white;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 0 5px 0 5px;
  padding: 5px;
}

main.pricing-dark .features.included .feature .form-group input[type=checkbox] {
  display: none;
}

main.pricing-dark .feature {
  border-radius: 5px;
  text-align: left;
  padding: 20px;
}

main.pricing-dark .feature .module-header {
  color: orange !important;
}

main.pricing-dark .feature .module-header input {
  background: orange !important;
  border-radius: 2px;
  visibility: visible !important;
}

main.pricing-dark .feature .module-header h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 0px;
}

main.pricing-light {
  background-color: #f5f5f5;
}

main.pricing-light .intro {
  max-width: 700px;
}

main.pricing-light .cancel-text {
  margin-left: auto;
  margin-right: auto;
  min-width: 250px;
  color: #979696;
}

main.pricing-light .modules-container .sticky {
  padding: 10px;
  margin-bottom: 30px;
  background-color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

main.pricing-light .modules-container .sticky h3 {
  margin: 0;
}

main.pricing-light .modules-container .sticky .btn-group .btn:hover,
main.pricing-light .modules-container .sticky .btn-group .btn.active {
  color: #1a1a1a;
  border-color: #1a1a1a;
}

main.pricing-light .modules-container .sticky button {
  background: white;
}

main.pricing-light .modules-container .sticky button.active {
  background: var(--success);
}

main.pricing-light .modules-container .modules {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

main.pricing-light .modules-container .modules .feature {
  margin: 10px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}

main.pricing-light .modules-container .modules .feature:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

main.pricing-light .modules-container .modules .feature:not(:has(.form-check-input:checked)) {
  color: #979696;
}

main.pricing-light .modules-container .modules .feature.free:has(.form-check-input:checked) {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  background-color: var(--success);
}

main.pricing-light .modules-container .modules .feature.paid:has(.form-check-input:checked) {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  background-color: var(--warning);
}

main.pricing-light .modules-container .modules .feature>label {
  display: block;
  height: 100%;
  width: 100%;
  cursor: pointer;
  border: 1px solid gray;
  border-radius: 5px;
}

main.pricing-light .modules-container .modules .feature .module {
  padding: 20px;
}

main.pricing-light .modules-container .modules .feature .form-group {
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 0 5px 0 5px;
  padding: 5px;
}

main.pricing-light .modules-container .modules .feature .form-group:has(.form-check-input:checked) {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
  background-color: white;
}

main.pricing-light .modules-container .modules .feature .form-check-input {
  display: none;
}

main.pricing-light .totals {
  font-family: "Rubik";
  color: #424242;
}

main.pricing-light .totals h3 {
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 2px;
}

main.pricing-light .totals p {
  font-size: 2.5rem;
  font-weight: 700;
}

.mobile-previews {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.mobile-previews img {
  flex: 0 0 auto;
  max-height: 800px;
  width: auto;
  transition: transform 0.3s ease;
}

.mobile-previews img:first-child {
  transform: translateX(0%);
}

.mobile-previews img:last-child {
  transform: translateX(0%);
}

@media (max-width: 768px) {
  .mobile-previews img {
    height: 300px;
  }
}

footer {
  padding-block: 20px;
  background-color: #1a1a1a;
  color: #646464;
  font-size: 14px;
  font-family: "Rubik";
}

footer>.container a {
  color: #646464;
}

footer>.container a:hover {
  color: #ddd;
}

@media screen and (max-width: 1023.99px) {
  footer>.container>nav {
    margin-bottom: 30px;
    margin-top: 20px;
  }
}

footer>.container>nav div.image-col img {
  width: 100px;
}

@media screen and (min-width: 1024px) {
  footer>.container>nav div:not(.image-col) {
    border-left: 1px solid rgba(255, 255, 255, 0.04);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
  }

  footer>.container>nav div:not(.image-col) {
    padding: 0 30px;
  }
}

@media screen and (max-width: 1023.99px) {
  footer>.container>nav div:not(.image-col) {
    margin-bottom: 40px;
    margin-top: 20px;
  }
}

footer>.container>nav div:not(.image-col) {
  line-height: 1.625;
  text-wrap: nowrap;
}

footer>.container>nav div:not(.image-col) span {
  display: block;
  margin-bottom: 20px;
  font-size: 1rem;
  color: #4c4c4c;
}

footer>.container>hr {
  margin-block: 20px;
  background-color: #3b3b3b;
  border: 0;
  height: 1px;
}

footer>.container .footer-links a {
  padding-right: 15px;
}

footer>.container .social-icons {
  display: flex;
  flex-wrap: wrap;
}

footer>.container .social-icons a {
  padding-right: 10px;
  display: flex;
  justify-content: center;
}

footer>.container .disclaimer {
  font-size: 0.75rem;
  padding-inline: 10px;
  padding-block: 30px;
  line-height: 2;
}

@keyframes scroll-background {
  from {
    background-position: center top;
  }

  to {
    background-position: center bottom;
  }
}

@keyframes moveInCircle {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.noiseBg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  mix-blend-mode: soft-light;
  opacity: 0.3;
}

.gradients-container {
  filter: blur(40px);
  width: 100%;
  height: 100%;
  position: absolute;
}

.interactive {
  position: absolute;
  background: radial-gradient(circle at center, rgba(151, 71, 255, 0.8) 0%, rgba(151, 71, 255, 0.1) 70%, rgba(151, 71, 255, 0) 100%) no-repeat;
  width: 400px;
  height: 400px;
  top: -200px;
  left: -200px;
  opacity: 0.4;
}

input[type=radio].w-4 {
  width: 1rem;
}

.page-header {
  background: radial-gradient(50% 50% at 50% 50%, #444444 0%, #1a1a1a 100%);
}

.page-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0 0 0 10px;
}

.border-secondary-100 {
  border-color: rgba(0, 0, 0, 0.0588235294);
}

.store-header {
  position: relative;
  width: 100%;
  height: calc(100vh - 100px);
  overflow: hidden;
}

.store-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* Adjust opacity here */
  z-index: 1;
}

.store-header video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.store-header .absolute {
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

.store-header .absolute a {
  color: inherit;
}

.store-header .arrow {
  z-index: 1;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: rotate(-90deg);
  font-family: "Poppins";
  text-align: center;
  letter-spacing: -0.5px;
  line-height: 1.2;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  animation: anim-bounce-0--40per 2s ease-in-out infinite;
}

@keyframes anim-bounce-0--40per {

  0%,
  100% {
    transform: translate(0, 0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translate(0, -40%);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/*# sourceMappingURL=styles.css.map */