@media(min-width:319px){
    .grid {
        display:grid;
    }
    .mob-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .mob-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .mob-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .mob-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .mob-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .mob-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    .mob-7 {
        grid-template-columns: repeat(7, 1fr);
    }
    .mob-8 {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media(min-width:375px){
    .grid {
        display:grid;
    }
    .sm375-mob-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .sm375-mob-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .sm375-mob-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .sm375-mob-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .sm375-mob-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .sm375-mob-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    .sm375-mob-7 {
        grid-template-columns: repeat(7, 1fr);
    }
    .sm375-mob-8 {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media(min-width:474px){
    .grid {
        display:grid;
    }
    .sm-mob-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .sm-mob-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .sm-mob-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .sm-mob-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .sm-mob-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .sm-mob-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    .sm-mob-7 {
        grid-template-columns: repeat(7, 1fr);
    }
    .sm-mob-8 {
        grid-template-columns: repeat(8, 1fr);
    }
}
@media(min-width:550px){
    .grid {
        display:grid;
    }
    .sm550-mob-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .sm550-mob-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .sm550-mob-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .sm550-mob-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .sm550-mob-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .sm550-mob-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    .sm550-mob-7 {
        grid-template-columns: repeat(7, 1fr);
    }
    .sm550-mob-8 {
        grid-template-columns: repeat(8, 1fr);
    }
}
@media(min-width:667px) {
    .grid {
        display:grid;
    }
    .m667-mob-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .m667-mob-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .m667-mob-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .m667-mob-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .m667-mob-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    .m667-mob-7 {
        grid-template-columns: repeat(7, 1fr);
    }
    .m667-mob-8 {
        grid-template-columns: repeat(8, 1fr);
    }

}
@media(min-width:767px){
    .grid {
        display:grid;
    }
    .md-mob-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .md-mob-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .md-mob-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .md-mob-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .md-mob-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .md-mob-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    .md-mob-7 {
        grid-template-columns: repeat(7, 1fr);
    }
    .md-mob-8 {
        grid-template-columns: repeat(8, 1fr);
    }
}
@media(min-width:1023px){
    .grid {
        display:grid;
    }
    .tablet-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .tablet-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .tablet-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .tablet-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .tablet-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .tablet-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    .tablet-7 {
        grid-template-columns: repeat(7, 1fr);
    }
    .tablet-8 {
        grid-template-columns: repeat(8, 1fr);
    }
}
@media(min-width:1100px) {
    .sm-desktop-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .sm-desktop-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .sm-desktop-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .sm-desktop-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .sm-desktop-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .sm-desktop-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    .sm-desktop-7 {
        grid-template-columns: repeat(7, 1fr);
    }
    .sm-desktop-8 {
        grid-template-columns: repeat(8, 1fr);
    }
}
@media(min-width:1139px){
    .grid {
        display:grid;
    }
    .desktop-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .desktop-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .desktop-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .desktop-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .desktop-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .desktop-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    .desktop-7 {
        grid-template-columns: repeat(7, 1fr);
    }
    .desktop-8 {
        grid-template-columns: repeat(8, 1fr);
    }
}
@media(min-width:1440px) {
    .md-desktop-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .md-desktop-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .md-desktop-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .md-desktop-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .md-desktop-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .md-desktop-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    .md-desktop-7 {
        grid-template-columns: repeat(7, 1fr);
    }
    .md-desktop-8 {
        grid-template-columns: repeat(8, 1fr);
    }
}
@media(min-width:1920px) {
    .lg-desktop-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .lg-desktop-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .lg-desktop-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .lg-desktop-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .lg-desktop-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .lg-desktop-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    .lg-desktop-7 {
        grid-template-columns: repeat(7, 1fr);
    }
    .lg-desktop-8 {
        grid-template-columns: repeat(8, 1fr);
    }
}