Product preview card component solution

• Is it best practice to always structure a HTML page using the <header>, <main>, <footer> tags regardless of what will go in the page?
• Any general recommendations for making the HTML I wrote more semantic?
• I always feel like every tiny element in my page should become it's own React component so I can reuse it. When do you think this becomes a waste of time?
• Is there a best practice way of deciding what should become a CSS variable?
• What are your thoughts on using "derived variables", something like below. Is it best practice?

:root{
    --fs-regular: 1rem;
    --fs-medium: calc(var(--fs-regular) * 1.2);
}