.header {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(var(--grid-padding), 1fr) repeat(
      var(--grid-columns),
      minmax(0, calc(var(--max-content-width) / var(--grid-columns)))
    )
    minmax(var(--grid-padding), 1fr);
}

.header > * {
  grid-column: 2/-2;
}

.header {
  width: 100%;
  background-color: var(--clr-secondary-dark);
  z-index: 11;
}

.header--fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
}

.header--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  background-color: var(--clr-secondary-dark);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  will-change: transform;
}

.header--fixed.is-hidden {
  transform: translateY(-100%);
}

.header--fixed.is-visible {
  transform: translateY(0);
}

body {
  padding-top: calc(var(--header-height) + 1.25rem);
}