*{
    background-color: aliceblue;
    transition: all .2s cubic-bezier(.34, 1.12, .68, 1.31);
}


.product .controls{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    list-style: none;
    margin-top: 60px;
}

.product .controls .buttons{
    color: var(--black);
    font-size: 20px;
    width: 140px;
    height: 40px;
    background: rgba(255,255,255,.3);
    text-align: center;
    line-height: 40px;
    margin: 20px;
    box-shadow: 0 3px 5px rgba(0,0,0,.3);
    border-radius: .5rem;
    cursor: pointer;
}

.product .controls .buttons.active{
    color: #fff;
    background: var(--bleu);
}

.product .image-container{
    /*padding: 20px 8%;
    column-count: 5;
    gap: 18px;*/
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
    gap: 1.8rem;
    margin: 3rem;
}

.product .image-container .imagebox{
    background: #fff;
    padding: 15px;
    margin-bottom: 18px;
    box-shadow: 0 3px 5px rgba(0,0,0,.3);
    border-radius: .5rem;
    break-inside: avoid;  
}

.product .image-container .imagebox .image{
    overflow: hidden;
    position: relative;  
}

.product .image-container .imagebox .image img{
    width: 100%;
    border-radius: .5rem;
    object-fit: cover;   
}

.product .image-container .imagebox .image .icons{
    text-align: center;
    position: absolute;
    bottom: -7rem; left: 0; right: 0;
}
.product .image-container .imagebox .image.image:hover .icons{
    bottom: 0;
}

.product .image-container .imagebox .image .icons a{
    width: 5rem;
    height: 5rem;
    line-height: 5rem;
    font-size: 2rem;
    background: var(--black);
    color: #eee;
    margin-left: .5rem;
    border-radius: .5rem;
    text-align: center;
}

.product .image-container .imagebox .image .icons a:hover{
    color: var(--bleu);
}

.product .image-container .imagebox .image .content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
}

.product .image-container .content h3{
    font-size: 1.7rem;
    color: var(--black);
}

.product .image-container .content .price{
    font-size: 2rem;
    color: var(--black);
}

.product .image-container .content .price span{
    font-size: 1.5rem;
    color: var(--black);
    padding-left: 1rem;
    text-decoration: line-through;
}

@media (max-width: 991px){
    .product .image-container{
        column-count: 2;
    }
}

@media (max-width: 650px){
    .product .image-container{
        column-count: 1;
        padding: 20px;
    }
}