.u-hidden {
  display: none !important;
}

.u-visually-hidden {
  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;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.u-text-left {
  text-align: left !important;
}

.u-text-center {
  text-align: center !important;
}

.u-text-right {
  text-align: right !important;
}

.u-w-full {
  width: 100% !important;
}

.u-max-w-text {
  max-width: var(--text-measure) !important;
}

.u-rounded-sm {
  border-radius: var(--radius-sm) !important;
}

.u-rounded-md {
  border-radius: var(--radius-md) !important;
}

.u-rounded-lg {
  border-radius: var(--radius-lg) !important;
}

.u-rounded-xl {
  border-radius: var(--radius-xl) !important;
}

.u-shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

.u-shadow-md {
  box-shadow: var(--shadow-md) !important;
}

.u-shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}

.u-border {
  border: var(--border-width-1) solid var(--color-border) !important;
}

.u-border-strong {
  border: var(--border-width-1) solid var(--color-border-strong) !important;
}

.u-bg-soft {
  background-color: var(--color-bg-soft) !important;
}

.u-bg-dark {
  background-color: var(--color-bg-dark) !important;
}

.u-text-soft {
  color: var(--color-text-soft) !important;
}

.u-text-muted {
  color: var(--color-text-muted) !important;
}

.u-text-inverse {
  color: var(--color-text-inverse) !important;
}

.u-mt-0 {
  margin-top: 0 !important;
}

.u-mt-2 {
  margin-top: var(--space-2) !important;
}

.u-mt-4 {
  margin-top: var(--space-4) !important;
}

.u-mt-6 {
  margin-top: var(--space-6) !important;
}

.u-mt-8 {
  margin-top: var(--space-8) !important;
}

.u-mb-0 {
  margin-bottom: 0 !important;
}

.u-mb-2 {
  margin-bottom: var(--space-2) !important;
}

.u-mb-4 {
  margin-bottom: var(--space-4) !important;
}

.u-mb-6 {
  margin-bottom: var(--space-6) !important;
}

.u-mb-8 {
  margin-bottom: var(--space-8) !important;
}

.u-pt-0 {
  padding-top: 0 !important;
}

.u-pt-4 {
  padding-top: var(--space-4) !important;
}

.u-pt-6 {
  padding-top: var(--space-6) !important;
}

.u-pt-8 {
  padding-top: var(--space-8) !important;
}

.u-pb-0 {
  padding-bottom: 0 !important;
}

.u-pb-4 {
  padding-bottom: var(--space-4) !important;
}

.u-pb-6 {
  padding-bottom: var(--space-6) !important;
}

.u-pb-8 {
  padding-bottom: var(--space-8) !important;
}

.u-flex {
  display: flex !important;
}

.u-inline-flex {
  display: inline-flex !important;
}

.u-grid {
  display: grid !important;
}

.u-items-center {
  align-items: center !important;
}

.u-justify-center {
  justify-content: center !important;
}

.u-justify-between {
  justify-content: space-between !important;
}

.u-gap-2 {
  gap: var(--space-2) !important;
}

.u-gap-3 {
  gap: var(--space-3) !important;
}

.u-gap-4 {
  gap: var(--space-4) !important;
}

.u-gap-6 {
  gap: var(--space-6) !important;
}

.u-gap-8 {
  gap: var(--space-8) !important;
}

.u-overflow-hidden {
  overflow: hidden !important;
}

.u-relative {
  position: relative !important;
}

.u-sticky {
  position: sticky !important;
}

@media (max-width: 768px) {
  .u-hidden-mobile {
    display: none !important;
  }

  .u-text-center-mobile {
    text-align: center !important;
  }

  .u-w-full-mobile {
    width: 100% !important;
  }
}

@media (min-width: 769px) {
  .u-hidden-desktop {
    display: none !important;
  }
}