Okay, this is how we generally structure the website.

So its always Section --> Container --> [Content]--wrapper --> [Content divs] --> Content

Section. Sections will be numbered, as you can see on this page. Whenever a section needs margin to the next section, you can put in a margin alt. This will be [number]rem. So for example 10rem. We dont touch anything else on these sections.

Container. We just have 3 different containers, we're not changing any values on them. They always stay the same. As you can see in this page we have. full-ct, large-ct and small-ct.

[Content]--wrapper. This is where the magic happens. These wrappers are free to go mental on. We're preferably using flexbox. Of course there could be more organisational divs (wrappers) inside a [content]--wrapper. And again, know that section margins, we never attach to content wrappers. A example of a content wrapper could be: hero--wrapper

[Content Divs]. This is the div which is places inside of a [content]--wrapper. Inside of these content divs we will place headings, paragraphs, images, video's etc.

[Content]. These are elements like: headings, paragraphs, images, videos etc. All of these elements we're not giving specific values to. All of these values happen in the [Content Divs]. The reason for this is that we then dont touch any of the classes we're creating in the styleguide.