%banner,
.banner {

  @include core-19;
  background: $turquoise;
  color: $white;
  display: block;
  padding: $gutter-half;
  margin: 0 0 $gutter 0;
  text-align: center;
  position: relative;

}

.banner-with-tick {

  @extend %banner;
  padding: $gutter-half $gutter;

  &:before {
    @include core-24;
    content: '✔';
    position: absolute;
    top: $gutter-half;
    left: $gutter-half;
    margin-top: -2px;
  }

}

.banner-dangerous {

  @extend .banner;
  background: $white;
  color: $error-colour;
  border: 5px solid $error-colour;
  margin: 15px 0;
  @include bold-19;
  text-align: left;

  .button {
    @include button($error-colour);
    margin-top: 10px;
  }

}