:root {
  /* Gaps */
  --uis-gap-xs: 2px;
  --uis-gap-s: 4px;
  --uis-gap-m: 8px;
  --uis-gap-l: 12px;
  --uis-gap-xl: 16px;
  --uis-gap-2xl: 20px;
  --uis-gap-3xl: 24px;
  --uis-gap-4xl: 28px;
  --uis-gap-5xl: 32px;
  --uis-gap-6xl: 36px;
  --uis-gap-7xl: 40px;
  --uis-gap-form: 4px 16px;
  /* Paddings */
  --uis-p-xs: 2px;
  --uis-p-s: 4px;
  --uis-p-m: 8px;
  --uis-p-l: 12px;
  --uis-p-xl: 16px;
  --uis-p-2xl: 20px;
  --uis-p-3xl: 24px;
  --uis-p-4xl: 28px;
  --uis-p-5xl: 32px;
  --uis-p-6xl: 36px;
  --uis-p-7xl: 40px;
  --uis-p-card: var(--uis-p-xl);

  /* Shapes */
  --uis-shape-rounded: 4px;
}

/* Tamaños de fuente */

/* Display large */
.uis-dl {
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 400;
  letter-spacing: 0rem;
}
/* Display medium */
.uis-dm {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 400;
  letter-spacing: 0rem;
}
/* Display small */
.uis-ds {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 400;
  letter-spacing: 0rem;
}
/* Headline large */
.uis-hl {
  font-size: 1.25rem;
  line-height: 2rem;
  font-weight: 400;
  letter-spacing: 0rem;
}
/* Headline medium */
.uis-hm {
  font-size: 1rem;
  line-height: 1.75rem;
  font-weight: 400;
  letter-spacing: 0rem;
}
/* Headline small */
.uis-hs {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: 0rem;
}
/* Title large */
.uis-tl {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0rem;
}
/* Title medium */
.uis-tm {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.01rem;
}
/* Title small */
.uis-ts {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0rem;
}
/* Body large */
.uis-bl {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0rem;
}
/* Body medium */
.uis-bm {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.02rem;
}
/* Body small */
.uis-bs {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.03rem;
}
/* Label large */
.uis-ll {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0rem;
}
/* Label medium */
.uis-lm {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.04rem;
}
/* Label small */
.uis-ls {
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.04rem;
}

