.ui-list-ordered {
  list-style: decimal;
}
.ui-list-unstyled {
  list-style: none;
  padding-left: 0;
}
.ui-list .ui-list {
  padding-left: 1.25em;
  padding-top: var(--ui-space-1);
  list-style: circle;
}
.ui-list-ordered .ui-list {
  list-style: lower-alpha;
}

.ui-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--ui-space-4);
}
@media (min-width: 640px) {
  .ui-container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .ui-container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .ui-container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .ui-container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .ui-container {
    max-width: 1536px;
  }
}

.ui-container\@fluid {
  max-width: none;
}
.ui-container\@sm {
  max-width: 640px;
}
.ui-container\@md {
  max-width: 768px;
}
.ui-container\@lg {
  max-width: 1024px;
}
.ui-container\@xl {
  max-width: 1280px;
}

.ui-flex {
  display: flex;
}
.ui-flex-inline {
  display: inline-flex;
}
.ui-flex-row {
  display: flex;
  flex-direction: row;
}
.ui-flex-column {
  display: flex;
  flex-direction: column;
}
.ui-flex-wrap {
  flex-wrap: wrap;
}
.ui-flex-nowrap {
  flex-wrap: nowrap;
}
.ui-flex-1 {
  flex: 1 1 0%;
}
.ui-flex-auto {
  flex: 1 1 auto;
}
.ui-flex-initial {
  flex: 0 1 auto;
}
.ui-flex-none {
  flex: none;
}

.ui-items-start {
  align-items: flex-start;
}
.ui-items-center {
  align-items: center;
}
.ui-items-end {
  align-items: flex-end;
}
.ui-items-stretch {
  align-items: stretch;
}

.ui-justify-start {
  justify-content: flex-start;
}
.ui-justify-center {
  justify-content: center;
}
.ui-justify-end {
  justify-content: flex-end;
}
.ui-justify-between {
  justify-content: space-between;
}
.ui-justify-around {
  justify-content: space-around;
}
.ui-justify-evenly {
  justify-content: space-evenly;
}

.ui-align-left {
  display: flex;
  justify-content: flex-start;
}
.ui-align-center {
  display: flex;
  justify-content: center;
}
.ui-align-right {
  display: flex;
  justify-content: flex-end;
}
.ui-align-between {
  display: flex;
  justify-content: space-between;
}

.ui-align-top {
  display: flex;
  align-items: flex-start;
}
.ui-align-middle {
  display: flex;
  align-items: center;
}
.ui-align-bottom {
  display: flex;
  align-items: flex-end;
}
.ui-align-stretch {
  display: flex;
  align-items: stretch;
}

.ui-gap-1 {
  gap: var(--ui-space-1);
}
.ui-gap-2 {
  gap: var(--ui-space-2);
}
.ui-gap-3 {
  gap: var(--ui-space-3);
}
.ui-gap-4 {
  gap: var(--ui-space-4);
}
.ui-gap-6 {
  gap: var(--ui-space-6);
}
.ui-gap-8 {
  gap: var(--ui-space-8);
}

.ui-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-3);
}

.ui-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-4);
}

.ui-main {
  padding: var(--ui-space-8) var(--ui-space-6);
  max-width: 1200px;
  margin-inline: auto;
}

.ui-grid {
  display: grid;
  gap: var(--ui-space-4);
}

.ui-grid--12 {
  grid-template-columns: repeat(12, 1fr);
}
.ui-grid--6 {
  grid-template-columns: repeat(6, 1fr);
}
.ui-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
.ui-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.ui-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.ui-grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.ui-column-1 {
  grid-column: span 1;
}
.ui-column-2 {
  grid-column: span 2;
}
.ui-column-3 {
  grid-column: span 3;
}
.ui-column-4 {
  grid-column: span 4;
}
.ui-column-5 {
  grid-column: span 5;
}
.ui-column-6 {
  grid-column: span 6;
}
.ui-column-7 {
  grid-column: span 7;
}
.ui-column-8 {
  grid-column: span 8;
}
.ui-column-9 {
  grid-column: span 9;
}
.ui-column-10 {
  grid-column: span 10;
}
.ui-column-11 {
  grid-column: span 11;
}
.ui-column-12 {
  grid-column: span 12;
}
.ui-column-full {
  grid-column: 1 / -1;
}

.ui-row-span-2 {
  grid-row: span 2;
}
.ui-row-span-3 {
  grid-row: span 3;
}

@media (max-width: 768px) {
  .ui-grid--12,
  .ui-grid--6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .ui-column-3,
  .ui-column-4 {
    grid-column: span 3;
  }
  .ui-column-5,
  .ui-column-6 {
    grid-column: span 6;
  }
  .ui-column-7,
  .ui-column-8,
  .ui-column-9,
  .ui-column-10,
  .ui-column-11,
  .ui-column-12 {
    grid-column: span 6;
  }
}

@media (max-width: 480px) {
  .ui-grid--12,
  .ui-grid--6,
  .ui-grid--4,
  .ui-grid--3,
  .ui-grid--2 {
    grid-template-columns: 1fr;
  }
  [class*="ui-column-"] {
    grid-column: span 1;
  }
}

.ui-grid-demo {
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--ui-space-3) var(--ui-space-2);
  text-align: center;
  font-size: var(--ui-font-size-s);
  font-weight: var(--ui-font-weight-medium);
  opacity: 0.85;
}