/* ==========================================
   SINGLE PORTFOLIO
========================================== */

.portfolio-single{
    padding:80px 0 120px;
}

.portfolio-single__header{
    max-width:900px;
    margin-bottom:60px;
}

.portfolio-single__category{
    margin-bottom:16px;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:#888;
}

.portfolio-single__title{
    margin:0;
    font-size:56px;
    line-height:1.1;
    font-weight:600;
}

.portfolio-single__excerpt{
    margin-top:28px;
    max-width:700px;
    color:#666;
    font-size:20px;
    line-height:1.7;
}

.portfolio-single__cover{
    margin-bottom:70px;
}

.portfolio-single__cover img{
    width:100%;
    height:auto;
    display:block;
}

.portfolio-single__content{
    max-width:900px;
    font-size:18px;
    line-height:1.8;
}


/* ==========================================
   PROJECT GALLERY
========================================== */

.project-gallery{
    max-width:1100px;
    margin:0 auto 60px;
}

.project-main-image{
    max-width:900px;
    margin:0 auto;
}

.project-main-image img{
    max-height:85vh;

    width:auto;

    max-width:100%;

    margin:auto;

    display:block;

}

.project-thumbs{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
    margin-top:30px;
}

.project-thumb{
    width:90px;
    height:90px;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
    opacity:.6;
    transition:.25s;
    border:2px solid transparent;
}

.project-thumb:hover{
    opacity:1;
    transform:translateY(-3px);
}

.project-thumb.active{
    opacity:1;
    border-color:#fff;
    transform:scale(1.06);
}


/* ==========================================
   OLD GALLERY
========================================== */

.portfolio-gallery{
    margin-top:80px;
}

.portfolio-gallery__item{
    margin:0 0 40px;
}

.portfolio-gallery__item:last-child{
    margin-bottom:0;
}

.portfolio-gallery__image{
    display:block;
    width:100%;
    height:auto;
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px){

    .portfolio-single{
        padding:50px 0 70px;
    }

    .portfolio-single__title{
        font-size:36px;
    }

    .portfolio-single__excerpt{
        font-size:18px;
    }

}

/* ==========================================
   PORTFOLIO NAVIGATION
========================================== */

.portfolio-navigation{

    padding:6rem 0;

    border-top:1px solid #e8e8e8;

}

.portfolio-nav-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:4rem;

}

.portfolio-nav-prev{

    text-align:left;

}

.portfolio-nav-next{

    text-align:right;

}

.portfolio-navigation a{

    display:flex;

    flex-direction:column;

    gap:.5rem;

}

.nav-label{

    font-size:.8rem;

    text-transform:uppercase;

    letter-spacing:.2em;

    color:#777;

}

.nav-title{

    font-size:1.5rem;

    font-weight:600;

    transition:.25s;

}

.portfolio-navigation a:hover .nav-title{

    color:#888;

}

@media (max-width:700px){

.portfolio-nav-grid{

    grid-template-columns:1fr;

    gap:2rem;

}

.portfolio-nav-prev,
.portfolio-nav-next{

    text-align:left;

}

}