/**
 * Corner Ribbon Component
 */
 .corner-ribbon {
    position: absolute;
    top: -3px;
    left: -3px;
    height: 5.5em;
    width: 5.5em;
    padding: 8px;
  }
  
 .corner-ribbon .cr-inner {
    position: absolute;
    inset: 0;
    background: #47469B;
    color: white;
    border-radius: 16px 8px 0 8px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }
  
 .corner-ribbon .cr-text {
    display: block;
    font-weight: bold;
    font-size: .8em;
    line-height: 1.3;
    transform: rotate(-45deg) translateY(.1em) translateX(-1.8em);
  }
  
 .corner-ribbon .cr-text strong {
    display: block;
    font-weight: normal;
    text-transform: uppercase;
  }
  
 .corner-ribbon::before,
 .corner-ribbon::after {
    content: '';
    position: absolute;
    background: #47469B;
    z-index: -1;
  }
  
 .corner-ribbon::before {
    top: calc(100% - 8px);
    left: 0;
    height: 8px;
    width: 3px;
    border-radius: 0 0 0 50%;
  }
  
 .corner-ribbon::after {
    left: calc(100% - 8px);
    top: 0;
    width: 8px;
    height: 3px;
    border-radius: 0 50% 0 0;
  }
}