@media only screen and (max-width: 1200px){
    .hero-ctnr {
        display: flex;
        max-width: 85rem;
        margin: auto;
        padding: 5rem 2rem;
        flex-wrap: wrap;
        width: 100%;
        gap: 5rem;
        max-height: 100vh;
        height: 80vh;
        top: 5rem;
        position: relative;
    }

    .blog-ctnr {
        max-width: 1200px !important;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin: 2rem auto;
        gap: 4rem;
    }
    .blg-cards {
        flex: 1  auto;
        max-width: 310px !important;
        padding: 1rem;
        margin: 1rem;
        background-color: #fff;
        border: 1px solid var(--primary);
    }

    .blg-cards img {
        max-width: 310px !important; 
        border-right: 18px solid var(--primary);
    }
}