.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.sticky {
  position: sticky;
}

.fixed {
  position: fixed;
}

.hidden {
  display: none;
}

.grid {
  display: grid;
}

.block {
  display: block;
}

.table {
  display: table;
}

.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

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

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

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

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

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-around {
  justify-content: space-around;
}

.justify-between {
  justify-content: space-between;
}

.justify-evenly {
  justify-content: space-evenly;
}

.self-start {
  align-items: flex-start;
}

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

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

.content-center {
  place-content: center;
}

.text-24 {
  font-size: var(--size-24);
}

.text-left {
  text-align: left;
}

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

.text-right {
  text-align: right;
}

.w-full {
  width: 100%;
}

.w-screen {
  width: 100vw;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100dvh;
}

.gap-small {
  gap: var(--gap-8);
}

.gap-medium {
  gap: var(--gap-16);
}

.gap-large {
  gap: var(--gap-24);
}

.gap-big {
  gap: var(--gap-32);
}

.margin-auto-left {
  margin-inline-start: auto;
}

.margin-auto-right {
  margin-inline-end: auto;
}

.margin-auto-top {
  margin-block-start: auto;
}

.margin-auto-bottom {
  margin-block-end: auto;
}

.margin-small {
  margin: var(--size-8);
}
.margin-small-top {
  margin-block-start: var(--size-8);
}
.margin-small-right {
  margin-inline-end: var(--size-8);
}
.margin-small-bottom {
  margin-block-end: var(--size-8);
}
.margin-small-left {
  margin-inline-start: var(--size-8);
}
.margin-small-row {
  margin-inline-end: var(--size-8);
  margin-inline-start: var(--size-8);
}
.margin-small-col {
  margin-block-start: var(--size-8);
  margin-block-end: var(--size-8);
}
.margin-medium {
  margin: var(--size-16);
}
.margin-medium-top {
  margin-block-start: var(--size-16);
}
.margin-medium-right {
  margin-inline-end: var(--size-16);
}
.margin-medium-bottom {
  margin-block-end: var(--size-16);
}
.margin-medium-left {
  margin-inline-start: var(--size-16);
}
.margin-medium-row {
  margin-inline-end: var(--size-16);
  margin-inline-start: var(--size-16);
}
.margin-medium-col {
  margin-block-start: var(--size-16);
  margin-block-end: var(--size-16);
}
.margin-large {
  margin: var(--size-32);
}
.margin-large-top {
  margin-block-start: var(--size-32);
}
.margin-large-right {
  margin-inline-end: var(--size-32);
}
.margin-large-bottom {
  margin-block-end: var(--size-32);
}
.margin-large-left {
  margin-inline-start: var(--size-32);
}
.margin-large-row {
  margin-inline-end: var(--size-32);
  margin-inline-start: var(--size-32);
}
.margin-large-col {
  margin-block-start: var(--size-32);
  margin-block-end: var(--size-32);
}
.margin-big {
  margin: var(--size-64);
}
.margin-big-top {
  margin-block-start: var(--size-64);
}
.margin-big-right {
  margin-inline-end: var(--size-64);
}
.margin-big-bottom {
  margin-block-end: var(--size-64);
}
.margin-big-left {
  margin-inline-start: var(--size-64);
}
.margin-big-row {
  margin-inline-end: var(--size-64);
  margin-inline-start: var(--size-64);
}
.margin-big-col {
  margin-block-start: var(--size-64);
  margin-block-end: var(--size-64);
}

.padding-small {
  padding: var(--size-8);
}
.padding-small-top {
  padding-block-start: var(--size-8);
}
.padding-small-right {
  padding-inline-end: var(--size-8);
}
.padding-small-bottom {
  padding-block-end: var(--size-8);
}
.padding-small-left {
  padding-inline-start: var(--size-8);
}
.padding-small-row {
  padding-inline-start: var(--size-8);
  padding-inline-end: var(--size-8);
}
.padding-small-col {
  padding-block-start: var(--size-8);
  padding-block-end: var(--size-8);
}
.padding-medium {
  padding: var(--size-16);
}
.padding-medium-top {
  padding-block-start: var(--size-16);
}
.padding-medium-right {
  padding-inline-end: var(--size-16);
}
.padding-medium-bottom {
  padding-block-end: var(--size-16);
}
.padding-medium-left {
  padding-inline-start: var(--size-16);
}
.padding-medium-row {
  padding-inline-start: var(--size-16);
  padding-inline-end: var(--size-16);
}
.padding-medium-col {
  padding-block-start: var(--size-16);
  padding-block-end: var(--size-16);
}
.padding-large {
  padding: var(--size-32);
}
.padding-large-top {
  padding-block-start: var(--size-32);
}
.padding-large-right {
  padding-inline-end: var(--size-32);
}
.padding-large-bottom {
  padding-block-end: var(--size-32);
}
.padding-large-left {
  padding-inline-start: var(--size-32);
}
.padding-large-row {
  padding-inline-start: var(--size-32);
  padding-inline-end: var(--size-32);
}
.padding-large-col {
  padding-block-start: var(--size-32);
  padding-block-end: var(--size-32);
}
.padding-big {
  padding: var(--size-64);
}
.padding-big-top {
  padding-block-start: var(--size-64);
}
.padding-big-right {
  padding-inline-end: var(--size-64);
}
.padding-big-bottom {
  padding-block-end: var(--size-64);
}
.padding-big-left {
  padding-inline-start: var(--size-64);
}
.padding-big-row {
  padding-inline-end: var(--size-64);
  padding-inline-start: var(--size-64);
}
.padding-big-col {
  padding-block-start: var(--size-64);
  padding-block-end: var(--size-64);
}

.overflow-hidden {
  overflow: hidden;
}

.margin-none-bottom {
  margin-block-end: var(--size-0) !important;
}

.loader {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border-top: 0.2em solid var(--ms-foreground);
  border-left: 0.2em solid var(--ms-foreground);
  border-bottom: 0.2em solid var(--ms-foreground);
  border-right: 0.2em solid transparent;
  animation: loader-loading 1200ms linear infinite;
}

@keyframes loader-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}