.ribbon {
  @apply inline-block py-3 px-3 w-full text-white text-center uppercase;
  position: absolute;
  left: -1rem;
  bottom: 0.25rem;
  max-width: 242px;
}

.ribbon::before,
.ribbon::after {
  content: '';
}

.ribbon::before {
  position: absolute;
  top: -1rem;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 1rem 1rem;
}

.ribbon::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 21px 8px 21px 0;
  border-color: transparent #fff transparent transparent;
}

.ribbon-warning {
  @apply bg-warning-gold;
}


.ribbon-warning::before {
  border-color: transparent transparent #dba240 transparent;
}

.ribbon-danger {
  @apply bg-watermelon;
}

.ribbon-danger::before {
  border-color: transparent transparent #f55f6e transparent;
}