<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">.ribbon-content {
    position: relative;
    min-height: 7.5em;
  }
  .ribbon-content &gt; [class*=ribbon] {
    position: absolute;
    z-index: 1;
    line-height: 2em;
    display: block;
    width: 10em;
    height: 2.5em;
    text-align: center;
    text-decoration: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  .ribbon-content &gt; [class*=ribbon]::before,
  .ribbon-content &gt; [class*=ribbon]::after {
    content: '';
    position: absolute;
    inset: 0;
    -webkit-clip-path: polygon(2em 0, 8em 0, 10em 2em, 10em 2.5em, 9.5em 2em, 0.5em 2em, 0 2.5em, 0 2em);
            clip-path: polygon(2em 0, 8em 0, 10em 2em, 10em 2.5em, 9.5em 2em, 0.5em 2em, 0 2.5em, 0 2em);
  }

  .ribbon-content &gt; [class*=ribbon]::after {
    z-index: -1;
    background-color: #ff6347;
    border-bottom: 0.5em solid #505050;
    transition: background-color 0.2s ease-in-out;
  }

 

  /* .ribbon-content &gt; [class*=ribbon-top] {
    filter: drop-shadow(0 0.5em 0.5em rgba(0,0,0,0.1));
  }
  .ribbon-content &gt; [class*=ribbon-top]::after {
    background-image: linear-gradient(to top, rgba(0,0,0,0.3), rgba(0,0,0,0.2) 1.25em);
  } */

  .ribbon-content &gt; .ribbon-top-left {
    top: 0;
    left: 0;
    transform: translate(-2.35em, 1.4em) rotate(-45deg);
  }
  .ribbon-content &gt; .ribbon-top-right {
    top: 0;
    right: 0;
    color: black;
    transform: translate(2.35em, 1.4em) rotate(45deg);
  }

</pre></body></html>