Problem z grid-template-area

-----------    -----------    -----------    -----------
|  .book  |    |  .book  |    |  .book  |    |  .fav   |
-----------    -----------    -----------    -----------

        div.book-container {
            position: relative;
            width: 100%;
            height: 100%;
        
            grid-template-columns: 25% 25% 25% 25%;
            grid-template-rows: 3.5em;
            grid-template-areas: "book book book fav";
        
            div.book {
                grid-area: "book";
                width: 2em;
            
                border: 1px red solid;
            
                &.fav {
                    grid-area: "fav" !important;
                    background-color: blueviolet;
                }
            }
        }