:root {
    --accent: light-dark(var(--yellow-600), var(--yellow-400));
}

#posts-list {
    margin-block: 1rem;

    > .posts-list-item {
        display: block;
        border-bottom: 0.1rem dashed var(--accent);
        padding-block: 1rem;

        &:hover {
            border-bottom: 0.1rem solid var(--accent);
        }

        > h2,
        > p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        > h2 {
            font-size: 1.8rem;
        }

        > p {
            > .post-type {
                color: var(--accent);
            }
        }
    }
}