.blogDetailPage{
    background:#F8F5F0;
}

.articleHero{
    padding:90px 0 60px;
}

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

.articleCategory{
    display:inline-block;
    margin-bottom:20px;

    color:#C5A36A;

    font-size:12px;

    letter-spacing:3px;
}

.articleHero h1{
    margin-bottom:25px;

    color:#3D352B;

    font-size:54px;

    font-weight:300;

    line-height:1.3;
}

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

/* cover */

.articleCover{
    padding-bottom:70px;
}

.articleCover img{
    width:100%;
    display:block;
}

/* content */

.articleContent{
    padding-bottom:100px;
}

.articleContent .container{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:80px;
}

.articleToc{
    position:sticky;
    top:120px;
    align-self:start;
}

.articleToc h3{
    margin-bottom:20px;
}

.articleToc ul{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.articleToc a{
    color:#666;
}

.articleBody h2{
    margin:0 0 25px;

    color:#3D352B;

    font-size:34px;

    font-weight:300;
}

.articleBody p{
    margin-bottom:35px;

    color:#666;

    line-height:2;
}

.articleConclusion{
    margin-top:60px;
    padding-top:40px;
    border-top:1px solid rgba(0,0,0,.08);
}

/* cta */

.articleCta{
    padding:100px 0;
    background:#3D352B;
    text-align:center;
}

.articleCta span{
    display:block;
    margin-bottom:15px;

    color:#C5A36A;

    letter-spacing:4px;
}

.articleCta h2{
    margin-bottom:20px;

    color:#fff;

    font-size:46px;

    font-weight:300;
}

.articleCta p{
    max-width:700px;
    margin:auto;

    color:rgba(255,255,255,.75);

    line-height:2;
}

.ctaBtn{
    display:inline-block;

    margin-top:30px;

    padding:15px 40px;

    background:#C5A36A;

    color:#fff;
}

/* tablet */

@media(max-width:991px){

.articleContent .container{

    grid-template-columns:1fr;

    gap:50px;

}

.articleToc{

    position:static;

}

.articleHero h1{

    font-size:42px;

}

}

/* mobile */

@media(max-width:767px){

.articleHero{

    padding:60px 0 40px;

}

.articleHero h1{

    font-size:32px;

}

.articleBody h2{

    font-size:26px;

}

.articleCta h2{

    font-size:32px;

}

}