body.works,
body.works a{
    color: #fff;
    text-shadow: 0 0 6px #000;
}

body.works .header-button span{
    background-color: #fff;
}

body.open .header-button span{
    width:  30px;
    box-shadow: none;
    background-color: transparent;
}

body.works .header-logo svg{
    width: 250px;
    stroke: #fff;
    filter: drop-shadow(0 0  6px #000);
}

.works main{
    padding: 100px 20px;
}




.works-list{
    list-style: none;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 150px 20px 150px;
    grid-template-columns: 150px 150px;
    -ms-grid-rows: 220px 20px 220px 20px 220px 20px 220px 20px 220px 20px 220px 20px 220px 20px 220px 20px 220px 20px 220px;
    grid-template-rows: 220px 220px 220px 220px 220px 220px 220px 220px 220px 220px;
    grid-gap: 20px;
    margin: 0 auto;
    width: 320px;
}

.works-list > *:nth-child(1){
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.works-list > *:nth-child(2){
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}

.works-list > *:nth-child(3){
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

.works-list > *:nth-child(4){
    -ms-grid-row: 3;
    -ms-grid-column: 3;
}

.works-list > *:nth-child(5){
    -ms-grid-row: 5;
    -ms-grid-column: 1;
}

.works-list > *:nth-child(6){
    -ms-grid-row: 5;
    -ms-grid-column: 3;
}

.works-list > *:nth-child(7){
    -ms-grid-row: 7;
    -ms-grid-column: 1;
}

.works-list > *:nth-child(8){
    -ms-grid-row: 7;
    -ms-grid-column: 3;
}

.works-list > *:nth-child(9){
    -ms-grid-row: 9;
    -ms-grid-column: 1;
}

.works-list > *:nth-child(10){
    -ms-grid-row: 9;
    -ms-grid-column: 3;
}

.works-list > *:nth-child(11){
    -ms-grid-row: 11;
    -ms-grid-column: 1;
}

.works-list > *:nth-child(12){
    -ms-grid-row: 11;
    -ms-grid-column: 3;
}


.works-list li img{
    display: block;
    width: 100%;
}




@media screen and (min-width: 1024px){
    .works-list{
        -ms-grid-columns: 210px 30px 210px 30px 210px 30px 210px;
        grid-template-columns: 210px 210px 210px 210px 210px;
        -ms-grid-rows: 300px 30px 300px 30px 300px 30px 300px;
        grid-template-rows: 300px 300px 300px 300px;
        grid-gap: 30px;
        width : 930px;
    }
    .works-list > *:nth-child(1){
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }
    .works-list > *:nth-child(2){
        -ms-grid-row: 1;
        -ms-grid-column: 3;
    }
    .works-list > *:nth-child(3){
        -ms-grid-row: 1;
        -ms-grid-column: 5;
    }
    .works-list > *:nth-child(4){
        -ms-grid-row: 1;
        -ms-grid-column: 7;
    }
    .works-list > *:nth-child(5){
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }
    .works-list > *:nth-child(6){
        -ms-grid-row: 3;
        -ms-grid-column: 3;
    }
    .works-list > *:nth-child(7){
        -ms-grid-row: 3;
        -ms-grid-column: 5;
    }
    .works-list > *:nth-child(8){
        -ms-grid-row: 3;
        -ms-grid-column: 7;
    }
    .works-list > *:nth-child(9){
        -ms-grid-row: 5;
        -ms-grid-column: 1;
    }
    .works-list > *:nth-child(10){
        -ms-grid-row: 5;
        -ms-grid-column: 3;
    }
    .works-list > *:nth-child(11){
        -ms-grid-row: 5;
        -ms-grid-column: 5;
    }
    .works-list > *:nth-child(12){
        -ms-grid-row: 5;
        -ms-grid-column: 7;
    }
}

/*
.works-list{
    list-style: none;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 150px 20px 150px;
    grid-template-columns: 150px 150px;
    -ms-grid-rows: 220px 20px 220px 20px 220px 20px 220px 20px 220px 20px 220px;
    grid-template-rows: 220px 220px 220px 220px 220px 220px;
    grid-gap: 20px;
    margin: 0 auto;
    width: 320px;
}

.works-list li img{
    display: block;
    width: 100%;
}


@media screen and (min-width: 1024px){
    .works-list{
        -ms-grid-columns: 210px 30px 210px 30px 210px 30px 210px;
        grid-template-columns: 210px 210px 210px 210px;
        -ms-grid-rows: 300px 30px 300px 30px 300px;
        grid-template-rows: 300px 300px 300px;
        grid-gap: 30px;
        width : 930px;
    }
}

*/