.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-small}); // "flex-grow = 1" allows the input to grow to fill the space box-sizing: border-box; &:first-child { margin-top: 0; } &:first-child + .wc-block-components-text-input { 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%; &:first-child { margin-top: 0; } } } } .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; } } } } .wc-block-components-address-form__address_2-toggle { background: none; border: none; cursor: pointer; color: currentColor; font-size: inherit; margin-top: $gap; text-align: left; width: 100%; }