/* Display */
.d-block {
  display: block;
}

.d-none {
  display: none;
}

.d-flex {
  display: flex;
}

/* Spacing */

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.flex-d-column {
  flex-direction: column;
}

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

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

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

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

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

.gap-1 {
  gap: var(--spacing);
}

.gap-2 {
  gap: calc(var(--spacing) * 2);
}

.gap-3 {
  gap: calc(var(--spacing) * 3);
}

.gap-3 {
  gap: calc(var(--spacing) * 4);
}

/* Margin and Padding */

.m-0 {
  margin: 0;
}

.m-1 {
  margin: var(--spacing);
}

.mb-0 {
  margin-bottom: 0;
}

.mb-3 {
  margin-bottom: calc(var(--spacing) * 3);
}

.ml-auto {
  margin-left: auto;
}

.mt-2 {
  margin-top: calc(var(--spacing) * 2);
}

.mx-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.mx-1 {
  margin-top: var(--spacing);
  margin-bottom: var(--spacing);
}

.mx-2 {
  margin-top: calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 2);
}

.mx-3 {
  margin-top: calc(var(--spacing) * 3);
  margin-bottom: calc(var(--spacing) * 3);
}

.my-0 {
  margin-left: 0;
  margin-right: 0;
}

.p-0 {
  padding: 0;
}

.p-1 {
  padding: var(--spacing);
}

.p-2 {
  padding: calc(var(--spacing) * 2);
}

.p-3 {
  padding: calc(var(--spacing) * 3);
}

.pr-0 {
  padding-right: var(--spacing);
}

.px-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.px-1 {
  padding-top: var(--spacing);
  padding-bottom: var(--spacing);
}

.px-2 {
  padding-top: calc(var(--spacing) * 2);
  padding-bottom: calc(var(--spacing) * 2);
}

.px-3 {
  padding-top: calc(var(--spacing) * 3);
  padding-bottom: calc(var(--spacing) * 3);
}

.py-0 {
  padding-left: 0;
  padding-right: 0;
}

.py-1 {
  padding-left: var(--spacing);
  padding-right: var(--spacing);
}

.py-2 {
  padding-left: calc(var(--spacing) * 2);
  padding-right: calc(var(--spacing) * 2);
}

.py-3 {
  padding-left: calc(var(--spacing) * 3);
  padding-right: calc(var(--spacing) * 3);
}

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-90 {
  transform: rotate(-90deg);
}