/* Highlight sections */

.highlight {
  margin-top: -$spacing-04;
  padding-top: $spacing-04;
  background-color: $fair-pink;

  header {
    padding-bottom: $spacing-04;
  }
}

.highlight--aside {
  margin: $spacing-05 0 0 0;
  padding: $spacing-03;
  color: $warm-black;

  h2, h3, h4 {
    margin: 0 0 $spacing-03 0;
    font-size: 1em;
    @include font-sans;
  }

  hr {
    margin: $spacing-02 0;
  }

  ul, ol {
    margin: 0;
  }

  input[type="checkbox"]+label, input[type="radio"]+label {
    font-size: 1em;
  }

  select {
    padding: $spacing-02 30px $spacing-02 $spacing-02;
  }

  input, select, textarea {
    margin-bottom: $spacing-03;
    max-width: 100%;
    font-size: 1em;

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

/* Highlight sections */

.highlight {
  background-color: $fair-pink;

  header {
    margin-top: -$spacing-04;
    padding-top: $spacing-04;
    padding-bottom: $spacing-04;
  }
}

.highlight--aside {
  margin: $spacing-05 0 0 0;
  padding: $spacing-03;
  color: $warm-black;

  h2, h3, h4 {
    margin: 0 0 $spacing-03 0;
    font-size: 1em;
    @include font-sans;
  }

  hr {
    margin: $spacing-02 0;
  }

  ul, ol {
    margin: 0;
  }

  input[type="checkbox"]+label, input[type="radio"]+label {
    font-size: 1em;
  }

  select {
    padding: $spacing-02 30px $spacing-02 $spacing-02;
  }

  input, select, textarea {
    margin-bottom: $spacing-03;
    max-width: 100%;
    font-size: 1em;

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

Make sure neg. margin is only applied to header 'highlighted' blocks
Make sure neg. margin is only applied to header 'highlighted' blocks

See DOAJ/doajPM#2483
