* {
    margin: 0;
    font-size: 18px;
}

html {
    background-color: #fff;
}

p {
    font-size: 20px;
    margin-bottom: 4px;
}

h1 {
    margin: 0 0 15px;
    font-size: 32px;
    text-align: center;
}

@supports (display: grid) {
    .grid {
        display: grid;
        /*grid-template-columns: 250px 250px 250px 250px;*/
        /*grid-template-columns: repeat(4, 250px);*/
    }

    .grid-item {
        background-color: #ddd;
    }

    .grid.grid1 {
        grid-template-columns: 150px 1fr 150px;  /* three columns */
        grid-template-rows: 50px auto 50px; /* three rows  */
        /*grid-template: 50px auto 50px / 150px 1fr auto;*/
    }
    .grid.grid1 .grid-item {
        margin: 1px;
    }

    .grid.grid2 {
        grid-template-areas: "header header"
        "nav  main"
        "footer ."
        "deepFooter deepFooter"
    }

    .grid.grid2 > header {
        grid-area: header;
        background-color: greenyellow;
    }

    .grid.grid2 > nav {
        grid-area: nav;
        background-color: indianred;
    }

    .grid.grid2 > main {
        grid-area: main;
        background-color:darkorange;
    }

    .grid.grid2 > footer {
        grid-area: footer;
        background-color: blueviolet;
    }

    .grid.grid2 > .deepFooter {
        grid-area: deepFooter;
        background-color: blue;
    }


    .grid.grid3 {
        grid-template: repeat(2, 80px) / repeat(6, auto [col6-end]); /* строки, потом столбцы */
        /*grid-template: "first" "second" / repeat(6, auto);*/
    }


    .grid.grid3 .grid-item  {
    }

    .grid.grid4 .grid-item {
        background-color: #ddd;
        margin: 1px;
    }

    .grid.grid4 {
        grid-template: repeat(2, 80px) / repeat(6, auto [col6-end]); /* строки, потом столбцы */
        grid-template-areas: "link1 link2 link3 link4 link5 link6"
        ". . . . link7 link8";
    }

    .grid.grid4 > div:nth-child(1){background-color: ;}
    .grid.grid4 > div:nth-child(2){background-color: ;}
    .grid.grid4 > div:nth-child(7){background-color: blue;grid-area: link7;}
    .grid.grid4 > div:nth-child(8){background-color: blue;grid-area: link8;}


    .grid.grid5 .grid-item {
        background-color: #ddd;
        margin: 1px;
    }

    .grid.grid5 {
        grid-template: repeat(2, 50px) / repeat(6, auto [col6-end]); /* строки, потом столбцы */
        grid-template-areas: "link1 link2 link3 link4 link5 link6"
        "link7 link8 link9 link10 link11 link12";
    }
    

    /*.grid.grid5 > div:nth-last-child(1) {grid-area: link12;}*/
    /*.grid.grid5 > div:nth-last-child(2) {grid-area: link11;}*/
    /*.grid.grid5 > div:nth-last-child(3) {grid-area: link10;}*/
    /*.grid.grid5 > div:nth-last-child(4) {grid-area: link9;}*/
    /*.grid.grid5 > div:nth-last-child(5) {grid-area: link8;}*/
    /*.grid.grid5 > div:nth-last-child(6) {grid-area: link7;}*/


    .grid.grid5 > div:nth-last-child(7):first-child ~ div:nth-last-child(1) {grid-area: link12;}

    .grid.grid5 > div:nth-last-child(8):first-child ~ div:nth-last-child(1) {grid-area: link12;}
    .grid.grid5 > div:nth-last-child(8):first-child ~ div:nth-last-child(2) {grid-area: link11;}

    .grid.grid5 > div:nth-last-child(9):first-child ~ div:nth-last-child(1) {grid-area: link12;}
    .grid.grid5 > div:nth-last-child(9):first-child ~ div:nth-last-child(2) {grid-area: link11;}
    .grid.grid5 > div:nth-last-child(9):first-child ~ div:nth-last-child(3) {grid-area: link10;}

    .grid.grid5 > div:nth-last-child(10):first-child ~ div:nth-last-child(1) {grid-area: link12;}
    .grid.grid5 > div:nth-last-child(10):first-child ~ div:nth-last-child(2) {grid-area: link11;}
    .grid.grid5 > div:nth-last-child(10):first-child ~ div:nth-last-child(3) {grid-area: link10;}
    .grid.grid5 > div:nth-last-child(10):first-child ~ div:nth-last-child(4) {grid-area: link9;}

    .grid.grid5 > div:nth-last-child(11):first-child ~ div:nth-last-child(1) {grid-area: link12;}
    .grid.grid5 > div:nth-last-child(11):first-child ~ div:nth-last-child(2) {grid-area: link11;}
    .grid.grid5 > div:nth-last-child(11):first-child ~ div:nth-last-child(3) {grid-area: link10;}
    .grid.grid5 > div:nth-last-child(11):first-child ~ div:nth-last-child(4) {grid-area: link9;}
    .grid.grid5 > div:nth-last-child(11):first-child ~ div:nth-last-child(5) {grid-area: link8;}

    .grid.grid5 > div:nth-last-child(12):first-child ~ div:nth-last-child(1) {grid-area: link12;}
    .grid.grid5 > div:nth-last-child(12):first-child ~ div:nth-last-child(2) {grid-area: link11;}
    .grid.grid5 > div:nth-last-child(12):first-child ~ div:nth-last-child(3) {grid-area: link10;}
    .grid.grid5 > div:nth-last-child(12):first-child ~ div:nth-last-child(4) {grid-area: link9;}
    .grid.grid5 > div:nth-last-child(12):first-child ~ div:nth-last-child(5) {grid-area: link8;}
    .grid.grid5 > div:nth-last-child(12):first-child ~ div:nth-last-child(6) {grid-area: link7;}

}


.magic-list li:nth-last-child(8):first-child {background-color: red;}
.magic-list li:nth-last-child(8):first-child ~ li {background-color: blue;}
.magic-list li:nth-last-child(n+3) {color: red;}
.magic-list li:nth-last-child(n+3) ~ li {color: yellow;}