@layer components {
  .cross-links-list {
    list-style: none;
    margin: var(--space-xs) 0 0;
    padding: 0;
  }

  .cross-links-item {
    padding-block: 0.2rem;
    font-size: var(--type-body-size);
    line-height: var(--type-hero-copy-line-mobile, 1.5);
  }

  .cross-link-label {
    color: var(--text-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .cross-link-part::before {
    content: " · ";
    color: var(--text-secondary);
  }

  .cross-link-part {
    color: var(--text-secondary);
    font-size: 0.9em;
  }

  .cross-link-label:hover {
    opacity: 0.75;
  }
}