.post-container a{
    text-decoration:none;
}


/* ============== Post List (Default) ============== */
.post-list .post-item{
    display:flex; 
    width:100%;
    padding: 2rem 1rem; 
    align-items: center;
    gap: 3rem;
    border-bottom: 1px solid #c1c1c1;
}
.post-list .post-item-date-icon{
    width:5rem;
    height:5rem;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--second-color);
    color:#fff;
    font-size: 1.25rem;
    font-weight:bold;
    line-height: 1;
}
.post-list .post-item-title a{
    color:var(--second-color-darker);
    font-size: 1.25rem;
}
.post-list .post-item-title a:hover{
    color:var(--primary-color);
}


/* ============== Post Grid ============== */
.post-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) { 
    .post-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.post-grid .post-item > a{
    display:block;
}

.post-grid .post-item-image{
    aspect-ratio: 16/9;
    background: #eee;
}

.post-grid .post-item-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.post-grid .post-item-image img:not([src]){
    display:none;
}

.post-grid .post-item-date{
    color:#666;
    margin: 0.5rem 0;
}

.post-grid .more{
    position: relative;
    color: #222222;
    display: inline-block;
    padding: 8px 12px;
    margin-top: 1rem;
}

.post-grid .more:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: #636363;
    animation-duration: 0.5s;
}


.post-grid .post-item:hover .more:after{
    animation-name:readMoreAnimate;
}

@keyframes readMoreAnimate {
    0% {
        width:0;
    }

    100% {
        width:100%;
    }
}



/* ============== Post Pagination ============== */

.post-pagination{
    display:flex;
    justify-content: flex-start;
    gap: 1rem;
    margin: 2rem 0;
}
.post-pagination > div{
    text-decoration: none;
    width: 36px;
    height:36px;
    display:flex;
    align-items: center;
    justify-content:center;
    color:#333;
    cursor:pointer;
}
.post-pagination > div:hover{
    background: #f2f2f2;
    color:#333;
}
.post-pagination > div.active{
    background:var(--primary-color);
    color:#fff;
}




/* ============== Post Item Page ============== */

.post-title{
    font-size:2.5rem;
    font-weight:bold;
    margin: 1rem auto;
    text-align:center;
    max-width:700px;
    color:var(--primary-color);
    line-height:1.2;
    
}

.post-date{
    color:#666;
    text-align:center;
    margin-bottom:1rem;
}
.post-content{
    margin: 4rem 0;
}


.back-to-page a{
    text-decoration: none;
}