.blog--popular-grid{
        --gap: 24px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: stretch;
        gap: var(--gap);
    }

    .blog--popular-item{
        border: 1px solid #E7EAF0;
        border-radius: 12px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: clamp(1.25rem, 2vw, 1.5rem);
        justify-content: space-between;
        align-items: stretch;
    }

    .blog--popular-top{
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
        justify-content: space-between;
    }

    .blog--popular-head{
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 1rem;
    }
    .blog--popular-head-title{
        font-weight: 400;
        font-size: 13px;
        line-height: 18px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .blog--popular-head-fire{
        width: 16px;
        height: 16px;
    }
    .blog--popular-image img{
        object-fit: cover;
        height: 143px;
        border-radius: 8px;
    }

    .blog--popular-body{
        /*  */
    }

    .blog--popular-body-title{
        margin-top: 6px;
        font-weight: 500;
        font-size: clamp(.9375rem, 2vw, 1rem);
        line-height: clamp(1.5rem, 2vw, 1.625rem);
        color: var(--title-color);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .blog--popular-item:hover{
        box-shadow: 0px 4px 16px 0px #7A85932E;
        border-color: transparent;

        /* .blog--popular-head-title{
            color: var(--green-dark);
        } */

        .blog--popular-body-title{
            color: var(--green-dark);
        }
    }

    .blog--section-title:hover{
        color: var(--green-dark);
        svg{
            color: var(--green-dark)
        }
    }

    @media (max-width: 1024px){
        .blog--popular-image img{
            height: 112px;
        }
    }


    @media (max-width: 768px){
        .blog--popular-grid{
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;

            .blog--popular-image{
                width: 100%;
                height: 100%;
            }

            .blog--popular-image img{
                width: 100%;
                height: 100%;
            }
        }
    }
    @media (max-width: 500px){
        .blog--popular-grid{
            grid-template-columns: 1fr;

            .blog--popular-image img{
                width: 100%;
                height: 100%;
            }
        }
    }