.menu__list {
    margin: var(--spacing-x-large) 0;
    counter-reset: my-counter;
}

.menu__item {
    margin-bottom: var(--spacing-x-large);
    counter-increment: my-counter;
}

.menu__item::before {
    content: "#" counter(my-counter) ;
    display: block;
    margin-bottom: var(--spacing-default);
    font-size: var(--font-size-default);
}

.menu__item.menu__item--hidden {
    display: none;
}

.menu__list.menu__list--4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-small);
}

@media (min-width: 800px) { 
    .menu__list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--spacing-x-large);
    }

    .menu__list.menu__list--4 {
        grid-template-columns: repeat(4, 1fr);

        .menu__item {
            width: 100%;
        }
    }

    .menu__item {
        width: calc(50% - var(--spacing-x-large));
    }
}

.menu__figure {
    display: flex;
}

.menu__img {
    margin-right: var(--spacing-default);
}

.menu__price {
    margin-top: var(--spacing-small);
    color: var(--color-action);
    font-size: calc(var(--font-size-default) + 0.3rem);
    transform: rotate(-6deg);
}