@layer organisms {
  .credential-bar {
    background: var(--ink);
    color: var(--on-dark);
  }

  .credential-bar__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--space-xs) var(--space-m);
    padding-block: 1.625rem;
    padding-inline: var(--gutter);
    margin-inline: auto;
    max-width: var(--page-max);
    list-style: none;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
  }

  @media (min-width: 75rem) {
    .credential-bar__list {
      display: flex;
      justify-content: space-between;
      gap: var(--space-s);
      white-space: nowrap;
    }

    .credential-bar__list li + li::before {
      content: "|";
      margin-inline-end: var(--space-s);
      opacity: 0.35;
    }
  }
}