.header {
  display: grid;
  grid-template-areas:
    "left-highlights left-wing center-nav right-wing right-highlights";
  grid-template-columns: 1fr 1fr auto 1fr 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  row-gap: var(--op-space-2x-small);

  .header__label {
    grid-area: center-nav;
    padding: var(--op-space-x-small) var(--op-space-small) var(--op-space-small) var(--op-space-small);
    border-radius: var(--op-radius-large);
    z-index: 1;
    background-color: var(--op-color-primary-base);
    box-shadow: var(--op-color-neutral-plus-four) 0px 1px 1px, var(--op-color-neutral-plus-four) 0px 0px 1px 1px;
    color: var(--op-color-neutral-plus-max);

    font-weight: var(--op-font-weight-semi-bold);
    font-size: var(--op-font-3x-large);
    text-decoration: none;

    /* --op-breakpoint-small */
    @media only screen and (max-width: 768px) {
      border-radius: var(--op-radius-small);
      grid-area: center-nav / center-nav;
    }
  }
  @media only screen and (max-width: 768px) {
    grid-template-areas:
      "left-wing center-nav center-nav right-wing"
      "left-highlights left-highlights right-highlights right-highlights";
    grid-template-columns: 1fr auto auto 1fr;
  }

  .header__year {
    margin-bottom: -3px;
  }

  .header__nav {
    display: flex;
    align-items: center;
    gap: var(--op-space-x-small);
    /* --op-breakpoint-small */
    @media only screen and (max-width: 768px) {
      gap: var(--op-space-3x-small);
    }

    &.header__nav--left {
      grid-area: left-wing;
      justify-self: end;
      @media only screen and (max-width: 768px) {
        justify-self: end;
      }
    }

    &.header__nav--right {
      grid-area: right-wing;
      justify-self: start;
    }
  }

  .header__wing {
    --_header-wing-radius: var(--op-radius-large);
    --_header-wing-height: calc(var(--op-size-unit) * 9);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--op-space-2x-small);

    height: var(--_header-wing-height);

    padding-inline: var(--op-space-x-small);
    box-shadow: var(--op-color-neutral-plus-four) 0px 1px 1px, var(--op-color-neutral-plus-four) 0px 0px 1px 1px;

    background-color: var(--op-color-neutral-plus-max);
    color: var(--op-color-neutral-plus-max);

    &.header__wing--left {
      border-top-left-radius: var(--_header-wing-radius);
      border-bottom-left-radius: var(--_header-wing-radius);
    }

    &.header__wing--right {
      border-top-right-radius: var(--_header-wing-radius);
      border-bottom-right-radius: var(--_header-wing-radius);
    }

    /* --op-breakpoint-small */
    @media only screen and (max-width: 768px) {
      padding-inline: var(--op-space-2x-small);
      --_header-wing-height: calc(var(--op-size-unit) * 11);
    }
  }

  .year-highlight__photo {
    height: 100%;
  }
}

.header__logo {
  max-width: 180px;
}

.header__logo-square {
  max-width: 60px;
  border-radius: var(--op-radius-large);
}

.header--main {
  .header__logo {
    /* --op-breakpoint-small */
    @media only screen and (max-width: 768px) {
      display: none;
    }
  }
}

.year-highlights {
  display: flex;
  gap: var(--op-space-x-small);
  justify-content: center;
  align-items: center;

  @media only screen and (max-width: 768px) {
    display: flex;
    gap: var(--op-space-2x-small);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }
}

.year-highlights-left {
  grid-area: left-highlights;
  justify-self: end;
  @media only screen and (max-width: 768px) {
    padding-right: var(--op-space-3x-small);
    display: flex;
    justify-content: flex-end;
  }
}

.year-highlights-right {
  grid-area: right-highlights;
  justify-self: start;
  @media only screen and (max-width: 768px) {
    padding-left: var(--op-space-3x-small);
    display: flex;
    justify-content: flex-start;
  }
}