body {
    background-color: #f3f4f7;
}

.text-ur {
    text-align: right;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.card-hover-shadow:hover {
    scale: 100.9%;
    box-shadow: #fff 0px 0px 0px 0px, #fff 0px 0px 0px 0px, #fff 0px 0px 0px 0px, #fff 0px 0px 0px 0px, rgba(255, 255, 255, .35) 0px 5px 10px 0px;
    transition: .3s;
}

.card-body {
    font-size: 85% !important;
}

.top-headline {
    grid-row: 1 / 3;
}

.top-headline.lang-ur {
    grid-column: 5 / 3;
}

.top-headline.lang-en {
    grid-column: 1 / span 2;
}

.card-header {
    display: block; 
    aspect-ratio: 16 / 9; 
    /* height: 10rem !important; */
    /* object-fit: scale-down; */
}

.news-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between !important;
    background-color: #fff;
    height: 20rem !important;
}

.news-item.top-headline {
    height: auto !important;
}

.top-headline > .card-header > .news-cover {
    min-height: 18rem;
}

.news-grid > .card-text:not(:first-of-type){
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    word-wrap: unset;
}


.news-item.lang-ur {
    text-align: right;
}

.news-item .text-muted {
    font-size: x-small;
}

@media only screen and (max-width: 998px) {
    .news-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .top-headline.lang-ur {
        grid-column: 4 / 2;
    }

}

@media screen and (max-width: 768px) {
    .news-item {
        height: 16rem !important;
    }

    .btn-detail {
        font-size: x-small;
    }

    .news-item .text-muted {
        font-size: xx-small !important;
    }
}

@media screen and (max-width: 600px) {
    .news-grid {
        grid-template-columns: repeat(2, auto);
    }

    .top-headline.lang-ur {
        grid-column: 3 / 1;
    }
}