.app {
    margin-top: calc(var(--header-height) + 50px);
}

.app__container {
    display: flex;
    gap: 30px;
}

.main {
    width: 100%;
}

.container {
    --max-width: 1200px;
    --padding-inline: 120px;
    max-width: calc(var(--max-width) + var(--padding-inline) * 2);
    padding-inline: var(--padding-inline);
    margin-inline: auto;
}

.icon {
    --size: 20px;
    width: var(--size);
    height: var(--size);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon svg {
    width: var(--size);
    height: var(--size);
}

@media screen and (max-width: 1200px) {
    .container {
        --padding-inline: 60px;
    }
}

@media screen and (max-width: 904px) {
    .container {
        --padding-inline: 40px;
    }
}

@media screen and (max-width: 600px) {
    .container {
        --padding-inline: 24px;
    }
}

/*
    РАЗДЕЛ НА ТЕЛЕФОНЕ. Добавлено 05.09.2026.

    Было: .app__container — флекс-строка без единого правила для узкого
    экрана. Меню каталога и содержимое стояли В СТРОКУ на телефоне.
    Замерено на боевом при ширине окна 390: меню занимало 165 пикселей,
    содержимому оставалось 208, страница уезжала вбок на 37 пикселей.
    То есть конструктор заказа сжимался до половины экрана телефона,
    а мобильных посетителей в этой нише большинство.

    Стало: колонкой. Содержимое сверху, меню каталога под ним —
    человек пришёл смотреть картины, а не список разделов.
    Порядок задаётся в components/aside/index.css.
*/
@media screen and (max-width: 904px) {
    .app__container {
        flex-direction: column;
        gap: 24px;
    }
}