Minha solução

index.jsx (CardPost)

export const CardPost = ({ post }) => {
  return (
    <article className={styles.card}>
      <header>
        <figure>
          <Image
            src={post.cover}
            width={438}
            height={133}
            alt={`Capa do post de titulo: ${post.title}`}   
            className={styles.imagemCard}         
          />
        </figure>
      </header>
      <section>
        <h2>{post.title}</h2>
        <p>{post.body}</p>
      </section>
      <footer>
        <Avatar imageSrc={post.author.avatar} name={post.author.username} />
      </footer>
    </article>
  );
};

CardPost.module.css

.card {
  max-width: 486px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.card header {
  background-color: #888888;
  width: 100%;
  border-radius: 8px 8px 0 0;
}

.card figure {
  padding: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.imagemCard {
  border-radius: 8px;
}

.card section {
  color: #bcbcbc;
}

.card section h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.card section p {
  font-size: 15px;
  margin: 8px 0px 0px 0px;
}

.card section,
.card footer {
  background-color: #171d1f;
  padding: 16px;
}

.card footer {
    border-radius: 0 0 8px 8px;
}

index.jsx (Avatar)

export const Avatar = ({ name, imageSrc }) => {
  return (
    <ul className={styles.lista}>
      <li>
        <Image
          src={imageSrc}
          height={32}
          width={32}
          alt={`Avatar do(a) ${name}`}
        />
      </li>
      <li>@{name}</li>
    </ul>
  );
};

Avatar.module.css

.lista {
    list-style-type: none;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 4.5px;
    color: #888888;
    margin: 0;
    padding: 0;
}

Resultado: