.header-desktop {
  display: none;
}

.header-mobile {
  display: grid;
  grid-auto-rows: min-content;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  margin: 0;
  z-index: 1000;
  /* padding: 0.75rem 1rem; */
  background: rgb(255,255,255);
}
.header-mobile.open { bottom:0 }

.header-mobile__title,
.header-mobile__info,
.header-mobile__page,
.header-mobile__menu-button {
  display: flex;
}

.header-mobile__title,
.header-mobile__page {
  margin-top: 2px;
}

.header-mobile__title {grid-column: 1/3;}
.header-mobile__info {
  grid-column: 3/7;
  justify-content: space-between;
}
.header-mobile__page {
  overflow: hidden;
  width: auto;
}
.header-mobile__menu-button {
  margin-left: 1rem;
}

.header-mobile__menu-button img {
  width: 24px;
  margin-left: auto;
}
#menu-close {
  width: 20px;
}
#menu-button.open-menu-button{
  margin-left: auto;
}

@keyframes runningText {
  0% {
    transform: translate(0);
  }
  5% {
    transform: translate(0);
  }
  80% {
    transform: translate(-100%);
  }
  100% {
    transform: translate(-100%);
  }
}

.header-mobile__page h2 {
  white-space: nowrap;
  min-width: fit-content;
  max-width: fit-content;
  padding-right: 1rem;
}

.running-text {
  animation: runningText 5s cubic-bezier(0.2, 0, 0.8, 1) 2s infinite backwards;
}

.header-mobile__menu {
  margin-top: 4rem;
  grid-column: 1/-1;
  display: none;
}
.header-mobile__menu.open {
  display: grid;
}
.header-mobile__menu--pages{grid-column: 1/5;}
.header-mobile__menu--links{grid-column: 5/7;}
.header-mobile__menu li {margin-bottom: 0.25rem;}

.header-mobile__menu--contacts{
  grid-column: 1/-1;
  position: fixed;
  bottom: 2rem;
}
.header-mobile__menu--contacts > p {margin-top: 1rem;}

.hide {
  display: none;
}
/* 
  Desktop  
*/
@media only screen and (min-width: 800px) {
  .header-mobile {
    display: none;
  }

  .header-desktop {
    display: grid;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    margin: 0;
    z-index: 1000;
    padding: 0.75rem;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 56%, rgba(255,255,255,1) 100%);
  }

  .header-desktop__title{
    grid-column: 1 / 4;
  }


  .header-desktop__nav {
    grid-column: 4 / 10;
  }

  .header-desktop__nav ul {
    display: flex;
  }

  .header-desktop__nav ul li {
    margin-right: 1rem;
  }

  .header-desktop__actions {
    grid-column: 10/13;
  }
}