body {
    display: grid;
    grid-template-columns: repeat(12, [col-start] 1fr);
}

@media (max-width: 359px) {
    h1 {
        grid-column: col-start / span 12;
        grid-row: 1;
    }
    
    .nav-main {
        grid-column: col-start / span 12;
        grid-row: 2;
        justify-content: start;
    }
    
    .nav-works {
        grid-column: col-start / span 12;
        grid-row: 3;
        justify-content: end;
    }
    
    main {
        grid-column: col-start / span 9;
        grid-row: 4;
        justify-content: start;
        padding: 5px;
    }
    
    footer {
        grid-column: col-start / span 12;
        grid-row: 5;
    }
}

/* big phone screen ? */
@media (min-width: 360px) {
    
    h1 {
        grid-row: 1;
    }
    
    .nav-main {
        grid-column: col-start / span 1;
        grid-row: 2;
        justify-content: start;
    }
    
    .nav-works {
        grid-column: col-start / span 6;
        grid-row: 3;
        justify-content: end;
    }
    
    main {
        grid-column: col-start 1 / span 9;
        grid-row: 4;
        justify-content: start;
        padding: 5px;
    }
    
    footer {
        grid-row: 5;
    }
}
/* desktop */
@media (min-width: 768px) {
    .nav-main {
        grid-column: col-start / span 2;
        padding: 5px;
        grid-row: 2;
        justify-content: left;
    }

    .nav-works {
        grid-column: col-start 3 / span 10;
        grid-row: 2;
        justify-content: start;
    }
    
    main {
    grid-column: col-start 2 / span 10;
    padding: 5px;
    justify-content: left;
    }
}

ul {
    list-style-type: none;
}

a:link, a:visited, a:hover, a:active {
   color: black;
   text-decoration: none;
}