@layer components {
  .note {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--clr-border);
    border-radius: var(--border-radius);
    padding: 1ex 2ex;

    .e-content {
      > p:first-child {
        margin-block-start: 0;
      }

      .u-photo {
        width: 100%;
        height: auto;
      }
    }

    .syndication-links {
      display: flex;
      flex-direction: row;
      gap: 1ex;

      svg {
        border-radius: 4px;
        width: auto;
        height: 1lh;
      }
    }
  }

  .reply-to {
    font-size: 85%;
    margin-inline: 2ex;
    padding-inline: 1ex;
    border: 1px solid var(--clr-border);
    border-bottom: none;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
  }
}