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

.mg-grid{

    display:grid;
    gap:2rem;

}

.mg-grid-2{

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

}

.mg-grid-3{

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

}

.mg-grid-4{

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

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:900px){

    .mg-grid-2,
    .mg-grid-3,
    .mg-grid-4{

        grid-template-columns:1fr;

    }

}