.warpper-container{
    padding-top: 2em;
    font-family: "Roboto Condensed Bold", sans-serif;
}

.warpper-container>div{
    background-color: white;
    box-shadow: 8px 5px 5px rgba(0, 0, 0, 0.15) ;
    margin: 10px;
}

.warpper-container>div img{
    height: 250px;
    width: 300px;
}

.warpper-container>div .nom{
    font-size: 19px;
    text-align: center;
}
.warpper-container>div .prix{
    font-size: 35px;
    font-weight: bolder;
    text-align: center;
}
.warpper-container>div .prix.red{color: red;}
.warpper-container>div>div{margin-top: 4px;}
.warpper-container>div>div>div{margin: 4px 0 0 20px;}
.warpper-container>div .spromo{
    font-size: 13px;
}
.warpper-container>div .promo{
    text-decoration: line-through;
    font-weight: bolder;
    font-size: 18px;
}
.warpper-container>div .btn{
    background-color: var(--header-bg-color);
    padding: 15px 50px;
    margin: 15px 50px;
    text-align: center;
    border-radius: 40px;
    text-transform: uppercase;
    font-weight: bolder;
    cursor: pointer;
    transition: background-color .3s;

    color: black;
    text-decoration: none;
}
.warpper-container>div .btn.shopped{
    border: 3px solid var(--red-color);
    color: var(--red-color);
    padding: 12px 47px;
}
.warpper-container>div .btn:hover{
    background-color: white;
    border: 3px solid black;
    color: black;
    padding: 12px 47px;
}