.wc-block-checkout__form { margin: 0; max-width: 100%; } .is-mobile, .is-small, .is-medium { .wc-block-checkout__main { order: 1; } } .is-small, .is-medium, .is-large { .wc-block-checkout__shipping-fields, .wc-block-checkout__billing-fields { .wc-block-components-address-form { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 calc(#{$gap-smaller} * 2); // Required for spacing especially when using flex-grow .wc-block-components-text-input, .wc-block-components-state-input, .wc-block-components-select-input { flex: 1 0 calc(50% - #{$gap-smaller}); // "flex-grow = 1" allows the input to grow to fill the space box-sizing: border-box; &:nth-of-type(2), &:first-of-type { margin-top: 0; } } .wc-block-components-address-form__company, .wc-block-components-address-form__address_1, .wc-block-components-address-form__address_2, .wc-block-components-country-input, .wc-block-components-checkbox { flex: 0 0 100%; } } } .wc-block-components-address-form { .wc-block-components-checkbox { margin-top: $gap; } .wc-block-components-text-input.wc-block-components-address-form__email { &:only-child { margin-top: 0; } } } }