.card-accent {
    --card-accent-color: #1683c7;
    position: relative;
    overflow: hidden;
}

.card-accent::before {
    content: "";
    position: absolute;
    z-index: 4;
    background: var(--card-accent-color);
    pointer-events: none;
}

.card-accent-side-1::before {
    inset: 0 auto 0 0;
    width: 4px;
}

.card-accent-side-2::before {
    inset: 0 0 auto 0;
    height: 4px;
}

.card-accent-side-3::before {
    inset: 0 0 0 auto;
    width: 4px;
}

.card-accent-side-4::before {
    inset: auto 0 0 0;
    height: 4px;
}

.card-accent-color-1 { --card-accent-color: #1683c7; }
.card-accent-color-2 { --card-accent-color: #2f9fad; }
.card-accent-color-3 { --card-accent-color: #5b9b72; }
.card-accent-color-4 { --card-accent-color: #d19a37; }
.card-accent-color-5 { --card-accent-color: #d95757; }

#content #main ul.posts > li.post.feed-card {
    box-sizing: border-box;
    border-radius: 14px;
    overflow: visible;
}

#content #main ul.posts > li.post.feed-card::before {
    display: none;
}

#content #main ul.posts > li.post.feed-card.card-accent-side-1 {
    border-left: 4px solid var(--card-accent-color);
}

#content #main ul.posts > li.post.feed-card.card-accent-side-2 {
    border-top: 4px solid var(--card-accent-color);
}

#content #main ul.posts > li.post.feed-card.card-accent-side-3 {
    border-right: 4px solid var(--card-accent-color);
}

#content #main ul.posts > li.post.feed-card.card-accent-side-4 {
    border-bottom: 4px solid var(--card-accent-color);
}

#content #main ul.posts > li.post.feed-card > .heading {
    border-radius: 14px 14px 0 0;
}

#content #main ul.posts > li.post.feed-card .sun-article-markers-wrapper {
    z-index: 5;
}