.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);
}

/* List utilities */
.list-disc {
  list-style-type: disc;
}

.list-decimal {
  list-style-type: decimal;
}

/* Width utilities */
.w-fit {
  width: fit-content;
}

/* Flexbox alignment utilities */
.items-start {
  align-items: flex-start;
}

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

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

/* Logical property utilities - Padding */
.pi-0 {
  padding-inline: 0;
}
.pi-1 {
  padding-inline: var(--size-1);
}
.pi-2 {
  padding-inline: var(--size-2);
}
.pi-3 {
  padding-inline: var(--size-3);
}
.pi-4 {
  padding-inline: var(--size-4);
}
.pi-5 {
  padding-inline: var(--size-5);
}
.pi-6 {
  padding-inline: var(--size-6);
}
.pi-7 {
  padding-inline: var(--size-7);
}
.pi-8 {
  padding-inline: var(--size-8);
}
.pi-9 {
  padding-inline: var(--size-9);
}
.pi-10 {
  padding-inline: var(--size-10);
}

.pis-0 {
  padding-inline-start: 0;
}
.pis-1 {
  padding-inline-start: var(--size-1);
}
.pis-2 {
  padding-inline-start: var(--size-2);
}
.pis-3 {
  padding-inline-start: var(--size-3);
}
.pis-4 {
  padding-inline-start: var(--size-4);
}
.pis-5 {
  padding-inline-start: var(--size-5);
}
.pis-6 {
  padding-inline-start: var(--size-6);
}
.pis-7 {
  padding-inline-start: var(--size-7);
}
.pis-8 {
  padding-inline-start: var(--size-8);
}
.pis-9 {
  padding-inline-start: var(--size-9);
}
.pis-10 {
  padding-inline-start: var(--size-10);
}

.pie-0 {
  padding-inline-end: 0;
}
.pie-1 {
  padding-inline-end: var(--size-1);
}
.pie-2 {
  padding-inline-end: var(--size-2);
}
.pie-3 {
  padding-inline-end: var(--size-3);
}
.pie-4 {
  padding-inline-end: var(--size-4);
}
.pie-5 {
  padding-inline-end: var(--size-5);
}
.pie-6 {
  padding-inline-end: var(--size-6);
}
.pie-7 {
  padding-inline-end: var(--size-7);
}
.pie-8 {
  padding-inline-end: var(--size-8);
}
.pie-9 {
  padding-inline-end: var(--size-9);
}
.pie-10 {
  padding-inline-end: var(--size-10);
}

.pb-0 {
  padding-block: 0;
}
.pb-1 {
  padding-block: var(--size-1);
}
.pb-2 {
  padding-block: var(--size-2);
}
.pb-3 {
  padding-block: var(--size-3);
}
.pb-4 {
  padding-block: var(--size-4);
}
.pb-5 {
  padding-block: var(--size-5);
}
.pb-6 {
  padding-block: var(--size-6);
}
.pb-7 {
  padding-block: var(--size-7);
}
.pb-8 {
  padding-block: var(--size-8);
}
.pb-9 {
  padding-block: var(--size-9);
}
.pb-10 {
  padding-block: var(--size-10);
}

.pbs-0 {
  padding-block-start: 0;
}
.pbs-1 {
  padding-block-start: var(--size-1);
}
.pbs-2 {
  padding-block-start: var(--size-2);
}
.pbs-3 {
  padding-block-start: var(--size-3);
}
.pbs-4 {
  padding-block-start: var(--size-4);
}
.pbs-5 {
  padding-block-start: var(--size-5);
}
.pbs-6 {
  padding-block-start: var(--size-6);
}
.pbs-7 {
  padding-block-start: var(--size-7);
}
.pbs-8 {
  padding-block-start: var(--size-8);
}
.pbs-9 {
  padding-block-start: var(--size-9);
}
.pbs-10 {
  padding-block-start: var(--size-10);
}

.pbe-0 {
  padding-block-end: 0;
}
.pbe-1 {
  padding-block-end: var(--size-1);
}
.pbe-2 {
  padding-block-end: var(--size-2);
}
.pbe-3 {
  padding-block-end: var(--size-3);
}
.pbe-4 {
  padding-block-end: var(--size-4);
}
.pbe-5 {
  padding-block-end: var(--size-5);
}
.pbe-6 {
  padding-block-end: var(--size-6);
}
.pbe-7 {
  padding-block-end: var(--size-7);
}
.pbe-8 {
  padding-block-end: var(--size-8);
}
.pbe-9 {
  padding-block-end: var(--size-9);
}
.pbe-10 {
  padding-block-end: var(--size-10);
}

