/* ======================================================
   Portfolio Intro
====================================================== */

.portfolio-intro{

    padding:100px 0 40px;

}

.portfolio-intro__title{

    font-size:35px;

    font-weight:700;

    color:#222;

    margin-bottom:32px;

}

.portfolio-intro__text{

    font-size:22px;

    line-height:1.7;

    color:#666;

    margin-bottom:40px;

}

.portfolio-intro__divider{

    border:none;

    border-top:1px solid #d8d8d8;

}

/* ==========================================
   Portfolio Grid
========================================== */

.portfolio-grid {
    padding-bottom: 150px;
}

.portfolio-grid .layout-container {

    width: 100%;
    max-width: 1500px;

    margin: 0 auto;
    padding: 0 40px;
}

.portfolio-grid__list {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 80px 48px;
}

/* ======================================================
   Portfolio Card
====================================================== */

.portfolio-card{

    width:100%;

}

.portfolio-card__link{

    display:block;

    text-decoration:none;

}

.portfolio-card__image-wrap{

    overflow:hidden;

    border-radius:10px;

}

.portfolio-card__image-wrap{

    overflow:hidden;

    border-radius:8px;

}

.portfolio-card:hover img{

    transform:scale(1.05);

}


.portfolio-card__image-wrap img{

    display:block;

    width:100%;

    aspect-ratio:16/10;

    object-fit:cover;

    transform:scale(1);

    transition:
         transform .7s cubic-bezier(.25,.46,.45,.94);

    will-change:transform;

    backface-visibility:hidden;

}

.portfolio-card:hover .portfolio-card__image-wrap img{

    transform:scale(1.025);

}
.portfolio-card__image{

    display:block;

    width:100%;

    transition:transform .6s ease;

}

.portfolio-card:hover .portfolio-card__image{

    transform:scale(1.05);

}

.portfolio-card__content{

    padding-top:20px;

}

.portfolio-card__category{

    display:block;

    margin-bottom:8px;

    font-size:17px;

    font-weight:700;

    color:#777;

}

.portfolio-card__title{

    margin-bottom:10px;

    font-size:30px;

    font-weight:650;

    color:#222;

}

.portfolio-card__english{

    font-size:18px;

    color:#999;

    letter-spacing:.3px;

}

/* ==========================================
   Portfolio Filter
========================================== */

.portfolio-filter{


    display: flex;
    justify-content: space-between;
     max-width: 1720px;

    width: 100%;
    max-width: 1720px;

    margin: 45px auto 60px;
}

.portfolio-filter__btn{

    flex: 1;

    min-width: 120px;

    max-width: 170px;

    height:58px;

    border:none;

    border-radius:12px;

    background:#efefef;

    font-size:clamp(18px,1vw,22px);

    font-weight:600;

    color:#333;

    cursor:pointer;

    transition:.3s;

}

.portfolio-filter__btn:hover{

     background:#d9d9d9;

}

.portfolio-filter__btn.is-active{

   background:#2f2f2f;

    color:#fff;

}

.portfolio-card:hover .portfolio-card__image{

    transform:scale(1.05);

}


.portfolio-card__link{

}

/* ==========================================
   Portfolio Animation
========================================== */

.portfolio-card{

    transition:
        opacity .45s ease,
        transform .45s ease;

}

.portfolio-card.is-hide{

    opacity:0;

    transform:translateY(20px) scale(.98);

    pointer-events:none;

}







.portfolio-card{

    opacity:0;

    transform:translateY(40px);

}

.portfolio-card.is-visible{

    opacity:1;

    transform:translateY(0);

}




/* ==========================================
마우스 호버시 모션
========================================== */


.portfolio-card__content{
    transition: transform .35s ease;
}

.portfolio-card:hover .portfolio-card__content{
    transform: translateY(-4px);
}