.region-sidenav-wrapper{
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  background-color: var(--gin-bg-layer);
  z-index: 1000;
  padding: var(--gin-spacing-l);
  transform: translateX(-100%);
  transition: 0.5s;
  box-sizing: border-box;
}

.region-sidenav{
  position: relative;
  width: 100%;
  height: 100%;
}
.page-wrapper.sidenav-show {
  overflow: hidden;
}
.sidenav-show .region-sidenav-wrapper{
  transform: translate(0);
}
.sidenav-close{
  width: 40px;
  height: 40px;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  z-index: 999;
}
.sidenav-close svg{
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}
.gin--dark-mode .sidenav-close svg{
  fill: var(--dark-mode-burger-color);
}
.gin--dark-mode .sidenav-close svg:hover{
  fill: var(--dark-mode-svg-hover);
}
.sidenav-close svg:hover{
  fill: var(--light-mode-svg-hover);
}

@media (min-width: 768px){
  .region-sidenav-wrapper{
    display: none;
  }
  .block-burger-block{
    display: none;
  }
}