/*
 * The top-level heading
 */

.main-heading {
  @include heading-style;

  & > h1 {
    @include font-size(6);
    font-weight: 300;
    font-family: $body-font;
    margin: 0;
    padding: 0;
  }

  & > h1 > em {
    font-style: normal;
    color: lighten($gray-text, 20%);
  }
}

/*
 * With ads
 */

.main-heading.-with-ads {
  & {
    display: flex;
    align-items: flex-end; // bottom alighn
  }

  & > h1 {
    flex: 1 0 auto;
  }

  // Advertisement
  & > .ad {
    flex: 0 1 auto;
  }
}