Center attribute swatches on mobile

Hi! Great plugin, thank you!

Could you help me with centering the attribute swatches?
I would like to center the row of options (image swatches or button swatches) to the center of the screen on mobile. E.g. the product has an attribute with 8 options. I would like to see 4 swatches centered (or more depending on how many can fit on 1 row) and the next 4 swatches centered below it.

I have no problems centering the attribute labels by using following CSS:

.woocommerce div.product.elementor form.cart table.variations tr,
.woocommerce div.product.elementor form.cart table.variations td {
display: flex;
flex-direction:column;
align-items: center;
}

But i can’t seem to achieve the same result for the swatches themselves.

Thank you!

The page I need help with: [log in to see the link]