.vg-card-ribbon {
    overflow: hidden;
}

.vg-ribbon {
    margin: 0;
    padding: 0;
    background: var(--bs-primary);
    color:white;
    /* padding:1em 0; // Will make bigger */
    font-size: 1.1rem;
    font-weight: initial;
    line-height: initial;
    position: absolute;
    top:0;
    left:0;
    transform: translateX(-30%) translateY(0%) rotate(-45deg);
    transform-origin: top right;
}
.vg-ribbon:before,
.vg-ribbon:after {
    content: '';
    position: absolute;
    top:0;
    margin: 0 -1px; /* tweak */
    width: 100%;
    height: 100%;
    background: var(--bs-primary);
}
.vg-ribbon:before {
    right:100%;
}

.vg-ribbon:after {
    left:100%;
}