.img{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-around;
    width:90%;
    background-color:#ebe3db;
    margin: 0 auto;
}
.img > div{
    width:45%;
   
    margin:50px 0;
    
}
.mix-button button{
    background-color:#ebe3db;
    padding:10px 20px;
    margin:20px;
    font-weight:bold;
}
.mix-button button:active{
    background-color:#950000;
    color:white;
}

.img img {
    display: block;
    box-shadow: 12px 12px 12px 1px #4c4343;
}

.mix {
    position: relative;
    transition: all .4s ease;
}

.mix span img{
        
    margin:50px auto;
    width:15%;
    box-shadow:none;
}
.mix p {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    background-color: rgba(0,0,0,.4);
    padding: 60px;
    display: flex;
    opacity: 0;
    transition: all .4s ease;
}

.mix span {
    display: block;
    border: 6px solid #fff;
    width: 100%;
    text-align:center;
    color:white;
    font-family: 'Merienda', cursive;
    font-size:3rem;
    text-transform: capitalize;
    
}
    
    
    
@media screen and (min-width:980px){
    /*destop*/
    .container{
        max-width:100%;
    }
     .img > div {
        width: 32%;
        margin: 50px 0;
    }
    .mix:hover {
        transform: scale(1.2);
    }
    
    .mix:hover p {
        opacity: 1;
        
    }
    
}


@media screen and ( min-width:780px ) and (max-width:980px) {
    /*tablette*/
    .container{
        max-width:100%;
    }
    
    
    
}