Vanilla CSS, Flex, Grid, Mobile-first, BEM, Responsive Landing Page

About the “list”: I think that this is not a semantically correct solution.

Even if the H2 outline, at the current position, extends to the entire SECTION correct. I don't see the point of making the title, in the markup, a list item. H2 should be just a heading for the UL, not an item of it.

SECTION > H2 + UL > LI*5

I also saw that you have a duplicate ID linearGradient#a. You can easily fix this by simply declaring a generic SVG[height=0] somewhere separately on the page, it should work:

<svg height="0">
  <defs>
    <linearGradient id="a"> ... </linearGradient>
  </defs>
</svg>

Hello, About “hero-image”.

But 1st: it's a very nice effect u got 👍 I'd leave it 😅

If you want to control this image within its position, you just need to disable its absolut position (make it position:static) THEN or change object-fit to "contain", or add overflow:visible.

IF you plan to center everything in one column (like on the mob.): .hero__body { margin:0 auto }

ELSE IF you want to keep .hero__body and picture horizontally, just make the parent element Flexbox .hero__container { display:flex }