.blogPage{
    background:#F8F5F0;
}

.blogIntro{
    padding:80px 0 70px;
}

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

.blogIntro .introLine{
    width:60px;
    height:2px;
    background:#C5A36A;
    margin-bottom:30px;
}

.blogIntro .introText{
    color:#666;
    font-size:17px;
    line-height:2.2;
    letter-spacing:.5px;
}

/* list */

.blogList{
    padding-bottom:100px;
}

.blogGrid{

    display:grid;

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

    gap:40px;

}

.blogCard{

    background:#fff;

    transition:.4s;

}

.blogCard:hover{

    transform:translateY(-8px);

}

.blogImg{

    overflow:hidden;

}

.blogImg img{

    width:100%;

    aspect-ratio:4/3;

    object-fit:cover;

    display:block;

    transition:.8s;

}

.blogCard:hover img{

    transform:scale(1.05);

}

.blogInfo{

    padding:28px;

}

.blogCategory{

    display:inline-block;

    margin-bottom:15px;

    color:#C5A36A;

    font-size:12px;

    letter-spacing:2px;
}

.blogInfo h3{

    margin-bottom:15px;

    color:#3D352B;

    font-size:26px;

    font-weight:300;

    line-height:1.5;
}

.blogInfo p{

    margin-bottom:25px;

    color:#666;

    line-height:1.9;
}

.blogMore{

    color:#A88349;

    font-size:13px;

    letter-spacing:2px;
}

/* tablet */

@media(max-width:991px){

.blogGrid{

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

}


}

/* mobile */

@media(max-width:767px){

.blogIntro{

    padding:60px 0 40px;

}


.blogGrid{

    grid-template-columns:1fr;

    gap:30px;

}

.blogInfo{

    padding:22px;

}

.blogInfo h3{

    font-size:22px;

}

}