.subscribe-buttons { align-items: stretch; display: flex; flex-flow: row wrap; justify-content: left; .btn-discourse-subscriptions-subscribe { flex-direction: column; flex-grow: 1; margin: 0.25em; padding: 1em; width: 6em; } } .btn-payment { width: 100%; } .anon #card-element { display: none; } .StripeElement { box-sizing: border-box; padding: 10px; height: 40px; margin-bottom: 9px; border: 1px solid var(--primary-medium); background-color: var(--secondary); font-size: $base-font-size; font-family: $base-font-family; } .StripeElement--focus { border-color: var(--tertiary); outline: 1px solid var(--tertiary); } .StripeElement--invalid { border-color: var(--danger); } .StripeElement--webkit-autofill { color: var(--quaternary); } .subscribe-promo-code, .subscribe-name, .subscribe-address-line1, .subscribe-address-city, .subscribe-address-state, .subscribe-address-country-select, .subscribe-address-state-select, .subscribe-address-postal-code { width: 100%; } .subscribe-address-country-select, .subscribe-address-state-select { margin-bottom: 9px; } @media all and (min-width: 1350px) { .address-fields { display: flex; justify-content: space-between; & > input, & > .select-kit { width: calc(50% - 4.5px); } } }