Problems with some semantic tags in HTML5

I'm trying my best to figure out the right use and nesting of some semantic tags in HTML5.

1. Should I use <main> tag in HTML5? As I see <section> and <article> are the 2 main tags used in most of the webpage
2. Should I nest <section> inside <section>, <article> inside <section>, <article> inside <article> or <section> inside <article>? This really makes me embarrassing
3. If I want to create a list of products like the picture below, what is the suitable HTML5 structure for it. Which of the following structure is fine?

P/s: Is there any rules or instructions for the use of semantic tags in HTML5?

Sorry if I have many questions but I'm really get stuck with these for a long time? :(

Thanks in advance!