:root {
  --prj-spacing-1: 0.25rem;
  --prj-spacing-2: 0.5rem;
  --prj-spacing-3: 1rem;
  --prj-spacing-4: 2rem;
  --prj-spacing-5: 3rem;
}

.hstack {
  --prj-gap: var(--prj-spacing-3);
  display: flex;
  gap: var(--prj-gap);
  align-items: center;
}

.grid {
  --prj-gap: var(--prj-spacing-3);
  --prj-columns: repeat(3, 1fr);
  display: grid;
  grid-template-columns: var(--prj-columns);
  gap: var(--prj-gap);
}

.grid-cols-1 {
  --prj-columns: repeat(1, 1fr);
}

.grid-cols-2 {
  --prj-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  --prj-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  --prj-columns: repeat(4, 1fr);
}

.grid-cols-5 {
  --prj-columns: repeat(5, 1fr);
}

.grid-cols-6 {
  --prj-columns: repeat(6, 1fr);
}

.grid-cols-7 {
  --prj-columns: repeat(7, 1fr);
}

.grid-cols-8 {
  --prj-columns: repeat(8, 1fr);
}

.grid-cols-9 {
  --prj-columns: repeat(9, 1fr);
}

.grid-cols-10 {
  --prj-columns: repeat(10, 1fr);
}

.grid-cols-11 {
  --prj-columns: repeat(11, 1fr);
}

.grid-cols-12 {
  --prj-columns: repeat(12, 1fr);
}

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

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

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

.gap-4 {
  --prj-gap: var(--prj-spacing-4);
}

.gap-5 {
  --prj-gap: var(--prj-spacing-5);
}

.list-unstyle {
  list-style: none;
}

.text-justify {
  text-align: justify;
  text-justify: inter-word;
}