#burger, #burger-double {
  display: none;
}

.burger {
  display: none;
}

@media (max-width: 560px) {
  .burger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
  }
  
  .menu-burger,
  .menu-burger::after,
  .menu-burger::before {
    position: absolute;
    width: 16px;
    height: 0;
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 1px;
    box-sizing: content-box;
  }
  
  .menu-burger_black,
  .menu-burger_black::after,
  .menu-burger_black::before {
    border-color: #000000;
  }
  
  .menu-burger::before {
    content: "";
    transform: translateY(5px);
    transition: 0.2s;
    left: -1px;
  }
  
  .menu-burger::after {
    content: "";
    transform: translateY(-7px);
    transition: 0.2s;
    left: -1px;
  }
  
  #burger:checked ~ .burger > .menu-burger,
  #burger-double:checked ~ .burger > .menu-burger {
    visibility: hidden;
  }
  
  #burger:checked ~ .burger > .menu-burger::after,
  #burger-double:checked ~ .burger > .menu-burger::after {
    transform: rotate(-45deg);
    visibility: visible;
  }
  
  #burger:checked ~ .burger > .menu-burger::before,
  #burger-double:checked ~ .burger > .menu-burger::before {
    transform: rotate(45deg);
    visibility: visible;
  }
  
  #burger:checked ~ .navigation,
  #burger-double:checked ~ .navigation {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 74px;
    z-index: -1;
    transition: 1s;
  }
  
  #burger:checked ~ .navigation > .navigation__list,
  #burger-double:checked ~ .navigation > .navigation__list {
    flex-direction: column;
    width: 100%;
    height: 100vh;
    padding-top: 180px;
  }
  
  #burger:checked ~ .navigation > .navigation__list {
    background: linear-gradient(180deg, #070707 0%, rgba(7, 7, 7, 0.9) 74%, rgba(7, 7, 7, 0.7) 87%, rgba(7, 7, 7, 0.6) 100%);
  }
  
  #burger-double:checked ~ .navigation > .navigation__list {
    background: rgba(255, 255, 255, 1);
  }
  
  #burger:checked ~ .navigation > .navigation__list > .navigation__li,
  #burger-double:checked ~ .navigation > .navigation__list > .navigation__li {
    padding-block: 10px;
  }
}