.burger-menu-wrapper {
  display: flex;
  justify-content: flex-end;
}
@media screen and (min-width: 1025px) {
  .burger-menu-wrapper {
    display: none;
  }
}

.burger-menu {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 11px;
  width: 42px;
  height: 38px;
  margin: 1rem;
}
.burger-menu .burger-menu__burger-wrapper {
  cursor: pointer;
  display: block;
  margin: auto;
  width: 19.998px;
  height: 15.999px;
}
.burger-menu .burger-menu__hamburger {
  background: #FFF;
  width: 19.998px;
  height: 3px;
  position: relative;
  transition: background 10ms 300ms ease;
  transform: translateY(6px);
}
.burger-menu .burger-menu__hamburger::before, .burger-menu .burger-menu__hamburger::after {
  transition: top 300ms 350ms ease, transform 300ms 50ms ease;
  position: absolute;
  background: #FFF;
  width: 19.998px;
  height: 3px;
  content: "";
}
.burger-menu .burger-menu__hamburger::before {
  top: -6px;
}
.burger-menu .burger-menu__hamburger::after {
  top: 6px;
}
.burger-menu .burger-menu__menu-trigger:checked ~ .burger-menu__burger-wrapper .burger-menu__hamburger {
  background: transparent;
}
.burger-menu .burger-menu__menu-trigger:checked ~ .burger-menu__burger-wrapper .burger-menu__hamburger::after, .burger-menu .burger-menu__menu-trigger:checked ~ .burger-menu__burger-wrapper .burger-menu__hamburger::before {
  transition: top 300ms 50ms ease, transform 300ms 350ms ease;
  top: 0;
}
.burger-menu .burger-menu__menu-trigger:checked ~ .burger-menu__burger-wrapper .burger-menu__hamburger::before {
  transform: rotate(45deg);
}
.burger-menu .burger-menu__menu-trigger:checked ~ .burger-menu__burger-wrapper .burger-menu__hamburger::after {
  transform: rotate(-45deg);
}