.ribbon {
  display: inline-block;
  align-self: flex-start;
  position: relative;
  padding: 0 1rem 0 2rem;
  border-radius: 0 .3rem .3rem 0;
  background-image: linear-gradient(to right,var(--color-orange) 0,var(--color-pink) 100%);
  color: var(--grey-0);

  &::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    background-color: transparent;
    border-style: solid;
    border-width: 0 1rem 1rem 0;
    border-color: transparent;
    border-right-color: var(--color-orange);
    filter: brightness(.9);
  }

  a {
    display: block;
    margin: 0;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    &:hover {
      color: currentColor;
      @extend .shake;
    }
  }
}