How to add space between product variant options

Site URL: https://reindeer-blenny-m5mk.squarespace.com/store/p/apple-macbook-pro-13-m1-soc-256gb-ssd-macos-space-grey-laptop

Hi all,

I'm trying to add some padding to these blocks in the image attached. But I'm having trouble finding the right code.

My code is below. It would be great if someone can help.

Password to test site is: password123

.product-variants {
  display: flex !important;
}

.variant-option-title {
    font-size: 16px;
    padding-top: 0px !important;
}

.variant-select-wrapper {
    font-size: 12px
}

.quantity-label {
    font-size: 16px
}

.ProductItem-details .product-quantity-input input {
    font-size: 12px
}

.product-details .variant-select-wrapper::after {
    position: absolute;
    top: 28px;
    right: 1rem;
    transform: rotate(
45deg);
    border-bottom: 1px solid;
    border-right: 1px solid;
    height: 0.5rem;
    width: 0.5rem;
    transform-origin: center top;
    pointer-events: none;
    font-size: 0.5rem !important;
}

.ProductItem-details .variant-select-wrapper select {
    border: 0.5px solid grey;
    border-radius: 3px;
  }

.ProductItem-details .variant-option select, .ProductItem-details .product-quantity-input input {
    appearance: auto
    border: 0.5px;
    border-radius: 6px;
    padding: 20px;
    float: left;
    margin-bottom: 64px;
}

It looks like you solved with this code?

.product-variants {
    display: flex !important;
    display: grid;
    grid-column-gap: 1vw;
    grid-row-gap: 1vw;
}

Perfect! Thank you! @Tuanphan