@import '../vars.scss'; .main { &.center { align-items: center; display: flex; flex-direction: column; justify-content: center; // These direct-child styles make it a little simpler to implement an error page > p, > .button-set, > .notice { margin-bottom: $space-m; } } > header, > form > header { align-items: center; display: flex; flex-direction: row; margin-bottom: $space-m; &:not(:first-child) { margin-top: $space-m; } h1, h2 { flex-grow: 1; font-weight: bold; } h1 { font-size: $font-size-l; } } > section { margin-bottom: $space-m; } }