.ribbon {
  border-radius: 0 3px 3px 0;
  box-shadow: 2px 5px 10px rgba(49, 58, 70, 0.15);
  color: #fff;
  display: inline-flex;
  margin: 0 0 0 -24px;
  padding: 5px 12px;

  .ribbon-title {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: 0.825rem;
    font-style: normal;
    font-variation-settings:
      "wdth" 100,
      "YTLC" 500;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;

    a {
      color: #fff;
      text-decoration: none;
    }
  }
}

.ribbon-detail {
  display: inline-flex;
}

.ribbon-end {
  border-radius: 3px 0 0 3px;
  margin: 0 -24px 0 0;

}

.ribbon-primary {
  background-color: var(--vh-dark-blue);
}

.ribbon-secondary {
  background: var(--vh-light-grey);
}

.ribbon-success {
  background: var(--vh-green)
}

.ribbon-info {
  background: var(--vhive-accent);
}

.ribbon-warning {
  background: #f9bc0d;
}

.ribbon-danger {
  background: #fa6767;
}

.ribbon-light {
  background: #eef2f7;
}

.ribbon-dark {
  background: var(--bs-dark);
}