#blog_header{
    width: 100%;
    text-align: center;
    color: var(--green-pea);
    font-family: var(--font-family-uvn_van-bold);
    font-size: var(--font-size-xxxxl);
    margin: 0;
    padding-top: 1vw; 
} 

.list_post {
    width: 64vw;
    position: relative;
    left: 18vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
    padding: 3vw 0;

}

.post_item {
    background-color: var(--white);
    box-sizing: border-box;
    border-radius: 1vw;
    position: relative;
    height: 14.5vw;
}

.post_item .pthumb {
    width: 14.1vw;
    height: 14.5vw;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 1vw 0vw 0vw 1vw;
    object-fit: cover;
}

.post_metadata {
    display: flex;
    width: 14vw;
    height: 2vw;
    position: absolute;
    left: 16vw;
    top: 1.2vw;
}

.post_metadata .text {
    flex: auto;
    color: var(--thunder);
    font-family: var(--font-family-montserrat);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
    text-align: justify;
}

.post_metadata img {
    width: 1vw;
    height: 1vw;
    position: relative;
    top: 3px;
    margin-right: 5px;
}

.post_title {
    width: 14vw;
    height: 5vw;
    position: absolute;
    left: 16vw;
    top: 3vw;
    display: flex;
    align-items: center;
    font-family: var(--font-family-montserrat);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 700;
}

.post_title a{
    color: var(--thunder);
}

.post_link {
    width: 7vw;
    height: 2vw;
    position: absolute;
    left: 16vw;
    top: 10.7vw;
    border: none;
    border-radius: 10px;
    text-decoration: none;
    background-color: var(--supernova);
    font-family: var(--font-family-montserrat);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 700;
}

.post_link a{
    color: var(--green-pea);
}

.pagination {
    text-align: center;
    padding-bottom: 2vw;
}

.page-numbers{
    color: #A5A5A5;
}

.page-numbers.current{
    color: var(--green-pea);
}

.page-numbers{
    margin-right: 10px;
}

@media screen and (max-width: 768px) {
    .list_post {
        width: 90vw;
        left: 5vw;
    }

    .post_metadata {
        display: none;
    }

    .post_link {
        display: none;
    }

    .post_title {
        width: 26vw;
        height: auto;
        position: relative;
        font-size: 2.5vw;
        top: unset;
    }
}