/* Banner */

  #banner {
    @include padding(8em, 0);
    background: #f6f6f6;
    text-align: center;

    h2 {
      font-size: 4em;
      line-height: 1em;
      margin: 0 0 0.5em 0;
      padding: 0;
    }

    p {
      font-size: 1.5em;
      margin-bottom: 1.75em;
    }

    @include breakpoint(xlarge) {
      @include padding(7em, 0);
    }

    @include breakpoint(large) {
      @include padding(5em, 0);

      h2 {
        font-size: 3.5em;
      }
    }

    @include breakpoint(medium) {
      @include padding(6em, 2em);
    }

    @include breakpoint(small) {
      @include padding(4em, 2em);

      h2 {
        font-size: 2.25em;
      }

      p {
        font-size: 1.25em;
      }
    }

    @include breakpoint(xsmall) {
      @include padding(4em, 2em);
    }
  }