.header {
  position:absolute;
  inset:0 0 auto;
  z-index:5;
  height:211px;
  background:linear-gradient(#0000001a,transparent);
  pointer-events:none
}
.header__nav {
  display:grid;
  grid-template-columns:200px 200px 80px 200px 200px;
  justify-content:space-between;
  align-items:center;
  padding-top:40px;
  pointer-events:auto
}
.header__link {
  font-size:20px;
  font-weight:500;
  text-underline-offset:3px;
  transition:color .2s
}
.header__link:hover,.header__link.is-active {
  color:var(--red)
}
.header__logo {
  display:block;
  width:80px;
  height:80px;
  border-radius:50%;
  transition:transform .4s var(--ease)
}
.header__logo img {
  width:100%;
  height:100%
}
.header__logo:hover {
  transform:rotate(-8deg)
}
@media(max-width:1199px) and (min-width:768px) {
  .header__nav {
    grid-template-columns:1fr 1fr 64px 1.25fr 1fr;
    gap:20px
  }
  .header__link {
    font-size:15px
  }
  .header__logo {
    width:64px;
    height:64px
  }
}
@media(max-width:767px) {
  .header {
    height:auto;
    background:none
  }
  .header__nav {
    display:flex;
    justify-content:center;
    padding-top:66px
  }
  .header__link {
    display:none
  }
  .header__logo {
    width:56px;
    height:56px
  }
}