/* Badge styles */

.badge {
  text-decoration: none;
  border-radius: 1.5rem;
  padding: 0.5rem 1.25rem;
  transition: all 0.3s ease-in-out;
}

.badge-teal {
  background-color: var(--teal);
  color: var(--white);
}

.badge-teal:hover,
.badge-teal:focus {
  background-color: var(--teal-hover);
  color: var(--white);
}

.badge-extra {
  display: none;
}

/* width >= 768px */
@media (min-width: 48rem) {
  .badge-extra {
    display: flex;
  }
}