#posts .grid {
    grid-template-columns: repeat(1, 1fr) !important;
}
#posts .grid .item {
    margin-bottom: calc(var(--default-spacing) * 3);
}
#posts .grid .item > .wrapper > a .thumbnail {
    background: var(--posts-color);
}
#post .flex-control-paging li a.flex-active,
#post .flex-control-paging li a:hover {
    background: var(--posts-color) !important;
}
@media only screen and (min-width: 768px) {
    #posts .grid .item .details {
        margin-top: 0;
    }
    #posts .grid .item > .wrapper > a {
        display: flex;
    }
    #posts .grid .item > .wrapper > a .thumbnail_container,
    #posts .grid .item > .wrapper > a .details {
        width: 50%;
    }
    #posts .grid .item:nth-child(even) > .wrapper > a {
        flex-direction: row-reverse;
    }
    #posts .grid .item > .wrapper > a .details {
        box-sizing: border-box;
    }
    #posts .grid .item:nth-child(even) > .wrapper > a .details {
        text-align: right;
        padding-right: var(--default-spacing);
    }
    #posts .grid .item:nth-child(odd) > .wrapper > a .details {
        padding-left: var(--default-spacing);
    }
    
    #post .details .description {
        max-width: 800px;
    }
}

@media only screen and (min-width: 1280px) {
    #posts .grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #posts .grid .item:nth-child(even) > .wrapper > a {
        flex-direction: row;
    }
    #posts .grid .item:nth-child(even) > .wrapper > a .details {
        text-align: left;
        padding-right: 0;
        padding-left: var(--default-spacing);
    }
}