我正在开发一个类似google keep with react的notes应用程序，我的单个note元素的html-css是：

const NoteList = ({searchTerm}) => {
    const [notes, setNotes] = useState([]);

    useEffect(() => {
        async function fetchNotes(){
            const response = await fetch("url")
            const notes = await response.json();

            setNotes(notes)
        };
        fetchNotes();
    }, []);

    return (<div className="note-list">
        {notes.map((note) => (
            <div key={note.id}>
                <Note
                    id={note.id}
                    title={note.title}
                    content={note.content}
                />
            </div>
        ))}
    </div>);
};

.card{
  width: 100%;
  height: fit-content;
  background-color: var(--card-bg);
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 var(--card-shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  line-height: 1.2;
}

而我从JSON得到的数据是这样的：

[{
    "id": 31,
    "title": "Personal Development Goals",
    "content": "1. Read one book per month\n2. Practice mindfulness meditation daily\n3. Take a public speaking course\n4. Learn a new skill or hobby\n5. Volunteer regularly\n6. Start a gratitude journal\n7. Set and track personal fitness goals"
}]

输出如下所示。

我想在每一个完成的句子后面有更多的空间。每行的高度不一样（不是行高）。但是句子之间要有更大的间隔。

这应该是输出

我所尝试的

我试过很多行和字母属性。

.card{
    line-height: 1.2;
    line-break: loose;
    letter-spacing: 0.3px;
    word-spacing: 1px;
}

但它没有达到我想要的。
我想要的

如果你仔细看，你会发现红色的gap，比blue小，我试过line-height，word-wrap，但是我找不到任何属性可以做到这一点。
我看过一些在线解决方案，但是他们在一个元素中使用了多个span。但是我的数据不是静态的，它是从API中以JSON检索的。
先谢了。
我是react的新手。