@layer components {
  .letter {
    & > :first-child {
      margin-block-start: 0;
    }

    & h3 {
      margin-block-end: var(--block-space-quarter);
    }
  }

  .letter__correspondents,
  .letter__standing {
    margin-block: 0 var(--block-space-quarter);
    font-size: var(--text-small);
  }

  .letter__standing {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-quarter);
    align-items: baseline;
    margin-block-end: var(--block-space);
  }

  .letter__attachments {
    margin-block: 0 var(--block-space);
    padding-inline-start: 0;
    list-style: none;
    font-size: var(--text-small);

    & li::before {
      content: "📎 ";
    }
  }
}