.hamburger {
   display: inline-block;
   width: 1.5em;
   height: 1.5em;
   padding-top: 0.5em;
   padding-bottom: 0.5em;
   vertical-align: middle;
   content: "";
   background: center center / 100% 100% no-repeat;
   position: relative;
}
 .hamburger__patty {
   display: block;
   width: 100%;
   height: 2px;
   background: black;
   position: absolute;
   transition: all 200ms;
}
 .hamburger__patty:nth-child(1) {
   top: 0.3em;
}
 .hamburger__patty:nth-child(2) {
   top: 50%;
   transform: translateY(-50%);
}
 .hamburger__patty:nth-child(3) {
   bottom: 0.3em;
}
 .hamburger--close .hamburger__patty:nth-child(1), .hamburger--close .hamburger__patty:nth-child(2) {
   top: 0;
   transform: translateY(0.65em) rotate(45deg);
}
 .hamburger--close .hamburger__patty:nth-child(3) {
   transform: translateY(-0.5em) rotate(-45deg);
}