/* Flex Direction */
.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-row {
  display: flex;
  flex-direction: row;
}

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

/* Gap */
.gap-1 {
  gap: 0.25rem; /* 4px */
}

.gap-2 {
  gap: 0.5rem; /* 8px */
}

.gap-3 {
  gap: 0.75rem; /* 12px */
}

.gap-4 {
  gap: 1rem; /* 16px */
}

/* Justify Content */
.justify-start {
  justify-content: flex-start;
}

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

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

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

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

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

/* Align Items */
.items-start {
  align-items: flex-start;
}

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

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

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

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

/* Flex Grow */
.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

/* Flex Shrink */
.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

/* Width */
.w-full {
  width: 100%;
}

.w-1\/2 {
  width: 50%;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-3\/4 {
  width: 75%;
}

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

/* Height */
.h-full {
  height: 100%;
}

.h-fit {
  height: fit-content;
}