.LP-Form{ display: flex; flex-direction: column; align-items: center; .LP-Form__Fieldset{ border: none; max-width: 1200px; min-width: $-viewport-medium; .LP-Form__Legend{ margin: 0; padding: 0; font-family: $-primary-sans-serif-font; font-size: 21px; } .LP-Form__Composition{ display: flex; flex-direction: row; justify-content: space-between; .LP-Form__Field{ flex: 3 2 100px; padding: 6px 15px; &--wider{ flex: 5 2; } &--wide{ flex: 4 2; } &--narrow{ flex: 2 1; } &--narrower{ flex: 1 2; } } &--buttons{ justify-content: flex-end; } .LP-Form__Button{ flex-grow: 0; padding-left: 0; min-width: 130px; .LP-Link{ display:contents; } } .LP-Form__InfoText{ .LP-Paragraph{ font-family: $-primary-sans-serif-font; color: $-grey; } } } } } @media(max-width: $-viewport-medium){ .LP-Form{ .LP-Form__Fieldset{ min-width: unset; } } } @media(max-width: $-viewport-small){ .LP-Form{ .LP-Form__Fieldset{ .LP-Form__Composition--breakable{ display: flex; flex-direction: column; justify-content: space-between; } } } } @media(max-width: $-viewport-extra-small){ .LP-Form{ .LP-Form__Fieldset{ .LP-Form__Composition{ display: flex; flex-direction: column; justify-content: space-between; .LP-Form__Field{ &:not(.LP-Form__Button){ flex: 3 1 100px; padding: 12px 15px; } } .LP-Form__Button{ padding: 0 15px; } &--buttons{ justify-content: flex-end; } } } } }