.blog-hero{
    position:relative;
    padding:70px 0;
    background:var(--light);
    text-align:center;
    overflow:hidden;
}

.blog-hero.has-bg-image{
    background-size:cover;
    background-position:center;
    padding:100px 0 86px;
}

.blog-hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(115deg,rgba(15,29,42,.9),rgba(15,29,42,.68));
}

.blog-hero .container{
    position:relative;
    z-index:1;
}

.blog-hero .breadcrumbs{
    justify-content:center;
    margin-bottom:18px;
    color:#dbe2e8;
}

.blog-hero .breadcrumbs a{
    color:#fff;
}

.blog-hero h1{
    color:var(--primary);
    font-size:34px;
    margin:15px 0;
}

.blog-hero p{
    color:var(--secondary);
    font-size:16px;
}

.blog-hero.has-bg-image h1{
    color:#fff;
}

.blog-hero.has-bg-image p{
    color:#dbe2e8;
}

.blog-hero.has-bg-image .section-badge{
    color:#fff;
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.28);
}

.blog-posts{
    padding:70px 0;
}

.blog-section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    text-align:right;
}

.blog-section-heading .section-badge{
    margin-bottom:10px;
}

.blog-section-heading h2{
    margin:0;
}

.posts-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.post-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    transition:.3s;
}

.post-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.post-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.post-card h2{
    padding:18px 20px 6px;
    font-size:19px;
    color:var(--primary);
}

.post-card p{
    padding:0 20px 20px;
    color:var(--secondary);
    font-size:14.5px;
}

.post-card-body h2,
.post-card-body h3,
.post-card-body p{
    padding:0;
}

.post-card-body h2,
.post-card-body h3{
    margin:0 0 9px;
}

.post-card-body p{
    margin:0;
}

.default-page{
    padding:70px 0;
}

.page-title{
    color:var(--primary);
    margin-bottom:20px;
}

.empty-note{
    width:100%;
}

@media(max-width:992px){
    .posts-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .posts-grid{
        grid-template-columns:1fr;
    }

    .blog-section-heading{
        align-items:stretch;
        flex-direction:column;
        text-align:center;
    }

    .blog-section-heading .btn-outline{
        width:100%;
    }
}