.Carte-section{
    padding: 20px 50px;
}

.Carte-section h2{
    text-align: center;

}

.carte-container{
    margin:auto;
    width:580px;
    margin-bottom: 30px;
}

.meal-container{
    position: relative;
}


.meal{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:1.5rem;
    flex-wrap: wrap;
}

.description-meal{
    font-size: 12px;
    font-style: italic;
    color: grey;
}

.price{
    font-size: 1.5rem;
    color: #af946a;
}
.margin{
     margin-bottom:20px ;
}

/* img[alt="meal-illustration"]{
    width:100px;
} */

.meal-category{
    border-bottom:#FFDAC6 solid 3px ;
    width:fit-content;

}

.title-wines-container{
    margin: auto;
    text-align: center;
}

/* .left{
position: absolute;
top:20%;
left:-35%;
}

.right{
    position: absolute;
    top:20%;
    right:-35%;
} */
.wines-container{
    background-color:rgb(251, 251, 247);
    border: double #FFDAC6 13px ;
    padding:50px;
    margin:auto
}

h2{
    padding-bottom: 20px;
}
h4{
    padding-bottom: 20px;
}


.wines{
    display: flex;
    justify-content: center;
    margin: auto;
    gap:3rem;
    flex-wrap: wrap;

}
.vin{
    translate: 100%;
}


@media screen and (max-width: 768px){

    .Carte-section{
        padding: 10px 20px;
    }
    .carte-container{
        width:400px;
    }

  .meal-title{
    font-size: 12px;
  }
  
  .crop{
    width:330px;
  }
  .crop2{
    width:200px;
  }
.meal{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:1.5rem;
    flex-wrap: wrap;
}

    .price{
        font-size: 1rem;
        color: #af946a;
    }


    /* img[alt="meal-illustration"]{
        width:100px;
    }

    .left{
        position: absolute;
        top:20%;
        left:-35%;
        }
        
        .right{
            position: absolute;
            top:20%;
            right:-35%;
        } */
        

}


@media screen and (max-width: 1024px){
    img[alt="meal-illustration"]{
        width:80px;
    }

    .left{
        position: absolute;
        top:20%;
        left:-25%;
        }
        
        .right{
            position: absolute;
            top:20%;
            right:-25%;
        }
}


@media screen and (min-width: 1024px){
      img[alt="meal-illustration"]{
        width:100px;
    }

    .left{
        position: absolute;
        top:20%;
        left:-35%;
        }
        
        .right{
            position: absolute;
            top:20%;
            right:-35%;
        }
        
}