Variants display problem on product page

[ash-f]

This style results the variants attached each other without any spaces. Which not looking good and hard to read. also it doesn't wraps when they are many.

.page-product .product__variants .variant ul {
    align-items: center;
    display: flex;
}

So it should be something like this.

.page-product .product__variants .variant ul {
    align-items: center;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}