.flex-col\@sm {
  @media (width >= 40rem) {
    flex-direction: column;
  }
}

.flex-row\@sm {
  @media (width >= 40rem) {
    flex-direction: row;
  }
}

.flex-row\@md {
  @media (width >= 48rem) {
    flex-direction: row;
  }
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.top-0 {
  top: 0;
}
.right-0 {
  right: 0;
}
.left-0 {
  left: 0;
}
.bottom-0 {
  bottom: 0;
}

.gap-2 {
  column-gap: var(--column-gap-2, 1rem);
  row-gap: var(--row-gap-2, 2rem);
}

.text-brand {
  color: var(--brand-base);
}

.text-brand-subtle {
  color: var(--brand-subtle);
}

.bg-brand {
  background-color: var(--brand-base);
}

.bg-brand-subtle {
  background-color: var(--brand-subtle);
}

.bg-brand-strong {
  background-color: var(--brand-strong);
}

.bg-overlay {
  background-color: var(--color-bg-overlay);
}

.bg-elevated {
  background-color: var(--color-bg-elevated);
}

.max-i-xs {
  max-inline-size: var(--max-i-xs);
}

.max-i-md {
  max-inline-size: var(--max-i-md);
}