/* Logical property utilities - Margin */
.mi-0 {
  margin-inline: 0;
}
.mi-1 {
  margin-inline: var(--size-1);
}
.mi-2 {
  margin-inline: var(--size-2);
}
.mi-3 {
  margin-inline: var(--size-3);
}
.mi-4 {
  margin-inline: var(--size-4);
}
.mi-5 {
  margin-inline: var(--size-5);
}
.mi-6 {
  margin-inline: var(--size-6);
}
.mi-7 {
  margin-inline: var(--size-7);
}
.mi-8 {
  margin-inline: var(--size-8);
}
.mi-9 {
  margin-inline: var(--size-9);
}
.mi-10 {
  margin-inline: var(--size-10);
}

.mis-0 {
  margin-inline-start: 0;
}
.mis-1 {
  margin-inline-start: var(--size-1);
}
.mis-2 {
  margin-inline-start: var(--size-2);
}
.mis-3 {
  margin-inline-start: var(--size-3);
}
.mis-4 {
  margin-inline-start: var(--size-4);
}
.mis-5 {
  margin-inline-start: var(--size-5);
}
.mis-6 {
  margin-inline-start: var(--size-6);
}
.mis-7 {
  margin-inline-start: var(--size-7);
}
.mis-8 {
  margin-inline-start: var(--size-8);
}
.mis-9 {
  margin-inline-start: var(--size-9);
}
.mis-10 {
  margin-inline-start: var(--size-10);
}

.mie-0 {
  margin-inline-end: 0;
}
.mie-1 {
  margin-inline-end: var(--size-1);
}
.mie-2 {
  margin-inline-end: var(--size-2);
}
.mie-3 {
  margin-inline-end: var(--size-3);
}
.mie-4 {
  margin-inline-end: var(--size-4);
}
.mie-5 {
  margin-inline-end: var(--size-5);
}
.mie-6 {
  margin-inline-end: var(--size-6);
}
.mie-7 {
  margin-inline-end: var(--size-7);
}
.mie-8 {
  margin-inline-end: var(--size-8);
}
.mie-9 {
  margin-inline-end: var(--size-9);
}
.mie-10 {
  margin-inline-end: var(--size-10);
}

.mb-0 {
  margin-block: 0;
}
.mb-1 {
  margin-block: var(--size-1);
}
.mb-2 {
  margin-block: var(--size-2);
}
.mb-3 {
  margin-block: var(--size-3);
}
.mb-4 {
  margin-block: var(--size-4);
}
.mb-5 {
  margin-block: var(--size-5);
}
.mb-6 {
  margin-block: var(--size-6);
}
.mb-7 {
  margin-block: var(--size-7);
}
.mb-8 {
  margin-block: var(--size-8);
}
.mb-9 {
  margin-block: var(--size-9);
}
.mb-10 {
  margin-block: var(--size-10);
}

.mbs-0 {
  margin-block-start: 0;
}
.mbs-1 {
  margin-block-start: var(--size-1);
}
.mbs-2 {
  margin-block-start: var(--size-2);
}
.mbs-3 {
  margin-block-start: var(--size-3);
}
.mbs-4 {
  margin-block-start: var(--size-4);
}
.mbs-5 {
  margin-block-start: var(--size-5);
}
.mbs-6 {
  margin-block-start: var(--size-6);
}
.mbs-7 {
  margin-block-start: var(--size-7);
}
.mbs-8 {
  margin-block-start: var(--size-8);
}
.mbs-9 {
  margin-block-start: var(--size-9);
}
.mbs-10 {
  margin-block-start: var(--size-10);
}

.mbe-0 {
  margin-block-end: 0;
}
.mbe-1 {
  margin-block-end: var(--size-1);
}
.mbe-2 {
  margin-block-end: var(--size-2);
}
.mbe-3 {
  margin-block-end: var(--size-3);
}
.mbe-4 {
  margin-block-end: var(--size-4);
}
.mbe-5 {
  margin-block-end: var(--size-5);
}
.mbe-6 {
  margin-block-end: var(--size-6);
}
.mbe-7 {
  margin-block-end: var(--size-7);
}
.mbe-8 {
  margin-block-end: var(--size-8);
}
.mbe-9 {
  margin-block-end: var(--size-9);
}
.mbe-10 {
  margin-block-end: var(--size-10);
}