Loopstudios landing page. GRID, FLEX, SCSS

Hey, off the top of my head I have 2 suggestions:

• Your page lacks vertical alignment - each component has a distinct, different inline-margin. To fix that I suggest you use a div with a "container" class. This is how it looks on my websites (I think it is inspired by Kevin Powell you can take a look at his videos as well):

.container {
  width: min(
    var(--container-max-width),
    100% - var(--container-margin-inline-min) * 2
  );
  margin-inline: auto;
}

(the --container-margin-inline-min custom property changes based on screen size of course).

• You try to achieve the "image overlap" effect by hard-coding width/margin/padding values. This is not responsive at all, for instance on my screen there is no overlap whatsoever. To achieve this effect I suggest you define a grid and place the picture and article tags inside it. Then use "grid-template" property to divide it. Finally you'd need to define "grid-area" and "z-index" properties on the picture and article elements to place them in whatever way you need.