.flex {
    display: flex;
}
.flex-col {
    flex-direction: column;
}
.flex-1 {
    flex: 1;
}
.items-center {
    align-items: center;
}
.items-start {
    align-items: start;
}
.items-end {
    align-items: end;
}
.justify-center {
    justify-content: center;
}
.justify-start {
    justify-content: start;
}
.justify-end {
    justify-content: end;
}
.justify-between {
    justify-content: space-between;
}

.gap-1 {
    gap: 4px;
}
.gap-2 {
    gap: 8px;
}
.gap-3 {
    gap: 12px;
}
.gap-4 {
    gap: 16px;
}

.grid {
    display: grid;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.col-span-2 {
    grid-column: span 2;
}
.col-span-3 {
    grid-column: span 3;
}
.col-span-4 {
    grid-column: span 4;
}

.w-full {
    width: 100%;
}