Как настроить flexbox так, чтобы он уменьшался при изменении масштаба?

Для того чтобы flexbox уменьшался при изменении масштаба, можно использовать свойство flex-shrink. Установите его значение на 1 для элементов flex, которые вы хотите уменьшить.

Например, вы можете уменьшить элементы внутри flex-контейнера при изменении масштаба следующим образом:

```css
.flex-container {
  display: flex;
}

.flex-item {
  flex: 1 1 0; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
}
```

Чтобы выравнивать контент по центру и затем влево при изменении масштаба, вы можете использовать комбинацию свойств justify-content и align-items. Например, для выравнивания контента по центру по вертикали и горизонтали, а затем по левому краю по горизонтали, вы можете использовать следующий код:

```css
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 768px) {
  .flex-container {
    justify-content: flex-start;
  }
}
```

Этот код первоначально выравнивает контент по центру по вертикали и горизонтали при любом разрешении экрана. При ширине экрана менее 768px, он выравнивает контент влево по горизонтали. 

Примените это к вашим элементам header и footer, и они будут выравниваться по центру и затем по левому краю в зависимости от изменения масштаба.

.layout {
    width: 1660px;
+   max-width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    row-gap: 100px;
    margin: auto;
}
 
 
.layout {
-   width: 1660px;
+   width: 100%;
+   max-width: 1660px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    row-gap: 100px;
    margin: auto;
}