.hero {
  margin-top: -1px;
  background: @fl-body-hero-bg;
  text-align: center;
  padding: 20px 0;

  &, & a {
    color: @fl-body-hero-color;
  }
  & .close {
    float: right;
    margin-top: -10px;
    color: @fl-body-hero-muted-color;
  }
  & h2 {
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.5em;
  }
  & .subtitle {
    margin: 8px 0 0;
    line-height: 1.5em;
    color: @fl-body-hero-muted-color;
  }
}
@media @phone {
  .hero {
    & .close {
      margin-right: -10px;
    }
  }
}
@media @tablet, @desktop, @desktop-hd {
  .hero {
    padding: 40px 0 30px;
    font-size: 15px;

    & h2 {
      font-size: 22px;
    }
  }
}