.dish-block {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: .3rem;
    margin-bottom: .4rem;
    opacity: .5;
    transition: 200ms;
    cursor: default !important;
}

.dish-block.active {opacity: 1;}
.dish-block.active .dish_b-title span {transform: skew(-16deg);}
@media only screen and (min-width: 1024px) {
    .dish-block,
    .dish-block.active {
        opacity: .5;
        margin-bottom: .5rem !important;   
        transition: none !important;
    }

    .dish-block.active .dish_b-title span {transform: skew(0);}
}
@media (hover: hover) {
    .dish-block:hover {opacity: 1;}
    .dish-block:hover .dish_b-title span {transform: skew(-16deg);}

}

.dish_b-title {
    display: inline;
    align-items: center;
    flex-wrap: wrap;
}

.dish_b-title span {transition: 200ms;}

.dish_b-title .button-street {
    display: inline-block;
    margin: 0 0 .4rem .25rem;
    transform: translateY(-2px);
    z-index: 5 !important;
}
body[data-lang="ar"] .dish_b-title .button-street {
    transform: translate(0);
    margin: .5rem 0;
}

@media only screen and (min-width: 1024px) {
    .dish_b-title .button-street {transform: translateY(-8px);}
    body[data-lang="ar"] .dish_b-title .button-street {margin: 1rem 0 .5rem;}
}

.dish_b-picture {
    display: flex;
    width: 100vw;
    margin-left: -.3rem;
    height: 0;
    object-fit: cover;
    transition: 500ms;
}
@media only screen and (min-width: 1024px) {
    .dish_b-picture {
        display: none;
    }
}

.dish-block.active .dish_b-picture {
    height: 100vw;
    margin-top: .25rem;
}