.qntm-latest-post-grid{
    display: grid;
    grid-template-columns: 1fr repeat(2, 0.5fr) repeat(2, 0);
    grid-template-rows: repeat(2, 1fr) repeat(3, 0);
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
.qntm-latest-post-item, .qntm-view-more-btn {
    height: 250px;
    border-radius: 10px;
    padding:25px;
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
}
.qntm-latest-post-item a {
    display:block;
    width:100%;
    height:100%;
}
.qntm-latest-post-item-1:before {
    content: ' ';
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000000 98%);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    border-radius: 10px;
}

.qntm-latest-news-title{
    color:#fff;
    font-size: 20px!important;
    font-weight: bold!important;
    text-shadow: 2px 2px 5px #000000;
    position:relative;
    bottom:0;
}
.latest-post-item-1 { 
    grid-area: 1 / 1 / 2 / 2; 
}
.latest-post-item-2 {
    grid-area: 1 / 2 / 2 / 4; 
}
.latest-post-item-3 { 
    grid-area: 2 / 1 / 3 / 2;
}
.latest-post-item-4 { 
    grid-area: 2 / 2 / 3 / 3; 
}
.qntm-view-more-btn {
    grid-area: 2 / 3 / 3 / 4; 
    background-color: #4b4b4a;
}

@media screen and (max-width: 768px) {
    .qntm-latest-post-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .qntm-latest-post-item, .qntm-view-more-btn {
        height: auto;
    }
    .latest-post-item-1 { grid-area: auto; }
    .latest-post-item-2 { grid-area: auto; }
    .latest-post-item-3 { grid-area: auto; }
    .latest-post-item-4 { grid-area: auto; }
    .qntm-view-more-btn { grid-area: auto; text-align: center; }
}