.error { text-align: center; background-color: $accent-color-1; color: #fff; padding-top: .5rem; padding-bottom: .5rem; margin-bottom: .5rem; } .error-header { @include outer-container; .page-title { display: inline-block; h1 { font-family: $heading-font-face; font-size: 1.5rem; } } .secondary-btn { margin-top: 1rem; } } .warning { @extend .error; background-color: #f39c12; } @media only screen and (min-width: $desktop) { .error-header { .page-title { h1 { font-size: 1.5rem; } } .secondary-btn { float:right; } } }