.banner {
  @include padding-leader;
  @include padding-trailer;

  * { vertical-align: middle; }

  .container { position: relative; }

  @include breakpoint($tablet-large) {
    .container { @extend %table-layout-tablet-large; }
  }
}

.site-brand {
  @include font-size-regular;
  margin: 0;
  line-height: 0;
  text-align: left;

  img {
    @include transition-property(height);
    height: rhythm(2);
  }

  @include breakpoint($tablet-large) {
    @include span(3);

    img { height: rhythm(4); }
  }
}

.banner-toggle {
  position: absolute;
  top:   0;
  right:  $gutter-width;

  button {
    @extend %clear-button;
    @include square($column-width);
    padding: 0;
  }

  .icon-bar {
    @include leader(.25);
    @include trailer(.25);
    display: block;
    margin: {
      right: auto;
       left: auto;
    }
    width: 2em;
    height: 0.125em;
    background-color: $color-primary;
  }

  @include breakpoint($tablet-large) { display: none; }
}