/* Tablet */
@media screen and (min-width: 600px) {
  .uis-dl {
    font-size: 2.81rem;
    line-height: 3.25rem;
  }
  .uis-dm {
    font-size: 2rem;
    line-height: 2.5rem;
  }
  .uis-ds {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .uis-hl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .uis-hm {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  .uis-hs {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .uis-tm {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .uis-bl {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

/* Computadora */
@media screen and (min-width: 1280px) {
  .uis-dl {
    font-size: 3.56rem;
    line-height: 4rem;
    letter-spacing: -0.016rem;
  }
  .uis-dm {
    font-size: 2.81rem;
    line-height: 3.25rem;
  }
  .uis-ds {
    font-size: 2.25rem;
    line-height: 2.75rem;
  }
  .uis-hl {
    font-size: 2rem;
    line-height: 2.5rem;
  }
  .uis-hm {
    font-size: 1.75rem;
    line-height: 2.25rem;
  }
  .uis-hs {
    font-size: 1.25rem;
    line-height: 2rem;
  }
  .uis-tl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  .uis-ts {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .uis-bm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .uis-bs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

.uis-flex {
  display: flex;
}
.uis-flex-wrap {
  flex-wrap: wrap;
  display: flex;
}
.uis-flex-1 {
  flex: 1;
}
.uis-flex-2 {
  flex: 2;
}
.uis-flex-auto {
  flex: 1 1 auto;
}
.uis-shrink-0 {
  flex-shrink: 0;
}
.uis-shrink-1 {
  flex-shrink: 1;
}

.uis-grid {
  display: grid;
}
.uis-col-span-2 {
  grid-column: span 2;
}
.uis-col-span-3 {
  grid-column: span 3;
}
.uis-col-span-full {
  grid-column: 1 / -1;
}

.uis-gap-32 {
  gap: 32px;
}

/*Variables para gaps*/
.uis-gap-form {
  gap: var(--uis-gap-form);
}
.uis-gap-xs {
  gap: var(--uis-gap-xs);
}
.uis-gap-s {
  gap: var(--uis-gap-s);
}
.uis-gap-m {
  gap: var(--uis-gap-m);
}
.uis-gap-l {
  gap: var(--uis-gap-l);
}
.uis-gap-xl {
  gap: var(--uis-gap-xl);
}
.uis-gap-2xl {
  gap: var(--uis-gap-2xl);
}
.uis-gap-3xl {
  gap: var(--uis-gap-3xl);
}
.uis-gap-4xl {
  gap: var(--uis-gap-4xl);
}
.uis-gap-5xl {
  gap: var(--uis-gap-5xl);
}
.uis-gap-6xl {
  gap: var(--uis-gap-6xl);
}
.uis-gap-7xl {
  gap: var(--uis-gap-7xl);
}

/*Variables para paddings*/
.uis-p-xs {
  padding: var(--uis-p-xs);
}
.uis-p-s {
  padding: var(--uis-p-s);
}
.uis-p-m {
  padding: var(--uis-p-m);
}
.uis-p-l {
  padding: var(--uis-p-l);
}
.uis-p-xl {
  padding: var(--uis-p-xl);
}
.uis-p-2xl {
  padding: var(--uis-p-2xl);
}
.uis-p-3xl {
  padding: var(--uis-p-3xl);
}
.uis-p-4xl {
  padding: var(--uis-p-4xl);
}
.uis-p-5xl {
  padding: var(--uis-p-5xl);
}
.uis-p-6xl {
  padding: var(--uis-p-6xl);
}
.uis-p-7xl {
  padding: var(--uis-p-7xl);
}
.uis-p-card {
  padding: var(--uis-p-card);
}

.uis-shape-rounded {
  border-radius: var(--uis-shape-rounded);
}

@media screen and (min-width: 600px) {
  :root {
    --uis-gap-xs: 4px;
    --uis-gap-s: 8px;
    --uis-gap-m: 12px;
    --uis-gap-l: 16px;
    --uis-gap-xl: 20px;
    --uis-gap-2xl: 24px;
    --uis-gap-3xl: 28px;
    --uis-gap-4xl: 32px;
    --uis-gap-5xl: 36px;
    --uis-gap-6xl: 40px;
    --uis-gap-7xl: 44px;
    --uis-gap-form: 8px 24px;

    --uis-p-xs: 4px;
    --uis-p-s: 8px;
    --uis-p-m: 12px;
    --uis-p-l: 16px;
    --uis-p-xl: 20px;
    --uis-p-2xl: 24px;
    --uis-p-3xl: 28px;
    --uis-p-4xl: 32px;
    --uis-p-5xl: 36px;
    --uis-p-6xl: 40px;
    --uis-p-7xl: 44px;
    --uis-p-card: var(--uis-p-2xl);
    --uis-shape-rounded: 8px;
  }
}
@media screen and (min-width: 1280px) {
  :root {
    --uis-gap-xs: 8px;
    --uis-gap-s: 12px;
    --uis-gap-m: 16px;
    --uis-gap-l: 20px;
    --uis-gap-xl: 24px;
    --uis-gap-2xl: 28px;
    --uis-gap-3xl: 32px;
    --uis-gap-4xl: 36px;
    --uis-gap-5xl: 40px;
    --uis-gap-6xl: 44px;
    --uis-gap-7xl: 48px;
    --uis-gap-form: 12px 32px;

    --uis-p-xs: 8px;
    --uis-p-s: 12px;
    --uis-p-m: 16px;
    --uis-p-l: 20px;
    --uis-p-xl: 24px;
    --uis-p-2xl: 28px;
    --uis-p-3xl: 32px;
    --uis-p-4xl: 36px;
    --uis-p-5xl: 40px;
    --uis-p-6xl: 44px;
    --uis-p-7xl: 48px;
    --uis-p-card: var(--uis-p-3xl);
    --uis-shape-rounded: 12px;
  }
}

/* Line clamp */
.uis-line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.uis-line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}