.hdr__burger {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
}

.hdr__burger:focus-visible {
  border-radius: var(--r-sm);
  outline: none;
  box-shadow: var(--ring-focus);
}

@media (max-width: 860px) {
  .hdr__nav {
    visibility: hidden;
    transition:
      opacity var(--t-fast),
      transform var(--t-fast) var(--ease-out),
      visibility 0s linear var(--t-fast);
  }

  .hdr.is-menu-open .hdr__nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition:
      opacity var(--t-fast),
      transform var(--t-fast) var(--ease-out),
      visibility 0s;
  }

  .hdr.is-menu-open .hdr__burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .hdr.is-menu-open .hdr__burger span:nth-child(2) {
    opacity: 0;
  }

  .hdr.is-menu-open .hdr__burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}