.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;
}
@media only screen and (min-width: 1024px) {
    .dish_b-title .button-street {
        transform: translateY(-8px);
    }
}

.dish_b-picture {
    position: relative;
    display: flex;
    width: 100vw;
    margin-left: -.3rem;
    height: 0;
    overflow: hidden;
    transition: 500ms;
}

.dish_b-picture img.--media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dish_b-picture img.aish-logo {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 4rem;
}

@media only screen and (min-width: 1024px) {
    .dish_b-picture {
        display: none;
    }
}

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