// ===========================================================================
// BANNER



.banner {
  background: $background-alt-color;
  
  h1 {
    padding: .5em 0;
    text-align: center;
  }

  @include at-breakpoint($break-iPad) {
    h1 img {
       width: 3.33333333333333em;
      height: 2.5em;
    }
  }
  
  .skip-navigation { display: none; }

  @include at-breakpoint($break-iPhone) {
    .skip-navigation {
      display: block;
      margin-top: 1.125em;
      @include span-columns(1 omega, $break-iPhone); 
    }
    
    h1 {
      @include span-columns(3, $break-iPhone); 
      text-align: left;
    }
  }

  @include at-breakpoint($break-iPhone-wide) {
    .skip-navigation {
      @include span-columns(1 omega, $break-iPhone-wide);
      margin-top: 1.5em;
    }
    
    h1 { @include span-columns(6, $break-iPhone-wide); }
  }

  @include at-breakpoint($break-iPad) {
    .skip-navigation { display: none; }
    
    h1 { @include span-columns(6, $break-iPhone-wide); }
  }
}