@mixin cwui-site-subheader {
  .site-subheader {
    @include grid-row();
    border-bottom: 2px solid $white;
  
    @include breakpoint(xlarge) {
      border: 0;
      margin-bottom: rem-calc(10);
    }
  }
  
  .site-subheader__inner {
    @include grid-column(12);
    background: #4b473d;
    padding-bottom: rem-calc(7);
    padding-top: rem-calc(7);
  
    @include breakpoint(xlarge) {
      background: rgba(0, 0, 0, .5);
    }
  }
  
  .site-subheader__name {
    color: $white;
    display: inline-block;
    font-size: rem-calc(24);
    font-weight: 600;
    letter-spacing: .0625rem;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    position: relative;
    text-transform: uppercase;
  
    a,
    a:focus,
    a:hover {
      color: $white;
      text-decoration: none;
    }
  
    @include breakpoint(large) {
      margin: 0 0 0 rem-calc(146);
    }
  
    @include breakpoint(xlarge) {
      font-size: rem-calc(30);
      margin-left: rem-calc(161);
    }
  
    &::before {
      @include breakpoint(large) {
        background: #fff;
        content: '';
        display: block;
        height: calc(100% - 8px);
        left: rem-calc(-15);
        position: absolute;
        top: 5px;
        width: 1px;
      }
  
      @include breakpoint(xlarge) {
        height: calc(100% - 13px);
        top: 8px;
      }
    }
  }
}