@layer components {
  .brand { display: flex; align-items: center; gap: 10px; font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; }

  .brand__mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--on-accent);

    & .icon { width: 62%; height: 62%; }
  }

  .brand__mark--lg { width: 56px; height: 56px; border-radius: 16px; }
}