.aut-header{
    display: grid;
    grid-template-columns: 150px 1fr 1fr;
    grid-template-rows: min-content 1fr min-content;
    grid-template-areas:
        "avatar nombre nombre"
        "avatar social social"
        "avatar extracto extracto"
    ;
    grid-column-gap: 20px;
    grid-row-gap:    20px;
    padding: 20px 20%;
    text-align: left;
}

.aut-header .avatar {
    grid-area: avatar;
}

.aut-header .aut-social {
    grid-area: social;
    display: grid;
}

.aut-header .aut-descripcion {
    grid-area: extracto;
}


/* Phones 768px and below */
@media screen and (max-width: 768px) {
    
    .aut-header{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas:
            "avatar"
            "nombre"
            "social"
            "extracto"
        ;
        text-align: center;
    }

}