singolo2.css

@font-face {
    font-family: 'Lato';
    src: url('./assets/fonts/Lato-Bold.ttf');
}

@font-face {
    font-family: 'Lato-Black';
    src: url('./assets/fonts/Lato-Black.ttf');
}

@font-face {
    font-family: 'Lato-Regular';
    src: url('./assets/fonts/Lato-Regular.ttf');
}

@font-face {
    font-family: 'Lato-Light';
    src: url('./assets/fonts/Lato-Light.ttf');
}

html, body {
    margin: 0 auto;
    width: 1020px;
}

.portfolio {
    width: 100%;
    height: 864px;
    background-color:#2d303a;
}

.wrapper__portfolio {
    margin: 0 auto;
    width: 940px;
}


.title_portfolio {
    margin-top: 20px;
    padding-top: 59px;    
    margin-bottom: 18px;
    font-size: 29px;
    color: #666d89;
    font-family: "Lato";
    font-weight: 900;       
}

.title_description {
    font-size: 18px;
    line-height: 30px;
    color: #767e9e;
    font-family: "Lato-Light", sans-serif;;
    font-weight: 300;
    letter-spacing: 0em;
    margin: 0;
}

.tags {
    margin-left: 1px;
    margin-top: 11px;
}

.tag {
    color: #767e9e;
    background-color: #2d303a;
    /* border */
    border-radius: 5px;
    border: 1px solid #666d89;
    /* fonts */
    font-family: "Lato-Regular", sans-serif;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    /* shift */
    text-align: center;
    margin-right: 10px;
}

.tag_1 {
    padding: 0 6px 0 7px;
    float: left;
}

.tag_2 {
    padding: 0 6px 0 6px;
    float: left;    
}

.tag_3 {
    padding: 0 6px 0 5px;
    float: left;
}

.tag_4 {
    padding: 0 6px 0 5px;
}

.tag_1:hover,
.tag_2:hover,
.tag_3:hover,
.tag_4:hover {
    color: #dedede;
    border: 1px solid #dedede;
    transition: 500ms ease-in-out;
    box-shadow: 0px 0px 2px 1px #767e9e;
    cursor: pointer;
}

.portfolio__grid {
    margin-top: 19px;
    display: grid;
    grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr 1fr;
    row-gap: 17px;
    column-gap: 17px;
    height: 600px;
    overflow: hidden;
}

.portfolio__picture {
    width: 223px;
    height: 190px;       
}

.portfolio__picture img {
    width: 220px;
    height: 187px;
}

.portfolio__picture img:hover {
    cursor: pointer;
    transform: scale(1.05);
    transition: all 250ms ease-in-out;
}

.bottom-portfolio {
    background-color: #323746;;
    width: 100%;
    height: 6px;
    position: relative;
    top: 65px;
}

.about-us {
    width: 100%;
    height: 728px;
    background-color: #f2f2f2;
    position: relative;
    top: 6px;
}

.wrapper__about {
    margin: 0 auto;
    width: 940px;
}

.title_about {
    margin-top: 0px;
    margin-bottom: 18px;
    padding-top: 58px;
    font-size: 29px;
    color: #666d89;
    font-family: "Lato";
    font-weight: 900;
}

.title_description_about_1 {
    font-size: 18px;
    line-height: 30px;
    color: #767e9e;
    font-family: "Lato-Light", sans-serif;;
    font-weight: 300;
    letter-spacing: 0.008em;
    margin: 0;
}

.title_description_about_2 {
    font-size: 18px;
    line-height: 30px;
    color: #767e9e;
    font-family: "Lato-Light", sans-serif;
    font-weight: 300;
    letter-spacing: 0em;
    margin: 0;
}

/* avatars */

.adam__avatar {
    grid-area: ava1;
}

.desmond__avatar {
    grid-area: ava2;
}

.scolara__avatar {
    grid-area: ava3;
}

/* names */

.adam__name {
    grid-area: name1;
}

.desmond__name {
    grid-area: name2;
}

.scolara__name {
    grid-area: name3;
}

/* accounts */

.adam__accounts {
    grid-area: acc1;
}

.desmond__accounts {
    grid-area: acc2;
}

.scolara__accounts {
    grid-area: acc3;
}

/* grid about container */

.about__content {
    margin-top: 45px;
    display: grid;
    grid-template: 300px 1fr 1fr/ 300px 300px 300px;
    column-gap: 20px;
    grid-template-areas: 
                        'ava1 ava2 ava3' 
                        'name1 name2 name3' 
                        'acc1 acc2 acc3';
}

.avatar img{
    width: 300px;
    height: 300px;
}

.name__people {
    max-height: 22px;
    overflow: hidden;
    margin-top: 15px;
    margin-bottom: 0px;
    font-size: 18px;
    color: #666d89;
    font-family: "Lato";
    font-weight: 900;
    letter-spacing: -0.02em;
}

.adam__description__1 {
    margin-top: 7px;
    margin-bottom: -1px;
    font-size: 12px;
    line-height: 22px;
    color: #767e9e;
    font-family: "Lato";
    font-weight: 400;
    letter-spacing: -0.017em;
}

.adam__description__2 {
    margin-top: 0px;
    font-size: 12px;
    line-height: 22px;
    color: #767e9e;
    font-family: "Lato";
    font-weight: 400;
    letter-spacing: -0.01em;
}

.desmond__description__1 {
    margin-top: 7px;
    margin-bottom: -1px;
    font-size: 12px;
    line-height: 22px;
    color: #767e9e;
    font-family: "Lato";
    font-weight: 400;
    letter-spacing: -0.001em;
}

.desmond__description__2 {
    margin-top: 0px;
    font-size: 12px;
    line-height: 22px;
    color: #767e9e;
    font-family: "Lato";
    font-weight: 400;
    letter-spacing: -0.013em;
}

.scolara__description__1 {
    margin-top: 7px;
    margin-bottom: -1px;
    font-size: 12px;
    line-height: 22px;
    color: #767e9e;
    font-family: "Lato";
    font-weight: 400;
    letter-spacing: 0em;
}

.scolara__description__2 {
    margin-top: 0px;
    font-size: 12px;
    line-height: 22px;
    color: #767e9e;
    font-family: "Lato";
    font-weight: 400;
    letter-spacing: -0.011em;
}

.social {
    margin-top: 11px;
    padding-left: 1px;
}

.social li {
    margin-right: 3px;
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #666d89;
}

.social li:hover {
    transition: all 150ms ease-in-out;
    cursor: pointer;
    opacity: 0.7;
}

.facebook_acc {
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('./assets/singolo2/images/social/f.png');
}

.google_acc {
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('./assets/singolo2/images/social/g.png');
}

.twitter_acc {
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('./assets/singolo2/images/social/t.png');
}

.linkedin_acc {
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('./assets/singolo2/images/social/l.png');
}

.bottom-about {
    background-color: #f2f2f2;
    width: 100%;
    height: 6px;
    position: relative;
    top: 11px;    
}