header {
    @include xy-grid();
    @include xy-gutters(0);
    main {
      @include breakpoint(small){
        @include xy-cell(12);
        @include flex-align(center, middle);
        text-align: center;
      }
      @include breakpoint (medium) {
        padding: $global-padding*2 $global-padding;
      }
      @include breakpoint(large){
        @include xy-cell(shrink);
        @include flex-align(left, middle);
        // min-width: 14rem;
        text-align: unset;
      }
    }
    nav {
      @include breakpoint(small) {
        @include xy-cell(12);
        @include flex;
        @include flex-align(center, middle);
        a, button {
          color: $black;
          &:hover {
            color: $anchor-color;
          }
        }
        menu {
          margin: 0;
          padding: 0;
          font-size: 0.8rem;
        }
        .menu {
          justify-content: center;
          a {
            padding: $global-padding*0.7 $global-padding*0.5;
          }
        }
      }
      @include breakpoint(medium) {
        menu {
          font-size: $global-font-size*1.5;
        }
      }
      @include breakpoint(large) {
        @include xy-cell(auto);
        @include flex;
        @include flex-align(right, middle);
        menu {
          margin: inherit;
          padding: inherit;
        }
      }
    }
  }