/* Десктопная версия — сетка в три колонки */
.menu-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    list-style-type: none;
    padding: 0;
    align-items: center;
    position: relative;
}

/* Стиль для кнопки в обычном состоянии */
.toggle-button-container {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 10px;
}

/* При добавлении класса expanded показываем все элементы */
.menu-items.expanded .menu-item {
    display: block;
}

/* Адаптация для разрешения 880px и меньше */
@media (max-width: 880px) {
    .menu-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Две колонки */
        gap: 10px;
        align-items: center;
    }

    /* Перемещаем кнопку на ту же строку, что и последние два элемента */
    .toggle-button-container {
        position: relative;
        text-align: right;
        grid-column: span 2;
        margin-top: -35px; /* Поднимаем кнопку чуть выше */
        padding-right: 10px; /* Добавляем отступ вправо */
    }


    /* Скрываем элементы после первых двух по умолчанию */
    .menu-item:nth-child(n+3) {
        display: none;
    }

    /* При раскрытии (expanded) показываем элементы в две колонки */
    .menu-items.expanded {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Мобильная версия (768px и меньше) */
@media (max-width: 768px) {
    .menu-items {
        display: flex;
        flex-direction: column;
    }

    .toggle-button-container {
        position: static;
        text-align: center;
        margin-top: 10px;
    }
}