#menu,
#menu-2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 12px;
    gap: 12px;
    padding-bottom: 40px;
    .menu-item {
        background: var(--bg);
        padding: 12px;
        border-radius: 4px;
        .add-categorie {
            margin-top: 12px;
            font-size: 12px;
            padding: 6px 12px;
            img {
                width: 16px;
                height: 16px;
                margin-right: 4px;
            }
        }
        h5 {
            margin-bottom: 12px;
            font-weight: 600;
        }
        .list {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            grid-gap: 6px;
            gap: 6px;
            .categorie-item {
                border-radius: 4px;
                background: #fff;
                padding: 8px;
                &:first-child {
                    margin-top: 0;
                }
                .categorie-title {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    -webkit-box-pack: justify;
                    -ms-flex-pack: justify;
                    justify-content: space-between;
                    p {
                        font-style: italic;
                        font-weight: 500;
                    }
                    dd {
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        grid-gap: 4px;
                        gap: 4px;
                    }
                }
                button {
                    font-style: italic;
                    font-size: 12px;
                    padding: 4px;
                    color: var(--grey) !important;
                    border-radius: 100px;
                    img {
                        width: 14px;
                        height: 14px;
                        margin-right: 0;
                    }
                }
            }
            .dishes-list {
                padding-top: 4px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                .dish-item {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    -webkit-box-pack: justify;
                    -ms-flex-pack: justify;
                    justify-content: space-between;
                    cursor: pointer;
                    gap: 12px;
                    grid-gap: 14px;
                    border-bottom: 0.5px solid #dde5e9;
                    padding: 4px 0;
                    overflow: hidden;
                    .dish-item-right {
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        gap: 8px;
                        grid-gap: 8px;
                        -webkit-transform: translateX(28px);
                        transform: translateX(28px);
                        -webkit-transition: 0.3s ease;
                        transition: 0.3s ease;
                    }
                    &:last-child {
                        border-bottom: none;
                    }
                    &:hover {
                        background: var(--bg);
                        .dish-item-right {
                            -webkit-transform: translateX(0);
                            transform: translateX(0);
                        }
                        p {
                            color: #000;
                        }
                        i {
                            color: var(--corp);
                        }
                    }
                    p,
                    i {
                        color: var(--grey);
                        font-size: 14px;
                    }
                }
            }
        }
    }
}