.block-highlight {
  padding: 24px;
  border-top: 6px double;
  border-bottom: 2px solid;
  margin-bottom: 1rem;
}

.hero {
  @extend .block-highlight;
  background-color: lighten($color-hero, 55);
  color: $color-hero;
  border-color: $color-hero;
}

.theme--dark {
  .hero {
    background-color: darken($color-hero, 20);
    color: #ddd;
  }
}

.dragon {
  @extend .block-highlight;
  background-color: $color-dragon;
  color: #fff;
  border-color: darken($color-dragon, 10);
  a {
    color: #fff;
  }
}

.theme--dark {
  .dragon {
    background-color: darken($color-dragon, 20);
    color: #ddd;
  }
}

blockquote {
  background-color: #eee;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  margin-bottom: 16px;
  border-left: 3px solid #ccc;
  font-style: italic;

  p {
    &:last-child {
      margin-bottom: 0;
    }
  }
}