.blog-hero {

    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;

}


.blog-hero img {

    width: 100%;
    height: 100%;
    object-fit: cover;

}


.blog-hero-overlay {

    position: absolute;
    inset: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(0, 0, 0, .45);

    text-align: center;

}


.blog-hero-overlay h1 {

    font-size: 48px;

}



.blog-layout {

    display: grid;

    grid-template-columns: 75% 25%;

    gap: 30px;

    max-width: 1500px;

    width: 95%;

    margin: 40px auto;

}



.main-blog-image {

    width: 100%;

    height: 450px;

    object-fit: cover;

    border-radius: 10px;

}



.main-blog h2 {

    font-size: 32px;

    color: white;

}



.main-blog p {

    color: #aaa;

    line-height: 1.8;

}



.blog-sidebar {

    border-left: 1px solid #333;

    padding-left: 25px;

}



.side-post {

    display: flex;

    gap: 12px;

    margin-bottom: 20px;

}



.side-post img {

    width: 90px;

    height: 70px;

    object-fit: cover;

    border-radius: 6px;

}



.side-post a {

    color: white;

    text-decoration: none;

}



.blog-meta {

    color: #777;

    font-size: 13px;

}