.Post--item {
    min-width:370px;
    max-width:470px;
    min-height:100%;
    display:flex;
    flex:1;
    flex-direction:column;
    overflow:hidden;
    border:1px solid #efefef;
    border-radius:var(--largeradius);
    background:#fff;
    box-shadow:0 10px 30px #00000008;
    cursor:pointer;
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.-Po-Thumb {
    position:relative;
    height:250px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:var(--largeradius) var(--largeradius) 0 0;
    background:var(--second-text-color);
}

.-Po-Thumb img {
    max-width:100%;
    display:block;
    transition:transform .45s ease;
}

.-Po-Info {
    min-width:0;
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:flex-start;
    padding:28px 24px 26px;
}

.post-card-meta {
    width:100%;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px 14px;
    margin-bottom:14px;
}

.post-meta-item {
    min-width:0;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.city-initem {
    position:relative;
}

.city-initem::after {
    content:"";
    flex:0 0 1px;
    width:1px;
    height:14px;
    display:block;
    margin-inline-start:6px;
    background:#d9e0e6;
}

.post-meta-icon {
    width:18px;
    height:18px;
    display:inline-flex;
    flex:0 0 18px;
    align-items:center;
    justify-content:center;
    color:#7c8896;
    font-size:14px;
}

.post-meta-value {
    min-width:0;
    color:var(--primary-text);
    font-size:14px;
    line-height:1.5;
    font-weight:600;
    text-decoration:none;
    overflow-wrap:anywhere;
}

.city-initem .post-meta-icon,
.city-initem .post-meta-value {
    color:var(--uicolor);
}

.post-date .post-meta-value {
    color:#6f7b88;
}

.sile-otm-con {
    width:100%;
    min-width:0;
    margin-bottom:9px;
}

.posts_title {
    margin:0;
    font-size:24px;
    line-height:1.6;
    overflow-wrap:anywhere;
}

.posts_title a {
    color:var(--primary-text);
    text-decoration:none;
    transition:color .3s ease;
}

.post-excerpt {
    width:100%;
    min-width:0;
    margin-bottom:16px;
    color:var(--secondarytext);
    font-size:16px;
    line-height:1.5;
    overflow-wrap:anywhere;
}

.posts_tit {
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:auto;
    color:var(--uicolor);
    font-size:16px;
    line-height:1.5;
    font-weight:600;
    text-decoration:none;
    transition:color .3s ease;
}

.posts_tit i {
    flex:0 0 auto;
    transition:transform .3s ease;
}

html[dir="ltr"] .posts_tit i {
    transform:scaleX(-1);
}

.Post--item a:focus-visible {
    outline:2px solid var(--uicolor);
    outline-offset:4px;
    border-radius:5px;
}

@media (hover:hover) and (pointer:fine) {
    .Post--item:hover {
        transform:translateY(-8px);
        border-color:color-mix(in srgb,var(--uicolor) 15%,#efefef);
        box-shadow:0 18px 38px #00000012;
    }

    .Post--item:hover .-Po-Thumb img {
        transform:scale(1.05);
    }

    .Post--item:hover .posts_title a {
        color:var(--uicolor);
    }

    .Post--item:hover .posts_tit i {
        transform:translateX(-4px);
    }

    html[dir="ltr"] .Post--item:hover .posts_tit i {
        transform:translateX(4px) scaleX(-1);
    }
}

/* =========================
   Tablet Responsive
========================= */

@media only screen and (max-width:991px) {
    .Post--item {
        min-width: 290px;
        max-width:100%;
    }

    .-Po-Thumb img {
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .posts_title {
        font-size:22px;
    }

    .post-excerpt {
        font-size:15px;
        line-height:1.7;
    }
}

/* =========================
   Mobile App Experience
========================= */

@media only screen and (max-width:767px) {
    .Post--item {
  
        border-radius:22px;
        box-shadow:0 12px 28px rgba(9,35,24,.055);
    }

     

    .Post--item:not(.blog-box-card) .-Po-Thumb {
        width:100%;
        /* height:auto; */
        /* min-height:100%; */
        border-start-start-radius:22px;
        border-end-start-radius:22px;
        border-start-end-radius:0;
        border-end-end-radius:0;
    }

    .Post--item:not(.blog-box-card) .-Po-Thumb img {
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .Post--item:active {
        transform:scale(.99);
    }

    .-Po-Info {
        padding:18px;
    }

    .post-card-meta {
        gap:7px 9px;
        margin-bottom:10px;
    }

    .post-meta-item {
        gap:5px;
    }

    .city-initem::after {
        height:12px;
        margin-inline-start:2px;
    }

    .post-meta-icon {
        width:15px;
        height:15px;
        flex-basis:15px;
        font-size:12px;
    }

    .post-meta-value {
        font-size:12px;
        line-height:1.45;
    }

    .sile-otm-con {
        margin-bottom:6px;
    }

    .posts_title {
        font-size:18px;
        line-height:1.5;
    }

    .post-excerpt {
        margin-bottom:12px;
        font-size:13px;
        line-height:1.7;
    }

    .posts_tit {
        gap:6px;
        font-size:13px;
    }
}

/* =========================
   Small Mobile Adjustments
========================= */

@media only screen and (max-width:390px) {
    .Post--item:not(.blog-box-card) {
        display:flex;
        flex-direction:column;
    }

    .Post--item:not(.blog-box-card) .-Po-Thumb {
        height:clamp(178px,54vw,205px);
        min-height:0;
        border-start-start-radius:22px;
        border-start-end-radius:22px;
        border-end-start-radius:0;
        border-end-end-radius:0;
    }

    .-Po-Info {
        padding:18px 17px 19px;
    }

    .posts_title {
        font-size:19px;
    }

    .post-excerpt {
        font-size:13.5px;
    }
}

@media only screen and (max-width:340px) {
    .Post--item {
        border-radius:19px;
    }

    .Post--item:not(.blog-box-card) .-Po-Thumb {
        height:172px;
        border-start-start-radius:19px;
        border-start-end-radius:19px;
    }

    .-Po-Info {
        padding:16px;
    }

    .post-card-meta {
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }

    .city-initem::after {
        display:none;
    }

    .posts_title {
        font-size:18px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .Post--item,
    .-Po-Thumb img,
    .posts_title a,
    .posts_tit,
    .posts_tit i {
        transition:none;
    }
}