/* ================================
   SHORTCODE : latest-news
   ================================ */
.latest-news-container{
    display: flex;
    flex-direction: column;
    gap: 50px;
    .latest-news-title-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
    }
    .latest-news-title {
        display: flex;
        flex-direction: column;
        gap: 10px;
        flex-wrap: wrap;
    }
    p.sup-title {
        padding: 8px 12px;
        width: fit-content;
        border-radius: 50px;
        background-color: #ECEDEE;
        color: #0076FF;
        margin-bottom: 10px;
    }
    .more-news{
        padding-right: 2.5em !important;
        padding-left: 1.5em !important;
        color: #232529 ;
        background-color: #F4F5F5;
        border: 2px solid rgb(0 118 255 / 0.2);
        --liquid-fill: rgb(0 118 255 / 0.2);
    }
    .more-news:hover{
        color: #0076FF;
        border: 2px solid rgb(0 118 255 / 0.4)!important;
    }

    .latest-news {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;

        .latest-news-item {
            width: calc(33% - 15px);
            background-color: #FAFAF8;
            border-radius: 16px;
            overflow: hidden;
            min-height: 564px;
            display: flex;
            flex-direction: column;
            .latest-news-image{
                height: 200px;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    aspect-ratio: 375 / 200;
                }
            }
            .latest-news-content {
                padding: 8%;
                display: flex;
                flex-direction: column;
                gap: 15px;
                p{
                    padding: 0;
                }
                .category{
                    padding: 8px 12px;
                    width: fit-content;
                    border-radius: 50px;
                    background-color: #ECEDEE;
                    color: #232529;
                }
            }
        }

        .latest-news-meta {
            display: flex;
            align-items: center;
            gap: 5px;
            justify-content: space-between;
            padding-top: 10px;
            margin: 20px;
            border-top: 1px solid #D9DBDD;
            margin-top: auto;
            p{
                padding: 0;
            }
            .readMore{
                padding-right: 2.5em !important;
                padding-left: 1.5em !important;
                background-color: #FFD166;
                border: 2px solid #FFD166;
                color: #443300;
                border-radius: 50px ;
                --liquid-fill: #F4F5F5;
                font-size: 13px;
            }
        }
    }
}

@media screen and (max-width: 1100px) {
    .latest-news-container {
         .latest-news {
            .latest-news-item {
                width: calc(50% - 10px);
            }
        }
    }

}
@media screen and (max-width: 650px) {
    .latest-news-container {
        .latest-news-title-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: column;
            gap: 20px;
        }
    }

    .latest-news-container {
         .latest-news {
            .latest-news-item {
                width: 100%;
            }
        }
    }

}