@media only screen and (max-width: 600px) {
    .m:not(.s), .l:not(.s), .xl:not(.s), .m.l:not(.s), .m.xl:not(.s), .l.xl:not(.s), .m.l.xl:not(.s) {
        display: none !important
    }
}

@media only screen and (min-width: 601px) and (max-width: 992px) {
    .s:not(.m), .l:not(.m), .xl:not(.m), .s.l:not(.m), .s.xl:not(.m), .l.xl:not(.m), .s.l.xl:not(.m) {
        display: none !important
    }
}

@media only screen and (min-width: 993px) and (max-width: 1199px) {
    .s:not(.l), .m:not(.l), .xl:not(.l), .s.m:not(.l), .s.xl:not(.l), .m.xl:not(.l), .s.m.xl:not(.l) {
        display: none !important
    }
}

@media only screen and (min-width: 1200px) {
    .s:not(.xl), .m:not(.xl), .l:not(.xl), .s.m:not(.xl), .s.l:not(.xl), .m.l:not(.xl), .s.m.l:not(.xl) {
        display: none !important
    }
}

@media only screen and (min-width: 1200px) {
    .xl1 {
        grid-area: auto/span 1
    }

    .xl2 {
        grid-area: auto/span 2
    }

    .xl3 {
        grid-area: auto/span 3
    }

    .xl4 {
        grid-area: auto/span 4
    }

    .xl5 {
        grid-area: auto/span 5
    }

    .xl6 {
        grid-area: auto/span 6
    }

    .xl7 {
        grid-area: auto/span 7
    }

    .xl8 {
        grid-area: auto/span 8
    }

    .xl9 {
        grid-area: auto/span 9
    }

    .xl10 {
        grid-area: auto/span 10
    }

    .xl11 {
        grid-area: auto/span 11
    }

    .xl12 {
        grid-area: auto/span 12
    }
}