.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;
    }
  }
}
