.meal_card{
    background-color: #fff;
    box-shadow: 0 10px 25px 0 rgba($color: #ccc, $alpha: .5) ;
    .img-box{
        height: 270px;
        position: relative;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all .3s linear;
        }
    }
    .card-body{
        .name{
            color: var(--primary);
            margin-bottom: 1rem;
        }
        .price{
            color: var(--secondary);
            margin-bottom: 0;
        }
    }
    &:hover{
        .name{
            color: var(--secondary);
        }
        .price{
            color: var(--primary);
        }
        .img-box img{
            transform: rotate(5deg) scale(1.1);
        }
    }
}