.cc-card {
    position: relative;
    border-radius: var(--pico-border-radius);
    border: .5px solid #ccc;
    background: none;
    width: 100%;padding: 1rem;box-sizing: border-box;font-size: 80%;
    margin: 1rem 0;
}

.cc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0OTYgNTEyJz48cGF0aCBmaWxsPScjNGE0YTRhJyBkPSdNMjQ1LjggMjE0LjlsLTMzLjIgMTcuM2MtOS40LTE5LjYtMjUuMi0yMC0yNy40LTIwLTIyLjIgMC0zMy4zIDE0LjYtMzMuMyA0My45IDAgMjMuNSA5LjIgNDMuOCAzMy4zIDQzLjggMTQuNCAwIDI0LjYtNyAzMC41LTIxLjNsMzAuNiAxNS41YTczLjIgNzMuMiAwIDAxLTY1LjEgMzljLTIyLjYgMC03NC0xMC4zLTc0LTc3IDAtNTguNyA0My03NyA3Mi42LTc3IDMwLjgtLjEgNTIuNyAxMS45IDY2IDM1Ljh6bTE0MyAwbC0zMi43IDE3LjNjLTkuNS0xOS44LTI1LjctMjAtMjcuOS0yMC0yMi4xIDAtMzMuMiAxNC42LTMzLjIgNDMuOSAwIDIzLjUgOS4yIDQzLjggMzMuMiA0My44IDE0LjUgMCAyNC43LTcgMzAuNS0yMS4zbDMxIDE1LjVjLTIgMy44LTIxLjMgMzktNjUgMzktMjIuNyAwLTc0LTkuOS03NC03NyAwLTU4LjcgNDMtNzcgNzIuNi03N0MzNTQgMTc5IDM3NiAxOTEgMzg5IDIxNC44ek0yNDcuNyA4QzEwNC43IDggMCAxMjMgMCAyNTZjMCAxMzguNCAxMTMuNiAyNDggMjQ3LjYgMjQ4QzM3Ny41IDUwNCA0OTYgNDAzIDQ5NiAyNTYgNDk2IDExOCAzODkuNCA4IDI0Ny42IDh6bS44IDQ1MC44Yy0xMTIuNSAwLTIwMy43LTkzLTIwMy43LTIwMi44IDAtMTA1LjUgODUuNS0yMDMuMyAyMDMuOC0yMDMuM0EyMDEuNyAyMDEuNyAwIDAxNDUxLjMgMjU2YzAgMTIxLjctOTkuNyAyMDIuOS0yMDIuOSAyMDIuOXonLz48L3N2Zz4=);
    background-size: 130px;
    background-position: top -30px right -30px;
    background-repeat: no-repeat;
    filter: opacity(.3);
    z-index: 0;
}

.cc-card > * {
    position: relative;
    z-index: 1;
}

.cc-card ul{
    padding-inline-start:1rem;
    margin:0;
}