/* ==========================================
   GRID SYSTEM
========================================== */

.grid{

    display:grid;

    gap:var(--space-8);

}

/* ==========================
   COLUMNS
========================== */

.grid-2{

    grid-template-columns:repeat(2,minmax(0,1fr));

}

.grid-3{

    grid-template-columns:repeat(3,minmax(0,1fr));

}

.grid-4{

    grid-template-columns:repeat(4,minmax(0,1fr));

}

.grid-auto{

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

}

/* ==========================
   ALIGNMENT
========================== */

.items-center{

    align-items:center;

}

.items-start{

    align-items:flex-start;

}

.items-end{

    align-items:flex-end;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}

/* ==========================
   GAP SYSTEM
========================== */

.gap-2{gap:var(--space-2);}
.gap-3{gap:var(--space-3);}
.gap-4{gap:var(--space-4);}
.gap-5{gap:var(--space-5);}
.gap-6{gap:var(--space-6);}
.gap-7{gap:var(--space-7);}
.gap-8{gap:var(--space-8);}
.gap-9{gap:var(--space-9);}
.gap-10{gap:var(--space-10);}