.main {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(12, 1fr);
    margin: 0 auto;
    width: 100%;
    max-width: 1366px;
}

.one, .two, .three, .four, .five, .six,
.seven, .eight, .nine, .ten, .eleven, .twelve {
    grid-column-end: span 12;
}

.nested {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(12, 1fr);
}

.merge-two-rows { grid-row-end: span 2 }
.merge-three-rows { grid-row-end: span 3 }
.merge-four-rows { grid-row-end: span 4 }
.merge-five-rows { grid-row-end: span 5 }
.merge-six-rows { grid-row-end: span 6 }

@media only screen and (min-width: 481px) {
    .one { grid-column-end: span 1 }
    .two { grid-column-end: span 2 }
    .three { grid-column-end: span 3 }
    .four { grid-column-end: span 4 }
    .five { grid-column-end: span 5 }
    .six { grid-column-end: span 6 }
    .seven { grid-column-end: span 7 }
    .eight { grid-column-end: span 8 }
    .nine { grid-column-end: span 9 }
    .ten { grid-column-end: span 10 }
    .eleven { grid-column-end: span 11 }
    .two.nested { grid-column-end: span 2; grid-template-columns: repeat(2, 1fr); }
    .three.nested { grid-column-end: span 3; grid-template-columns: repeat(3, 1fr); }
    .four.nested { grid-column-end: span 4; grid-template-columns: repeat(4, 1fr); }
    .five.nested { grid-column-end: span 5; grid-template-columns: repeat(5, 1fr); }
    .six.nested { grid-column-end: span 6; grid-template-columns: repeat(6, 1fr); }
    .seven.nested { grid-column-end: span 7; grid-template-columns: repeat(7, 1fr); }
    .eight.nested { grid-column-end: span 8; grid-template-columns: repeat(8, 1fr); }
    .nine.nested { grid-column-end: span 9; grid-template-columns: repeat(9, 1fr); }
    .ten.nested { grid-column-end: span 10; grid-template-columns: repeat(10, 1fr); }
}