
  header {
    @include xy-grid();
    @include xy-gutters(0);
    main {
      @include breakpoint(small){
        @include xy-cell(12);
        @include flex-align(center, middle);
        padding: $global-padding $global-padding;
        min-width: 14rem;
        text-align: center;
      }
      @include breakpoint(large){
        @include xy-cell(shrink);
        @include flex-align(left, middle);
        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;
        }
        .menu {
          justify-content: center;
          a {
            padding: $global-padding*0.7 $global-padding*0.5;
          }
          &.dropdown {
            justify-content:center;
            li,.button {
              min-width: unset;
              margin:0;
              padding:0;
              font-size: $global-font-size*0.9;//$header-menu-font-size;
            }
            .button {
              margin-left: $global-margin;
              background-color:$input-background;
            }
            .is-dropdown-submenu {
              font-size: $dropdown-font-size * 0.95;
              min-width: 10rem;
              box-shadow: 0 3px 5px 3px rgba(200, 200, 200, 0.1);
            }
          }
        }
      }
      @include breakpoint(large) {
        @include xy-cell(auto);
        @include flex;
        @include flex-align(right, middle);
        padding-bottom: 0;//$global-padding;
        menu {
          margin: inherit;
          padding: inherit;
          .menu {
            &.dropdown {
              justify-content: end;
              li,.button {
                font-size: $global-font-size*1.4;//$header-menu-font-size;
              }
            }
          }
        }
      }
    }
  }
