.header{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.header::after{
    content: "";
    display: inline-block;
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    background-image: url(../imgs/icons/dots.svg);
    background-repeat: no-repeat;
    background-size: contain;

}
.photo{
    
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
.title{
    text-align: center;
    font-family: "Neue-Machina";
}
.infos{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}
.infos p{
   display: flex;
   flex-direction: row;
   align-items: center;
   margin: .5rem;
   font-size: 1.25rem;
}
.infos p::before{
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url(../imgs/icons/icon.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: .5rem;
}
.infos .job::before{
    background-image: url(../imgs/icons/icon.png);
}
.infos .location::before{
    background-image: url(../imgs/icons/location.png);
}
.infos .number::before{
    background-image: url(../imgs/icons/whatsapp.png);

}
.infos .email::before{
    background-image: url(../imgs/icons/email.png);
}
@media only screen and (min-width: 768px){
    .header{
        display: grid;
        grid-template-areas:
        "photo title"
        "photo infos"
         ;
    }
    .header .photo{
        grid-area: photo;
        margin: 0 auto;

    }
    .header .title{
        grid-area: title;
        text-align: start;
        max-width: 200px;
    }
    .header .infos{
        grid-area: infos;
    }
}
.email a{
    background-color: transparent;
    text-decoration: none;
    color: white;
}
.email a:hover{
    text-decoration: underline;
}