.op3-element[data-op3-element-type="postlistitem"] {
    display: flex;
    width: auto;
    min-width: 0;

    // By default featured image is fallback image. It will be overriden in
    // style attribute by backend (if post has featured image).
    --op3-post-featured-image-src:var(--op3-fallback-image-src);

    .op3-element-postlistitem__container {
        display: flex;
        align-items: flex-start;

        // Fix link properties
        color: inherit;
        text-decoration: inherit;
    }

    .op3-element-postlistitem__background--image {
        &::before,
        &::after {
            background: center / cover no-repeat;
        }
    }

    .op3-element-postlistitem__children {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: normal;
        gap: 1em;
    }

    .op3-element {
        margin: 0;
    }

    .op3-element[data-op3-element-spec="wrapflexpostlistitemcontent"] {
        min-width: 48px;
        flex: 1;
        gap: inherit;

        > [data-op3-children] {
            display: flex;
            flex-direction: column;
            gap: inherit;
        }
    }

    .op3-element[data-op3-element-spec="postlistimage"] {
        width: 100%;

        img {
            object-fit: cover;
        }
    }

    .op3-element[data-op3-element-spec="postlisttitle"] {
        order: 0;
    }

    .op3-element[data-op3-element-spec="postlistcontent"] {
        order: 1;
    }

    .op3-element[data-op3-element-spec="postlisttaxonomy"] {
        order: 2;
    }

    .op3-element[data-op3-element-spec="postlistpostmeta"] {
        order: 3;
    }

    .op3-element[data-op3-element-spec="postlistbutton"] {
        margin: 0;
        width: 100%;
        max-width: 84px;
        order: 4;
        color: #999;

        > .op3-link {
            padding: 0;
            align-items: flex-start;
            text-align: left;

            > .op3-text-container {
                line-height: 2;

                > .op3-icon,
                > .op3-divider {
                    display: none;
                }
            }
        }
    }
}

// To satisfy Typography Control Panel we must use stronger
// CSS selector for button and contenteditable links.
#op3-designer-element .op3-element[data-op3-element-type="postlistitem"] {
    a.op3-element-postlistitem__container,
    .op3-element[data-op3-element-spec="postlistbutton"] .op3-link,
    [data-op3-contenteditable] a {
        font-weight: inherit;
        font-style: inherit;
        text-decoration: none;
        text-transform: inherit;
        text-shadow: inherit;
        color: inherit;
    }
}