.grid{
    display:grid;
    gap:20px;
}

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

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

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

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

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

@media(max-width:1200px){

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

}

@media(max-width:992px){

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

}

@media(max-width:768px){

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

}

@media(max-width:500px){

    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5{
        grid-template-columns:1fr;
    }

}