header {
  position: sticky;
  box-sizing: border-box;
  z-index: 1;
  top: 0;
  margin: 0;
  padding: calc(var(--grid) / 2);
  background-color: var(--header-color);

  nav {
    width: var(--width);
    max-width: var(--max-width);
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: auto;
    margin-inline-end: auto;

    ul {
      width: 100%;
      display: flex;
      margin: 0;

      li {
        width: fit-content;
        padding: 0;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: var(--grid);
        margin-inline-end: 0;

        &::before {
          content: none;
        }

        &:first-child {
          flex-grow: 1;
          margin-inline-start: 0;
        }

        a,
        button {
          width: fit-content;
          display: block;
          padding: 0;
          margin: 0;
          border: none;

          .logo {
            border: 1px solid #fff;
            box-sizing: border-box;
          }
        }
      }
    }
  }
}