.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.fit-center {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.fill-width {
  width: 100%;
}

.w-32 {
  width: calc(var(--spacing) * 32);
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

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

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

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

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

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

.flex-row {
  display: flex;
  flex-direction: row;
}

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

.flex-gap {
  gap: var(--space-md);
}

.flex-gap-2 {
  gap: var(--space-xl);
}

.flex-gap-lg-tablet {
  gap: var(--space-md);
}

.flex-gap-lg-desktop {
  gap: var(--space-md);
}

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

.fit-content {
  width: fit-content;
}

/* Max widths */

/* 352px */
.max-width-1 {
  max-width: 22rem;
}

/* 512px */
.max-width-2 {
  max-width: 32rem;
}

@media screen and (min-width: 600px) {
  .flex-gap-lg-tablet {
    gap: var(--space-xl);
  }
}

@media screen and (min-width: 1000px) {
  .flex-col--desktop {
    flex-direction: column !important;
  }

  .flex-row--desktop {
    flex-direction: row;
  }

  .flex-gap-lg-desktop {
    gap: var(--space-xl);
  }

  .lg\:justify-self-end {
    justify-self: end;
  }
}