/*
==========================================
PROJECT CONTENT
==========================================
*/

.project-content{

    margin:120px 0;

}

.project-content .container{

    width:min(1320px, calc(100% - 80px));

    margin:auto;

}

.project-grid{

    display:grid;

    grid-template-columns:8fr 4fr;

    gap:100px;

    align-items:start;

}

/* ===========================
LEFT
=========================== */

.content-left{

    font-size:18px;

    line-height:1.9;

    color:#222;

}

.content-left h2{

    font-size:42px;

    font-weight:300;

    margin:0 0 35px;

    line-height:1.2;

}

.content-left h3{

    font-size:28px;

    font-weight:300;

    margin:60px 0 20px;

}

.content-left p{

    margin:0 0 30px;

}

.content-left ul{

    margin:30px 0;

    padding-left:20px;

}

.content-left li{

    margin-bottom:12px;

}

/* ===========================
RIGHT
=========================== */

.content-right{

    position:sticky;

    top:120px;

}

.project-info{

    display:flex;

    justify-content:space-between;

    gap:30px;

    padding:22px 0;

    border-bottom:1px solid #ececec;

}

.project-info:first-child{

    border-top:1px solid #ececec;

}

.project-info .label{

    color:#777;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:2px;

}

.project-info .value{

    color:#222;

    font-size:16px;

    text-align:right;

}

/* ===========================
RESPONSIVE
=========================== */

@media(max-width:991px){

    .project-grid{

        grid-template-columns:1fr;

        gap:70px;

    }

    .content-right{

        position:relative;

        top:auto;

    }

}

@media(max-width:767px){

    .project-content{

        margin:80px 0;

    }

    .project-content .container{

        width:calc(100% - 40px);

    }

    .content-left{

        font-size:17px;

    }

    .content-left h2{

        font-size:34px;

    }

}