/* docs/DESIGN.md #5.4 — devise, séparée par des carrés (jamais des ronds). */
@layer components {
  .motto {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    font-size: .8125rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .1em;
  }

  .motto__sep {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--terracotta);
    flex-shrink: 0;
  }
}