.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: block;
  background-color: #373635;
  color: #FFFFFF;
  transition: transform .3s ease-in-out;
  transform: translateY(-100%);

  &:not([hidden]) {
    transform: translateY(0);
  }

  .header-wrapper {
    position: relative;
    height: var(--header--h);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }
}