.casePage{
    background:#f7f5f1;
}

/* intro */

.caseIntro{
    padding:80px 0 60px;
}

.caseIntro .container{
    max-width:1280px;
}

.caseIntro .subTitle{
    display:block;
    color:#C5A36A;
    font-size:12px;
    letter-spacing:4px;
    margin-bottom:15px;
}

.caseIntro h1{
    font-size:56px;
    font-weight:300;
    color:#3D352B;
    margin-bottom:20px;
}

.caseIntro p{
    color:#666;
    line-height:2;
}

/* grid */

.caseList{
    padding:80px 0;
}

.caseGrid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:50px 35px;

}

.caseCard a{
    display:block;
}

.caseImg{

    overflow:hidden;

    margin-bottom:20px;

}

.caseImg img{

    width:100%;

    aspect-ratio:4/3;

    object-fit:cover;

    display:block;

    transition:.8s;

}

.caseCard:hover img{

    transform:scale(1.05);

}

.caseInfo h3{

    margin-bottom:10px;

    color:#3D352B;

    font-size:24px;

    font-weight:300;

    line-height:1.4;

}

.caseMeta{

    display:flex;

    flex-wrap:wrap;

    gap:5px;

}

.caseMeta span{

    color:#888;

    font-size:14px;

}

.caseMeta span:not(:last-child):after{

    content:"｜";

    margin-left:5px;

    color:#ccc;

}






@media(max-width:991px){

.caseGrid{

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

    gap:40px 25px;

}

}

@media(max-width:767px){

.caseIntro{

    padding:60px 0 40px;

}

.caseIntro h1{

    font-size:36px;

}

.caseGrid{

    grid-template-columns:1fr;

    gap:40px;

}

.caseInfo h3{

    font-size:22px;

}

}