.group-buttons{
    flex-wrap: wrap;
}
.product-miniature .pi-custom-area {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.product-miniature .pi-custom-area-colors-wrapper {
    transition: all 0.25s linear;
    visibility: hidden;
    width: 180px;
    padding-top: 15px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(30px);
    opacity: 0.5;
}
.product-miniature:hover .pi-custom-area-colors-wrapper{
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
.product-miniature .pi-custom-area-colors-wrapper a {
    border: 1px solid #d5d5d5;
    border-radius: 3px;
}
.product-miniature .pi-custom-area-colors-wrapper a:last-of-type{
    margin-right: 0 !important;
}
.product-miniature .pi-custom-area-colors-wrapper a:hover {
    border: 3px solid #ccc;
}
@media(max-width: 768px){
    .product-miniature .pi-custom-area-colors-wrapper {
        width: 120px;
        display: flex;
        flex-wrap: wrap;
    }
}