По хорошему тебе надо как-то масштабировать пирамиду, лучше если будешь вычислять высоту и ширину кирпичей, а так-же размер шрифта.
Код ниже лишь упрощает просмотр пирамиды, когда она большая.
body {
background: var(--color-background);
}
.main {
display: grid;
gap: 30px;
min-height: 100vh;
grid-auto-rows: auto 1fr auto;
padding: 30px;
}
.header {}
.header__rows {
display: grid;
grid-auto-flow: column;
justify-content: start;
align-items: center;
gap: 10px;
}
.camera {
display: grid;
justify-items: center;
align-items: center;
}
.pyramid {
display: grid;
justify-content: center;
}
.row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: auto;
justify-content: center;
width: 100%;
height: 32px;
}
.brick {
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
background: var(--color-backround-second);
color: var(--color-main);
min-width: 62px;
height: 100%;
}
