.row{
    display: grid;
    /* width: ; */
    grid-template-columns: 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33%;
    grid-gap: 0px;
}

[class*=c-]{ grid-area: auto / auto / span 1 / span 12;}

@media only screen and (min-width: 1px){
    [class*=c-xs-]{ display: block; }
    .xs-hidden, .hidden{ display: none; }
    .xs-visiable{ display: block }

    .row > .c-xs-1{ grid-area: auto / auto / span 1 / span 1; }
    .row > .c-xs-2{ grid-area: auto / auto / span 1 / span 2; }
    .row > .c-xs-3{ grid-area: auto / auto / span 1 / span 3; }
    .row > .c-xs-4{ grid-area: auto / auto / span 1 / span 4; }
    .row > .c-xs-5{ grid-area: auto / auto / span 1 / span 5; }
    .row > .c-xs-6{ grid-area: auto / auto / span 1 / span 6; }
    .row > .c-xs-7{ grid-area: auto / auto / span 1 / span 7; }
    .row > .c-xs-8{ grid-area: auto / auto / span 1 / span 8; }
    .row > .c-xs-9{ grid-area: auto / auto / span 1 / span 9; }
    .row > .c-xs-10{ grid-area: auto / auto / span 1 / span 10; }
    .row > .c-xs-11{ grid-area: auto / auto / span 1 / span 11; }
    .row > .c-xs-12{ grid-area: auto / auto / span 1 / span 12; }
}
@media only screen and (min-width: 576px){
    [class*=c-s-]{ display: block; }
    .s-hidden, .hidden{ display: none; }
    .s-visiable{ display: block }
    
    .row > .c-s-1{ grid-area: auto / auto / span 1 / span 1; }
    .row > .c-s-2{ grid-area: auto / auto / span 1 / span 2; }
    .row > .c-s-3{ grid-area: auto / auto / span 1 / span 3; }
    .row > .c-s-4{ grid-area: auto / auto / span 1 / span 4; }
    .row > .c-s-5{ grid-area: auto / auto / span 1 / span 5; }
    .row > .c-s-6{ grid-area: auto / auto / span 1 / span 6; }
    .row > .c-s-7{ grid-area: auto / auto / span 1 / span 7; }
    .row > .c-s-8{ grid-area: auto / auto / span 1 / span 8; }
    .row > .c-s-9{ grid-area: auto / auto / span 1 / span 9; }
    .row > .c-s-10{ grid-area: auto / auto / span 1 / span 10; }
    .row > .c-s-11{ grid-area: auto / auto / span 1 / span 11; }
    .row > .c-s-12{ grid-area: auto / auto / span 1 / span 12; }
}
@media only screen and (min-width: 768px){
    [class*=c-m-]{ display: block; }
    .m-hidden, .hidden{ display: none; }
    .m-visiable{ display: block }
    
    .row > .c-m-1{ grid-area: auto / auto / span 1 / span 1; }
    .row > .c-m-2{ grid-area: auto / auto / span 1 / span 2; }
    .row > .c-m-3{ grid-area: auto / auto / span 1 / span 3; }
    .row > .c-m-4{ grid-area: auto / auto / span 1 / span 4; }
    .row > .c-m-5{ grid-area: auto / auto / span 1 / span 5; }
    .row > .c-m-6{ grid-area: auto / auto / span 1 / span 6; }
    .row > .c-m-7{ grid-area: auto / auto / span 1 / span 7; }
    .row > .c-m-8{ grid-area: auto / auto / span 1 / span 8; }
    .row > .c-m-9{ grid-area: auto / auto / span 1 / span 9; }
    .row > .c-m-10{ grid-area: auto / auto / span 1 / span 10; }
    .row > .c-m-11{ grid-area: auto / auto / span 1 / span 11; }
    .row > .c-m-12{ grid-area: auto / auto / span 1 / span 12; }
}
@media only screen and (min-width: 992px){
    [class*=c-l-]{ display: block; }
    .l-visiable{ display: block }
    .l-hidden, .hidden{ display: none; }
    
    .row > .c-l-1{ grid-area: auto / auto / span 1 / span 1; }
    .row > .c-l-2{ grid-area: auto / auto / span 1 / span 2; }
    .row > .c-l-3{ grid-area: auto / auto / span 1 / span 3; }
    .row > .c-l-4{ grid-area: auto / auto / span 1 / span 4; }
    .row > .c-l-5{ grid-area: auto / auto / span 1 / span 5; }
    .row > .c-l-6{ grid-area: auto / auto / span 1 / span 6; }
    .row > .c-l-7{ grid-area: auto / auto / span 1 / span 7; }
    .row > .c-l-8{ grid-area: auto / auto / span 1 / span 8; }
    .row > .c-l-9{ grid-area: auto / auto / span 1 / span 9; }
    .row > .c-l-10{ grid-area: auto / auto / span 1 / span 10; }
    .row > .c-l-11{ grid-area: auto / auto / span 1 / span 11; }
    .row > .c-l-12{ grid-area: auto / auto / span 1 / span 12; }
}
@media only screen and (min-width: 1200px){
    [class*=c-xl-]{ display: block; }
    .l-visiable{ display: block }
    .l-hidden, .hidden{ display: none; }
    .row > .c-xl-1{ grid-area: auto / auto / span 1 / span 1; }
    .row > .c-xl-2{ grid-area: auto / auto / span 1 / span 2; }
    .row > .c-xl-3{ grid-area: auto / auto / span 1 / span 3; }
    .row > .c-xl-4{ grid-area: auto / auto / span 1 / span 4; }
    .row > .c-xl-5{ grid-area: auto / auto / span 1 / span 5; }
    .row > .c-xl-6{ grid-area: auto / auto / span 1 / span 6; }
    .row > .c-xl-7{ grid-area: auto / auto / span 1 / span 7; }
    .row > .c-xl-8{ grid-area: auto / auto / span 1 / span 8; }
    .row > .c-xl-9{ grid-area: auto / auto / span 1 / span 9; }
    .row > .c-xl-10{ grid-area: auto / auto / span 1 / span 10; }
    .row > .c-xl-11{ grid-area: auto / auto / span 1 / span 11; }
    .row > .c-xl-12{ grid-area: auto / auto / span 1 / span 12; }
}