Как сделать html-верстку с помощью css ⇐ CSS

[Anonymous]

Я изучаю HTML и CSS и нашел интересный дизайн.
У меня вопрос, как мне сделать этот макет, потому что я вижу, что некоторые слои находятся под другими. Вопрос в основном касался фона, потому что он состоит из нескольких изображений, как его разместить в разделах.
Я пытался использовать сетки в CSS, но у меня проблемы с ними на маленьких экранах
Целевая страница

Меньшие экраны result


(а также у меня проблемы с шириной сетки (меню и другие)

Код: Выделить всё

* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #E9E7E5;
}

body {
background-color: #060708;
font-family: "Source Sans 3", sans-serif;
font-size: 14px;
min-height: 100vh;
}

.grid-container {
display: grid;
/* margin: 1% 6%;
width: 90%;*/
grid-template-columns: auto;
grid-template-rows: auto;
height: 100%;
}

.grid-item {
border: 1px solid;
border-radius: 56px;
font-size: 30px;
text-align: center;
justify-self: center;
width: 90%;
}

#top-menu {
background: rgba(10, 11, 12, 0.04);
box-shadow: 0 0 4px #927DE3;
backdrop-filter: blur(5px);
width: 80%;
height: 56px;
border-color: rgba(233, 231, 229, 0.08);
opacity: 100%;
padding: 8px 8px 8px 32px;
align-content: center;
display: flex;
justify-content: space-between;
position: fixed;
}

Код: Выделить всё

[url=#]
[img]/img/Logo.svg[/img]
[/url]
[list]
[*][url=#about]ABOUT[/url]
[*][url=#projects]PROJECTS[/url]
[*][url=#playground]PLAYGROUND[/url]
[*][url=#faq]FAQ[/url]
[/list]

CONTACT [/i]

Подробнее здесь: https://stackoverflow.com/questions/792 ... t-with-css