section {
    display: grid;
    grid-template-columns: 28% 50% 20%;
    grid-template-areas:
        "foto dati carrello"
        "foto dati carrello"
        "abstract abstract abstract"
        "autore autore autore"
        "collana collana collana";
    column-gap: 2%;
    /* row-gap: 1%; */
    margin: 0 auto;
}


#foto {

    grid-area: foto;
    /* border: solid 1px red; */
    vertical-align: top;
    text-align: center;
}

#foto img {
    width: 65%;
    border: solid 1px black;
}

#dati {
    grid-area: dati;
    /* border: solid 1px green; */
    vertical-align: top;
    text-align: left;
}

#carrello {
    grid-area: carrello;
    /* border: solid 1px green; */
    vertical-align: top;
    text-align: left;
}

#abstract {
    grid-area: abstract;
    border: solid 1px #666;
    line-height: 1.4em;
    padding: 5px;
    border-radius: 5px;
    vertical-align: top;
    text-align: left;

    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

#autore {
    grid-area: autore;
    /* border: solid 1px brown; */
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
}

#autore img {
    width: 15%;
    border: solid 1px black;
}


#collana {
    grid-area: collana;
    /* border: solid 1px brown; */
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
}

#collana img {
    width: 15%;
    border: solid 1px black;
}

#colore {
    color: brown;
}

.karrello {
    width: 70%;
    height: 130px;
    color: black;
    background-color: #e9e9e9;
    text-align: center;
    border: solid 1px #e9e9e9;
    border-radius: 5px;
    line-height: 10px;
    margin-top: 20px;
}

.line {
    display: inline;
    cursor: pointer;
}

#qtaagg {
    text-decoration: none;
    color: black;
    border: solid 1px black;
    padding: 3px;

}

#sbarra {
    color: red;
    text-decoration: line-through; 
    }