.sel-posts-row,
.posts-row {
    border-left: 1px solid var(--main-black);
    border-right: 1px solid var(--main-black);
}
.post-cell {
    position: relative;
    border-bottom: 1px solid var(--main-black);
}
.post-cell:first-child {
    border-top: 1px solid var(--main-black);
}
.post-cell-link {
    display: block;
    position: relative;
    padding: 10px 50px;
    z-index: 10;
}
.post-cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--main-light-blue);
    z-index: -1;
    transform-origin: left;
    transition: var(--main-easing);
    transform: scaleX(0);
}
.post-cell:hover::before {
    transform: scaleX(1);
}
.post-cell .post-thumb {
    position: absolute;
    right: 25%;
    top: 50%;
    transform: translateY(-50%);
    width: 30%;
    height: auto;
    z-index: 1;
    display: block;
    pointer-events: none;
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    transition: var(--main-easing);
}
.post-cell .post-thumb img {
    border: 1px solid var(--main-black);
    width: 100%;
    height: auto;
    display: block;
}
.post-cell:hover .post-thumb {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.post-cell .post-info {
    width: 40%;
    display: block;
}
.post-cell .post-title {
    margin-bottom: 5px;
}
.post-cell .post-date {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}
.post-cell span {
    transition: var(--main-easing);
}
.post-cell:hover span {
    color: var(--main-white);
}

@media only screen and (max-width: 1200px) {
    .post-cell-link {padding: 10px 20px;}
    
    .post-excerpt {font-size: 18px;}
}
@media only screen and (max-width: 768px) {
    .post-cell .post-info {width: 70%;}
    .post-cell .post-thumb {display: none;}

    .post-excerpt {font-size: 16px;}
    .post-cell .post-date {font-size: 14px;}
}
@media only screen and (max-width: 600px) {
    .post-cell .post-info {width: 100%;}
    .post-cell .post-date {position: relative;right: initial;top: initial;transform: initial;}
    .post-cell-link {display: flex; flex-direction: column; gap: 10px;}
    .post-info {order: 2;}
}