.item { margin: 0; padding: 0; } .c2r1 { grid-column: span 4; grid-row: span 1; } .c2r2 { grid-column: span 4; grid-row: span 1; } .c2r3 { grid-column: span 4; grid-row: span 1; } .c2r6 { grid-column: span 4; grid-row: span 1; } .c3r1 { grid-column: span 4; grid-row: span 1; } .c3r2 { grid-column: span 4; grid-row: span 1; } .c3r3 { grid-column: span 4; grid-row: span 1; } .c3r6 { grid-column: span 4; grid-row: span 1; } .c4r1 { grid-column: span 4; grid-row: span 1; } .c4r2 { grid-column: span 4; grid-row: span 1; } .c4r3 { grid-column: span 4; grid-row: span 1; } .c4r6 { grid-column: span 4; grid-row: span 1; } .c6r1 { grid-column: span 4; grid-row: span 1; } .c6r2 { grid-column: span 4; grid-row: span 1; } .c6r3 { grid-column: span 4; grid-row: span 1; } .c6r6 { grid-column: span 4; grid-row: span 1; } .c8r1 { grid-column: span 4; grid-row: span 1; } .c8r2 { grid-column: span 4; grid-row: span 1; } .c8r3 { grid-column: span 4; grid-row: span 1; } .c8r6 { grid-column: span 4; grid-row: span 1; } .order1 { order: 1; } .order2 { order: 4; } .order3 { order: 7; } .order4 { order: 2; } .order5 { order: 5; } .order6 { order: 8; } .order7 { order: 3; } .order8 { order: 6; } .order9 { order: 9; } @media screen and (min-width: 768px) { .c2r1 { grid-column: span 4; grid-row: span 1; } .c2r2 { grid-column: span 4; grid-row: span 1; } .c2r3 { grid-column: span 4; grid-row: span 1; } .c2r6 { grid-column: span 4; grid-row: span 1; } .c3r1 { grid-column: span 4; grid-row: span 1; } .c3r2 { grid-column: span 4; grid-row: span 1; } .c3r3 { grid-column: span 4; grid-row: span 1; } .c3r6 { grid-column: span 4; grid-row: span 1; } .c4r1 { grid-column: span 4; grid-row: span 1; } .c4r2 { grid-column: span 4; grid-row: span 1; } .c4r3 { grid-column: span 4; grid-row: span 1; } .c4r6 { grid-column: span 4; grid-row: span 1; } .c6r1 { grid-column: span 8; grid-row: span 1; } .c6r2 { grid-column: span 8; grid-row: span 1; } .c6r3 { grid-column: span 8; grid-row: span 1; } .c6r6 { grid-column: span 8; grid-row: span 1; } .c8r1 { grid-column: span 8; grid-row: span 1; } .c8r2 { grid-column: span 8; grid-row: span 1; } .c8r3 { grid-column: span 8; grid-row: span 1; } .c8r6 { grid-column: span 8; grid-row: span 1; } } @media screen and (min-width: 1367px) { .c2r1 { grid-column: span 2; grid-row: span 1; } .c2r2 { grid-column: span 2; grid-row: span 2; } .c2r3 { grid-column: span 2; grid-row: span 3; } .c2r6 { grid-column: span 2; grid-row: span 6; } .c3r1 { grid-column: span 3; grid-row: span 1; } .c3r2 { grid-column: span 3; grid-row: span 2; } .c3r3 { grid-column: span 3; grid-row: span 3; } .c3r6 { grid-column: span 3; grid-row: span 6; } .c4r1 { grid-column: span 4; grid-row: span 1; } .c4r2 { grid-column: span 4; grid-row: span 2; } .c4r3 { grid-column: span 4; grid-row: span 3; } .c4r6 { grid-column: span 4; grid-row: span 6; } .c6r1 { grid-column: span 6; grid-row: span 1; } .c6r2 { grid-column: span 6; grid-row: span 2; } .c6r3 { grid-column: span 6; grid-row: span 3; } .c6r6 { grid-column: span 6; grid-row: span 6; } .c8r1 { grid-column: span 8; grid-row: span 1; } .c8r2 { grid-column: span 8; grid-row: span 2; } .c8r3 { grid-column: span 8; grid-row: span 3; } .c8r6 { grid-column: span 8; grid-row: span 6; } .order2 { order: 2; } .order3 { order: 3; } .order4 { order: 4; } .order5 { order: 5; } .order6 { order: 6; } .order7 { order: 7; } .order8 { order: 8; } }