/* ==========================================================================
   MUT DESIGN SYSTEM (MUTDS)
   GRID SYSTEM
   Version: 1.0
   ========================================================================== */

/*
|--------------------------------------------------------------------------
| GRID CONTAINER
|--------------------------------------------------------------------------
*/

.mut-grid{
    display:grid;
}

/*
|--------------------------------------------------------------------------
| COLUMNS
|--------------------------------------------------------------------------
*/

.mut-grid-1{
    grid-template-columns:repeat(1,minmax(0,1fr));
}

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

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

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

.mut-grid-5{
    grid-template-columns:repeat(5,minmax(0,1fr));
}

.mut-grid-6{
    grid-template-columns:repeat(6,minmax(0,1fr));
}

/*
|--------------------------------------------------------------------------
| AUTO FIT
|--------------------------------------------------------------------------
*/

.mut-grid-auto-sm{
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}

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

.mut-grid-auto-lg{
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
}

/*
|--------------------------------------------------------------------------
| GAPS
|--------------------------------------------------------------------------
*/

.mut-gap-0{gap:0;}
.mut-gap-1{gap:.5rem;}
.mut-gap-2{gap:1rem;}
.mut-gap-3{gap:1.5rem;}
.mut-gap-4{gap:2rem;}
.mut-gap-5{gap:3rem;}
.mut-gap-6{gap:4rem;}

/*
|--------------------------------------------------------------------------
| ALIGNMENT
|--------------------------------------------------------------------------
*/

.mut-items-start{align-items:start;}
.mut-items-center{align-items:center;}
.mut-items-end{align-items:end;}

.mut-justify-start{justify-content:start;}
.mut-justify-center{justify-content:center;}
.mut-justify-end{justify-content:end;}
.mut-justify-between{justify-content:space-between;}

/*
|--------------------------------------------------------------------------
| GRID SPAN
|--------------------------------------------------------------------------
*/

.mut-col-span-1{grid-column:span 1;}
.mut-col-span-2{grid-column:span 2;}
.mut-col-span-3{grid-column:span 3;}
.mut-col-span-4{grid-column:span 4;}
.mut-col-span-5{grid-column:span 5;}
.mut-col-span-6{grid-column:span 6;}

/*
|--------------------------------------------------------------------------
| ROW SPAN
|--------------------------------------------------------------------------
*/

.mut-row-span-1{grid-row:span 1;}
.mut-row-span-2{grid-row:span 2;}
.mut-row-span-3{grid-row:span 3;}

/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width:1200px){

    .mut-grid-6{
        grid-template-columns:repeat(4,1fr);
    }

    .mut-grid-5{
        grid-template-columns:repeat(3,1fr);
    }

}

@media (max-width:992px){

    .mut-grid-6,
    .mut-grid-5,
    .mut-grid-4{

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

    }

}

@media (max-width:768px){

    .mut-grid-6,
    .mut-grid-5,
    .mut-grid-4,
    .mut-grid-3,
    .mut-grid-2{

        grid-template-columns:1fr;

    }

    .mut-col-span-2,
    .mut-col-span-3,
    .mut-col-span-4,
    .mut-col-span-5,
    .mut-col-span-6{

        grid-column:span 1;

    }

}