.header {
  --header-gap: 0.5ch;
  --header-btn-size: 2rem;
  --header-actions-width: calc((var(--header-btn-size) + var(--header-gap)) * var(--header-button-count));
  --header-button-count: 0;

  display: grid;
  /*grid-template-columns: var(--header-actions-width) 1fr var(--header-actions-width);*/
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
      "menu menu menu"
      "actions-start title actions-end";

  .header__actions--start {
    grid-area: actions-start;
  }

  .header__actions--end {
    grid-area: actions-end;
  }

  .header__title {
    grid-area: title;
  }
}