.crpw-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 3rem;
}
.crpw-item {
display: flex;
align-items: center;
gap: 14px;
padding: 8px;
border-radius: 14px;
background: #262626;
}
.crpw-item:not(.sidebar-main .crpw-item) {
width: 80%;
margin-left: auto;
margin-right: auto;
}
.crpw-item.is-manual {
border: 1px solid #121212;
position: relative;
}
.crpw-ribbon {
--f: .1em;
font-size: 11px;
font-weight: bold;
color: #daa205;
text-transform: uppercase;
letter-spacing: 0.5px;
position: absolute;
top: 0;
right: 0;
line-height: 1.8;
padding-inline: 1.4lh;
padding-bottom: var(--f);
border-image: conic-gradient(#0008 0 0) 51%/var(--f);
clip-path: polygon(
100% calc(100% - var(--f)), 100% 100%,
calc(100% - var(--f)) calc(100% - var(--f)),
var(--f) calc(100% - var(--f)), 0 100%,
0 calc(100% - var(--f)),
999px calc(100% - var(--f) - 999px),
calc(100% - 999px) calc(100% - var(--f) - 999px)
);
transform: translate(calc((1 - cos(45deg)) * 100%), -100%) rotate(45deg);
transform-origin: 0% 100%;
background-color: #121212;
z-index: 2;
}
.crpw-thumb-link {
flex-shrink: 0;
display: block;
width: 110px;
}
.crpw-thumb {
width: 110px;
height: 70px;
object-fit: cover;
border-radius: 10px !important;
display: block;
}
.crpw-content {
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
align-items: flex-start;
}
.crpw-title {
font-size: 17px;
font-weight: 700;
line-height: 1.3;
color: #ffffff;
text-decoration: none;
}
.crpw-title:hover {
text-decoration: underline;
}
.crpw-meta {
margin-top: 0;
font-size: 13px;
color: #b0b0b0;
}